WordPress Theme Layout with Gantry 5

[Music]

Hello, I’m Robbie Adair.

And today we’re going to be talking about

WordPress Theme Layout with Gantry 5.

I want to thank WordFest having

me as a speaker and a sponsor.

I think this is a fabulous event

that they have put together,

and I’m so happy that all the proceeds

are going to Big Orange Heart.

I think that is a wonderful foundation

doing some good work out there. Okay.

So before we jump into

the subject at hand,

I just wanted to give you

a brief background as to

who I am. I’m Robbie Adair,

and I speak at a lot of events. I

usually put those on RobbieAdair.com.

That’s my personal site.

I also have an agency that I’ve

run over 18 years Media A-Team.

We do websites and all types

of media – video, you name it.

And then also I own OS Training,

which is an online web

development training website,

where we’ve got video courses and books,

and a lot of tutorials in our blog.

And we have a pretty active YouTube

channel with lots of tips for you.

So now let’s take a look at what

we’re going to cover in this session.

So first thing that we’re going to do is

we’re just going to do a brief overview

of Gantry framework, what it is,

cause it might be something different

to you than you’ve worked with.

If you’ve worked with a page

builder builder, let’s say,

or just a standard theme. So let’s

take a look at an overview of it.

And then we’re also,

I’m going to show you that there are

some free themes that you can work with

right out of the bat so that it doesn’t

cost you any money to start playing

around with it and see if you

like it. And then where you can,

if you want to buy some, uh,

higher end themes at the same

people who do Gantry framework,

they also sell some custom things

that are already designed with it.

And I’ll show you about that as well.

And then I want to also cover terminology.

Cause there might be some terminology

that’s a little different in the Gantry

framework than what you were used

1. So we’ll talk about that.

I want to show you how

easy it is to make changes,

to try and match design that you have

already set in place and then turn that

into a theme using Gantry.

And then the last thing I’ll do is I

will also tell you about how to create a

child theme.

It’s a little bit different with Gantry

from your standard WordPress themes,

but not everybody does this. I know,

but I wanted to throw it in just in case

you’re one of those people, all right,

let’s jump in. So Gantry was created

by a company called RocketTheme.

They had themes and

templates and templates for

Grav. So they have WordPress, Grav,

And Joomla and they had extensions and

plugins. And so they were like, you know,

we have a lot of these pieces and so how

can we make this all easily combined?

And so that was when they came up with

the Gantry Framework is to try and

combine that all into one and also

then have something that works across

three platforms. And so first

of all, it is Open Source,

which I think is important. We are all

in it. We’re an open-source world here,

right? There are two free themes.

There’s one that’s very, very base.

And then one that has a few more,

uh, particles included in it.

But those are absolutely free.

And so you can start with those

and start playing around with it.

Rocket Theme offers some pay

for themes. And so you can,

if you really liked Gantry

but you don’t have the time or you find

a design there that works for what you

want, you could purchase

some of their themes.

And the cool thing about this or thing

I think is cool about it is that it is

available on three platforms.

So you have a client who has a Joomla

site and they also want a WordPress site

or Grav site. Guess what,

if you’ve got Gantry

well you can use the customizations

that you did with Gantry 5 there.

And you can repeat that process

with WordPress with very few,

little tweaks that you have to do,

but overall you can make them branded

to look the same, which is really nice.

So, you know, because WordPress, you

might want to have certain things in that,

but maybe they already, maybe

they had a legacy app built in,

in Joomla or something.

And so they don’t want to lose that

and they don’t want to rebuild it.

So you can just leave that

their skin, the way it is skin,

your new WordPress site. And no one knows

when they’re going between those two.

And so it’s really nice

for doing a matching brand

there or the same thing with

Grav, if you need a flat

file database CMS. So, um,

I think that’s a really cool

and unique thing about Gantry 5.

So now if my session inspires you to go

out and start playing around with Gantry

where do you download it?

So Gantry has its own website, Gantry.org,

and that is the framework.

It is the free themes that I was

telling you about for all three of the

platforms that it comes in. Plus

the documentation is there too.

And I’ll give you a direct

link to that in just a bit,

Rocket Theme is also a

place where you can get the

prebuilt designs that are using

Gantry 5 framework in the background.

And so that way, if you find

a design you like there,

and even once you found a design,

even if you need to manipulate,

it’s very easy to do because it’s in

Gantry 5, but those are paid for themes.

So I do like to tell you that

that those those are paid for,

