Use Shortcodes to Embed Widgets in Wordpress

As George Henry Lewes once said “Genius is rarely able to give any account of its own processes”, shortcode is that genius created by Wordpress which is not given the importance it deserves. With few elemental strokes and minimal editing needs, Shortcodes is able to create necessary elements for your Wordpress website.

Widgets created for various tasks within a Wordpress website, can be easily developed and inserted using a shortcode. The process is simple and can be easily switched from one theme to another. Let’s see how shortcodes can be used to embed widgets into a website.

The Widget Output

Before creating a shortcode for a widget, it is important to understand how a widget works and how it generates its output.

the_widget() function takes in three different parameters to generate the output

Class name Instance settings Sidebar Arguments

With these three parameters, you can easily create a widget output set for any location, and pass varied sidebar arguments to the widget. With the beforewidget and afterwidget parameters, you can easily make changes related to location or style of the widget in the shortcode

Buffering the Output in Shortcode

Let’s say you have inserted a shortcode to a widget. Now, your website will scan the whole code for a particular string. Once the string is found, the widget will be sent to the output. There are two ways of sending the widget to the output- directly sending it via the_widget() function, or using a buffer at the output

In the first case, the code would be

thewidget( 'WPWidget_Archives' );

In the second case

alt text

In the second case, the contents that are echoed are first transferred to the buffer. With obgetclean(), the contents of the buffer are transferred to the output, and the buffer is cleared. The contents are released to the output

Shortcode: How to Create it?

The first step to creating a shortcode is creating a skeleton of the shortcode

The things you will need to decide before actually creating the skeleton of shortcode

Which arguments can be passed using the widget function, and which parameters do you want the user to pass through shortcode

What is the type of widget you are trying to create

Widget title

The instance parameters and the sidebar arguments you want to add for this widget

The instance parameters and sidebar arguments will vary as per the functionality of the widget

Shortcode Skeleton

alt text

If you look at the skeleton, you will see that there are two kinds of attributes present in every shortcode

  1. Type: specifies the type of widget you are creating

  2. Title: where the widget is given a specific title

Once the $atts are defined, it is time to define the $args i.e. the sidebar parameters

Note: In a commercial widget, the user is generally not given any control on the sidebar parameters.

The Final Version of the Shortcode

alt text

Once the skeleton is ready, you can add your themes and color combinations to the skeleton to create your widget.

Add the argument based customizations to the shortcode first and then garnish it with CSS class. The style sheet will add the necessary flavors to the shortcode thus giving your widget a refreshing look. You can add background colors and make other customizations as part of your $args.

With this simple technique, you can manage to create amazing shortcodes and insert interesting widgets to your Wordpress website.

Author Bio:

Deepa is a passionate blogger associated with Silver Touch Technologies., a leading Offshore WordPress development company. She loves sharing information regarding WordPress tips & tricks. If you are looking to Hire WordPress Developers then just get in touch with her.

Deepa Ranganathan
  • use shortcodes to embed widgets
  • embed widgets in wordpress
By Deepa Ranganathan On 14 Apr, 15  Viewed: 163