sidebar

How to Create a Custom WordPress Sidebar

October 19, 2015WordPress

Sidebar is a theme feature in WordPress that gave lot of flexibility in Theme and Dynamic Custom Site Development. Initially, sidebar were used only as a vertical column provided by a theme for displaying information other than the main content of the web page. Widgets are executable scripts that you can simply drag and drop in your sidebars or any other widget ready area in your theme.

Registering a Dynamic WordPress Sidebar

First you need to register your dynamic sidebar to use the sidebar functionality. This part is very important and always use proper code to register your sidebar.

Registering a sidebar or multiple sidebar is fairly simple. Most common approach is to add the register_sidebar( $args ); function with widgets_init() action hook in your theme’s functions.php file. Take a look on the code below for properly register a sidebar in WordPress. Let’s say we are registering a sidebar to use in footer area of website.

Let’s understand the arguments supplied

The register_sidebar() function accepts a single parameter named $args. $args is an array of arguments that define how the sidebar and its widgets should be handled.

id: The id argument is the most important argument you can set for your sidebar. This unique ID will be used to assign widgets to a specific sidebar, and to call sidebar in your template. Each ID should be unique to the sidebar and must be in lowercase with no spaces in between. By default, WordPress sets this to sidebar-$i (where $i is a count of the registered sidebars).

name: The name argument is the human-readable label for your sidebar used in the WordPress admin. Don’t make this name random and use proper name that you think best represents the name of your sidebar.

description: The description argument is the human-readable description for your sidebar used in the WordPress admin.

before_widget: The before_widget argument is a wrapper HTML element for widgets assigned to the sidebar. This argument has a couple of things that you should always set with specific code so that plugins can properly use them, which is the id (%1$s) and class (%2$s) attributes.

after_widget: The after_widget argument is a closing wrapper HTML element for widgets assigned to the sidebar. You just need to close off the element you set for the before_widget argument.

before_title: Most widgets display a title if the user sets one. The before_title argument is the opening wrapper HTML element for the sidebar’s widget titles.

after_title: The after_title argument is to close the wrapper HTML element set in the before_title argument.

Display the Sidebar on front end

After completing the process of registering sidebar, you will need to call dynamic_sidebar() function to display it in your WordPress theme. The dynamic_sidebar() function takes a single parameter of $index, which can either be the sidebar’s id or name argument that you have set while registering sidebar. The best and safer was to call sidebar with id argument.

Add the code above into footer.php file of your theme. You can call this code wherever you want to show the custom sidebar.

We hope that this article helped you learn how to add dynamic widget ready sidebars in WordPress. For questions and feedback please leave a comment below.

About the Author - Gaurav Panwar

Hi, I am Gaurav Panwar. A Freelance Web Developer, who make the web a better place. I love it, and you will love it too. Have an idea in mind? I will love to discuss web projects, whether in their early stages or ready to start designing.

Leave a comment