Overriding Widgets

Last Updated on

Widgets are an important part of the Jupiter theme. Each widget has specific functionalities, some of them are configurable from the widget settings field but if you need more customization, one way is to override a widget in the child theme. In this article, we’ll explain about overriding widgets in the child theme.

x
Note: It’s assumed that you are familiar with some web skills (HTML, CSS, PHP, …) and usage of the child theme.

In this article


Widgets Directory Introduction

In the Jupiter theme there is a Widgets directory which is located in wp-content > themes > jupiter > views > widgets in your wen host.

Overriding widgets - directory
x
Note: You can access the Jupiter theme in your web host via Host control panel or FTP clients.

The widgets directory contains all widgets files, each responsible for a specific widget. The names are intuitive and you will be able to identify which file is for which widget simply by checking the name of the file.


Overriding Widgets Directory

In WordPress world, override term means copy a file from parent theme and pasting it to a child theme with same directory hierarchy, then editing the copied file. WordPress loads the edited file automatically.

To override a widget, Contact info, for example:

1
Create views and widgets directories in your child theme with same directory hierarchy as parent theme.
  • Parent theme: wp-content > themes > jupiter > views > widgets
  • Child theme: wp-content > themes > jupiter-child > views > widgets
2
From parent theme copy widgets-contact-info.php file to the child theme’s widgets directory.
3
Now you can edit the widgets-contact-info.php and WordPress loads the file automatically.

Changing Icons in Contact Info Widget

To clarify the overriding process, in this example, we override Contact Info widget to change the Person icon.

1
As explained in previous section, we need to copy the relevant widget file to a child theme. In this example, we copy the widgets-contact-info.php file to the child theme’s widgets directory as shown in step 2 above.
2
Open the file in your favorite code editor. Locate the below line of codes around the 30th line.

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-moon-user-7', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

3
We need to change the mk-moon-user-7 to another icon class name to change the icon. To find all icon class names, from WordPress left menu, go to Jupiter > Icon Library. In this example, we choose mk-li-user.
4
Change the icon class name in above codes. Your code should look like below.

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-li-user', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

4
Save the changes. If you are editing the file locally, make sure to upload it to your server.
x
Note: You can repeat the same process to change other icons of the contact info widget.
5
Clear your theme cache and check your site to see the applied changes.

Making Texts Clickable in Contact Info Widget

To clarify the overriding process more, in this example, we override Contact Info widget to change the make the Phone number clickable.

1
As explained in previous section, we need to copy the relevant widget file to a child theme. In this example, we copy the widgets-contact-info.php file to the child theme’s widgets directory as shown in step 2 above.
2
Open the file in your favorite code editor. Locate the below line of codes around the 33rd line.

<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><?php echo $phone;?></span></li><?php endif;?>

3
To make the phone number clickable, we need to wrap the $phone with HTML anchor tag and use tel: in anchor href. Replace the above codes with following codes.

<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><a href="tel:<?php echo $phone;?>"><?php echo $phone;?></a></span></li><?php endif;?>

4
Save the changes. If you are editing the file locally, make sure to upload it to your server.
5
Clear your theme cache and check your site to see the applied changes.

 

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket