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="#">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 & 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.
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.
Thanks you so much!!!!!
This worked, Thanks!
Good theme.
This article is a god send. This was exactly what I was looking for to improve my grid focus site. I got the widgets working in the sidebars but they are not displaying correctly for some reason. Any idea?
It looks like whatever is in the first sidebar is also place in the second one as well.
@Bradley, I just checked your site – things looks OK to me.
Can you be more precise?
Sorry about that RENET. I figured out what was wrong after I posted the comment. This is an amazing post I am very grateful that you made this so clear. kudos!
[...] Widget Ready: No (tutorial to make it widgetised) [...]
Awesome, Dude…it REALLY took less than five minutes
Hi, I am a newbie with Grid Focus. My pages do not show up in the nav bar automatically as they do with other themes (There are just link tabs). Also, my site has a small banner that I would like to retain. How do I get that into GF? Thanks for your help.
Hi, I’m trying to add a flickr widget from http://donncha.wordpress.com/flickr-widget/ in the grid focus theme but it won’t show pictures, I’ve already widgetize the theme but it won’t work, thanks for any help.
for those ones who wanted to get a white space between two different widgets:
it’s really simple, you have to work on functions.php.. i’ll give you the code
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
all i’ve done was just adding a before the title..if you wanna more space between the title and the widget, do the same thing after
mic.
Greetings,
Bit late on the scene here, but after giving this a shot I just needed to drop a line and say ‘Many thanks’.
This is a perfect addition to what seems a very smart theme. Only came across it this morning, and immediatley located your site after finding out about the widget status.
Instructions are clear and concise.
It works on WP 2.3.1.
Thanks again,
I use the exact code that you are suggesting and call it ‘functions.php’
I get the following error message though:
Warning: Unexpected character in input: ‘\’ (ASCII=92) state=1 in /wp-content/themes/grid_focus_public/functions.php on line 7
Parse error: syntax error, unexpected T_IF in wp-content/themes/grid_focus_public/functions.php on line 8
What am I doing wrong?
Thanks a lot for all your work!
Just wanted to add another thanks. Your guide was very helpful
Thanks Jay, much appreciated
AWWWWWSSUUUUMMMMM!!!!
Thanks, you just saved me a few hours of back-breaking coding :D
Works perfectly, the only problem is not grid with link in the sidebar like the original:
http://5thirtyone.com/grid-focus
This should be:
Categories
___________________________
Wordpress-Hack
___________________________
Is there any fix this?
Hi,
thanks for this, very concise. And Pascal kudos on replying to so many of your readers :)
I don’t know if anyone knows, but I am wondering how to get the horizontal scroll bar working – http://www.lazytrainer.org when I dont have it maximised the 3rd column automatically gets moved below the second.
Any tips would be greatly appreciated!
It works on WP 2.5 using the latest Grid_Focus theme. Thank you!!
Thanks for the easy TUT.
Here is how I added some white space between the widgets.
I edited the functions.php by adding. Simple tag. see below. Might be an ugly hack but it works.
”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
Damn it didnt show my html tags. I used the tag. Before the first tag and after the last
Hey, i wonder how i can make the widgets look like the links in the original theme.
thank you very much. thank you. thank you. thanks to your simple steps it took me 16m44seconds and 89/100 to do this.
:) all the best, wembley@twitter
Excellent guide. Worked perfectly in under 10 minutes.
[...] the theme was a little old and did not cater to WordPress widgets. Another quick google and I found this site, which explained how to widgetise the theme. I modified the steps slightly as the [...]
hey
I am using your mod on the site and it works really well… but
http://www.garysheynkman.com shows an error
garysheynk.com (sans www) works well
I can’t figure it out for the life of me… using latest wordpress.
I am thinking I missed something VERY simple.. but after going over the code a million billion time can’t figure out what it is…
It generates this messages after I post or edit anything on the site… yet works just fine without the “www”
Thanks!!!!!
nevermind… magically fixed
Great work doing that…hope it works well..I love the ability to edit my file and am not too much of a widget person…but then, let me see how the blog looks after its widget aware…
Thanks!
Thank you so much!
I am in the process of moving my blog over from WordPress.com to WordPress.org.
I am very grateful to you for posting this — you helped me tremendously.
Thanks, the mod really works on my site!
Guys, just glad to be of service and thanks for the comments.
Hi, I’ve tried to implement this but it seems it’s breaking wordpress. I get about 7 of these in a row:
Warning: Cannot modify header information – headers already sent by (output started at … wp-login.php on line 267
cheers for this, makes a big difference
Thx for wigdgetizing. Once again especially to Andy: Cold you explain again how to change the functions-php to add the space between the widgets? Trioed your code but i guess i filled it in at the wrong place. Thx a lot!
Hi, Im using the Grid Focus in Blogger. I would like my posts to enable comments, but I could not find a way to do that. Also, how can I widgetize Grid Focus for Blogger. Please send me email. Thank you.
@ Thomas: It’s been a while but you should be able to add a space by tweaking your css rules.
@ Aris: Sorry, I can’t help you there – I have no idea if blogger can be customised and if so, how.
great theme tweak, I think that it will be great if you submit your changes the the grid focus designer and he includes your code with the credits, it would be easier for everybody who know if is the begining of a new grid based grid focus 2.0 theme
THX for the nice “how to” !!!!!
basti
hi there renet
i was wondering if you could help me. i would like to add ‘subsections’ on the main header (on click, the black bar will appear). how do i customise the subsection in each ‘header title’? ive been trying to do this for 2 days and failed to do so. hope you can help. thanks.
Thank you for the great information!!
I am interested in adding widgets to my third column.
There is one widget I am interested in adding. It is called verse of the day. In the regular grid focus it shows there but in this version it does not.
What do I have to do in order to change that? Your help is greatly appreciated.
Sincerely,
cr
Hello renet,
I am interested in adding a button that says, subscribe or use your email to receive updates about the site. How do I do that?
Thanks,
cr
Dear Renet,
Somehow I guess but uninstalling the functions.php and installing it again, it made the widgets work.
My only other question is:
1. How to add a subscribe by email
2. How to add a line on top of the the widgets 3rd columns just as in the links on the 2nd columns.
Thanks,
Sincerely,
cr\
PS: You site has been of great help!!!
Thank you so much!!
Hi Carlos, thanks for your messages.
Just checked your sites, seems that you have already worked out your issues. Regarding the ‘subscribe to email’ issue, I would suggest the plugin route, I am sure there are dozens out there.
Cheers.
It works, great job !!! http://www.budujemy-sie.pl You can check this out. Thanks
RSS feed for comments on this post. / TrackBack URI