ThemeShaper Forums » Thematic

[closed]

Adding an extra sidebar?

(16 posts)
  • Started 4 years ago by jdunbar
  • Latest reply from spantry
  • This topic is resolved

Tags:

  1. 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?

    Posted 4 years ago #
  2. Easiest would be to just buy the Thematic Power Blog theme, which does exactly that. Check out its sidebar: http://themeshaper.com/demo/powerblog/

    Posted 4 years ago #
  3. 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.

    Posted 4 years ago #
  4. 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.

    Posted 4 years ago #
  5. 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;
    	}
    
    Posted 4 years ago #
  6. 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.

    Posted 4 years ago #
  7. 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

    Posted 4 years ago #
  8. 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

    Posted 4 years ago #
  9. 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

    Posted 4 years ago #
  10. 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?

    Posted 4 years ago #
  11. Figured it out, it was just some extra spaces after a php tag. Phew, easy fix!

    Posted 4 years ago #
  12. 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 :)

    Posted 4 years ago #
  13. Haha.. it took me more then 10 minutes to post 2 phrases :)

    Some times I'm surprising my self!

    Posted 4 years ago #
  14. 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

    Posted 4 years ago #
  15. Add:

    #tertiary-left {
    clear:right;
    }

    This should work... but make sure you test it on all the browsers.

    Posted 4 years ago #
  16. Worked like a charm. Thanks a million!

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.