http://www.renet-web.net/2007/06/05/how-to-widgetise-grid-focus-wordpress-theme/
It seems that after much debate and a multitude of emails, Derek Punsalan decided to release his Grid Focus Wordpress theme to the general public. I, for one am grateful for this as the Grid Focus theme has now become the base theme for my new site design. It’s work in progress and I still have a few things I want to try out before I can call it complete.
One of the things I wanted to add to this theme, was support for widgets. Grid Focs is a 3 column theme. Out of the box, the two right most columns contain hard coded elements. But what if you wanted to change the content of those two columns regularly with no fuss? Widget support is the ticket.
So, inline with Derek’s philosophy here is my contribution to the theme: I bring you, how to widgetise the Grid Focus wordpress theme. In this tutorial I will show you how you can add widget support to the columns shown in red in the picture below.
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=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_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=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> <li><a href=”#” mce_href=”#”>Link Title</a> - Link description (optional)</li> </ul> </div> <div class=”middle_links”> <h3>Subscribe</h3> <p>Stay updated on my meandering thoughts & 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” mce_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/” mce_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” mce_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/” mce_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.
I have included has a ‘help’ an archive file that contains all three created/modified files. You can grab that archive file by clicking on the shopping cart below.
Prev
Rss Feed