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.
'name' => __( 'My Sidebar'),
'id' => 'my-sidebar',
'description' => 'This will display in selective pages',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>' ));
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
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.
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.
Now, my contact info is showing in exactly same area where I pasted my code.