I am using a theme called Magazeen. It is a 2 column theme but I want to add a 3rd. I did some googling and found some advice, but the coding in this theme appears different. I tried but can't get it to work. The original coding relating to the column: Functions.php if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h5 class="widgettitle">', 'after_title' => '</h5>', )); PHP: sidebar.php <?php /** * @package WordPress * @subpackage Magazeen_Theme */ ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> PHP: Index.php <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar(); ?> </ul><!-- End sidebar --> </div><!-- End col-340 (Right Column) --> PHP: Would someone let me know what I need to add. I have created 2 files called lsidebar.php and rsidebar.php and added: <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> PHP: and <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?> PHP: in each And in functions.php: if ( function_exists('register_sidebars') ) register_sidebars(2)(array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h5 class="widgettitle">', 'after_title' => '</h5>', )); PHP: The problem I have is I think, is what the index code should be - so any advice would be helpful.
Increase the container width in the stylesheet (style.css). Just for testing, we will use a copy of the existing sidebar so make it 1280px (940px + 340px): .container { /* The container is a class simply because of the multiple full-span elements.*/ margin:0 auto; padding:0; width:1280px; height:auto; } Code (markup): Rename sidebar.php to sidebar-right.php and change the opening line to: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?> Code (markup): Copy it and call the new file sidebar-left.php but change the opening line to: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Sidebar') ) : ?> Code (markup): In index.php, change the existing code to load the right sidebar and add new code for the left sidebar: <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar('right'); ?> </ul><!-- End sidebar --> </div><!-- End col-340 (Right Column) --> <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar('left'); ?> </ul><!-- End sidebar --> </div><!-- End col-340 (Left Column) --> Code (markup): In functions.php, replace the register sidebar code with this: if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Right Sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h5 class="widgettitle">', 'after_title' => '</h5>', )); register_sidebar(array( 'name' => 'Left Sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h5 class="widgettitle">', 'after_title' => '</h5>', )); } Code (markup): Hope that works! I have not tested it so I have probably missed something
Further to my PM. It HAS worked, but as you'll see from the link I sent to you - the main column is butted to the left, I want a border to see the background of around 20-30px. What about having the two sidebars as 240px, with the 580 for main posts = 1060px. I assume I change the container settings in the css to the new width - but how do I make the sidebars narrower?
You can reduce the width of each sidebar by 20px without any problems. .col-340 { width:320px; } Code (markup): But to make the sidebars any narrower, you would have to edit the background images, then go through and change the fixed widths of the elements. I'll try to fix the layout later on. It is a rigid theme which needs a bit of work
Just to add, I can reduce the widths of the background images without a problem. I've already tweaked some of them. I would prefer narrower sidebars if I could.
Ok, I have sussed out narrower sidebars but editing the images and tweaking the widths and padding. I have also increased the main post width. I'm quite chuffed actually! One question, how do I make one of the sidebars plain html? At the moment they are both widget ready, and when you try to add html items like chicklets it doesn't like it.
Great work That theme is a pain to change. In the sidebar files, the markup between these lines is shown when there are no widgets: <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> ... <?php endif; ?> Code (markup): Any markup added before or after that section will always be included, even if there are widgets present. Do you mean it gives an error or doesn't show up? Where are putting it?
I mean it doesn't show up. I tried by adding it into the source file using dreamweaver and uploading and also by using the editor directly into the file in the WP file editor, either way the code is there but none of the chicklets are shown. If you go to my main site page by removing the suffix, you'll see what I want to add. So with what you said in the previous post, do I need to put the html in the relevant sidebar before or after that code? Or do I remove that code to make it a non widget bar? What would be the best approach. (I think I'd prefer the flexibility of being able to do either).
The markup inside the dynamic sidebar block is just default stuff that is shown when no widgets are present. New markup before that block will appear above the first widget, and new markup after it will appear below the last widget. To have a widgetized sidebar with no default markup, remove the stuff inside the block or just comment it out. Leave the first line (if) and the last line (endif) for any future widgets. You can also add markup before or after <?php get_sidebar(); ?> in the index.php file, like this: <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar('right'); ?> <li><h5>Other Stuff</h5> CHICKLET MARKUP GOES HERE </li> </ul><!-- End sidebar --> </div><!-- End col-340 (Right Column) --> Code (markup):