How to Create a Basic WordPress Theme with Gantry Framework

Gantry Framework is a WordPress theme framework that, unlike most of its modern counterparts, allows the user to construct a layout and color palette from within the WordPress admin backend itself. It’s powerful and flexible enough that power users can harness Gantry to achieve much greater things with much less effort than they might usually be in for, but the uninitiated can install Gantry and have a customizable layout configured in no time.

In this tutorial, we’ll be taking you through the basics: installing Gantry and configuring your blog in a series of simple steps without even touching code (aside from some optional custom CSS that is by no means necessary).

Installation

To get started, head over to the Gantry Framework download page and pick up a copy of Gantry Framework for WordPress and the Gantry Default Theme. Take care not to accidentally download the Joomla! version for this tutorial.

While most frameworks operate as themes, with child themes used for customization, Gantry Framework itself is a plugin. If you’re not familiar with WordPress, check out this page for instructions on installing plugins, and this page for instructions on installing themes. Get both the framework plugin and the default theme installed, and activate both.

I like to install some testing content before I get started — if I’m building a theme from scratch test content helps to ensure that every element that needs to be styled is, and there are no issues with, for instance, floated images in posts. With Gantry, you’re not starting from scratch and thus test content is a convenience, but not a necessity. I’ve used WPCandy’s sample content.

Before we start changing things, here’s what a fresh installation of Gantry Framework looks like:

There’s no navigation elements or any layout inherently included because Gantry’s appeal is in the ease and flexibility with which layouts can be created in the WordPress backend. The first step to creating a layout is to place our widgets.

Widgets

Head to the Widgets pane in the WordPress administration backend. If you’ve activated both the Gantry plugin and theme you’ll notice that there are plenty more widgets than you’ll be used to and there are an absolute heap of places for those widgets to go.

Each widget area represents a part of the layout that we’ll customize later on. Many of these areas represent horizontal strips of a site — for instance, the header, which can be broken up into vertical columns by use of the Gantry Divider Widget. In other words, if you want items to stack vertically, put them into a widget area together without the Divider Widget. If you wish to bump a widget over to a new column, add the Divider Widget first.

This is a pretty simple part of the process, so I’m going to go and load up the site with widgets, which immediately gives us some basic sense of layout:

Using the Gantry widgets over vanilla widgets where included, we’re looking at the Gantry Logo widget in the header, page and category lists in the navigation area, four text widgets in the Showcase which can later be used to highlight various aspects of our site, Latest Comments and meta widgets in the sidebar, and the Gantry Breadcrumbs widget in the Breadcrumbs area.

To show you how the divider works, I’ve included two items — Recent Posts and Pages — in the footer to begin with.

There’s a divider between these two widgets, and Gantry uses 960.gs to divide these widgets into equal, grid-aligned divisions of the area (we can determine other grid-aligned but unequal divisions using Gantry’s layout controls later).

If we add another divider and a third widget, the layout is adjusted to accomodate:

Gantry’s ability to accomodate our whims without breaking the grid are great, but that red-on-grey isn’t working out so well — let’s get that fixed.

Style

Let’s make our first foray into the Gantry Theme control panel itself. You’ll find there’s a big button in your WordPress admin menu on the left-hand side of the screen that says “Gantry Theme” near or at the bottom depending on which plugins you have installed — click it. When it loads up, click on the Style tab.

