How to Add Shortcodes to WordPress Sidebar Widgets

Shortcodes are a great way of adding new features and functionalities to your website. However, they have a limitation: they can be used only within the content of pages and posts. This is the case with default shortcodes as well as custom ones, those created by themes, plugins, or individual WordPress users. To work around this problem, some WordPress users have opted to edit the template files of their theme, plugins, or even WordPress core files. This would let them use shortcodes in other parts of their website, like the footer or the header. Apart from being error-prone, this method requires you to edit the same files again and again, as the changes will get overridden after each update.

Luckily, this is no longer needed. Now, you can insert a shortcode call into certain widgets and use them in any available widget areas (or WordPress sidebars, as some programmers call them). By doing so, you will be able to extend the functionality of a shortcode to any part of your website. However, as using shortcodes this way might not be common knowledge, we decided to explain it in this article.

For this article, we will be using two shortcodes which we created for our tutorial on custom shortcodes as examples. The first is the current date shortcode, which shows the current date in dd – mm – yyyy format. The second is the colored text shortcode, which displays text in your chosen color. We advise reading the custom shortcode tutorial we linked to above first, as it ties into this article. The tutorial will also provide a lot more information about the two custom shortcodes that we’ll be using, as well as show you how to insert a shortcode call in general.

Even though these two shortcodes are very simple, they are useful for demonstrating adding a shortcode to an appropriate sidebar widget.

Finally, after the WordPress 5.8 update it is possible to add blocks to widget areas and edit the Widget screen using the Gutenberg editor entirely, two types of WordPress users have emerged. Some still rely on the Classic Widgets screen, while others have fully embraced the Gutenberg editor and use it to edit widgets as well. For this reason, we have purposefully divided the main part of the article into two sections, catering to Classic widgets and block-based widget editor users, respectively. That said, let us proceed to the how-tos of this article.

How to Add Shortcodes to WordPress Sidebars Using the Block-based Widgets Editor

Since the WordPress 5.0 update, the Gutenberg editor has replaced TinyMCE as the default WordPress editor. But, as of recently, the classic Widgets screen has also gone through the same change and has been replaced with a block-based Widgets editor. The block-based editor offers two ways of adding shortcodes – using the Paragraph and Shortcode block, which we will cover below.

The Paragraph block is the default block type for any text that you add to the Gutenberg editor. The text added to the Paragraph block can have some properties like being italic or aligned left, or it can be transformed into a quote or list using the Transformer button. However, what is less known is that it can also serve to add shortcodes to WordPress sidebars using the Gutenberg editor. The reason for it is that the Paragraph block will recognize shortcode calls in regular text and render them accordingly. Let us explain this.

First, navigate to the Appearance > Widgets section and open the widget area in which you wish to add a shortcode. Then, to add a new block to the selected widget area, you can either click the “+” button next to the Widgets label in the top-right corner of the screen or the equivalent “+” sign at the bottom of a widget area. Using either option will add the widget at the bottom of the selected widget area, from where you can drag and drop it in the desired location later.

To add a Paragraph block, you only need to locate it within the list of available blocks and click on it. Luckily, the Paragraph block can be found quite easily, but you can also use the search feature if you are unable to locate it.

Then, you only need to insert the shortcode call into it and click the “Update” button in the top-right corner.

Generally speaking, a shortcode call represents a text similar to [shortcode_name], with the shortcode_name placeholder properly replaced. In some cases, the shortcode can also accept parameters, in which case you would need to insert a text similar to [shortcode_name parameter_1=’value_1′ parameter_2=’value_2′ parameter_3=’value_3′ …], with up to as many parameter-value pairs as the shortcode accepts. As this might sound very confusing to some, it is best explained using examples.

For this article, we have decided to use the two shortcodes we have created for our article on custom shortcodes – the current_date shortcode and the colored_text shortcode. As for the former, since it doesn’t accept any parameters, the correct call for this shortcode only involves its name, i.e. it’s the [current_date] label. As for the latter, it accepts two parameters – the title and the color of the title. For this reason, the correct call for this shortcode is the following:

[colored_text title='insert-your-title-here' title_color='insert-your-color-here']

where both the title and color placeholders should be correctly replaced.

Having said that, for this article, using either of the suggested shortcode calls would be sufficient, as it would showcase adding a shortcode to a sidebar widget in a very basic manner. However, for this article, we thought it would be best to go past the basics and include some Gutenberg editing tips.

First of all, we have included both aforementioned shortcode calls. While these can also be part of a singular Paragraph block, even with some additional text in between, we thought it would be best if we placed them into separate Paragraph blocks. Furthermore, for display purposes, we have also included an additional Paragraph block with placeholder text in between and added a Heading block at the beginning.

As an additional tip, we will note that a stack of four separate blocks can be made into a Group block if you choose to do so. The advantage of Group blocks is that they get access to additional options, are easier to manipulate, and can be added to Reusable blocks, if you choose to do so.

When it comes to our example, to make the four blocks into a Group block, you will need to select all of them, press on the Group icon which appears above them, and select the “Group” option from the submenu. Of course, make sure to click the “Update” button in the top-right corner of your screen to save your previous action(s).

Having explained that, the only thing that remains is testing the result on the front end. Ours is shown on the screenshot below.

Apart from using the Paragraph block, which is a multi-purpose block, you can also use the Gutenberg block made specifically for adding shortcodes, i.e. the Shortcode block.

