The Gantry Framework for WordPress

Posted by jonahs on April 17, 2012 in Style and Design, WordPress Development | 0 comments

I wanted to take some time out to give kudos to the folks at RocketTheme for their amazing work on the Gantry Framework. This WordPress plugin is so incredibly useful for what I do, and I can’t even begin to estimate how much time it saves me on every single WordPress theme I create. It’s late, and I’ve just finished working for five hours straight, but I accomplished more in that time that I could have in fifteen hours without the benefit of Gantry.

Gantry Development Process

Any project I end up designing a custom theme for will begin with a mockup. I use Adobe Illustrator CS5 to draw a design depending upon input from the client. This mockup is the basis for all that is to come.

For the theme I’m currently creating, I initialized the development platform from a WordPress RocketLauncher. RocketTheme has thoughtfully packaged an installer for their Gantry Framework which includes the latest version of WordPress, Gantry itself, a copy of the default Gantry Theme, and a smattering of generic content. Fresh out of the gate I’m three hours ahead of the game!

I have a development environment which is running a pretty generic installation of WAMP server on Windows 7 Professional. This is my development workstation, and I’m hosting my development files locally to reduce my overhead and generally simplify my life. Deploying an empty database for the development site and rolling out a RocketLauncher install is accomplished in a trice since I’m just copy-pasting within my local file system.

There are a few I need to get squared away before I really start cranking out code: First, I decide what I’m going to name the theme I’m making and rename the theme directory within /wp-content/themes. Next, I’ve got some files to edit:

templateDetails.xml

Lines 1-8 need editing, obviously. Also, I modify the template_full_name and template_author on lines 46 and 47. Now, I’ve actually got to create a pair of XML fields elements for the content-top and content-bottom positions in order to be able to adjust their inner positions. This is the only issue I really have with the default Gantry theme created by RocketTheme. Here’s the code I use, beginning at line 430:

<fields name="content-top" type="position" label="Content-Top Position">
<field name="layout" type="positions" default="3,3,3,3" label="">
<schemas>1,2,3,4,5,6</schemas>
<words>2,3,4,5,6,7,8,9,10</words>
</field>
<field name="showall" type="toggle" default="0" label="Force Positions"/>
<field name="showmax" type="showmax" default="6" label="Position Count"/>
</fields>
<field name="mainbodyPosition" type="positions" default="6,3,3" label="MainBody Position">
<schemas>1,2,3,4</schemas>
<words>sa,sb,sc,mb</words>
<type>custom</type>
</field>
<fields name="content-bottom" type="position" label="Content-Bottom Position">
<field name="layout" type="positions" default="3,3,3,3" label="">
<schemas>1,2,3,4,5,6</schemas>
<words>2,3,4,5,6,7,8,9,10</words>
</field>
<field name="showall" type="toggle" default="0" label="Force Positions"/>
<field name="showmax" type="showmax" default="6" label="Position Count"/>
</fields>

<fields name="content-top" type="position" label="Content-Top Position">
  <field name="layout" type="positions" default="3,3,3,3" label="">
    <schemas>1,2,3,4,5,6</schemas>
    <words>2,3,4,5,6,7,8,9,10</words>
  </field>
  <field name="showall" type="toggle" default="0" label="Force Positions"/>
  <field name="showmax" type="showmax" default="6" label="Position Count"/>
</fields>

<field name="mainbodyPosition" type="positions" default="6,3,3" label="MainBody Position">
  <schemas>1,2,3,4</schemas>
  <words>sa,sb,sc,mb</words>
  <type>custom</type>
</field>

<fields name="content-bottom" type="position" label="Content-Bottom Position">
  <field name="layout" type="positions" default="3,3,3,3" label="">
    <schemas>1,2,3,4,5,6</schemas>
    <words>2,3,4,5,6,7,8,9,10</words>
  </field>
  <field name="showall" type="toggle" default="0" label="Force Positions"/>
  <field name="showmax" type="showmax" default="6" label="Position Count"/>
</fields>

I just copy-paste this right over the top of the default MainBody Position element and then save the file.

style.css

The other file that must be edited before I begin work is the default style.css. Gantry takes some of the info it uses to fill in the administrative interface from the header of this file. In order to make sure that your theme title, version, and URLs display universally you’ll want to edit the header here to make the information match what you replaced when you modified templateDetails.xml.

I’m going to leave off at this. It’s my hope to continue writing on this topic until I can put together a tutorial which describes my method from start to finish. I know it’s not perfect, but it’s taken me a while – and a ton of research – to get to this point, so perhaps someone else could benefit from it.