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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php register_sidebar(array( '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.
|
1 2 3 |
<?php dynamic_sidebar('my-sidebar');?> |
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.