Gridline News


This theme has been updated and is now part of the Gridline Suite. Subscribers can download this theme, now renamed just “Gridline,” from their member page.

Gridline News is a clean and modular news magazine theme for WordPress 2.3 and up that is packed with AJAX to add flexibility to the important home page real estate. The main story section contains four of your latest posts layered on top of each other, accessible via tabbed navigation. Gridline News can transform your tubular blog into a full news magazine website.


  1. Unzip the downloaded file
  2. Upload the entire “Gridline News″ folder to your “/wp-content/themes/” folder
  3. Log in into your WordPress control panel
  4. Click the Presentation tab
  5. Select the “Gridline News” screenshot


  1. GETTING STARTED: To get Gridline News off and running, you will need a minimum of 5 categories to populate the homepage. The main section on this page is the latest article posted in category 1, followed by category 2, 3, and 4. The three posts at right are all from category 1, offset by 1 to avoid duplication. The other sections display the latest articles in their respective categories.
  2. YOUR CATEGORIES: In the “home.php” you will find a series of query_posts functions which refer to specific category ID numbers from my database.
    You will need to change the category numbers to reflect the ID numbers of the categories that you want to display on your homepage. Category numbers can be found in your control panel under Manage->Categories. There are a total of 6 spots in the home.php file to change to reflect the post categories that you want to display on the main page.
  3. YOUR PHOTOS: To have thumbnails in each post, crop the thumbnail to 150px wide by 100px tall, upload it to the web and copy the URL to the photo. Within WordPress’ Write Post page, scroll down towards the bottom and click on the Custom Fields section. Add a key called “small_photo” and then paste the link to the thumbnail photo into the key value field. Photos posted within each entry’s post will should not exceed 350px wide by 225px tall, otherwise, the images will bleed out and make you site look icky. View a screenshot of the custom fields used for the Gridline News Theme. Make sure your custom field values and keys match those in the screen shot above (but change the key value to the exact url to your images.) Custom fields are one of the most overlooked, yet powerful, tools in WordPress. Read more about using custom fields.
  4. YOUR AUTHORS PAGE: Gridline News comes packaged with an author archive (authors.php), which will display some author specific info pulled from the Users page in your WordPress installation. In order for the author’s image to show up, you’ll need to place a jpg of the author titled by the author’s last name in the wp-content/themes/gridline/images/authors/ folder. For instance, mine is Allender.jpg, sized at 75px X 75px. Here is an example author page.
  5. STYLES.CSS: Unlike most WordPress themes which plug all the css in one file called styles.css, Gridline utilizes the Blueprint CSS framework to help separate positioning, typography, forms and what I’ll refer to as custom or gridline specific styles. To edit all custom gridline specific styles, you’ll need to edit the style.css file located in your wp/wp-content/themes/gridline/ directory.
  6. COMMON ISSUES JQuery, the javascript framework used in this theme, and Prototype, the javascript language that powers some WordPress plugins, don’t like each other. To create a pleasant user-experience, deactivate all plugins that use the Prototype javascript framework.


All Gridline Themes utilize the CSS framework called Blueprint. Who is credited for the ideas behind Blueprint? Some of the best designers on the web. They include Jeff Croft, designer for Blue Flavor, Khoi Vinh, design director for, Nathan Borror, Christian Metts, Eric Meyer, Wilson Minor, Angus Turnbull, Olav Bjorkoy and a few others. Most major websites use some form of css framework to allow for rapid, consistent development and design. Take the Blueprint 101 course to learn about all the possibilities.


If you are new to WordPress, HTML or CSS, Gridline probably isn’t the best theme to try to learn on. Gridline is, however, perfect for those who want to learn by doing, reading and practicing life inside a sophisticated WordPress magazine theme.

