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 incmVFRDTDUDr6V&6f&rРFb673&֖FFUƖ2#Рƃ3W"66RƖ33РW"66RƖ2WB&VFW'2rvBFW6VB&R&VFrW"6FRРVРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРVРFcРFb673&֖FFUƖ2#Рƃ3W"66RƖ33РW"66RƖ2WB&VFW'2rvBFW6VB&R&VFrW"6FRРVРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРƓ&Vc"2#ƖFFSƖFW67&FFƓРVРFcРFb673&֖FFUƖ2#Рƃ37V'67&&S3Р7FWFFVBגVFW&rFVvG2f7FfFW2f%527F6FRРVРƓ&Vc&fVVC&vfw'73%W&r"FFS$gV6FVB%52fVVB#6FVB%537G&vBFW"&VFW#ƓРƓ&Vc&fVVC&vfv6VG5'73%W&r"FFS$gV6VG2%52fVVB#6VG2%53FBFFRF67W76ƓРVРFcРFb673&֖FFUƖ2#Рƃ3WF3РVРw&Vv7FW"РƓwvWBƓРwWFРVРFcУFcР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.
This site's design and contents are copyright © 2002-2007 Pascal Renet. 
June 6th, 2007 at 2:22 pm
Ooooh I could kiss you right now! Fabulous, I’m gonna go give that a try!
June 7th, 2007 at 8:00 am
I can confirm that it definately works, very easy to setup. The standard WP widgets however look really ugly! >_
June 7th, 2007 at 10:11 pm
Glad to hear this was helpful.
You can always tweak the css of the widgets to your liking!
June 8th, 2007 at 10:15 pm
Yes thank you! Thank you for this tutorial. Very simple and clear.
June 8th, 2007 at 11:32 pm
Not a problem…Glad you found it useful.
June 8th, 2007 at 11:59 pm
Just a question. How do I get Grid Focus to display the pages of my blog like you did at the top navigational bar?
June 9th, 2007 at 12:09 am
Not sure I understand your question Jessie.
Do you want to know how to customise the navigation bar? If not can you be more specific?
June 9th, 2007 at 11:51 am
Ah, sorry for being unclear. Yes I was talking about how to customize the navigation bar because I thought that the theme would automatically display my pages, but I guess not. Thanks in advance!
June 9th, 2007 at 7:16 pm
The links in the navigtion bar are hard coded. I you want to edit those you have to edit the file called header.php
Look for the tag
<ul class="nav fix">.The lines immeadiatly after it represent the links that appear in the navigtion bar. Hope it helps.
June 11th, 2007 at 4:04 am
Good design, Pascal - you’ve really put a good spin on the theme
Only (constructive) criticism is that you’ve got a little bit of horizontal scrolling, despite that I really like it!
June 11th, 2007 at 4:31 am
Thanks Steve, but this is only temporary. I’m working on a new theme at the moment.
What do you mean horizontal scrolling? How many pixels can you display on your Macs?
June 11th, 2007 at 5:42 am
Ah no. Im on a PC at the moment (at work) and its displaying in 1024×768. Looks to be about 50px horizontal scrolling.
June 12th, 2007 at 8:33 am
I’m trying to implement this on my site, but the WP admin is still alerting me to the fact that: “You are seeing this message because the theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions.”
Any thoughts on why I’d be seeing this? I am using grid_focus on WP 2.2
June 12th, 2007 at 3:43 pm
Jared, it’s always difficult to help someone when one person says he should be seeing black and the other person says he is seeing white. Did you change the 2 files mentioned and add the 3rd one?
June 13th, 2007 at 5:25 am
[...] How to widgetise Grid Focus wordpress theme at renet@web (tags: hacks widgets wordpress themes) [...]
June 14th, 2007 at 7:23 am
Thanks for the widget information! This is spectacular and the instructions seem to be understandable. Someone was asking about the nav function–If I want my pages to be displayed in a nav above the blog info, where might I find that code? I appreciate your help!
June 14th, 2007 at 4:29 pm
Hey Robin,
Not sure I get you. Where do you want to add the pages? Do you want to add them in he navigation bar? Let me know ad I’ll tell you what to do. (maybe you can just put a text like ‘navigation pages here’ in your blog so I can see exactly where you want to put them).
Cheers
June 15th, 2007 at 11:52 am
i thought of moving my nav bar from where they are now to the top of the page, similar to yours. though, now that i’m thinking about it, i’m considering leaving the nav bar where it is and inserting a header image, though not as big as yours!
my other question is that it appears that all of my text is now “centered” and i don’t know why. AND, does it require a widget to show the feature or latest post? or, is there a way to allow more the post to be seen instead of always having to click on the title of the post?
June 15th, 2007 at 6:39 pm
Hey Robin,
I’ve shot you an email with my answers.
Hope it helps.
June 19th, 2007 at 5:11 am
ER…..
dear sir, i don’t know about the WP to much,could u tell me when i finish what u said,what should i do ? i go to the ‘Widgets’ section (under Presentation) in the admin part of my site and how could i add the widgets ?
thank u
my email
xl.sensebb@gmail.com
June 19th, 2007 at 7:25 am
Yes that is correct, then just click and drag the widgets you want to the sidebar where you want them displayed. Save your settings and that should do the trick.
June 19th, 2007 at 3:48 pm
Yeah，but i didn’t find the ‘Widgets’ section….
June 19th, 2007 at 4:34 pm
If the under the “Presentation” menu, you do not see the sub menus “Themes” “Theme Editor” and “Sidebar Widgets”, it means that what you did is not correct - Wordpress does not recognise your theme as Widget Ready.
June 19th, 2007 at 4:43 pm
The wp what i’am using is 2.2 , i see the sub menus “Themes” “Theme Editor” but not the“Sidebar Widgets”,i don’t know why
June 19th, 2007 at 4:52 pm
my website is http://www.feixiaomi.cn and i used the three files from ur site,i don’t know why there is “Sidebar Widgets”. Could u help me to check it ? THANK YOU !
June 19th, 2007 at 5:01 pm
It’s not going to work. My post deals with the customising of the grid focus theme. On your blog I see that you are using the old default wordpress theme. Sorry, but my post and the files I have made available for download will not work on your site.
June 19th, 2007 at 5:12 pm
I’m sorry sir. i just deleted the the grid focus theme on my ftp and put it again for trying again. I see ur emai.THANKS A LOT and sorry for my poor english.
June 19th, 2007 at 7:16 pm
Dear sir
i have done with this problem,it’s wrong with my wp2.2.haha,THANK YOU VERY MUCK
June 19th, 2007 at 7:59 pm
Hey guys,
i’d applied all those codes to the right files, then i uploaded.
but still i can see that message under the “Widgets” section
“No Sidebars Defined”
I use wordpress 2.2
how can i solve this problem guys ?
tack!
June 23rd, 2007 at 7:09 am
My widgets are working but everytime u post a new news item or page etc it will disable all the widgets, so you have to reassign them to each sidebar. It’s quite annoying and no one can give us any help to why it’s doing it. Has anyone else had this problem?
June 23rd, 2007 at 9:54 am
Hey Ed,
Bummer. It’s not happening on my test server and I’ve never heard of this.
It’s time consuming but you can try to de-activate all your widgets, then activate them one by one, write a post and see what happens - maybe one of the widgets is an issue. Do the same with plugins.
Keep us posted.
July 1st, 2007 at 12:27 am
You’re a liar! I took me even less than 5 minutes ;-)) Thank you very much!
cu
Sascha
July 1st, 2007 at 6:28 pm
Ah, but I see that you have an unfair advantage - you’re a ‘Diplom-Informatiker’.
Glad to hear it was useful.
Cheers.
July 21st, 2007 at 6:19 pm
[...] 现在用的主题是5thirtyone.com的Grid Focus，这么好的主题却不支持widgets，确实比较遗憾，幸好有人已经修改好了，见How to widgetise Grid Focus wordpress theme，具体步骤就是： [...]
July 28th, 2007 at 12:33 pm
Thanks for the widget ready instructions. Quick question, how can you create more white space between the widgets?
July 29th, 2007 at 8:32 am
Hey Matt,
Don’t know, plus I am not using that theme. Post the link to you grid focus site and I’ll see what I can do.
July 29th, 2007 at 12:34 pm
fadedrequiem.com/zoetrope don’t bang it too hard, it’s for a film class I teach, thanks!
July 30th, 2007 at 1:19 pm
That did the trick, thanks!
August 22nd, 2007 at 2:23 am
Great info! I’m interested in using the Grid Focus theme for my site, but I’m not certain yet whether it will work for my needs.
Once I implement these changes, will I be able to change the links in the sidebar via the dashboard, or are they still hard-coded? Or do I just need to grab a widget to handle them?
Also, and I see this question posted above, but not an answer, I’m also interested in adding my pages to the nav bar at the top (instead of just links). How would one implement that?
Thanks!
August 25th, 2007 at 5:38 am
I love the widgets and thank you for posting it. I do have a problem however. In order for my to post updates i need to delete the functions.php file, then post, then upload the functions.php again. In fact i cant even login with the wordpress admin.
Im also curious about another issue. i have a bible verse of the day widget and it does no change each day… im curious if this is related.
Any thoughts?
August 25th, 2007 at 10:13 am
Sorry Elliott, but I do not use that theme anymore and I must say I never encountered the issues that you are having.
Having to reload the functions file everytime certainly seems drastic!
September 1st, 2007 at 7:00 am
Hi is it possible to make the postimgae show up? and just not text, I want to post videos or photos, and it seems kind of disturbing having to click the title of the post, any ideas?
THANKS!
September 1st, 2007 at 6:40 pm
The short answer is yes.
I assume that you are posting the excerpt of the message, hence the reason why you are not getting an image where you expect one. You just have to change the function used to output the message to something like the_content instead of the_excerpt.
Rgds.
September 20th, 2007 at 12:54 pm
anybody know why my text is so tight on the sidebars. I’d like some space between widgets and between the title on body copy of my text widgets.
September 22nd, 2007 at 3:22 pm
Also, can’t get the RSS widget to work. Says it can’t find my feed address.
October 4th, 2007 at 10:25 am
this hack is great but I would like it to suit the theme bettter fir that I would need to be able to space the widgets a little more, can it be done via CSS? thanks a lot for the help
October 4th, 2007 at 11:33 am
I am working with lots of asian character posts and I got this error “Warning: Cannot modify header information - headers already sent by (output started at /homepages/44/d194959663/htdocs/journal/wp-content/themes/grid_focus mod/functions.php:3) in /homepages/44/d194959663/htdocs/journal/wp-admin/theme-editor.php on line 55″
and all asian character are gibberishwhich is unfortunate because the widgets seem to work fine.
October 8th, 2007 at 12:57 pm
Changing took less than a minute… too bad.. as I finished editing my files i saw that you offer them as a download
lol
November 1st, 2007 at 4:49 am
Great guy you were, you solved my problem. I did anything right in Ist try, I wanted to creat website showcase like cssremix, cssmanic etc. Soon I will upload this.
I am really thankful to you.
Thanks
Shafaat Awan
November 1st, 2007 at 6:29 am
Well explained and easy to do! This is my first try at editing a theme.
Many Thanks.
November 10th, 2007 at 5:39 am
Thanks you so much!!!!!
November 19th, 2007 at 10:41 am
This worked, Thanks!
January 2nd, 2008 at 11:33 pm
Good theme.
January 9th, 2008 at 1:42 am
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?
January 9th, 2008 at 2:03 am
It looks like whatever is in the first sidebar is also place in the second one as well.
January 9th, 2008 at 8:22 am
@Bradley, I just checked your site - things looks OK to me.
Can you be more precise?
January 19th, 2008 at 2:53 am
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!
January 20th, 2008 at 7:06 am
[...] Widget Ready: No (tutorial to make it widgetised) [...]
January 21st, 2008 at 3:14 am
Awesome, Dude…it REALLY took less than five minutes
February 1st, 2008 at 11:18 am
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.
February 7th, 2008 at 7:16 am
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.
February 19th, 2008 at 9:23 pm
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.
March 7th, 2008 at 1:47 am
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,
March 12th, 2008 at 6:32 pm
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!
March 16th, 2008 at 4:45 am
Just wanted to add another thanks. Your guide was very helpful
March 16th, 2008 at 8:30 am
Thanks Jay, much appreciated
March 20th, 2008 at 11:42 am
AWWWWWSSUUUUMMMMM!!!!
Thanks, you just saved me a few hours of back-breaking coding
April 5th, 2008 at 11:21 pm
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?
April 8th, 2008 at 8:50 pm
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!
April 18th, 2008 at 2:34 am
It works on WP 2.5 using the latest Grid_Focus theme. Thank you!!
April 19th, 2008 at 9:01 am
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’ => ”,
));
?>
April 19th, 2008 at 9:03 am
Damn it didnt show my html tags. I used the tag. Before the first tag and after the last
May 19th, 2008 at 2:33 am
Hey, i wonder how i can make the widgets look like the links in the original theme.
June 12th, 2008 at 8:18 pm
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