How to Add Custom Sidebar in WordPress

Adding a content in sidebar is a very easy task. Just drag and drop selective widget and job done. But every theme come up with 2 or 3 built-in sidebars. What if I want to add custom sidebar in my currently activated wordpress theme?

No problem! In this tutorial I am going to add custom sidebar in wordpress and I am going to use it all over in my template.

 Steps to follow

1) Register Sidebar with in the template.

2) Call Sidebar into template.


Step1: Register Sidebar with in the template

First of all I have to register sidebar in my theme’s functions.php file. Functions.php is a common file and almost 99% of themes have it. If there is no functions.php file in your theme then create it and add following line of code into functions.php file.

What I do in above code is that first of all I added a function register_sidebar() and add additional sidebar arguments in the form of array. Each argument is very clear and understandable but I describe them one by one.

  • name: is a name of sidebar in my case I give “My Sidebar” as a name
  • id: is a unique id
  • description: Description appears under sidebar title. Normally use for information
  • before_widget: HTML to use before every widget
  • after_widget: HTML to use after every widget
  • before_title: HTML to use before every title
  • after_title: HTML to use after every title

my sidebar

As you can see in above image that My Sidebar has been created. Now lets move to second step.

Step2: Call Sidebar into Template

In this step I am going to call My Sidebar into my theme footer file. Currently twentytwelve theme has activated and I want to add my contact info in twentytwelve footer.

What I will be doing is, Open footer.php file of twentytwelve theme and paste following code into it.

dynamic_sidebar() is a function that call sidebar and it take sidebar id to display specfic sidebar.

After adding above code into footer.php file. I will go to admin panel, drag and drop text widget and add my contact info.

contact info image sidebar

After adding contact info into “My Sidebar” widget. I going to see my front end site footer to check my contact info is showing or not.

footer widget contact info

Now, my contact info is showing in exactly same area where I pasted my code.

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.