Overriding Shortcodes

Last Updated on

Shortcodes make the main content on your Jupiter website. Every shortcode has its own functionality and styling, most of it is configurable in the shortcode settings. However, if you need more customization, one way is to override a shortcode in the child theme.

In this article, we’ll explain about overriding shortcodes in the child theme.

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

In this article

Shortcodes Directory

In the Jupiter theme there is a Shortcodes directory which is located in wp-content > themes > jupiter > components > shortcodes in your web host.

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

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

Overriding Shortcodes Directory

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

Below, as an example we will override contact form shortcode to change the icons displayed on the front-end of your contact form:

Create components > shortcodes  > mk_contact_form > components directory in your child theme with the same directory hierarchy as the parent theme.
  • Parent theme: wp-content > themes > jupiter > components > shortcodes > mk_contact_form > components
  • Child theme: wp-content > themes > jupiter-child > components > shortcodes > mk_contact_form > components
From the parent theme copy the email-field.php file to the child theme’s directory created above.
Open the file in your favorite code editor. Locate the below line of the code around the 12. line.

overriding shortcodes

Change the “mk-li-mail” 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’ll choose mk-li-pencil.

overriding shortcodes

Change the icon class name in the above codes. Your code should look like below.

overriding shortcodes

Save the changes. If you are editing the file locally, make sure to upload it to your server.
Note: You can repeat the same process to change other icons of the contact form shortcode.
Clear the 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