Gridline News

Updated on

Update

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.

Installation

  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

Configuration

  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.

ABOUT BLUEPRINT


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 NYTimes.com, 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.


CAUTION


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.

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in Themes and tagged , , , , , . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

46 thoughts on “Gridline News”

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

  2. 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?

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

    /wp-content/themes/gridline_news/images/gridline_news_logo.jpg

    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.

  4. 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>
  5. 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

    eli

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

    Eli

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

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

    cheers
    Geoff.

  9. 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 😉

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

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

    Eli

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

    Gracias

    Sorry for my english

  13. 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?

  14. 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 🙁

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

    Benoit

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

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

  17. Hi Thad,

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

    Love this theme man, thanks!

    -Tom

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

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

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

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

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

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

    Jeff

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

  24. 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?

    Thanks.

Leave a Reply