but if you go to Gantry.org, you can

get a free theme of two different ones.

He helium and hydrogen,

and you can download the framework all

for free because it’s open source and we

love open source. The other thing I

want to mention is that if you want to,

the Gantry engine can also be installed

through the stores in either one of the

CMSs. So in general, you can go to the

marketplace and you can just say, Hey,

I’m looking for Gantry search for

it and install it through there.

Same thing inside of

WordPress, you can just say,

I want to install a new plugin search

for Gantry 5 and you’ll find it and you

can install it that way. And then

once you have Gantry 5 installed,

you can install the themes

and be able to activate them.

So let’s just talk a minute though,

about a new site versus an

existing site for installation.

If it is a brand new

website, obviously first,

you’re going to have to install your CMS.

So first you need WordPress obviously.

And then what you’re going to do is

install Gantry. The plug-in Gantry 5,

and then you will install one of

the themes that you’ve picked,

whether it be one of the two

free themes or paid for thing,

then obviously you want to activate

or assign that theme to this site.

Now there’s one other unique way. If

you’re, if you’re doing a new site,

if you’re doing a new site

on the Gantry.org site,

you will be able to download

a Rocketlauncher. Now,

a Rocketlauncher means they’ve already

packed it all together for you.

It’s got WordPress in there,

it’s got Gantry in there and it’s

got the theme in there. And so again,

this works, if you’re

doing a new site, right,

because you don’t have existing content,

so you can use a rocket launcher,

it asks you for a database,

you connect it to a database and it

does all the magic for you and installs

WordPress with your theme

installed and ready to go.

If you have an existing site,

what you’re going to need to do is what

we talked about before. Install Gantry.

You already have a CMS in

place, install a Gantry,

install your theme and activate

your thing. And you’re good to go.

Now the Gantry framework

is a very large topic,

that I’m doing here in just

this short little session. Uh,

so what I want you to know is

we’re doing a good overview,

but if you really decide to work on it

and dive in the documentation is going to

be invaluable and the documentation is

well-maintained. And as well-written,

you can flip between the type of CMS

that you need the documentation on.

I usually always find the answer I’m

looking for about Gantry in their own

documentation,

which is always refreshing and not just

somewhere out in Googleverse. So, um,

I do encourage you if you’re

going to start working in it,

to pull up their documentation. So

you can search through it when you,

when you get stuck on something.

So the thing that’s very powerful

about Gantry is how customizable is

even just the wysiwyg customization

that you have back in the backend of it.

So you can either pick some

preset color things if you want,

or you can create your

own color theme in there.

You can also do layouts. You

need two column on this page,

three column on this page, do you

need a footer? And then you need a,

a header area. You need a call-out area.

So you can do layouts in there with drag

and drop and slider for percentages.

Um, so it’s really handy.

And then you also have the

ability to create overrides,

which is where it really starts

getting cool because the overrides have

inheritance.

So you can have a base outline and

then you can create overrides where you

either inherit everything from

the base outline, or you say,

I want to inherit everything,

but these few areas,

I need three column on this

page or this type of page,

because you have different ways

that you can apply that. Um,

there are particles. So there’s like

built in little things like, Oh,

I need to drop a menu over here.

Or, um, I need a widget over here.

So it gives you the ability to

just drop those in on your layouts.

There are particles

that come with a theme,

but you also can find

particles out there been,

been written by their people that are

free and some that are for sale Adams

Adams. Or I like to think

of this as particles,

you can see they’re things

that we’re putting on the, uh,

the layout of the overrides, and

then Atom’s are things we don’t see.

I need to put a Google analytics on this.

I need to pull in some JavaScript on

this. So those are Atoms with the ability,

give you the ability to put things on

your outlines that are not seen behind the

scenes. So positions,

whenever you’re dragging

these particles onto a layout,

you’re putting them in a position and

you can do that different on different

overrides. So that gives

you the power to, um,

create flexibility among

the areas of your website.

So assignments, there are different ways.

Once you create an override and

make the modifications you want,

that you can assign that to

pages. So in other words,

maybe it’s a certain category. My

blog, I want to use this override for.

I can do that. Maybe it’s

just one particular page.

Maybe it’s a landing page I’ve

created this override for.

I can assign it to just that one

page or I might want to assign it to,

um, a certain tag.

So there are different ways that

we can assign these overrides,

which is really cool because it

allows us to say, Hey, you know,

in this area of my website,