To do so, navigate to the Appearance > Widgets section and select the widget area in which you wish to insert a shortcode. Then, click the “+” sign next to the Widgets label in the top-left corner of your screen. Locate and select the Shortcode block from the list of available blocks. This will add the Shortcode block at the end of the selected widget area, and you can then drag and drop the block into the desired position. Then, the only thing that remains is to insert the shortcode call into the Shortcode block and click the “Update” button in the top-right corner to save the changes that you made.

As mentioned previously, the shortcode call is a label similar to the [shortcode_name] that could also contain parameter-value pairs, if the given shortcode accepts parameters. For the shortcodes used in our example, that means using the [current_date] label, since the current date shortcode doesn’t accept parameters, and [colored_text title=’insert-your-title-here’ title_color=’insert-your-color-here’], as the colored text shortcode accepts the title and title color parameters. Needless to say, you will need to change the insert-your-title-here and insert-your-color-here placeholders accordingly.

As said before, showcasing any one of those two shortcodes is sufficient in showing how you can add shortcodes to WordPress sidebars while using the Gutenberg editor. However, we will demonstrate both, creating the same layout as in the previous subsection. This time it will involve a Heading block, two Shortcode blocks with separate shortcode calls, and a Paragraph in between. Of course, making these four blocks into a Group block is optional and can be done either by adding the Group block beforehand or by converting the four blocks into a Group block afterward, as previously demonstrated.

For this subsection, we have opted for the former approach by clicking the “+” sign and clicking on the Group block. Then, we added the Heading, two Shortcode, and a Paragraph block with corresponding values shown on the screenshots below.

Having added all the content, we have clicked the “Update” button and tested the results on the front end of the website by examining one of the posts containing the Main Sidebar widget area. The result is shown and highlighted below.

As you can see by comparing the two results, you should have the same outcome when using either the Paragraph or Shortcode block to add shortcodes to WordPress sidebars using the block-based widgets editor. Thus, the choice of which to use comes to personal preference.

How to Add Shortcodes to WordPress Sidebars Using the Classic Widgets Screen

While the Block-based Widgets screen is enabled by default on every WordPress instance since the 5.8 update, there are still ways to revert this change and use the Classic Widgets screen once more. Thus, older WordPress users that are accustomed to the Classic Widgets screen and those that don’t wish to use the Gutenberg editor for managing widgets can be happy, since reverting this change is quite simple.

You only need to install and activate a plugin called Classic Widgets. Sadly, this might only be a temporary solution, as the plugin “will be supported and maintained until at least 2022, or as long as is necessary”, as noted on the plugin page. Nevertheless, we will cover the ways of how you can add shortcodes to WordPress’s classic sidebar widgets. This includes adding shortcodes, i.e. shortcode calls, to a Text widget or a Custom HTML widget, respectively. Let us explain how.

The Text widget is one of the most useful default WordPress widgets. It allows you to add text or HTML code inside a widget area without changing any template files. When adding content to this widget, the text should be added in the Visual tab, while the HTML code must be added in the Text tab for it to render properly.

Furthermore, the WordPress Text widget accepts shortcode calls (e.g. [shortcode_name]) as a valid form of text. A shortcode call added this way is then properly rendered on the website’s front end to show the output of the shortcode.

Therefore, if you want to add a shortcode to your WordPress sidebar, for example, you can do so using a Text widget. Start by navigating to Appearance > Widgets, find the widget area where you want to add your shortcode, and insert a Text widget into it. Then, add the shortcode call in the Visual tab and click the Save button below.

We have used both of the abovementioned custom shortcodes in this example. Let us briefly explain them.

Since the first shortcode doesn’t accept any parameters, we simply “called” it using the shortcode name, i.e. [current_date]. And, as the second shortcode accepts two parameters – title and title color – we have supplied them in the corresponding shortcode call. Furthermore, we also added some Lorem Ipsum text to visually separate the output of those two shortcodes. After adding all three, we got the output you can see below.

The Custom HTML widget, as the name indicates, is the dedicated default WordPress widget for adding custom HTML code into your widget areas. The HTML code that you insert is directly added to the HTML structure of the page’s frontend. It will be located in the place that corresponds to the widget area where you added the Custom HTML widget.

Besides HTML, this widget also accepts shortcode calls and renders their output on the website accordingly. Therefore, an additional feature of this widget is adding a shortcode to a desired WordPress widget area.

To add a shortcode using the Custom HTML widget, navigate to Appearance > Widgets and find the widget area where you want to insert the shortcode. Add a Custom HTML widget inside your chosen widget area and then add the shortcode call to it. Finish up by clicking the Save button below.

Since we used the same two shortcode calls in this example as well as the previous one, what we said earlier applies here as well. We added the same placeholder text to visually separate the output again. However, you may have noticed on the image above that the placeholder text is wrapped inside a paragraph tag. This is necessary because any plain text section added into the Custom HTML widget would be added directly to the HTML structure of your webpage. However, this is not the case with the Text widget, since it places plain text sections inside a paragraph by default.

That said, after adding all those things to the widget, the output that we got is the same as in the previous example. Inserting the same shortcodes into a Custom HTML widget and a Text widget can produce the same output.

Comparing the two outputs and how the shortcode calls were added, we can conclude that both the Text and Custom HTML widget are equivalent when it comes to adding shortcodes to sidebar widgets. So, picking which one you’ll use comes down to personal preference.

Final Thoughts

In this article, we have taken a look at how you can use two WordPress widgets— the Text and the Custom HTML widget—to add shortcodes to any widget area on your website. This will give you the freedom to adjust parts of your website that you previously might not have been able to customize. And, as the process is quite straightforward, you can accomplish your goal or realize your design in minutes. Make sure to bookmark this article, so you don’t forget this often overlooked use of two versatile WordPress widgets.