How to Use the Gantry Framework for WordPress

We’ll show you how to install the grid system and a basic free template you can get from gantry-framework.org/download.

After installation we’ll demonstrate:

1. Creating and placing the menu
2. Adding and positioning the logo
3. Adding sidebar widgets
4. Choosing one of the standard pre-set styles

The purpose here is to introduce you to the framework concept through simple exercises that demonstrate core features. You will learn enough to help you decide if Gantry is the right choice.

When you’re finished with this tutorial, head over to gantry-framework.org which has advanced documentation on using Gantry.

You need two things for Gantry to be implemented on the site; the framework and the default theme. You will need to install each separately and that’s what we did in this tutorial. Both can be found via the Plugin and Theme installation areas in your WordPress administrator.

The alternative is to use the RocketLauncher from http://www.gantry-framework.org/download which is an entire package of WordPress, the framework and the default theme plus sample data already installed and configured.

In the admin area of your WordPress site, search for gantry in the plugins section, and then again in the themes section. Install and activate both.

When you visit the site at this point, it will be blank.

So that you can actually see something on your site, go to Settings > Reading and set the home page to a static page.

Now let’s start giving the page some shape. Let’s add the menu.

Go to Appearance > Menus and create a custom menu.

1. Go to Appearance > Widgets.
2. Expand the Navigation position.
3. Drag and drop Gantry Menu into the navigation.

When you look at the list of positions on the right side of the menu, there is quite an extensive list. Each one of these corresponds to a row on the page. Each one is similar and they all act the same except for the content and sidebar positions. If you learn how to adjust the header position you will be able to apply the same techniques to all the other positions as well.

Expand the Gantry menu widget to configure it. Choose the custom menu you created in the dropdown.

Gantry adds an animated drop-down menu to WordPress that is highly customizable. You could play with these and test out the effects, but to keep moving on in this tutorial, the default settings will be just fine. You also have a choice of a Fusion Menu or a Split Menu. If your the menu doesn’t appear in the template you’re using, try the other one.

If you haven’t created a custom menu, you might want to check show empty menu so the position is visible even if there is no menu.

Here’s what you’re site looks like with the menu enabled. Now let’s put some identity on the site with the logo.

1. Go to Appearance > Widgets.
2. Expand the Header section.
3. Drag and drop Gantry Logo to the Header section.

Let’s add a text banner.

1. Find the Divider Widget and drag and drop it below the Gantry Logo Widget.
2. Now find the custom Text Widget and drag it below the Divider Widget.

Edit the Text Widget as you normally would and save it.

Now we have a logo and some header text inserted and it’s starting to look like a website. But text is positioned too far from the logo. Let’s adjust the postilions.

There is a new entry on your dashboard for Gantry Theme. Click on it to get to the Gantry controls.

Go to the Layouts tab. Look at the Header Position. You can see there are six positions available in each row, but only two are activated in the Header Postion of this template. You know this because the number 2 is highlighted and underlined.

You can see the relative space assigned to each position in the graphic underneath. The “a” is much larger than the “b”. When we put the widgets in, then added the divider between them, we put the logo in “a” and the text in “b”. We want to allocate more space to “b” and less to “a”. so the text starts out closer to the grpahic. There is a convenient slider for doing this quickly.

Click and drag the slider control and you can observe the changes in the relative widths of the two positions.

I’ve moved the slider to the left and you can see now that “a” is smaller than “b”. The popup shows you how many columns out of the total of 12 are taken up by each position. In this case “a” takes up 4 columns. Since we’re on a standard grid we can estimate the number of pixels taking 4 x 60(the column width).

Here’s what it looks like.

The text has been moved over the left. There are 4 columns dedicated to the logo. Adjusting the slider I could move it a little farther if I wanted.

With the exception of a few specialized rows, all other content rows work like this. You can change the number of active columns in the template, change the allocation of space to each, or force the columns to hold their position even when they are empty. Those skills are easily learned.

Now let’s work on the sidebar.

Go back to Appearance > Widgets and drag and drop any widgets you want to display on to the Sidebar position.

Above is what the site looks like after you’ve added some widgets. I added Ajax Search and Gantry Categories, but you can add what you want. Put at least two on the sidebar for the next step, though.

Go back to the widgets page, and add a divider between the two widgets.

Now you have two sidebars. Both on the right side. You can have up to 3 sidebars, but the columns start getting too narrow if you overdo it. But what if you wanted to have a three column layout with sidebars on either side? For that return to the Gantry Theme settings page and the layout tab.

The MainBody Position is a little different than the other positions since you are limited to 3 sidebars and the main content area. But the slider acts similar to the ones in the other positions.

You can see, when you compare this picture with the one above, adjusting the slider moved the sidebars to opposite sides of the main content. You can play with the slider and see the effects and positions available.

Sidebar A (“sa”) has been moved to the left while “sb” is on the right.

Go back to the Gantry settings and choose the Style tab.

At the top right you can see a button that says Presets. Click the button to toggle the presets view.

The generic Gantry template has three preset styles that are extremely easy to work with. They are fairly attractive in black and white. There are controls on the style tab that will let you adjust colors, and change fonts using Google Fonts for a wide variety of looks. When you change one of these presets, you can “Save Custom Preset as New” and start a library of custom layouts for yourself.

They will all be available here, and you can view them by dragging the slider then choosing the one you want to apply. You can leave the basic presets as they are and do all your work on derivative copies. When you switch between presets, none of the positions or widgets change, so you can instantly switch designs making it easy to choose which way to go with your styling.

To make it a little easier to visualize, above is a diagram of the standard rows and widget positions.

In addition to the preset layouts, there are 4 preset CSS styles, changeable background colors, thumbnail adjustments, font settings and an easy Custom CSS window.

By now you should be familiar with the core basics for working with Gantry.

1. There are rows and inside each row there are positions.
2. You can adjust the positions used and their relative sizes with dividers and sliders.
3. You can change the style and create a new preset for experimentation.

Another feature that I didn’t go over, but it’s nice to know about, is that Gantry allows you to put shortcode in widgets. When you can put a widget just about anywhere on the screen, and you can put just about anything in a widget, you have unlimited possibilities for layout and content presentation.

This is just the starting point. If you find this a convenient way to work, visit gantry-framework.org and there are lots of videos and tutorials specifically on Gantry.