In today’s article, we will show you how to create custom sidebars per page. It is quite possible that when you are designing a website, you might not need the same sidebars to occur on each page. In other words, each webpage of the website has a specific purpose and so having a common sidebar for all the pages is not a good idea. In fact, how good it would have been if you could actually have a separate sidebar for specific pages, featuring the information and widgets relevant to that page, for instance, testimonials showing up on the services page, contact info on about page and featured posts on posts page. You can do all this and lot more with custom sidebars. We have divided this article in the following three sections:
- Defining A Custom Sidebar
- Implementing Custom Sidebar
- Combined Implementation Of Custom Sidebar And Standard Sidebar
Defining A Custom Sidebar
WordPress by default provides only 2 sidebars and to feature specific sidebar for specific pages you will need to start with defining the custom sidebars. Custom sidebars come in handy for creating custom page templates, which instead of inheriting the common / default sidebars can feature different widgets for different pages — testimonials on the services page and search box and social media icons on the home page. If you are looking for something like this, all it takes to get started is to register the sidebar by using the following piece of code. Add the following code to your custom_functions.php (check this article to learn about custom_functions.php).
/* CUSTOM SIDEBARS */
register_sidebar(
array(
'name'=>'Sidebar 3',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(
array(
'name'=>'Sidebar 4',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
In this code snippet, we are calling register_sidebar(), to register the sidebars with names Sidebar 3 and Sidebar 4 respectively. You can however change the names of the sidebars and create as many sidebars as you want by repeating the code for register_sidebar() and changing the value of name attribute.
Implementing Custom Sidebar
Once you have registered the sidebar, you will be able to view the custom sidebars on the Widgets page. The next step is to call the newly created sidebars. Just add the following lines of code in your custom_functions.php.
/* CUSTOM SIDEBAR TEMPLATE */
function custom_sidebar_01() {
if (is_page('page_no') ) { ?>
<div id="content">
<div>
<div>
<h1>Your Headline</h1>
</div>
...This is where your content goes...
</div>
</div>
<div id="sidebars">
<div id="sidebar_1">
<ul>
<?php thesis_default_widget(3); ?>
</ul>
</div>
<div id="sidebar_2">
<ul>
<?php thesis_default_widget(4); ?>
</ul>
</div>
</div>
<?php } }
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'custom_sidebar_01');
Note: Replace ‘page_no‘ in the above code with the page where you want to implement the custom sidebars.
Combined Implementation of Custom Sidebar And Standard Sidebar
Creating the custom sidebars opens up the options for using the default sidebars and custom sidebars in conjugation with each other. If you want one of your default sidebars to show up with one of the custom sidebars on the page, you only need to change the value passed to thesis_default_widget(). The default sidebars possess the values 1 and 2. So, in order to call the default sidebar, you will need to change the parameter of thesis_default_widget() to 1 0r 2, as in the following code snippet (where default sidebar 1 and custom sidebar 4 are being called):
<ul>
<?php thesis_default_widget(1); ?>
</ul>
</div>
<div id="sidebar_2">
<ul>
<?php thesis_default_widget(4); ?>
</ul>
