{"id":20506,"date":"2021-02-17T17:00:17","date_gmt":"2021-02-17T16:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20506"},"modified":"2021-12-22T13:08:08","modified_gmt":"2021-12-22T12:08:08","slug":"add-shortcode-to-wordpress-widget","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-shortcode-to-wordpress-widget\/","title":{"rendered":"How to Add Shortcodes to WordPress Sidebar Widgets"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Shortcodes are a great way of adding new features and functionalities to your website<\/strong>. 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.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Luckily, this is no longer needed. Now, you can insert a shortcode call into certain widgets and use them in any available widget areas<\/strong> (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.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For this article, we will be using two shortcodes which we created<\/strong> for our tutorial on custom shortcodes<\/a> as examples. The first is the current date shortcode, which shows the current date in dd \u2013 mm \u2013 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<\/strong> that we\u2019ll be using, as well as show you how to insert a shortcode call in general.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Even though these two shortcodes are very simple, they are useful for demonstrating adding a shortcode to an appropriate sidebar widget.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Finally, after the WordPress 5.8 update it is possible to add blocks to widget areas and edit the Widget<\/strong> 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.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Shortcodes to WordPress Sidebars Using the Block-based Widgets Editor<\/h2>\n

[\/vc_column_text][vc_column_text]Since the WordPress 5.0 update, the Gutenberg editor<\/a> 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 \u2013 using the Paragraph and Shortcode block, which we will cover below.[\/vc_column_text][vc_empty_space height=”22px”]