{"id":694,"date":"2011-10-18T14:13:17","date_gmt":"2011-10-18T12:13:17","guid":{"rendered":"http:\/\/www.kavdesign.net\/blog\/?p=694"},"modified":"2015-11-05T21:05:38","modified_gmt":"2015-11-05T19:05:38","slug":"how-to-add-extra-sidebar-to-a-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.kavdesign.net\/blog\/coding\/how-to-add-extra-sidebar-to-a-wordpress-theme\/","title":{"rendered":"How to add extra sidebar to a WordPress theme?"},"content":{"rendered":"

To begin the tutorial, extract your theme into a folder and open it to see all the files. If your theme has only one sidebar, then most probably you will NOT find a file called functions.php<\/em> in your theme folder. In that case you will have to create this file yourself. Just open notepad or any other code editor to start a new file. Put this code into that file:<\/p>\n

<?php
\nif ( function_exists('register_sidebars') )
\nregister_sidebars(2);
\n?><\/code><\/p>\n

Or add this code instead:
\n
\nif (function_exists('register_sidebar')) {
\nregister_sidebar(array(
\n'name'=>'Put the name of the sidebar HERE',
\n'before_widget' => '',
\n'after_widget' => '',
\n'before_title' => '',
\n'after_title' => '',
\n));
\n}<\/code><\/p>\n

Save the file as functions.php<\/em> and put it in your theme folder. This piece of code actually tells WordPress to register two sidebars for you (See register_sidebars(2)<\/em> in the code). If your theme has more than one sidebar, you will find the functions.php<\/em>file already present in your theme folder. You just have to edit the number to your requirement and save the file. You can increase this number if you want more sidebars and if your theme\u2019s layout can accommodate it. Now, when you go to your WordPress admin section and browse to the widgets under the menu item called presentation, you will see two sidebars listed there. You can drag your widget items into any of the sidebars.<\/p>\n

Now comes the part where we actually build the sidebars. If your theme has only one sidebar, try to locate a file called sidebar.php<\/em> in your theme folder. <\/em>In this example, where we are trying to modify the theme for two sidebars, let\u2019s rename sidebar.php<\/em> to sidebar1.php <\/em>and make a new blank file called sidebar2.php<\/em>. Put this code into sidebar2.php<\/em> and save the file:<\/em><\/p>\n

<div>
\n<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
\n<?php endif; ?>
\n<\/div><\/code><\/p>\n

Or alternatively put this code:<\/p>\n

<?php if (!function_exists('dynamic_sidebar') ||
\n!dynamic_sidebar('Put the name of the sidebar HERE<\/code>')) : ?>
\n<?php endif; ?><\/code><\/p>\n

So, we have the two sidebars ready but they have not been placed in the index.php<\/em> file yet. Both these sidebars need to be called from the index.php<\/em> file in order to include them in your theme. Just open the index.php<\/em> (it could also be in header.php, footer.php, bottom.php or whereever you want to position the sidebar) file from your theme folder and locate the code that calls your sidebar file (sidebar.php <\/em>earlier). It should look something like :-<\/p>\n

<?php include (TEMPLATEPATH . '\/sidebar.php'); ?><\/code><\/p>\n

Edit this code and change the words sidebar.php<\/em> to sidebar1.php.<\/em><\/p>\n

This takes care of the first sidebar. Now take a look at the index.php<\/em> file carefully and find a suitable place to insert the second sidebar. This might involve modifying your layout or adding new divs. Once you find a suitable place, place the following code there :-<\/p>\n

<?php include (TEMPLATEPATH . '\/sidebar2.php'); ?><\/code><\/p>\n

Save the index.php<\/em> file and now preview your theme. You will see all the widgets that you placed in both your sidebars appearing on your website. If you have not placed any widgets yet, you will not see any change. There might be alignment errors but you will have to fix them yourself. You can add more sidebars in a similar way to your WordPress theme. I hope this tutorial helps some of you.<\/p>\n

\n

So, now especially for Twenty Fifteen Theme:<\/strong><\/p>\n

Add the following to functions.php<\/p>\n

function<\/span> twentyfifteen_widgets_init2<\/span>()<\/span> {<\/span>\r\nregister_sidebar<\/span>(<\/span> array<\/span>(<\/span>\r\n'name'<\/span>          =><\/span> __<\/span>(<\/span> 'Widget Area Right'<\/span>,<\/span> 'twentyfifteen'<\/span> ),<\/span>\r\n'id'<\/span>            =><\/span> 'sidebar-2'<\/span>,<\/span>\r\n'description'<\/span>   =><\/span> __<\/span>(<\/span> 'Add widgets here to appear in your sidebar.'<\/span>,<\/span> 'twentyfifteen'<\/span>     ),<\/span>\r\n'before_widget'<\/span> =><\/span> '<aside id=\"%1$s\" class=\"widget %2$s\">'<\/span>,<\/span>\r\n'after_widget'<\/span>  =><\/span> '<\/aside>'<\/span>,<\/span>\r\n'before_title'<\/span>  =><\/span> '<h2 class=\"widget-title\">'<\/span>,<\/span>\r\n'after_title'<\/span>   =><\/span> '<\/h2>'<\/span>,<\/span>\r\n)<\/span> );<\/span>\r\n}<\/span>\r\nadd_action<\/span>(<\/span> 'widgets_init'<\/span>,<\/span> 'twentyfifteen_widgets_init2'<\/span> );<\/span>'<\/span><\/code><\/pre>\n
After that copy sidebar.php from the theme, and add the following to it:<\/p>\n
<div<\/span> id<\/span>=<\/span>\"anothersidebar\"<\/span> class<\/span>=<\/span>\"sidebar\"<\/span>><\/span>\r\n    <?<\/span>php <\/span>if<\/span> (<\/span> is_active_sidebar<\/span>(<\/span> 'sidebar-2'<\/span> )<\/span> )<\/span> :<\/span> ?><\/span>\r\n    <div<\/span> id<\/span>=<\/span>\"widget-area\"<\/span> class<\/span>=<\/span>\"widget-area\"<\/span> role<\/span>=<\/span>\"complementary\"<\/span>><\/span>\r\n        <?<\/span>php dynamic_sidebar<\/span>(<\/span> 'sidebar-2'<\/span> );<\/span> ?><\/span>\r\n    <\/div><\/span><!-- .widget-area --><\/span>\r\n<?<\/span>php endif<\/span>;<\/span> ?><\/span><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
To begin the tutorial, extract your theme into a folder and open it to see all the files. If your theme has only one sidebar,<\/p>\n
Continue readingHow to add extra sidebar to a WordPress theme?<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[9,82],"tags":[211,210,212,209,150,418],"class_list":["post-694","post","type-post","status-publish","format-standard","hentry","category-coding","category-wordpress","tag-additional","tag-extra","tag-position","tag-sidebar","tag-widget","tag-wordpress","entry"],"_links":{"self":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/comments?post=694"}],"version-history":[{"count":15,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/694\/revisions"}],"predecessor-version":[{"id":1495,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/posts\/694\/revisions\/1495"}],"wp:attachment":[{"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/media?parent=694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/categories?post=694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kavdesign.net\/blog\/wp-json\/wp\/v2\/tags?post=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}