Storefront themes, Boutique theme, add a right sidebar to your blog
The question
Here’s my issue: I want my blog page to actually LOOK like a blog, instead of like another store page. But because it’s just a page with posts, it doesn’t really look like a blog, and it doesn’t really function like a blog.
Answer
This is not too hard but does involve editing 3 PHP files and adding a little CSS. If you have never edited PHP see the notes and tools at the end of this post. This code id for Boutique version 1.2.3 but should be basically the same in any version. The line numbers may be slightly different.
Code Theme Functions PHP file
Open theme-functions.php which is in the Designer theme folder, sub folder “includes”. Find “WIDGET AREAS” around line 43. You will see 4 blocks of code that are basically the same except for the name. Each of these is a widget area on the home page. You need to add 1 more to be a sidebar. So you copy the last block and paste it below itself. Then give that block anew name, I used “Sidebar Widgets”. The completed code is shown below
===============================================================
WIDGET AREAS
===============================================================
*/
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Home Widget 1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Home Widget 2',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Home Widget 3',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Home Widget 4',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Sidebar Widgets',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
At this point you will have a new widget area in the WorPress backend under Appearance/Widgets named “Sidebar Widgets”. You can add and remove widgets but nothing will appear in the front end until we add the sidebar area to the templates.
Code index PHP file
Open index.php which is in the Designer theme folder. It consists of only 11 lines of code. This is the file that displays your main “Blog” page with multiple posts listed. First delete line 6 which is highlighted below.
<?php get_header(); ?> <div id="container" class="container_12"> <div id="content" class="grid_12 sft-framed-item"> <div class="sft-framed-inner"> <?php include(TEMPLATEPATH . '/includes/loop-post-archives.php'); ?> <div class="clear"></div> </div><!-- end content inner --> </div><!-- end content --> <div class="clear"></div> </div> <?php get_footer(); ?>
We are going to add a block of just 6 lines of code to add our sidebar. This code just creates a sidebar div and calls our sidebar. The completed code is shown below, the highlighted part is what you add to create the sidebar. Note it does not go where you deleted line 6. You can copy and paste.
<?php get_header(); ?>
<div id="container" class="container_12">
<div id="content" class="grid_12 sft-framed-item">
<div class="sft-framed-inner">
<?php include(TEMPLATEPATH . '/includes/loop-post-archives.php'); ?>
</div><!-- end content inner -->
<div class ="right-sidebar">
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Sidebar Widgets') ) : ?>
<!-- This will be displayed if the sidebar is empty -->
<?php endif; ?>
</div>
</div><!-- end content -->
<div class="clear"></div>
</div>
<?php get_footer(); ?>
Code single PHP file
Open single.php which is in the Designer theme folder. It consists of only 14 lines of code. This is the file that displays your individual full blog posts. you do not need to delete anything in this file. You just add the same 6 lines as you did to index.php. They are already added and highlighted in the code below
<?php get_header(); ?>
<div id="container" class="container_12">
<div id="content" class="grid_12 sft-framed-item">
<div class="sft-framed-inner">
<?php include(TEMPLATEPATH . '/includes/loop-post-single.php'); ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'storefront' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'storefront' ) . '</span>' ); ?></div>
</div><!-- #nav-below -->
</div>
<div class ="right-sidebar">
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Sidebar Widgets') ) : ?>
<!-- This will be displayed if the sidebar is empty -->
<?php endif; ?>
</div>
</div><!-- end content -->
<div class="clear"></div>
</div>
<?php get_footer(); ?>
Make it all fit with CSS
Now you just need a little CSS to make the blog posts narrower to allow room for a sidebar and to float the sidebar next to the posts.
.sft-framed-inner{
float: left;
width: 540px;
}
.right-sidebar{
float:right;
margin-right:20px;
}
Tools:
You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
Custom CSS:
This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.
1 Comment
Phil
January 15, 2013Thanks for posting this! However when I do this coding… I adds the spacing to ALL my pages and even messes up the home page.
Is there any way to do it so it only effects the BLOG page?