HOWTO : Definitive technique to add a sidebar in WordPress (widget ready)
In recent weeks I was looking for some trick to add a sidebar (sidebar) in a theme for WordPress, as the one I use, which has originally one sidebar (that at the moment is to the left).
After cheisto around and even in the official WordPress Italy Forum, I have not found any solution that really worked, and that was widget-ready, that allow you to view the Widgets in the sidebar of the admin panel, and add (successfully) any widget.
In the best case, appeared to sidebar, but there were only the calendar and blogroll, and any widget aggiungessi, did not display. In other cases, adding the widget and clicking on SAVE, appeared to be a php error, sign that something was wrong!
Combining the advice found in and around those this article, I have come to a solution “staff”, and that has resulted in the new sidebar, that in this theme appears to the right of the articles.
First you need to go to the folder of your WordPress theme and, if not exist, create a new file called functions.php composed:
<?php
if ( function_exists('register_sidebar') )
{
{
register_sidebar(array(
'name' => 'Before',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_title">',
'after_title' => '</h2>',
));
}
{
register_sidebar(array(
'name' => 'Second',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_title">',
'after_title' => '</h2>',
));
}
}
?>
As you can see, in the field 'name’ should indicate the names to easily identify the sidebar, e i campi ‘before/after’ serve to define the widget css styles, and are related to your style sheet. for example, in my case:
.widget {margin-bottom: 1in; font-size: 0.9in;}
.widget ul {padding-bottom: 0;}
.side_title {
background: url('img/decay.gif') no-repeat left center;
color: #F00;
font: normal 2em Impact,sans serif;
letter-spacing: 1px;
padding: 0 0 12px 22px;
}
h2.side_title {
background: url('img/decay-small.gif') no-repeat left center;
padding-top: 6px;
}
Assuming that your default theme has only one sidebar, I should go to rename the file sidebar.php in sidebar1.php.
This file is the first original sidebar (in my case the left sidebar).
We must then create a file called sidebar2.php made this code:
<div id="navigation_right">
<Ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>
</Ul>
</div>
Where I added the div navigation_right and is relevant to my style sheet, and roughly makes absolute positioning of the sidebar:
#navigation_right {
left: 840px;
position: absolute;
top: 340px;
width: 190px;
overflow: visible;
}
Now all that remains is to add both pages in the sidebar template of your theme (is. index.php page.php single.php archive.php).
You have to replace, in these pages, the code that is located more or less in the final part of the code, and which has a get_sidebar with:
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
Done? Now simply go into the admin panel, Widget Section, and you should see, in the upper right, a window to select one of two sidebar. Try adding the widget, and you will see that, used as the theme here in my site, appear two sidebar to the right and left of the text.
Any suggestions, experiments, any other business? Write them well in the comments!