A little about me

pascal Hi, my name is Pascal and I am a SAP & Supply Chain specialist. I work for PLAUT and I do things others can't.

This blog only contains my personal views, thoughts and opinions. It is not endorsed by my employer nor does it constitute any official communication of PLAUT. You can contact me via email at pascal[at]renet-web.net or use the contact form that you will find by following the 'Contact' link and you can follow me on twitter here.

Click me

How to widgetise Grid Focus wordpress theme

Posted on June 5, 2007 | Category: Wordpress

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.

Widget Grid Focus

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.

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.

shopping cart

» Filed Under Wordpress

96 Responses to “How to widgetise Grid Focus wordpress theme”

  1. Parm Says:

    Ooooh I could kiss you right now! Fabulous, I’m gonna go give that a try! :)

  2. Parm Says:

    I can confirm that it definately works, very easy to setup. The standard WP widgets however look really ugly! >_

  3. Pascal Says:

    Glad to hear this was helpful.
    You can always tweak the css of the widgets to your liking!

  4. Jessie Says:

    Yes thank you! Thank you for this tutorial. Very simple and clear.

  5. Pascal Says:

    Not a problem…Glad you found it useful.

  6. Jessie Says:

    Just a question. How do I get Grid Focus to display the pages of my blog like you did at the top navigational bar?

  7. Pascal Says:

    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?

  8. Jessie Says:

    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!

  9. Pascal Says:

    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

    PHVsIGNsYXNzPSJuYXYgZml4Ij4=

    .
    The lines immeadiatly after it represent the links that appear in the navigtion bar. Hope it helps.

  10. Steve Tucker Says:

    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!

  11. Pascal Says:

    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?

  12. Steve Tucker Says:

    Ah no. Im on a PC at the moment (at work) and its displaying in 1024×768. Looks to be about 50px horizontal scrolling.

  13. Jared Says:

    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

  14. Pascal Says:

    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?

  15. links for 2007-06-13 « Tyrants & Tax Collectors Says:

    [...] How to widgetise Grid Focus wordpress theme at renet@web (tags: hacks widgets wordpress themes) [...]

  16. robyn Says:

    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!

  17. Pascal Says:

    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

  18. robyn Says:

    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?

  19. Pascal Says:

    Hey Robin,
    I’ve shot you an email with my answers.
    Hope it helps.

  20. chris Says:

    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

  21. Pascal Says:

    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.

  22. chris Says:

    Yeah,but i didn’t find the ‘Widgets’ section….

  23. Pascal Says:

    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.

  24. chris Says:

    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 :(

  25. chris Says:

    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 !

  26. Pascal Says:

    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.

  27. chris Says:

    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. :(

  28. chris Says:

    Dear sir

    i have done with this problem,it’s wrong with my wp2.2.haha,THANK YOU VERY MUCK

  29. MerovingiaN Says:

    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!

  30. Ed Cooper Says:

    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?

  31. Pascal Says:

    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.

  32. Sascha Says:

    You’re a liar! I took me even less than 5 minutes ;-)) Thank you very much!

    cu
    Sascha

  33. Pascal Says:

    Ah, but I see that you have an unfair advantage – you’re a ‘Diplom-Informatiker’.
    Glad to hear it was useful.
    Cheers.

  34. 换了个主题 Says:

    [...]    现在用的主题是5thirtyone.com的Grid Focus,这么好的主题却不支持widgets,确实比较遗憾,幸好有人已经修改好了,见How to widgetise Grid Focus wordpress theme,具体步骤就是: [...]

  35. Matt Says:

    Thanks for the widget ready instructions. Quick question, how can you create more white space between the widgets?

  36. renet@web Says:

    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.

  37. Matt Says:

    fadedrequiem.com/zoetrope don’t bang it too hard, it’s for a film class I teach, thanks!

  38. Matt Says:

    That did the trick, thanks!

  39. Danny Says:

    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!

  40. Elliott Says:

    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?

  41. renet@web Says:

    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!

  42. daniel Says:

    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!

  43. renet@web Says:

    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.

  44. Josh Says:

    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.

  45. Josh Says:

    Also, can’t get the RSS widget to work. Says it can’t find my feed address.

  46. laurent Says:

    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

  47. laurent Says:

    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.

  48. Marco Says:

    Changing took less than a minute… too bad.. as I finished editing my files i saw that you offer them as a download :| lol

  49. Shafaat Awan Says:

    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

  50. Marco K. Says:

    Well explained and easy to do! This is my first try at editing a theme.

    Many Thanks.

  51. nicole Says:

    Thanks you so much!!!!!

  52. Werd Says:

    This worked, Thanks!

  53. SMASHINGAPPS.COM Says:

    Good theme.

  54. Bradley Woods >> Conceive, Believe, Achieve Says:

    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?

  55. Bradley Woods >> Conceive, Believe, Achieve Says:

    It looks like whatever is in the first sidebar is also place in the second one as well.

  56. renet@web Says:

    @Bradley, I just checked your site – things looks OK to me.
    Can you be more precise?

  57. Bradley Woods >> Conceive, Believe, Achieve Says:

    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!

  58. Grid Focus WordPress Theme | Blog Themes Plus Says:

    [...] Widget Ready: No (tutorial to make it widgetised) [...]

  59. Michael Oeser Says:

    Awesome, Dude…it REALLY took less than five minutes

  60. Josh Says:

    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.

  61. Claudio Says:

    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.

  62. honeymoonchild Says:

    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.

  63. Graham Smith Says:

    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,

  64. Fredrik Says:

    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!

  65. Jay Says:

    Just wanted to add another thanks. Your guide was very helpful

  66. renet@web Says:

    Thanks Jay, much appreciated

  67. Abhijit Says:

    AWWWWWSSUUUUMMMMM!!!!

    Thanks, you just saved me a few hours of back-breaking coding :D

  68. gofree Says:

    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?

  69. Jack Says:

    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!

  70. mnrman Says:

    It works on WP 2.5 using the latest Grid_Focus theme. Thank you!!

  71. Andy Says:

    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’ => ”,
    ));
    ?>

  72. Andy Says:

    Damn it didnt show my html tags. I used the tag. Before the first tag and after the last

  73. Tobi Says:

    Hey, i wonder how i can make the widgets look like the links in the original theme.

  74. wembley Says:

    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

  75. Haute Pie Says:

    Excellent guide. Worked perfectly in under 10 minutes.

  76. Colour Scheming Says:

    [...] 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 [...]

  77. Sheynk Says:

    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!!!!!

  78. Sheynk Says:

    nevermind… magically fixed

  79. thunderror Says:

    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!

  80. Ann Marie Says:

    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.

  81. manilenio Says:

    Thanks, the mod really works on my site!

  82. renet@web Says:

    Guys, just glad to be of service and thanks for the comments.

  83. kathor Says:

    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

  84. rhetor Says:

    cheers for this, makes a big difference

  85. Thomas Says:

    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!

  86. Aris Says:

    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.

  87. renet@web Says:

    @ 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.

  88. william Says:

    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

  89. Basti Says:

    THX for the nice “how to” !!!!!

    basti

  90. e Says:

    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.

  91. Carlos Says:

    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

  92. Carlos Says:

    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

  93. Carlos Says:

    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!!

  94. renet@web Says:

    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.

  95. Scoliosise Says:

    It works, great job !!! http://www.budujemy-sie.pl You can check this out. Thanks

  96. nanu Says:

    hello, is it possible to have different sizes (width) for the sidebars? I want the first one to be smaller and the second one much wider.

Leave a Reply