How to Easily Add WordPress Sidebars to Your Theme

As a WordPress user and developer you are likely to come a across a situation where you need to add additional custom sidebars.

Adding custom sidebars to your WordPress is relatively simple and can be achieved in a few simple steps.

Step 1 – Determine the needs

First you’ll need to determine the number of sidebars you’ll need and their function on your theme.

Step 2 – Add sidebars to theme.

Adding sidebars will require you to edit your themes functions.php file, so before beginning you should make a backup of your functions.php file.

Within the functions.php file you can register your sidebar(s) using the register_sidebar function :
* for the purposes of this blog the theme name is “Custom Theme Name” (“customthemename”)

function customthemename _widgets_init() {
register_sidebar( array(
'id'          => 'my-custom-sidebar',
'name'        => __( 'Top Menu', 'customthemename' ),
'description' => __( 'This sidebar is located above the age logo.', 'customthemename'),
) );

register_sidebar( array(
'id'          => 'my-custom-sidebar-2',
'name'        => __( Side  Menu', 'customthemename' ),
'description' => __( 'This sidebar is located on the side.', 'customthemename'),
) );

}

Using “id” you can give the sidebar a unique name, which will later be used to call the sidebar. Using “name” you can name the sidebar, the name will appear in your “Widgets” page  within your WordPress Dashboard; following the name of the sidebar is the name of the theme.
Using “description” you can set the descriptive text that will appear underneath the sidebar name in your Widgets page. (see finished example below)

Once you’ve registered the sidebar(s) within your functions.php page you can upload the revised page.

Step 3 – Add sidebars to your theme template

A. Make sure your sidebars are active within your site and page templates (index.php, page.php, etc.) using:

<?php get_sidebar();?>

B. Add your custom sidebar names (my-custom-sidebar) to your sidebar.php page.

<?php if ( is_active_sidebar( ' my-custom-sidebar ' ) ) : ?>
<div id="sidebar" class="widget-area" role="complementary">

<?php dynamic_sidebar( ' my-custom-sidebar ' ); ?>

</div>

<?php endif; ?>

Step 4 – Build your sidebar(s)

Creating custom sidebars and adding them to widgets
Once you’ve added your sidebar(s) to your theme template and pages (and uploaded to your web server) you can begin customizing the sidebars through your WordPress Dashboard.

Within your Widgets page you should now see your custom sidebars, described by the Name set  in your functions.php page.

And that’s it!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>