Would you like your WordPress theme to make use of shortcodes?
Shortcodes are typically used inside content areas, such as sidebar widgets, pages, and posts. But occasionally, you might wish to include a shortcode within your WordPress theme.
This post will walk you through the process of quickly adding any shortcode to your WordPress theme.
Why Should Your WordPress Themes Include Shortcodes?
With the help of shortcodes, you can add a plethora of features to your website, such as social media feeds, image galleries, and forms.
While there are a few built-in shortcodes in WordPress, you can also add shortcodes to your website by using one of the many well-known WordPress plugins.
As an illustration, WPForms contains user-friendly blocks, but it also offers shortcodes so you can incorporate forms into other parts of your website.
Shortcodes are typically added inside content areas like posts and pages.
On the other hand, you might occasionally wish to use a shortcode inside of your WordPress theme files.
This enables you to add dynamic elements to pages, like your 404 page, that are not editable with the default WordPress post editor. Additionally, it’s a simple method of using the same shortcode on several pages.
For instance, you could include a shortcode in the Page or Post templates of your theme.
In light of this, let’s examine how to incorporate shortcodes into your WordPress theme. Just click the quick links below to go directly to the approach you wish to take.
First Method: Use the Full-Site Editor (Just for Block Themes)
Method 2: Editing Themes in WordPress (Applies To Any WordPress Theme)
Method 3: Fully Customizable WordPress Theme Creation
First Method: Use the Full-Site Editor (Just for Block Themes)
Using the full site editor is the simplest way to use shortcodes in your WordPress theme. As a result, you can include a Shortcode block in any area of your webpage.
Nevertheless, this technique is limited to block-based themes, such as Hestia Pro. You’ll need to employ an alternative technique if your theme doesn’t support blocks.
Navigate to Themes » Editor in the WordPress dashboard to begin.
The home template for your theme is displayed by default in the full site editor; however, you can add shortcodes to any template or template section, including the header and footer.
Simply choose “Templates” or “Template Parts” to view all of the options.
Now you can click on the template or the desired edited portion of the template.
We will add a shortcode to the 404 page template as an example, but the procedures will be the same regardless of the template you choose.
Now WordPress will display a preview of the template or a portion of the template.
Simply click the little pencil icon to add a shortcode.
After completing that, click the blue “+” symbol in the upper left corner.
“Shortcode” is what you need to type into the search bar.
Drag and drop the appropriate block onto the theme template when it appears.
The shortcode you wish to use can now be typed or pasted.
Proceed and click the “Save” button after that.
Method 2: Editing Themes in WordPress (Applies To Any WordPress Theme)
Through theme file editing, you can also incorporate shortcodes into your WordPress theme. Although this approach is more complex, it is compatible with all WordPress themes.
If you are new to adding code to your website, see our detailed instructions on how to copy and paste code in WordPress.
Although you can directly edit the individual theme files, updating your WordPress theme without losing customization is challenging. We advise overriding the theme files by developing a child theme as a result.
You can add to or change the code in your current theme files if you are making a custom theme.
You cannot add the shortcode in the same format as regular content areas when editing your theme files. On the screen, you will see the shortcode itself rather than the output of the shortcode.
This occurs as a result of WordPress not executing shortcodes contained in theme template files. Rather, you will need to use the do_shortcode function to specifically instruct WordPress to execute the shortcode.
The code that you will add to your WordPress theme files looks like this:
echo do_shortcode('[gallery]');Just swap out “gallery” for the desired shortcode.
Please refer to our beginner’s guide to the WordPress template hierarchy if you are unsure of where to add the shortcode.
The snippet of code will also alter slightly if you add a shortcode with additional parameters.
Assume you have used WPForms to create a contact form. In this instance, you must use the form’s ID in addition to the standard WPForms shortcode:
echo do_shortcode("[wpforms id='92']");How to Troubleshoot do_shortcode Issues and What to Do Not Functioning
Occasionally, you might add a shortcode to a theme file, but your WordPress website won’t display the code’s output. This typically indicates that the shortcode is dependent upon another piece of code on your website or a WordPress plugin.
Make sure the plugin that provides the shortcode is installed and active by going to Plugins » Installed Plugins if the do_shortcode function isn’t functioning.
The echo do_shortcode code will not function because WPForms is installed but deactivated in the image below.
By including the shortcode_exists() function in your index.php file, you can also determine if a shortcode is available for you to use.
We are determining whether the WPForms snippet is usable on our website in the following snippet:
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}Try cleaning the WordPress cache if the shortcode output is still not visible on your website; you might be viewing an old version of it.
Method 3: Fully Customizable WordPress Theme Creation
Making a personalized WordPress theme is an additional choice. Although this is a more complicated technique, you can add as many shortcodes to any section of your WordPress theme as you like. To create a theme with precisely the features and design you desire, you can also make additional changes.
To create a custom WordPress theme in the past, you had to write code and adhere to complex WordPress tutorials. However, it’s now possible to create a custom theme without writing a single line of code using SeedProd.
The greatest WordPress page builder is SeedProd, which also includes a theme builder. This lets you use drag and drop to create your own themes.
By going to SeedProd » Theme Builder after creating a theme, you can add shortcodes to any area of your WordPress website.
Locate the template on this page where you wish to apply a shortcode.
Simply move your mouse over that template, and when it says “Edit Design,” click on it.
This will launch the template in the drag-and-drop page builder provided by SeedProd.
Navigate to the ‘Advanced’ section from the menu on the left. Locate the Shortcode block here, then drag it into your design.
To select the Shortcode block in the live preview, just click.
Now that the “Shortcode” box is empty, you can add your shortcode.
The output of the shortcode is not displayed in the live preview by default on SeedProd.
Click the “Show Shortcode Option” toggle to see your shortcode in action.
Next, by choosing the “Advanced” tab, you might want to add some styling to the output of the shortcode.
You can add custom CSS, adjust the spacing, and even add CSS animation effects here.
Simply click the “Save” button once you are satisfied with the page’s appearance.
Next, choose “Publish” to activate the shortcode.
You can now see the custom shortcode in use by going to your website.
