1. Home
  2. Overriding Widgets

Overriding Widgets

Updated on November 24, 2020

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.

Widgets Directory Introduction

In the Jupiter Core plugin there is a Widgets directory which is located in wp-content > plugins > jupiter-core > includes > widgets in your web host.

In Jupiter versions before 6.3, the directory was located in in wp-content > themes > jupiter > views > widgets.

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 the WordPress world, override term means to copy a file from the parent theme or plugin 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:

1Create views and widgets directories in your child theme with this hierachy: jupiter-child/views/widgets/
  • Jupiter Core: wp-content > plugins > jupiter-core > includes > widgets
  • Child theme: wp-content > themes > jupiter-child > views > widgets
2From the jupiter core plugin folder -> includes -> widgets, copy widgets-contact-info.php file to the child theme’s widgets directory.
3Now 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.

1As 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.
2Open 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;?>

3We 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 > Control Panel > Icon Library. In this example, we choose mk-li-user.
4Change 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;?>

4Save the changes. If you are editing the file locally, make sure to upload it to your server.
5Clear 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.

1As 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.
2Open 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;?>

3To 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;?>

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