46 responses to “Gridline News”

  1. Allan Avatar

    Great themes, but a small problem in Safari on a Mac. The wide page layout gets all messed up. Works fine in Firefox.

  2. Gabriele Lunati Avatar
    Gabriele Lunati

    Is this template for Wp 2.3.1 ?

    Thanks a lot,

  3. admin Avatar

    @Allan – This has been fixed. It was a problem with the code I posted in the body entry, not the theme. Thanks for picking that out!

    @Gabriele – Yes. It is compatible WordPress 2.3.1.

  4. xcost Avatar

    I have install the “Gridline News” theme but my blog name does not appear. How can I replays the phrase “Gridline news”, with my blog name?

  5. admin Avatar

    This can be done two ways. I’m posting the easiest method below:

    Create your own logo, make it no larger than 50px tall. Call it “gridline_news_logo.jpg” and upload it to your server here:


    Or, to have a text-based logo, instead of an image, in Presentation > Theme Editor > select Gridline News Theme > select Header and replace the code underneath the SITENAME comment and design your own preferred Header title, examples of which can be found here.

  6. j johnson Avatar

    cannot get the tabs working along the top (the four)

    many thanks

  7. admin Avatar

    Prototype (the javascript that powers some Light box plugins) and JQuery (the javascript that powers the tabbed navigation) are known to not like each other. Try deactivating any plugins that use the Prototype framework (lightbox, thickbox). Also, make sure that this line is in your header.php:

    <script type="text/javascript" src="<? php bloginfo('stylesheet_directory'); >/js/tabs.js"></script>
  8. j johnson Avatar

    found it, in header.php the following line was missing:

    <script type=”text/javascript” src=”/js/tabs.js”>

  9. Eli Avatar

    Hi, you tell us how to set the small pictures – but how are the big pictures in the the grey tabbed set?

    Is there a custom field, too?

    Greetings from Germany


  10. admin Avatar


    Please refer to item #3 posted above in the CONFIGURATION section.

  11. Eli Avatar

    Thank´s for the quick answer :)! I hope the IE issue will be resolved – that would make me the happiest blogger in the world! Your theme is discussed a lot in German blog lately – and I think it looks great. If only it worked in IE

    Nice Greetings


  12. Eli Avatar

    figured it out myself….in the file “screen.css” (gridline_news\gridline_news\css) the line @import ‘lib/ie.css’; is missing

  13. Geoff Avatar

    Hi, the images don’t load on my front tabs. I’ve disabled and then removed all plugins but with no success.

    I have also loaded into header.php but again with no success.

    I am using WordPress 2.3.1.

    Please help.


  14. Geoff Avatar

    problem solved. use medium_photo as a key, not small_photo.

  15. Sergio Avatar

    How to display images in Previously Featured in the right column? I don’t know if it is an automatic process or if I have to insert a PHP code manually.

    Someone can help me?

    Thank you very much 😉

  16. Miami Fun Guide Avatar

    If you are having any IE 6 issues I believe the problem is in the header.php file where the ie.css file is referenced. I believe the correct code should be

    (put the following inside HTML comments…)

    [if IE]><link rel=”stylesheet” href=”/css/lib/ie.css” type=”text/css” media=”screen, projection” /><![endif]

    so that the ie.css file in the lib folder within the theme will be picked up. The code that I had in my release referenced “css/blueprint/lib/ie.css”. Maybe an ealier release did not package blueprint with the theme?

    Thad, thanks for the time you put into these. I purchased 3 themes!

  17. SoloX Avatar

    how do i make the width fluid? (full browser width)?

  18. Eli Avatar

    Is there ANY way to make grindline work together with a prototype js Plugin? I want to use the IMM glossary creator, which uses prototype.

    Nice Greetings


  19. Christian Avatar

    Hi, escribo desde Ecuador, no entiendo bien como aplicar custom fields

    I dont understand the use of custom fields

    Can You helpe me if I buy this theme


    Sorry for my english

  20. Joseph Avatar

    Reading through here again I noticed that someone else had a problem with the image showing up under the tab, and by simply changing the key to medium_photo, it worked! And it will show either the thumb or the full size image (as specced at within 350×225), so that’s nice. So then, are the instructions to enter a key of small_photo wrong, or is there somewhere else this “thumbnail” is supposed to show up?

  21. Joseph Avatar

    aha I see… the small_photo is for when it gets shunted off to the previously featured. OK.

    So I have two large posts/questions in here that are awaiting moderation, presumably because I have links in them. Hopefully those will get release soon as I’m really stuck on several points on this theme 🙁

  22. cilene Avatar

    Is this template for Wp 2.5.1 ?

  23. cilene Avatar

    It is necessary to make changes? I do not know working with theme. I know only to download and put on the blog.

  24. mysochi Avatar

    Really nice theme! I have it!!!!!!

  25. Cariosities Avatar

    Great theme. I love it.

  26. Benoit Avatar

    I bought this theme and I was wondering how to erase/clear/delete the black lines over the logo & the search field.
    Thank you!


  27. admin Avatar

    @Benoit- Open up css/gridline.css and delete this line from the body class:

    background: url(‘../images/gridline.gif’)

  28. Tom_Fishman Avatar

    Hi Thad,

    How can I make the nav bar (and the font in the nav bar) 50% larger?

    Love this theme man, thanks!


  29. china news Avatar

    Thank you!
    I bought this theme and I was wondering how to erase/clear/delete the black lines over the logo & the search field.

  30. Avatar

    Gridline is a great theme. With good SEO you have everything to run a nice blog.

  31. walter Avatar

    I am having a problem with the RSS feeds: When added to some RSS readers, it say “name of site” instead if the actual site title… where do I change this? Thanks!

  32. Settimo Avatar


    I tryed to enter in demo version site, but there is a problem with your database.

    Please, send me another url.

    Congratulation for your work.



  33. Fnex Avatar

    Thank you very mach. Good thema

  34. Define Avatar

    Thanks. Very good design.

  35. Paul Avatar

    Whoook very nice Design, thx for this WordPress Theme

  36. Monica Avatar

    I don’t really know what I’m doing, but I’m trying my best. Isn’t 50x really, really tiny??? If I make my logo no taller that 50px (as suggested above) you can’t even see it. It’s only about a centimeter tall, if that. If I make it bigger, it doesn’t show up.

  37. Monica Avatar

    I meant 50px — isn’t 50px really, really tiny?

  38. Gene Avatar

    Which are you referring to? I don’t find anything about 50x.. You might be referring to the photos and the size is 150px, not 50px.. I hope I’s answering your query right..

  39. language learning software Avatar

    Finally someone who can write a good blog ! . This is the kind of information that is useful to those want to increase their SERP’s. I loved your post and will be telling others about it. Subscribing to your RSS feed now. Thanks

  40. jonathan Avatar

    Do I need to sign-up before I can see the demo of this theme?

  41. facebook money Avatar

    This is indded a very usefull theme. It really make me wonder if simplicity is the secret. Thanks.

  42. jeff Avatar

    Anyone know how to change the tabs (currently set to News | Sports | Tech | Arts) ?

    How to change the names. OR how to remove the tabs. OR how to add tabs?

    Thank you for your help.


    1. Gene Avatar

      edit the file titled ‘home.php” – as you read you will see the titles ‘news,’ etc. Place in the text you would like to be there:

  43. Gene Avatar

    I am currently using this theme for a blog i’m building I love it. However I was wondering if it is possible to stop the top black navigation bar from showing all of the pages. Is there anyway to select which ones it shows without choosing a parent page in wordpress?


Leave a Reply

Your email address will not be published. Required fields are marked *