I want to use this override. For instance,

maybe you have a learning

website and you have classes.

I want the classes to use this override.

And then I want the rest of my

site to look like the base outline.

So it gives you a lot of flexibility on

how you can assign these overrides to be

applied throughout your website. Okay.

So I do know there’s great

debate on creating child themes,

not creating child themes for a while.

And now I think most people

don’t create child themes,

but there are still some people

who do create child things.

And they do have a reason for doing that

because they’re going to work on core

files. That would be overwritten

when they update their, their theme.

Now, what I want to tell you about Gantry

is kind of inherently in the way that

you’re building this,

you really aren’t going to touch those

core files or you probably aren’t going

to, so you probably

don’t need a child theme,

but I wanted to cover

it in here just in case.

So the first thing you need to do is

follow the standard way you would set up a

child theme. You can follow the

WordPress documentation. It’s fantastic.

Just follow it to a T, but

Gantry is a little bit different.

There’s two files that you have to also

make sure that you have in place for

the child theme to work properly. This

is also documented in gantries, uh,

documentation thoroughly.

So you can see what exactly in those

files and everything like that.

So I’m not going to create one in here.

I just wanted to let you know that if

you want to create the child theme,

you can,

but there is an extra step besides just

doing it the way you’re used to doing it

with the WordPress documentation. So

I know just looking at, uh, flies,

doesn’t really help you

get a real feel for Gantry.

So what I want to do is let’s hop in

the back end and let me show you the

backend of Gantry and the theme and

how it all content ties together.

What we just talked about on these slides.

All right, we’ve got ourselves,

a simple little WordPress install

here with not a lot of content. Uh,

we are using the 2021

theme, as you can see,

if we look on the front end, it’s pretty

basic. I’ve got just a couple of posts.

There is actually a page,

but it’s pretty basic.

So the first thing I’m going to do is

show you how to install one of the Gantry

themes. So we’re going

to go to our plugins

and we’re going to add a new one

and we can just search for Gantry.

You’ll see there’s Gantry five framework.

Also note that Gantry four is still

available, but I suggest using Gantry 5.

If you’re just getting started,

it’s the latest and greatest

once we have it installed, we’ll

activate it. And here we go,

we have the Gantry five framework.

Now we need to go and

install one of the themes.

So let’s head over to gantries website.

We’ll go to the download page,

scroll down to WordPress and

then pick one of the themes.

Now there’s helium and hydrogen.

If you look at the size of them,

you’ll see one is bigger than the other.

Obviously the hydrogen theme is a very,

very basic theme with

barely any particles in it.

So we’re going to use the helium once.

So you can see more particles

in our example here.

So we’ll download that theme.

Let’s head back over to

our WordPress site and go

to the themes. I will say,

we’re going to add a new theme.

We’re going to upload choose the

theme that we just downloaded

and install it. Now, once

your theme is installed,

let’s go ahead and activate it.

Now, as soon as you

activate the Gantry theme,

you’re going to see that we actually

had a new menu item appear helium theme.

Now let’s just really quickly though,

head over to the front end

of our website and refresh.

And we’ll see that this

is now the theme we had.

There’s some built in demo

content inside of this.

So this is helium without us touching it.

And as you can see, we don’t have a

menu selected by default. It can’t,

it doesn’t know. I should say

which menu you want to use.

So we’re going to back here to the back.

Let’s start looking at customizing this.

So we’ll go into the helium theme. Now.

I mentioned that, that

there are some presets.

These are the presets

that are right up here.

So remember our website is kind of

a purple to blue. It’s this preset,

as you can see, it has a gold star

on it. If I wanted a red look,

I could simply just select this, save it

and refresh the front end. And

you’ll see. Now we have a red theme.

So it’s changing our whole

color palette down here

for all of the sections. Whenever

I pick one of those presets,

the cool thing is I don’t

have to pick a preset.

I could literally come down

here and do these myself,

making them whatever custom colors I want.

I’m going to go ahead and just pick

up one of these other ones though.

Just so we’ve got something to start

with. It’s not quite so red. All right.

So here’s our theme that we’ve

got going really quickly.

Let’s take a look at the layout

of the helium customization

panel here. First of all, we’ve got a

drop down. We are in the base outline.

There is also a particles

outlined here. So base outline,

and then there’s theme particles that

we can make. There’s a home particle.

Let’s take a look at this base outline

first and see what all you can change,

because normally you would set

this up first. You can see,

you can do things such as

