Build Your Own Business Website header image

Using the Agility Skin for Thesis 2 – Part 1 – Setup Agility for the First Time

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Good morning everybody and welcome to this special seminar on Using the Agility Skin for Thesis 2. Today, the first thing we’re going to do is start off by installing Agility for the very first time.

Where to Find the Agility Skin

You can download the Agility Skin simply by coming over to Member Benefits and Skins for Thesis Theme 2 and clicking on this link. This brings up a list of skins that we have available and BYOB Agility is the one that we’re talking about here today.

Download the Skin

We’re working currently in version 2.1.7. If you scroll all the way down here near the bottom of the page and if you’re logged in you’ll see this “Download the plugin”. Ignore the word “plugin” and just download the skin. Once you’ve downloaded the skin then you can come to your Thesis 2 website and install it just like you would install any other skin.

Install the Agility Skin

Let’s come over to the dashboard and go over to Thesis Manage Skins and then upload the skin. Choose the file from where we downloaded it, byob_agility_nude.

Previously Downloaded Versions

Please note that if you’ve downloaded it before, it may be the case that you have other copies of byob_agility_nude.zip in your Downloads folder and if that’s the case then your operating system will probably rename this. So before you upload it to your site you need to make sure that this is the actual name, byob_agility_nude.

If it’s got parenthesis and a 1 or a 2 or something like that in the file name like this thesis has down here, then the installation is not going to work right so you need to make sure that it stays its actual name.

Find Agility Under Installed Skins

Then we’ll just click open, add the skin and once the skin installation is successful, it will tell you that. You can say okay and now you can see this Agility Nude 2.1 skin here in your Installed Skins section of Thesis. We’re going to activate the skin and now that it is activated, we’ll come over and take a look at the site. Here it is in its activated state.

Setup Static Front Page

The next thing you want to do is make sure that you have a static front page setup for it. So we’ll come over here to Settings and Reading. Choose “front page displays a static page” then choose the page you want as the front page. I’m going to use “Learn to Build a Website Just Like This”.

The next thing you have to do is select the posts page. I’m using my Articles page as my posts page. Click save changes and then you now have your front page setup. If you refresh your site, now you see the layout for the front page and if you come over to the Articles page you’ll see that the Articles page is now setup to be the blog post page.

Setup the Media Settings

The next thing you want to do is setup your media settings. We’re going to talk about media settings more in a few minutes but I need to give you some information just to start out. Let’s come over to your Settings and Media.

Set Standard Image Sizes

You want to set your thumbnail size to 200×200, set the large size to 647×1024 and set the medium size to 320×1024. Those should be your standard image sizes for use with Agility.

Themes have Different Standard Image Sizes

Kevin asks, “Why would you change the media sizes?”. It’s because Agility is designed to display images in a certain way. If you have your image sizes set up correctly and you upload images that are at least as large as 647 wide then WordPress will create the rest of your images perfectly to fit correctly inside of Agility.

This is actually something that people don’t talk about very often but is actually the case with all themes. If you want a nice uniform looking set of images in your theme then you should look at the theme documentation because all themes are designed to use specific image sizes.

So, no matter what the theme is, read the documentation. If you’re not using Agility then you want to read the documentation on that theme and set the image sizes so that it is ideal for that theme.

If you don’t understand what I’m talking about, I encourage you to watch the seminar called Everything You Want to Know About the WordPress Media Library (but were afraid to ask). In that seminar we talked about all things relating to images including the media settings for images.

Setup the Menus

The next thing you want to set up are your menus. Let’s come over to Appearance and Menus and you’re going to want to have 2 menus created. You’re going to want a footer menu and a main menu. I do have that.

The Footer Menu and Main Menu

The footer menu should not be a drop down menu. The footer menu is intended to be sort of a small menu with just a few items on it. The main menu can be a drop down menu with as many items in it as you want.

We’re going to remove this. Save the menu. Again, you want to have 2 menus created. If you don’t know what I mean by creating menus then you’re going to want to watch my videos on how to create menus.

It doesn’t really matter what you name them. I named them Main Menu and Footer Menu so I understand them but you can name them Flounder Menu and Salmon Menu.

Selecting the Menus to Display

We’re going to come back over here to Thesis then and go to Skin Content. We’re going to select the footer menu here by clicking on footer menu and choosing the menu we wish to display. Save those options. Come back over to Skin Content, choose the top menu and select the main menu to display. Save those options and now Agility is configured to display your menus correctly.

At the moment, what Agility does, and this is true for Thesis no matter what version of Thesis you’re using, is if you haven’t specified a menu to be used it just uses the first menu it finds and so it used that main menu on both locations by default. But now when we refresh this, you can see it’s got the footer menu down here and it’s got the main menu up here.

Setup the Header Image

One last thing you want to do is setup your header image. Again we’re going to talk about setting up the header in more length here in a few minutes but in this configuration, you want an image that say 320 pixels wide.

Add Logo Image to Media Library

We’re going to come back over here to Thesis and go to the Media Library. Select Add New and we want to choose a logo image. Under My Documents and My Business Website and images I want to use this one right here, the header image 300px.

Get Image URL

I’m going to open that and then click edit just to get the URL. Copy the URL from here and then come back over to Thesis and go to the Skin Editor now.

Add Image to Header in the Skin Editor

It doesn’t matter what template you’re in just open up the Header Area, Header Area Page, go to the Typical Header and click on its options which is this little gear.

It’s configured right off the bat to display the header image and it’s showing this header image from a different site but all you have to do is paste your header image URL there. Say okay to that and save the template. Come back over and refresh the page and now you’ve got your header image in your site.

Those are the basic immediate tasks that you’re going to want to perform when you setup Agility for the very first time.

0 Comments… add one
0 comments… add one

Leave a Comment