Here we’re given some basic styling options and a box in which to drop our custom CSS. I’m going to change the link color to a medium blue (#37B2F0) and darken the footer background somewhat (#2E2E2E). For fun I’ll make the background color darker as well (#444444). You can fiddle around with the basic color palette to your heart’s content here. Any element you want to adjust that isn’t listed here can be modified using the custom CSS box.

You’ve probably noticed the WebFonts options by now. Gantry takes all the nuisance out of working with the Google Font Directory and allows you to simply select a font from a dropdown. Some are applied to headings and body text, while others seem to only replace the heading font.

While we’re here, if you want to change anything in particular you should do that now using the custom CSS box. I’ve made some changes to the latest comments list: removing the bullet points, floating the gravatars inline and giving them some padding against the text, reducing the font size and creating some space between each comment in the list.

Here’s what the theme looks like now:

It’s not the Mona Lisa, but things are starting to take shape — and this has taken us about three minutes to do.

Layout

Now we can change the layout a bit — mostly this refers to the width of the columns. The rest of the layout is primarily defined by widget placement.

Before we do that, I’ll remove the Breadcrumbs widget as it looks out of place on the homepage — I’ll show you how to include it on single posts later on. While I’m there, I’ll throw a divider into the sidebar area and add some more widgets so we have more to play with while looking at the Layout panel. Each divider you add to the sidebar widget area will create a new sidebar column, allowing you to create three and four column layouts.

The Layout panel can be found under the Gantry Framework settings in a tab, just like the Style panel. Here we’re shown the “rows” of the site, so we can adjust the width and arrangement of their columns. Here’s the tool for adjusting the Showcase position:

You can select the number of columns, or positions, using the series of numbers at the top, but generally you won’t need to do so: this is determined by the number of dividers you’ve used in the Widgets pane. The slider allows you to cycle through the various combinations of column sizes, which are demonstrated using the table above (with a, b, c and filled in).

Note that the number of columns shown is determined by the number of dividers in the widget area. You can use the aforementioned numbers to change the number of columns you see and save widths for those configurations, but on saving the interface will once again revert to the number of columns determined by the dividers in the widget area.

While this may make it look as though nothing has been saved, your settings for that column configuration are indeed still there — you just need to add or remove the number of dividers required to have that number of columns in the front-end layout.

In the case of the Showcase position, I’ve moved the slider all the way over, giving the a column the most space and cramming b, c and d. For instance, we could set up a featured posts section here with the most recent taking up the majority of the space.

The other layout that I’m going to change is that of the main body.

Here, the main body area where the content goes is grey and represents the most important part of any page in your site. Next to that are sa and sb. If you don’t divide the sidebar, you’ll only see one of these. As you can see, I’ve moved the slider over until my sidebars are both on the left and reasonably wide.

These two quick changes result in a remarkably different feel to the homepage:

That’s enough fiddling with the layout. We’ve got some tweaks to make to make this site more usable.

Content

You’ve probably confused yourself trying to figure out how to get into an individual post along the way. I admit that I did at first. That’s because we still need to go into the Content tab of the Gantry Framework settings and configure how posts, pages and the like should behave.

Here you can make a variety of decisions, such as whether blog posts display their content or the excerpt on index pages, and what order blog posts are shown in. The most important thing in the blog tab of the Content pane is to switch “Title Link” to the On position. If you save changes and reload your blog, you’ll find that you can finally click on those post headers.

There are buttons on the left of the Content pane that allow you to configure settings for all the different page types: blog index, post, page, archive, author archive and so on.

On clicking through to a post in the blog front-end, you’ll probably find they’re a little busy. If you move down to the Post tab we can trim down on what’s shown here. I’ve turned off a bunch of things: Modified Meta Data, Comments Meta Data and Show Tags. You might like to keep those — this is all about personal taste.

If you’ve copied my settings, you’ll want to style the byline that remains — but since we’re trying to avoid using anything except Gantry’s interface for the purposes of this tutorial and we’ve already cheated with some CSS, let’s skip that for the time being.

What’s more important is that the layout of the single post page, following the rules we’ve set for the homepage, looks horrible. Let’s give it a more suitable layout.

Overrides

We can ensure that different settings and even different widgets kick in for different views. Let’s set something like that up for the single post page.

Above the tabs we’ve been using to traverse the gamut of Gantry’s settings is a button called New Override. Click that and once the page refreshes you’ll see that we’re still in the Gantry settings, but everything is grayed out and each option has a checkbox next to it.

Checking the box enables that option, and it’s a way of determining which settings will override the default settings while in this view. Usually, your override changes will be fairly minor, so it doesn’t make sense for a new view to require you to work from scratch.

Let’s first flick over to a new tab in the Gantry settings, Assignments. Here we can tell Gantry where to apply the override — from page types to individual posts. In this case, all we need to tick is Single Post Page under the Template Page Types list, and then the Add to Assigned button beneath it.

Once you’ve done that and saved the override, use the button next to the Override selector to move to the Widgets panel. If you use the Widgets menu option in the default WordPress menu, you’ll have to select the specific override again — which is easy because Gantry puts the selector at the top of the Widgets panel as well.

The checkboxes on each widget area mean the same thing: if left unchecked, the default behavior will be obeyed.

I’m going to remove the widgets from the Showcase area, add the Breadcrumbs widget back into the breadcrumb widget area, and remove the sidebar divider and some of the sidebar widgets, so that on pages where the content is meant to be the focus it can be.

You’ll find that when we change the layout of the sidebar, it reverts to its original position. Let’s go back to the Layout page and keep the skinny single column sidebar but move it back to the left so that the change in structure isn’t too much of a shock for our visitor.

In a real world situation, the best approach would be to set up the global configuration for content pages, like the single post view. That way you reduce the amount of overrides needed — you could get away with just one for the homepage, and perhaps another for the various archive views.

Save your changes, and take a look:

You could create more appropriate views for category pages and the like using the same method.

For this tutorial, we’re done. You’ve created a layout and achieved quite a bit using nothing but the admin interface, and now you can crack open your text editor and polish the elements of the page with CSS. Good luck!

You might also like…

20 Helpful WordPress SQL Queries Snippets →
20 Plugin Replacing Tutorials, Tips, Snippets and Solutions for WordPress →
10 Useful WordPress Search Code Snippets →
20 More WordPress Code Snippets and Hacks →
20 Plugin Replacing Tutorials, Tips, Snippets and Solutions for WordPress →
Dummy Content Filler Resources for WordPress, Drupal and Joomla Developers →
30 Grid-Based WordPress Themes →
10 Blank/Naked WordPress Themes Perfect for Development →
Essential WordPress Plugin Development Resources, Tutorials and Guides →
20 Snippets and Hacks to Make WordPress User-Friendly for your Clients →
Or, you could browse our extensive WordPress Archives