Langs Vlaamse Wegen

January 21st, 2007 at 2:33 am

Hello,
I found your site from the Misty Look thread from Wordpress. I really like what you did with the theme (especially the 3 columns and widening the main area). Can you provide me some tips on how I can do the same?

Thanks!

January 26th, 2007 at 3:22 pm

Hi Again,

Sorry for the late reply, but I seem to have forgotten to write out how I did it Well I decided to put it here as an additional comment, so other people might see it as well.

The changes I made required a few things, so I’ll try to explain them to you :

First of all I added a leftbar.php file to the mistylook. In that file I have something like this :


<div id="mainbar">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Main Sidebar') ) : else : ?>
<li class="sidebox">
<p><b>Ontvang automatisch en gratis de laatste aflevering via :</b></p>
</li>
<?php endif; ?>
</ul>
</div>


As you can see, I have created it so that the Left SideBar is aware of widgets ( if you use the widget plugin for wordpress, you can drag and drop widgets on the left sidebar ). But I added some default items to it as well, just in case people don’t have the widgets thingie. As you can see each sperate block consists of a list item which will use the SideBox CSS. So each <li class=”sidebox”> … </li> will get displayed as a little block in the left sidebar.

This was only the first step though. Now I had to add the registration of the new SideBar to the Funtions.php file :


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Main Sidebar',
'before_widget' => '<li class="sidebox">', // Removes <li>
'after_widget' => '&lt/li>', // Removes </li>
'before_title' => '&lth2>',
'after_title' => '&lt/h2>',
));
register_sidebar(array(
'name' => 'Right Sidebar',
'before_widget' => '&ltli class="sidebox">',
'after_widget' => '&lt/li>',
'before_title' => '&lth2>',
'after_title' => '&lt/h2>',
));


You should have the Rigt Sidebar thingie already in there, and the only thing I did was add the other one as well.

Next we need to make sure that the left sidebar is shown as well. So now I edited the Main Index Template ( index.php ) and changed it so that the left sidebar is displayed before the main content. This should look something like this :


<?php get_header();?>
<div id="content">
<?php include (TEMPLATEPATH . '/leftbar.php'); ?>
<div id="content-main">


So here you see I have added the leftbar.php line so that it gets displayed.

Finally I did some tweaks in the Style.css

The most important one being the width of the #container so that I had a little more room on my page to add a left sidebar :


#container {
border: #ddd 1px solid;
background: #fff;
margin: 0 auto;
width: 980px;
position: relative;
text-align: left;
}


Well, as far as I can remember, that’s about the only changes I made. If that doesn’t work for you, feel free to let me know, and I’ll see if I can help you.

Regards,

Stefaan

January 26th, 2007 at 4:03 pm

Many thanks for providing such detailed instructions! I haven’t customized my Wordpress blog too much so I’m rather inexperienced. But what you’ve written out makes sense to me and I can’t wait to try it. Thanks again!

July 24th, 2007 at 10:02 am

hallo,

Zou je mij toevallig ook die raad kunnen geven wat betreft het aanmaken van die extra kolom (bij voorkeur via email, ik kan niet alles lezen bij de comments). Het is erg knap wat je ermee gedaan hebt,

alvast bedankt, jan