Features of the Edible theme for WordPress

This theme was inspired by the clarity of the Edible Cleveland tag line: “Our Region, Our Stories, Our Food, Season by Season.” The more I immersed myself in Edible Cleveland’s content, the more it became apparent that it really did fall into four sections: content about the food community in Northeast Ohio, content from the magazine itself, food preparation and recipe advice, and finally some administrative content about the publication and how to get involved. After a few early attempts at using pre-built themes for this content, I also realized that the marvelous photography of Edible Cleveland also deserved a showcase. This “Edible” theme for WordPress was built from the ground up to support Edible Cleveland, and as such it may be a good fit for other Edible publications around the country.

earthtone colors

The theme is built around an earth tone color palette visible in the Edible Cleveland logo found on the internal pages. The boldest of these colors are used to identify the sections of content throughout the site. The consistency of the color application helps the reader orient themselves to the content, a dynamic that becomes particularly meaningful when looking at search results, which combine content from all over the site. However, it is important to realize that this color scheme is not baked into the site in a permanent way. The colors are all defined in one brief file in the theme and can be substituted for another color scheme very easily.

The theme is also built around a six column grid. This paragraph you are reading spans four of those six columns, while the sidebar to the left spans the other two. Generally that sidebar always spans the first two columns, but when promotional items are present, they only occupy the first column (well, that’s a fib, ask Noelle about it), in order to maintain a discrete distance from the content of the site.

Whenever you see items take up only a portion of the main content area, every attempt is made by the theme to assure that those items occupy exactly one or more column widths. Since this grid is “responsive” to different browser window sizes, this means the content all stays lined up and visible even as a reader changes the browser window width. Try it!

If you tried changing the browser window width, you probably noticed another feature of this theme. At a certain point the theme realizes it is probably on a mobile device and the six column grid just won’t be legible any longer. At that point, it flips gracefully into a single-column mode and eliminates some content automatically to simplify the site. This is our “mobile” site, actually just a careful presentation of the regular site, as you can see by playing with the window size.

Sections of the Site

The four sections of the Edible Cleveland site are: region, stories, food, and season.

Region content includes all the posts made in the “blog” area of WordPress. This includes posts on topics such as travel and events.
All of the core magazine content (with the exception of recipes) is placed in the stories section. Stories are pulled from the PDF version of the publication and reformatted to live here on the website. Tables-of-contents for each issue are generated automatically based on the content included on the site.
Recipes from the magazine (and anywhere else) get placed in the food section. This makes it easy for a reader to look for “actionable” content, for something they can do! The recipes are organized into categories that are kept separate from the general post categories.
The season section is a bit of a catch-all. Anything that does not fit in the other three sections goes here. This includes all the administrative information about the publication: subscriptions, advertising, publication guidelines, contributors and so on.

Assignment of content to sections is more or less automatic. However, in order to provide a bit more flexibility, the theme also allows the author of a page to override this default behavior and assign the page to any Edible section. That is how the find a copy page becomes part of the “stories” section.

The Edible theme itself is agnostic about how these sections are used, or even what they are called. But it is fixed on accommodating four sections of content. These four sections are indicated in the header, which shows the current section more brightly than the others. So, for example, this “features” page is in the “season” section, as you can tell by looking at the header or noticing that all its headlines and links are in the season color. The top of the left sidebar will always contain items related to that section.

We also use a “redirect” plugin to facilitate automatically shuttling readers between sections. This is used when a magazine article, such as the “Refreshments” department articles in Edible Cleveland, is really just a recipe. We can create the “story” so that the article appears in the table of contents for that issue, but when the reader clicks on that story, they are automatically redirected to the corresponding “recipe” so that we don’t have to manage the actual content in more than one place.

Related Recipes

Since recipes are such an important part of Edible Cleveland, the Edible theme provides special links to recipes from other kinds of pages. Each recipe becomes its own stand-alone piece of content in the “food” section, so that they are easy to look up, review, and print. However, if linked from a story or page, the recipe will also be presented as a special link at that bottom of that story or page. This encourages the maintenance of recipes in one place, and allows the theme to also build up a taxonomy of recipe categories that remains independent of blog post categories.

Featured Images

The Edible theme makes extensive use of WordPress “featured images” to liven up the presentation. Whenever you create a blog post, story, recipe, or page, you can tell WordPress that a particular image you upload should be considered the “featured image” for that content.

Assigning a featured image will accomplish two things: (1) the image will be used as the main image for that content, presented at the top of the page, and (2) the image will be available to the theme as a proxy for that content to be used in other settings.

Since some images are quite horizontal and others quite vertical, the theme allows for the author of the content to indicate that a “vertical” presentation will be better for a particular featured image. In general, though, we use the images horizontally at the top of a post, story, or recipe.

One of the helpful features of the Edible theme is that it will take care of sizing and cropping images for you. Whenever you upload an image you should upload a high-quality copy of the image, with the longest edge being at least 1200 pixels wide or long. But aside from ensuring that there is a high-quality source image, sizing and cropping are managed automatically. Of course, if you are unhappy with the automatic results, you can always override this by uploading a pre-cropped version yourself.

For the most part the “proxy” use of the featured images is automatic. For example, the tables of contents for each issue automatically use the featured images to create a mosaic of images from the issue alongside the article titles and the search results page will include the featured images along side search results. In the case of the home page, though, intelligent intervention is helpful. If every item with a featured image presented that image on the homepage, things would get a bit overwhelming. So the theme also allows authors to designate whether an item should “highlight” its featured image, meaning that it would allow it to surface on the home page.

Image Galleries

Of course, from time to time you will want to include more than one photo in a post. The Edible theme allows for a special photo gallery to be included in any page or story. All you need are the ids of each image from the WordPress media library (you can get this by just creating a regular WordPress gallery) and the Edible photo gallery will be included at the bottom of the page.