The PSDs
All Photoshop files for Gravy are optimized for Adobe CS3 & CS4. Required fonts are Arial and Georgia.
- Homepage.psd and single-post.psd layouts
- Pre-cropped files for 125×125 ads, RSS icon, comments icon, search icon, theme screenshot, favicon and dropdown arrows
- A 12-column grid overlay based on 960.gs
- Guides and layers that correspond precisely with the theme’s HTML/CSS
- Smart objects for repetitive elements like blog entries and “Reply” buttons
- Sample multi-level dropdown menu
The WordPress Theme
Gravy should not be confused with popular WP developer frameworks intended for frequent upgrades, child themes, filters or complex non-standard templating. Instead, it serves up just the perfect amount of baseline code and styling for you to rapidly build out your client sites.
- W3C valid CSS and HTML code
- IE7, IE8, Firefox 3.5 and Safari 4 compatibility
- Includes functions for all WordPress 2.8+ features
- Custom archives template
- Custom author template
- Custom blog template
- Custom full-width template
- Custom “More in this Category” sidebar code
- Numeric archive pagination
- Styling for the WP125 ad plugin
- Dynamic SEO-friendly <title> tags and meta tags
- Search term highlighting
- Styling for author comments, threaded comments and trackback/comments separation
- Animated, multi-level Superfish dropdown menus
- Localization strings and sample po/mo files
- A ‘Get Post Image’ script, ala Mimbo Pro
- The TimThumb image resizer script
- A print stylesheet
- Widgetized sidebar
- GPL-licensed
Support & Policies
There is a forum for questions and feature recommendations for Gravy. As new functions are added to the WordPress core, the theme will be upgraded and re-released for free. If you have questions before buying, don’t hesitate to email me directly.
Template FAQs
Before reading, make sure you have your cookies set to view the Gravy theme. Simply visit this link, then return to the tutorial.
- Can you walk me through the purpose of each file in Gravy?
Sure. Let’s start at the top:
404.php – A template for any potential “Page Not Found” errors.
archive.php – This is a general-purpose template that returns a list of posts that have been filtered in various ways: by tag, by category, by day, month or year.
But isn’t it kind of limiting to use one template for all those things? What if my Tag archive needs to have a certain layout while my Category page to look differently? Take a peek at the documentation for WordPress’s Template Hierarchy. You’ll see that by simply starting a new document (ex: “category.php”), you can now serve up category-based posts in their own template, rather than archive.php. Read deeper and you’ll see that template hierarchy actually allows you all kinds of flexibility, especially when you want unique content to appear on certain pages and not others.
attachment.php – When inserting photos into your WordPress posts, you’re given the choice between “None”, “File URL” or “Post URL”:
“None” will link nowhere, “File URL” will link to a larger version of the photo and “Post URL” will take you to a page layout for the larger file which uses attachment.php as a template. This is a nice option when you need to send a picture to a friend. You can send a page URL which gives the image context, rather than an absolute link to the image.
author.php – Because I like my author pages to have a little more personality, the one I’ve included with Gravy displays a user photo and biography. Note that if I hadn’t included this template, the posts would have displayed using the archive.php template, as dictated by the Template Hierarchy. The bio text can be filled out in the control panel under Users->Authors & Users->(Your Name)->Biographical Info
comments.php – This is traditionally one of the most complex templates in a theme, as it’s responsible for determining whether or not someone is logged in, what their role is, whether there are comments and trackbacks, validating the comment form, and so on.
nav.css – Because the styling of multi-level navigation can get pretty verbose and I’m not likely to change it frequently, I like to place it in its own separate document for neatness. You’ll notice along with posts.css, it gets imported toward the top of the style.css document. This is even handier because it means in header.php there is only one document to call (”style.css”)…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" /%gt;…while everything else is imported. This keeps the templates themselves clean and readable.
posts.css – If you are using WordPress as a CMS, the actual blogging and comments portions of your site may in fact be very small. For this reason, I keep all styling for posts and comments in this separate stylesheet, rather than bogging down the primary stylesheet (”style.css”) with a ton of CSS I won’t edit very frequently.
print.css – This custom stylesheet gets applied when you print one of your pages. It gets rids of extraneous page elements and resets all the typography and spacing to be optimally readable.
custom-page-archives.php – Thankfully, WordPress allows us to create custom Page templates when necessary and that’s what I’ve done here. The Archives page can be previewed here and is something I find very useful when I want to take a quick glance at someone’s posting frequency and history, divided by month.
Putting custom templates into action is very easy. In the control panel under “Add New Page”, give your page a name, make a selection from the “Template” dropdown menu in the right sidebar and you’re done:
custom-page-blog.php – A custom page template that lets you display your blog on an interior page instead of the homepage.
custom-page-fullwidth.php – A custom page template that omits the sidebar and displays your content at the full width of the wrapper.
en_EN.mo and en_EN.po – These files are for people who will be using Gravy as a base to release their own public themes and wish for them to be translated into other languages. The .po (Portable Object) file is like a small library containing all the English terms in the Gravy theme with an empty column for non-English translations. Using software like Poedit, the .po file can be opened, translations can be added, and it can be saved, which also generates the .mo (Machine Object) file. For more info about theme localization:
footer.php – This contains your copyright info and links to RSS feeds. You’ll also notice some javascript is called from the footer which is done for speed and for maximum compatibility with certain jQuery-based plugins.
functions.php – This file is for defining custom PHP functions and other bits that interact with your theme. Many basic themes don’t even require this file. With Gravy, it’s an essential part of its value. Inside functions.php are functions that make your site more SEO-friendly, functions that add CSS classes dynamically for extra flexibility, functions that highlight your search terms, functions that define your widgets, title tags, pagination, and so forth.
As Gravy evolves, functions.php is the file where most of the additional functionality will live in order to keep the templates themselves clean and minimal. For example, see the custom function nav_animation inside the <head> section of header.php. This function hides the annoying labels that get triggered when mousing over the dropdown navigation. Sure, I could have put a big chunk of PHP in header.php, but I preferred to define a new function and hide it away in functions.php. This is much less confusing and easier on the eye for the average user.
header.php – This file is extremely important as it defines things like doctype, page titles, SEO helpers, stylesheets and javascript. Again here, I deliberately keep complex templates as clean as possible by creating custom PHP functions (ex: “dynamictitles”, “nav_animation”) and hiding the actual code away in functions.php.
index.php – By default, general blog posts in the left column of the homepage are called using this template, though it can be rewritten to include any content you want. Here again, you’ll notice the template itself was kept extremely minimal while the heavy lifting was done with remotely included files like pagination.php and loop.php. On that note….
loop.php – The code in this template contains variations on WordPress’s most powerful and well-documented function—The Loop—which is responsible for pulling posts from the database and displaying them on your site. Because the Loop is used so frequently throughout the theme, I’ve placed it in its own file so it can be accessed and edited globally. I’ve also filled this file with conditional tags which reinterpret the Loop depending on its context.
page.php – This template is a general container for Page content which is published via the control panel.
pagination.php – Like with loop.php, the pagination code is used in multiple instances throughout the theme so I’ve given it a unique file to make global edits easier. Pagination (”Previous” and “Next” buttons) becomes activated according to the number of posts per page you define in the control panel under Settings->Reading.
screenshot.png – This is the image file that displays on the Themes page in the control panel.
search.php – Your search results display in this template.
sidebar.php – Because WordPress can be used for many varied purposes, I’ve kept the sidebar code minimal. Currently, it displays widgets defined in your dashboard along with a custom “Related Posts” module that displays on single-post pages.
single.php – This template is for displaying post content and comments. What if you want different templates for different posts? You can always insert a conditional that tells WordPress what to use.
style.css – This document is sort of like the ‘mothership’ for all other stylesheets. It contains all the basic structure, colors, typography and content styles, while also importing remote stylesheets like posts.css and nav.css. I have broken it up into chapters and clearly commented above each section so edits are more intuitive and overall length is kept reasonable.
-
Why is a lot of the text wrapped in tags like this: <?php _e(’Text’,'gravy’); ?>
This particular syntax allows WordPress themes to be translated more easily into other languages. It tells the catalogs editor (ex: Poedit), “This text has been marked for translation inside the project called ‘gravy’”. The textdomain ‘gravy’ is defined at the top of functions.php (load_theme_textdomain(’gravy’);) and can always be changed so long as you perform and search-and-replace elsewhere throughout the theme for consistency.
-
On the homepage, the site description displays inside an <H1> tag, but not on interior pages. Why?
This is for SEO, which is a hotly-debated and evolving topic. On the homepage, the description of the site is deemed most important, while on single-post pages, for example, it’s the post title which is given the most weight. The <H1> tag is an important one for defining what your site is about and can be used strategically in this way.
Stylesheet FAQs
- Why are there 4 different stylesheets?
Check out the definition for each stylesheet in the section above. By default, WordPress themes will always check to see if there is a style.css document defined in the root of the theme. In Gravy’s case, you’ll notice additional stylesheets are called from within that primary stylesheet. Ultimately once a stylesheet becomes really large and there are sections that aren’t updated frequently, it’s less cumbersome to break them into unique files that can be read and understood more easily.
- Why is there a ‘min-height:101%’ on the body,html element?
By default, Firefox doesn’t insert an active scrollbar, or even an empty scrollbar, unless the page extends below the viewport. Therefore, toggling between short and long pages makes the layout appear to ‘jump’ from side to side. Min-height ensures all pages are displayed consistently across browers.
- How do I add my own logo?
By default, the Gravy ‘logo’ is just text, which is generated from the Settings->General->Blog Title section of your control panel. If you have a graphical logo you want to apply, follow these steps:1) Open style.css and scroll down to where #logo is defined
2) Replace the current code with:#logo { text-indent:-999em; background: url(images/logo.png) no-repeat; }Make sure to change the filename accordingly. The extreme text-indent ensures the text won’t display in the browser, but can still be read and understood by search engines.
PSD FAQs
- Why is there a hash (#) mark preceding every layer group?
Ordinarily when you CMD+Shift-Click a layer in Photoshop, you’re given a list of layers to select. In large documents with lots of folders and layers, Photoshop indicates hierarchy with indentation, but to clarify further, I’ve marked each folder with a # symbol.
General FAQs
- Can I re-use Gravy to build client sites?
Absolutely, this is where it’s most useful. Gravy is GPL-licensed and does not require credits or acknowledgment. - How do I insert 125×125 ads?
Gravy is currently optimized to use the WP125 plugin which comes with its own widget. Once you’ve installed the plugin, go to Ads->Settings and make sure it’s set to “Two-Column” and that the default stylesheet box is unchecked. Gravy’s style.css document comes with a bit of pre-styling for your ads so they display in a grid. - How do I activate the custom Archives page template?
In the control panel, go to Pages->Add New and make sure to select from the Templates dropdown menu in the right sidebar. - What if I want my custom Blog page to display the full content rather than the excerpt?
By default, the loop is an include file which means it’s used identically throughout the theme. But if you want to deviate from that and just use the standard loop with content, there is always this option.
Changelog
Version 1.3 • Aug 11, 2010
- header.php
- added wrapping “top-nav” class
- functions.php
- fixed custom masthead image functionality
- footer.php
- fixed footer widgets and added wrapping “footer-widgets” class
Version 1.3 • July 27, 2010
- functions.php:
- WordPress 3.0 functions were added for new features like Custom Menus, Custom Page Background, Custom Header, and Featured Thumbs/Images for Posts. The older Automatic Feed Links function was also added.
Version 1.2 • November 10, 2009
- archive.php, author.php, custom-page-archives.php, custom-page-blog.php, search.php, functions.php:
- a PHP function called numeric_pagination has been added to these templates to provide Digg-style numbered navigation at the bottom of the page
- the path to loop.php has changed, as it now resides in the /includes/ folder. This folder is also where future include files will live.
- custom-page-blog.php: this is a new custom Page template that allows you to put your main blog in an interior page rather than the homepage. This is great for people using WordPress as a CMS for commercial sites rather than traditional blog. Currently, Settings->Reading does let you assign other templates to your homepage. But with this method, a separate homepage template isn’t necessary, you just use index.php
- custom-page-fullwidth.php: a new custom Page template that omits the sidebar for full width
- functions.php: a bug has been fixed that disallowed generic avatars from other services (Identicon, Wavatar, etc)
- header.php: doctype has been simplified for HTML5
- custom-page-archives.php, custom-page-blog.php, custom-page-fullwidth.php: these pages were given a “custom-page” prefix to distinguish them from standard WP templates
- archive.php: path to category feed fixed
Version 1.1 • September 27, 2009
- functions.php: id of “%1$s” and class of “%2$s” added to widget, giving each widget potential for unique styling
- sidebar.php:
- added “widgettitle” class to <h3>
- added id=”more-category” to custom widget
- footer.php:
- javascript added that omits title attributes from nav links
- moved wp_head and other javascript calls to header.php for better plugin interaction
- comments.php: changed label from “commenter” to “author” in form
