Documentation /

Adding an Additional Sidebar

The following tutorial will guide you through the process of adding a second sidebar to your Themify theme.
This tutorial uses the “Basic” theme as a reference, but the steps can be followed with any of our themes.

Step 1: Create a child theme

• To prevent theme updates from overwriting your template changes, create and activate a child theme as documented here.
• You will now have a child theme setup with a ‘style.css’ file.

Step 2: Register the new sidebar

• Create a new file named ‘functions.php’ in the child theme’s directory. Note: if you already have a child theme and a functions.php file in the child theme, just add/merge the code below.
• Add the following code to the child theme’s ‘functions.php’ file which you just created:

<?php
add_action( 'widgets_init', 'child_register_sidebar' );

function child_register_sidebar(){
	register_sidebar(array(
		'name' => 'Sidebar 2',
		'id' => 'sidebar-2',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle">',
		'after_title' => '</h4>',
	));
}
?>

Step 3: Add the new sidebar to template files

These steps will need to be performed with the following files; ‘index.php’, ‘page.php’, and ‘single.php’
This will add a sidebar on the index pages (home, archive, category, tag, search pages, etc.), single post page, and static pages.

• Open the file (e.g. ‘index.php’) and find the following line:

<div id="layout" class="pagewidth clearfix <?php echo $layout; ?>">

• After this line you will need to add the following code:

<aside id="sidebar-2">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-2') ) ?>
</aside>

• The new sidebar code can be added/excluded in the template. For example, if you don't need the second sidebar on the static pages, exclude it in page.php template file.

Step 4: Style the new sidebar

Open the ‘style.css’ file in your child theme and add the following CSS below the existing content.

#sidebar-2 {
    float: left;
    padding: 5% 0 3%;
	margin-right: 30px;
    width: 138px;
}

.sidebar-none #sidebar-2 {
	display: none;
}

#content {
    width: 528px;
}

Responsive

To make the theme responsive with these two sidebars, add the following CSS as well.

@media screen and (max-width: 980px) {
	#sidebar-2 {
		margin-right: 3%;
		max-width: 14%;
	}
	.sidebar1 #content {
		max-width: 54% !important;
	}
}

@media screen and (max-width: 760px) {
	#sidebar-2 {
		margin: 0;
		width: 100%;
		max-width: 100%;
		float: none;
		clear: both;
	}
	.sidebar1 #content {
		max-width: 100% !important;
	}
}

Now save the file and make sure you have activated your child theme.

Step 5: Final steps

You will now have a widget area labelled “Sidebar 2” under WP Admin > Appearance > Widgets,
you can now place widgets here and they will show in a narrow sidebar to the left of your content.