setting your font family.

You can set accent colors, your

background, color, and text color.

Those are the base ones.

You can obviously override

that and then sections. Now,

why are these in sections? Well,

if we go up here and we

look at the layout tab,

you’ll see that the layout

is divided into sections,

where we can drag and drop

and we can move manipulate

percentages. But these

sections have names,

right? Featured intro utility.

And on that styles panel,

let’s just discard that

change on your styles page.

You saw those same names,

right? Expanded intro utility,

the same names on the layout.

We can actually drag and drop.

So let’s say for instance,

there is a branding particle.

If I want to put branding on this,

I would just simply drag and drop that

branding down anywhere where I want it.

Actually, I could even add it on

a different row if I wanted to.

So I could put it underneath now,

what did I just put on this? If

we go look down at the bottom,

you’ll see powered by Gantry

is what we just put on there.

That is because that

is the default for the

branding particle. We’ll

look at this right here.

Particle defaults. So

here is the branding.

If I change this to Robbie,

let’s say now that it’s

going to change that particle

to powered by Robbie. Okay.

So it’s very simple to change our

defaults here on the base outline so

that when we drop these

particles, they have the defaults.

Now I can always, if I

decided when I drop one,

I can always override on

a different outline and

change this. If I wanted to. Now,

the content tab is

exclusive for WordPress.

It controls the way areas of your

WordPress are affected by the template.

For instance,

maybe you want to exclude some

categories in the query settings.

So this gives you some flexibility

in the way the Gantry theme is

affecting your WordPress

site. Page settings,

page settings are where we can set

things. Let’s say, for instance,

in the background,

let’s call it that where we can set things

up that need to go in the code after

the body or before the bat

body. Maybe you have, uh,

a pixel code for marketing and you

need to put it before the body.

You can simply drop that code in here.

There’s also Atom’s that we talked

about earlier in our slideshow.

Atom’s are those behind the scene?

Things they’re not seeing like

the particles are instead.

Let’s say I need to put

Google analytics on my side.

I can just simply drop an Atom in

there and fill in my GA code here.

Simple. Anytime I want to get

rid of a particle or an Atom,

I just simply drag it up to

the top and I can delete it.

The last tab here we looked at briefly,

which are the particle defaults and

all of the installed particles do have

defaults on this tab. All right,

one last thing before we leave the base

outline is I want to go and assign on

the layouts, our menu particle

here. I want to give it a menu.

Now we’ve set up a menu

already in this WordPress site

called Main. So you could see, I was

able to select the menu I wanted.

I’ll apply, apply and save that.

Let’s go over the front end and refresh

and you’ll see this. No menu goes away.

And now we have our little sample

menu that we have on the sample menu.

We have a sample page.

So this is what the

default outline looks like.

So the home outline looks like this.

The interior page outlines look

like this. So this is a page.

This is a page.

And this is a blog page with all

the categories showing we have two

categories, blue and red underneath blog.

Now,

one more thing before we leave this base

outline that I want to do is I want to

change out this

particle defaults. I have a logo.

The default logo is an SVG. So

we’re going to get rid of that.

So let’s select an image.

Now I’ve already preloaded,

so we didn’t have to do it.

But if you need to load in an image down

at the bottom is where you can upload.

So let’s select Big Orange Heart,

and then let’s save this particle.

So we just replaced the default

logo with big orange heart.

So let’s refresh and you’ll see, there

we go. That’s our new logo on this.

Okay. So what we’re going to do now

is make a new override or outline

for this sample page. So let’s

take a look at how do we do that?

First thing, remember, this has dropped

down, shows us what outlines exist.

We have the home particle one, right?

But what we want to do

is create a new one.

So let’s go to outlines

in the upper right menu.

This is where you can see

the outlines that exist.

And we’re going to copy one of these.

Let’s just copy our base

outline and we’ll call.

This is sample and notice.

We can inherit everything

about the outline,

which is what we’ve done to

start with. So our sample,

if we go back to the setup and we

switched to our sample outline,

here it is. Now,

if I were just to assign this one to that

page right now, there’s no difference.

So let’s do something different. First.

We’re going to disinherit this section

from the base outline.

So we’re going to say no

inheritance here and apply this.

I’m going to change this logo.

So I’m going to open up the

logo and I’m going to check,

whoops, first, let’s go

ahead and disinherit.

And then let’s open this up and

let’s change this logo to the

WordFest logo

apply and save that one.

Last thing that we need to do is

