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
- Unzip the downloaded file
- Upload the entire “Gridline News″ folder to your “/wp-content/themes/” folder
- Log in into your WordPress control panel
- Click the Presentation tab
- Select the “Gridline News” screenshot
Configuration
- 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.
- 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. - 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.
- 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.
- 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.
- 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.
Great themes, but a small problem in Safari on a Mac. The wide page layout gets all messed up. Works fine in Firefox.
Is this template for Wp 2.3.1 ?
Thanks a lot,
Gabriele
@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.
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?
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.
cannot get the tabs working along the top (the four)
many thanks
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>found it, in header.php the following line was missing:
<script type=”text/javascript” src=”/js/tabs.js”>
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
@Eli
Please refer to item #3 posted above in the CONFIGURATION section.
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
figured it out myself….in the file “screen.css” (gridline_news\gridline_news\css) the line @import ‘lib/ie.css’; is missing
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.
problem solved. use medium_photo as a key, not small_photo.
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 😉
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!
how do i make the width fluid? (full browser width)?
thanks
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
waw.. good
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
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?
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 🙁
Is this template for Wp 2.5.1 ?
It is necessary to make changes? I do not know working with theme. I know only to download and put on the blog.
Really nice theme! I have it!!!!!!
Great theme. I love it.
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
@Benoit- Open up css/gridline.css and delete this line from the body class:
background: url(‘../images/gridline.gif’)
Hi Thad,
How can I make the nav bar (and the font in the nav bar) 50% larger?
Love this theme man, thanks!
-Tom
Thank you!
I bought this theme and I was wondering how to erase/clear/delete the black lines over the logo & the search field.
nice
http://www.g991.com
Gridline is a great theme. With good SEO you have everything to run a nice blog.
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!
Hi,
I tryed to enter in demo version site, but there is a problem with your database.
http://gridline.thadallender.com/index.php?wptheme=Gridline+News+Theme
Please, send me another url.
Congratulation for your work.
Thanks
Settimo
Thank you very mach. Good thema
Thanks. Very good design.
Whoook very nice Design, thx for this WordPress Theme
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.
I meant 50px — isn’t 50px really, really tiny?
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..
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
Do I need to sign-up before I can see the demo of this theme?
This is indded a very usefull theme. It really make me wonder if simplicity is the secret. Thanks.
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
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:
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.