{"id":75450,"date":"2023-08-04T15:30:00","date_gmt":"2023-08-04T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=75450"},"modified":"2023-09-19T16:14:48","modified_gmt":"2023-09-19T13:14:48","slug":"use-shortcodes-in-sidebar-widgets","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/use-shortcodes-in-sidebar-widgets\/","title":{"rendered":"How to Use Shortcodes in Sidebar Widgets (3 Ways)"},"content":{"rendered":"\n

Creating a sidebar on your website is an excellent way to display elements across all of your web pages. WordPress shortcodes can enable you to do this. However, if you’re new to the CMS, you might not know how to use shortcodes in sidebar widgets.<\/p>\n\n\n\n\n\n\n\n

The good news is that the process \u2699\ufe0f is relatively straightforward. What’s more, you can choose from a few different approaches based on your site’s setup and your personal preference. For example, you can use the Site Editor or simply enable shortcode in all your widgets.<\/p>\n\n\n\n

\n
\n

In this post, we’ll briefly introduce you to WordPress shortcodes<\/a>. Then, we’ll discuss why you may want to use them in sidebar widgets<\/a>. Finally, we’ll share three ways you can use<\/a> shortcodes in sidebar widgets. Let’s get started! \ud83d\ude0e<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to use #shortcodes in sidebar #widgets \ud83d\udc68\u200d\ud83d\udcbb\ud83e\udde9\ud83e\udde9<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

A brief introduction to WordPress shortcodes<\/h2>\n\n\n\n

First things first, if you’re new to WordPress, you might be wondering what shortcodes are. In a nutshell, WordPress shortcodes<\/a> are small bits of code that are indicated by brackets, like [this one]<\/code>. They have been around since WordPress Version 2.5 [1]<\/sup>.<\/p>\n\n\n\n

Since WordPress Version 4.9, you can add these shortcodes pretty much anywhere on your site, including posts, pages, and custom post types. Shortcodes can perform tons of different functions and create lots of different design elements, like captions, galleries, and more.<\/p>\n\n\n\n

Most versions of WordPress come with a lot of shortcodes built-in, but you can also use shortcode plugins<\/a> to get even more. In the Block Editor, you can simply use the Shortcode block:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Or, you can add them manually in the Classic Editor.<\/p>\n\n\n\n

However, if you want to use shortcodes in sidebar widgets, things aren’t as straightforward. Plus, how you do this will depend on both your theme and WordPress version. But don’t worry, we’ll show you three ways to do this later on in this post!<\/p>\n\n\n

<\/div>\n\n\n\n

Why you may want to use WordPress shortcodes in WordPress sidebar widgets<\/h2>\n\n\n\n

So, why use WordPress shortcodes in sidebar widgets? Before we answer this question, let’s quickly talk about widgets.<\/p>\n\n\n\n

Essentially, WordPress widgets are modules<\/a> that enable you to add unique and often interactive features to your site. You can include these widgets in different global widget areas, such as your sidebar, header, and footer.<\/p>\n\n\n\n

That means you can add features that appear on every single page on your site in one fell swoop. For example, you can use widgets<\/a> to add a search bar, a categories list, or a recent posts list:<\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

Keep in mind, though, that you don’t have to create a sidebar for your entire site. You can also just feature one in all your blog posts or certain locations like the home page.<\/p>\n\n\n\n

There are tons of free sidebar widgets<\/a> to add dynamic elements like social media feeds, Google Maps, and events calendars. Then, when you add the power of shortcodes to your sidebar widget area, the possibilities become almost infinite!<\/p>\n\n\n

<\/div>\n\n\n\n

How to use shortcodes in sidebar widgets <\/h2>\n\n\n\n

Now, we’re going to show you three ways to use shortcodes in sidebar widgets!<\/p>\n\n\n\n

    \n
  1. Using the Site Editor<\/a><\/li>\n\n\n\n
  2. With the WordPress Shortcode widget<\/a><\/li>\n\n\n\n
  3. Using custom code to enable shortcodes in widget titles<\/a><\/li>\n<\/ol>\n\n\n
    <\/div>\n\n\n\n

    1. Using the Site Editor (block themes only)<\/h3>\n\n\n\n

    If you’re using a block theme<\/a> such as Raft<\/a>, Neve FSE<\/a>, or Twenty Twenty-Two<\/a>, then you’ll be able to use the WordPress Full Site Editor (FSE). This enables you to modify site-wide elements (like a sidebar) using blocks. Since there is a Shortcode block, this process is super simple.<\/p>\n\n\n\n

    To get started, go to Appearance<\/strong> > Themes<\/strong> > Editor<\/strong><\/em>. This will launch your Site Editor, where you can access your menus for Templates<\/em><\/strong> and Template Parts<\/em><\/strong>:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Select the template or part where you want to add the sidebar.<\/p>\n\n\n\n

    If your theme doesn’t already have one, you’ll need to create your sidebar<\/a> by adding the Columns block<\/a>. By default, the block will appear at the bottom of the page:<\/p>\n\n\n

    \n
    \"Add<\/figure><\/div>\n\n\n

    Choose a variation for your sidebar. We’ll select the 66\/33<\/em><\/strong> option for a right sidebar.<\/p>\n\n\n\n

    Then, to move any content to the left side, open your List View<\/em><\/strong><\/a>:<\/p>\n\n\n

    \n
    \"Access<\/figure><\/div>\n\n\n

    Drag the main content to the column on the left. This will leave your right sidebar empty:<\/p>\n\n\n

    \n
    \"Move<\/figure><\/div>\n\n\n

    Finally, search for your shortcode block and add it to your new sidebar:<\/p>\n\n\n

    \n
    \"Use<\/figure><\/div>\n\n\n

    Then, add any unique shortcodes that you like and click on Save<\/em><\/strong> when you’re done.<\/p>\n\n\n\n

    Just remember, once you finalize this design, it will be implemented on all pre-existing and future posts that use the template.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. With the WordPress Shortcode widget<\/h3>\n\n\n\n

    If you haven’t made the switch to block themes and the Site Editor, you can use the WordPress Shortcode widget in your block-based widget editor.<\/a><\/p>\n\n\n\n

    To do this, simply go to Appearance<\/strong> > Widgets<\/strong><\/em>:<\/p>\n\n\n

    \n
    \"WordPress<\/figure><\/div>\n\n\n

    Then, if your active theme already has a sidebar, select it. Click on the plus (+)<\/strong><\/em> symbol and search for the Shortcode<\/em><\/strong> block widget:<\/p>\n\n\n

    \n
    \"WordPress<\/figure><\/div>\n\n\n

    After that, you can write in any shortcode that you want:<\/p>\n\n\n

    \n
    \"Use<\/figure><\/div>\n\n\n

    It’s as simple as that!<\/p>\n\n\n\n

    However, keep in mind that you can also disable block-based widgets<\/a> to use classic widgets if that’s your preference.<\/p>\n\n\n

    <\/div>\n\n\n\n

    3. Using custom code to enable shortcodes in widget titles<\/h3>\n\n\n
    <\/div><\/div><\/div><\/div>\n\n