we need to assign this override our

outline to the page that we want to.

So remember on our main

menu, we have a sample page,

so we’re going to select it, save it. Now,

refresh the sample page. Hey, you’ll see.

We have a different logo.

Now, this bar is also dark.

Let’s change it on this one alone.

And that is our navigation

section. So we’ll select that.

And we will say we would

like to have a real light.

Orange.

Let’s say just a pale orange up there,

refresh our page. And you’ll

see, we have a pale orange.

Now our text actually gets a

little difficult to read there.

So I’m also going to

change this default to.

Next two. Let’s do black.

So you can see, we have black

texts now, and we have this pill,

yellow background. We

have the WordPress logo.

If I were to go to another page

though that I have not assign that to,

they look like the default outline.

And then the home looks like

the home particles outline.

So you can see how easy it

was for me to change that.

Let’s do one more example

here, assigning using the blog.

So let’s look at our blog. Remember

we have two categories, blue and red.

I’m going to go back to my

outlines and I am going to copy my

sample outline. We’ll call one red,

And then we will copy it again.

And we will call one blue.

So I’m going to open up my blue one first.

I’m going to go to, excuse me, the.

Dials.

And I am going to change

these overrides here.

I would like to have

the background be blue,

and I’ll go back to having a white text

on that blue, because I think we’ll,

we’ll need it to be able

to see it this time though.

So let’s save this blue outline

and let’s go to our assignments.

So before we assign this to

directly to a page on our

menu, this time we’re going

to associate it with a

category of posts.

So this is going to go

to our blue category.

So let’s say that assignment.

Now let’s switch over to our red and

we’re going to do a similar thing where

we’re going to change that

background up there to be red.

That’s very bright red and

we’ll make white text on top.

Of it.

So we will then also go

to our assignments. Oops,

let’s save that before we leave.

You’ll notice it pops up and lets me

know if I’m trying to leave a tab without

saving. Okay.

So what we’re going to do is we are

going to go down and assign this one

to the red blog category.

Now what happened here? Let’s look,

if we go to our nothing’s changed

because we have the default outline

associated with this. But

if I were to dig in and say,

I want to see all of the blue category,

guess what happens? I have a blue bar.

I want to see the red

category. I have a red bar.

So as you can see it,

it’s very easy for me to create

different looks over different

sections of the website.

I know these were pretty simple

examples that I was giving you,

but I think it gives you a feel

for the way the inheritance and the

overrides work inside

of these outlines. Okay.

One more thing that I want to show you

about Gantry that I think is kinda nifty

is inside of Gantry.

We also have the ability up here in the

upper right-hand corner to modify our

menu somewhat. Now I only have

one menu, but if I had multiples,

I could drop down and select the one

I wanted. Let’s say, for instance,

we want our blog as opposed to

just being a text menu item.

We want it to have an icon. So we

could go into here and let’s say,

we’re looking for a pen

so we can pick a pin.

We can even make it a double the

size. So you see our size right here.

It’s giving us any sample so

we can save this applying save,

and you can see a preview of it here,

but let’s just go look on the front

end and you can see there it is.

Now we can also with that,

like a lot of times people may want to

have the home icon without having the

word home, to give themselves more

room. You can come in here and say,

I want icon only on that. And you’ll see.

Now our blog link is simply an icon

that takes us works exactly the same,

but it’s just an icon.

One other cool thing about Gantry

menus is you can actually put

widgets or particles on the main

level, or if we had sub levels,

we could even do it on drop downs.

But for right now we have one level.

So let’s drop a particle down here

and let’s select the date,

Save it and refresh. Now I do

have that out of order here.

Okay. So I can just simply put

that one to be the last one,

save that, go back and see.

And you’ll see what we have is now

the date is the last thing on there.

Okay.

Well, that’s what I’ve got today

for you. I hope you enjoyed that.

And if you haven’t ever

played around with Gantry,

I encourage you to go and download

Gantry 5, download a theme,

install it,

play around with it and just see what

you think it might be the answer you were

looking for. If you were having problems

with your current theme and layouts.

I don’t know. So I hope

this does help. Um,

and then also if you need

to get in touch with me,

you can always find me on

Twitter. Like I said before,

one of my business websites, we get

to OS Training and drop us a line.

Somebody will get back in touch with

you. If you had some questions on this,

thanks again to WordFest

for having me speak.

And I hope you enjoy the other sessions.

There’s a great lineup for you to enjoy.