I would like to arrange my sidebars so that I have the primary spanning the full width, and two narrower secondary sidebars beneath that. Here's an image of the Arthemia theme for reference. The right hand column beneath "Browse Categories" is what I'd like to recreate on my own blog, if possible.
Does anyone know how I might go about doing this?
Easiest would be to just buy the Thematic Power Blog theme, which does exactly that. Check out its sidebar: http://themeshaper.com/demo/powerblog/
Zombaya
Member
Hi,
I have made something to add two extra sidebars, but i didn't make the css for it. It adds two extra sidebars beneath the main asides. The code for this is:
<?php
/****************************
**** Tertiary Sidebars ******
****************************/ ?>
<?php //test to add extra sidebars
if ( function_exists('register_sidebar') )
{
register_sidebar(array(
'name' => 'Tertiary Aside Right',
'id' => 'tertiary-aside-right',
'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
'after_widget' => "",
));
register_sidebar(array(
'name' => 'Tertiary Aside Left',
'id' => 'tertiary-aside-left',
'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
'after_widget' => "",
));
}
?>
<?php function add_tertiary_aside() {
if (is_sidebar_active('tertiary-aside-left')) { ?>
<div id="tertiary-left" class="aside main-aside tertiary">
<ul class="xoxo">
<?php dynamic_sidebar('tertiary-aside-left') ?>
</div><!-- #tertiary-left .tertiary .aside -->
<?php }
if (is_sidebar_active('tertiary-aside-right')) { ?>
<div id="tertiary-right" class="aside main-aside tertiary">
<ul class="xoxo">
<?php dynamic_sidebar('tertiary-aside-right') ?>
</div><!-- #tertiary-right .tertiary .aside -->
<?php }
} ?>
<?php add_action ( 'thematic_belowmainasides', 'add_tertiary_aside' ); ?>
If you put that code in your functions.php of your child theme, it should work.
The two extra sidebars are called "tertiary-aside-right" and "tertiary-aside-left". They both have class "Aside" and "Tertiary" and their id's are "tertiary-left" and "tertiary-right".
You can also put the two sidebars between the primary and secondary aside if you change the hook called for adding the sidebars.
To do this you have to change this:
<?php add_action ( 'thematic_belowmainasides', 'add_tertiary_aside' ); ?>
To
<?php add_action ( 'thematic_betweenmainasides', 'add_tertiary_aside' ); ?>
For above it: change it to:
<?php add_action ( 'thematic_abovemainasides', 'add_tertiary_aside' ); ?>
I did not actually test those 2 last ones, but i'm sure they will work.
If you make css to get those two sidebars of half the width and stuff, they'll probably look good and the way you want.
However, it's not all the way it should be! Thematic makes it's sidebars with an extra function:
register_sidebar(array(
'name' => 'Secondary Aside',
'id' => 'secondary-aside',
'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
'after_widget' => "",
'before_title' => thematic_before_title(),
'after_title' => thematic_after_title(),
));
Using the function "thematic_before_title()" gave me an error. I think it will change something, although I don't know what exactly.
Zombaya
Member
Well, I found out what those functions do: They change the title's <h2>'s to <h3>'s. But the problem is that they are declared in another file so you can't declare them again.
So I declared the functions thematic_before_title2() and thematic_after_title2() like this:
Add before all the other code:
<?php
function thematic_before_title2() {
$content = "<h3 class=\"widgettitle\">";
return apply_filters('thematic_before_title', $content);
}
function thematic_after_title2() {
$content = "</h3>\n";
return apply_filters('thematic_after_title', $content);
}
And then add this to the register_sidebar array's
'before_title' => thematic_before_title2(), 'after_title' => thematic_after_title2(),
If someone could tell me how to get the functions declared in the other file, that would also be great.
Zombaya
Member
I made my css-file and I'll post it here so you can see what you need from it. To get the left sidebar left, I had to change the order for calling the creation of sidebars inside the function add_tertiary_sidebar().
Good luck with it!
/*********************************
************* Sidebar ************
**********************************/
#primary .widgetcontainerli a,#primary .widgetcontainer li a ,.tertiary .widgetcontainerli a,.tertiary .widgetcontainer li a {
text-decoration:none;
color:#A91B33;
height:100%;
padding:0.3125em 0;
line-height:2.125em;
padding:0 0px;
}
#primary .widgetcontainer li a:hover,#primary .widgetcontainerli a:hover, .tertiary .widgetcontainer li a:hover,.tertiary .widgetcontainerli a:hover {
color:#866b62;
text-decoration:none;
}
#primary, .tertiary {
border: none;
margin: 0 !important;
padding:0 10px;
}
aside {
width:300px;
padding:0 10px 10px 10px;
}
.aside ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.widgetcontainer {
width:278px;
float:left;
background:#FFFFFF url('images/sidebar_box_widebackground.png') repeat-x;
padding:10px 10px 0px;
border:1px solid #CECEC0;
margin: 0px 0px 10px 0px;
left: 0;
}
.tertiary .widgetcontainer {
width:125px;
background:#FFFFFF url('images/sidebar_box_skinnybackground.png') repeat-x;
border:1px solid #CECEC0;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px;
}
#tertiary-left {
width: 145px;
padding: 0px 5px 0px 10px;
}
#tertiary-right {
width: 145px;
padding: 0px 10px 0px 5px;
}
.aside h3 {
margin:2px 0;
padding:0.25em 0 0.25em 5px;
font-style:normal;
font-weight:bold ;
font-size:1em ;
color:#FFFFFF;
font-family:helvetica,arial,sans-serif;
text-transform:uppercase;
letter-spacing:0em ;
line-height:1em;
background:#2A2A2A;
}
.aside h3 a {
color:#FFFFFF;
text-decoration:none;
}
.aside h3 a:hover {
color:#3A54B9;
text-decoration:underline;
}
Zombaya, I pasted the code from your first post into my functions.php, but when I clicked "update file" I received a syntax error. I know nothing about php, so I don't know how to troubleshoot that.
Don't use the "edit theme files" functionality to paste code into a theme file unless you're absolutely sure what you're doing.
Get a good editor like PSPad or Notepad++ and try it on a local XAMPP installation first.
Guess you have at least one <?php too much.
Chris
Thanks Zombaya for posting this code, it works great. However, it seems to have broken something. When I go to the admin side of my site, it's just a blank page, I have no way to log in!
I know nothing about PHP, but if anyone can help me with this, that'd be great.
I'm currently just working with my test site: http://sustainablepantry.com/test
Thanks!
Matthew
You could temporarily set error messages display on in your wp-config to help you find out whats going on.
@ini_set('display_errors','On');
ref: http://codex.wordpress.org/Editing_wp-config.php#Configure_Error_Log
Thanks for that tip. Here's the error I'm getting:
Warning: Cannot modify header information - headers already sent by (output started at /home/traditi6/public_html/sustainablepantry.com/test/wp-content/themes/spchildtheme/functions.php:56) in /home/traditi6/public_html/sustainablepantry.com/test/wp-includes/pluggable.php on line 662
Line 56 in the functions.php is:
<?php function add_tertiary_aside() {
if (is_sidebar_active('tertiary-aside-left')) { ?>
<div id="tertiary-left" class="aside main-aside tertiary">
<ul class="xoxo">
and line 662 in the pluggable.php is:
setcookie($auth_cookie_name, $auth_cookie, $expire, PLUGINS_COOKIE_PATH, COOKIE_DOMAIN, $secure, true);
Anybody know how I can fix this?
Figured it out, it was just some extra spaces after a php tag. Phew, easy fix!
You must NOT have spaces after the latest ?> closing tag inside the functions.php Check the bottom of your functions.php for this.
This normally solves my Headers problems :)
Haha.. it took me more then 10 minutes to post 2 phrases :)
Some times I'm surprising my self!
Ha! Yep, I guess that's a common mistake to fall into...thanks for the help! I'm having another small issue now though, that I only caught after I updated my main site's theme.
When the main content is shorter than the aside widget content, the alignment of the tertiary asides gets messed up.
Here is an example: http://sustainablepantry.com/category/leftovers/
It seems like there's probably an easy fix for this too, but I don't really know where to begin. Any help would be greatly appreciated.
Thanks!
Matthew
Add:
#tertiary-left {
clear:right;
}
This should work... but make sure you test it on all the browsers.
Worked like a charm. Thanks a million!
This topic has been closed to new replies.
