In your “Blank Slate” starter theme:
STEP I: Open the functions.php
and find the word: “register_sidebar”. Inside the blankslate_widgets_init()
function, paste the following codes just after the register_sidebar()
ends, but inside the blankslate_widgets_init()
function (before closing second braces – ‘}’):
register_sidebar( array (
'name' => __('Left Widget Area', 'blankslate'),
'id' => 'secondary-widget-area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
It’ll register are new sidebar area into the admin panel. And the id will be available to call it into front-end.
STEP II: Now, copy the sidebar.php
and paste it and rename it into: sidebar-secondary.php
. Now erase all the codes inside, and paste the following:
<aside id="sidebar" role="complementary">
<?php if ( is_active_sidebar('secondary-widget-area') ) : ?>
<div id="secondary" class="widget-area">
<ul class="xoxo">
<?php dynamic_sidebar('secondary-widget-area'); ?>
</ul>
</div>
<?php endif; ?>
</aside>
STEP III: Get into the index.php
. You’ll notice a <?php get_sidebar(); ?>
after the ending </section>
tag. Similar to the line just add a simple line after the <?php get_header(); ?>
, but before the starting <section>
tag, like below:
<?php get_header(); ?>
<?php get_sidebar( 'secondary' ); ?>
<section id="content" role="main">
Now your layout consists of two sidebars. Rest is up to you – the mighty CSS. 🙂