How to widgetise Grid Focus wordpress theme

[car]

It’s very simple and you can probably do it in 5 minutes. Remember before you start, to backup all the files you will require to modify - I will not be held responsible if it does work. This has been tested on my web site running wordpress version 2.2.

Ok, let’s get started.

Step 1:
The first thing you need to do is to create a file called ‘functions.php’ in which you have add the following code. This is a file that Wordpress looks for and reads it if it finds it:

<?php
if ( function_exists('register_sidebar') )
    register_sidebars((2),array(
        'before_widget' => '<div class="sidebar_widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

Once you have done that, save your file and upload it in the same folder that holds your theme.

Step 2:
In this step you will need to modify the file originally provided with the theme called ’second.php’. This step really is up to you as it depends on much of the original structure you want to keep. For example you might want to keep the link sections and add widgets, you might want to keep the meta section and add widgets - it’s up to you. In my case, I have kept the search form and added widget capability.

The original code of the file ’second.php’ was:


<div id="midCol">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<div class="middle_links">
<h3>Your choice links</h3>
<p>Your choice links. Let readers know what they should be reading on your site.</p>
<ul>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
</ul>
</div>
<div class="middle_links">
<h3>Your choice links</h3>
<p>Your choice links. Let readers know what they should be reading on your site.</p>
<ul>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
<li><a href="#">Link Title</a> - Link description (optional)</li>
</ul>
</div>
<div class="middle_links">
<h3>Subscribe</h3>
<p>Stay updated on my meandering thoughts &amp; activities via RSS (Syndicate).</p>
<ul>
<li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="Full content RSS feed">Content RSS</a> - Straight to your reader</li>
<li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="Full comments RSS feed">Comments RSS</a> - Add to the discussion</li>
</ul>
</div>
<div class="middle_links">
<h3>Meta</h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</div>
</div>
After my changes, my file now looks like:


<div id="midCol">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
</div>
Step 3:
In this step you will need to modify the file originally provided with the theme called ‘third.php’. Again, this depends on you - on how much of the original file you want to keep. In my case, I have kept the original file structure (i.e the option to add picture links) and simply added widget capability before the links.

The original code of the file ‘third.php’ was:


<div id="tertCol">
<div id="elseWhere">
<h3>Before you go</h3>
<p>Going so soon? May these links be a guide to web enlightenment. Schwing!</p>
<ul id="imgLinks">
<li><a href="http://5thirtyone.com/grid-focus" title="Download Grid Focus by: Derek Punsalan"><img src="<?php bloginfo('template_directory'); ?>/images/guide/grid_focus_531.gif" alt="Grid Focus - 531" /></a></li>
<li><a href="http://is.derekpunsalan.com/" title="Visit Derek Punsalan...is"><img src="<?php bloginfo('template_directory'); ?>/images/guide/is.gif" alt="Derek Punsalan...is" /></a></li>
</ul>
</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->
After my changes, my file now looks like:


<div id="tertCol">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
<div id="elseWhere">
<h3>Before you go</h3>
<p>Going so soon? May these links be a guide to web enlightenment. Schwing!</p>
<ul id="imgLinks">
<li><a href="http://5thirtyone.com/grid-focus" title="Download Grid Focus by: Derek Punsalan"><img src="<?php bloginfo('template_directory'); ?>/images/guide/grid_focus_531.gif" alt="Grid Focus - 531" /></a></li>
<li><a href="http://is.derekpunsalan.com/" title="Visit Derek Punsalan...is"><img src="<?php bloginfo('template_directory'); ?>/images/guide/is.gif" alt="Derek Punsalan...is" /></a></li>
</ul>
</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->
All you now have to do, is to go to the ‘Widgets’ section (under Presentation) in the admin part of your site and add the widgets you want.