Welcome to lesson 10, Setup the Appearance of Your Site, in the Build a professional website using WordPress and Thesis 2.3. At this point in the process we’ve gotten the bulk of our content on our website and we can now start talking about how we make the website look the way we want it to look.
A Friendly Backup Your Site Reminder
At the end of the last session we forgot to back up. So before we start working today, we are going to do a backup of the site. I want to model what I suggest your regular practice should be which is to backup your site at the end of the day or after you’re done working on it. At that point all you have is one day’s worth of work to lose and there’s obviously no effort in doing that.
I can’t tell you how many times people have said to me “my site was hacked last night, what do I do about it?” or “my system crashed and I can’t get back in my WordPress site, what do I do about it?”. I always answer, of course the first thing to do is just take that backup you made the other day and restore your website from it. They chuckle because, of course, nobody backs up their site regularly.
I know it’s not true that nobody backs up their site but I also know that especially with people new to building a website that it’s a regular occurrence doing something that makes the site crash and a lose a ton of work. They lose that work because they just didn’t take the very small amount of time it takes to back up. So, we are backing up at the end of each lesson.
Overview of Agility Skin Settings
We’re going to get started with that by setting up the Agility Skin. But before we dive into the settings I’d like to do an overview of them. If you are familiar with the settings in Thesis then these will be recognizable to you.
3 Main Thesis Related Settings
Agility has the same big three settings. It has skin content settings which you can see down here. It has skin display settings which you can see appear at the top of this content page. It has extensive skin design settings.
Agility Specific Settings
There probably isn’t another theme or skin out there with the level of detail of skin design settings that Agility has. And then it has a bunch of Agility specific settings.
It’s got social profiles so you can decide which social profiles you want to set up here. We’ll set these up and the Yoast SEO up together.
It has social sharing links which allows you to choose which social sharing services you want your visitors to be able to share your content on.
It has the ability to set an embed width for videos and pictures and this is the global embed width. You’ll learn that you can change that on different templates but this is the this is the global width.
It also has global schema settings which we’re going to be talking about in a little while so you can set them up for your posts and your pages.
It has the ability to restore default templates. If you decide you screwed up a template and you want to get back to it you can check that template and hit restore.
Then it provides system status which is something that helps me help you in the event that something’s wrong. So if something is wrong you can report that to me by copying this and emailing it to me. That’s what the system status is for. And that’s it for the overview of the settings that we’ll be talking about.
Begin In Skin Design
When you go to set up Agility for the first time, really the place you’re going to start with is Skin Design.
And you’re going to start all the way down here at the bottom under skin dimensions. You’re going to pick the typical desktop width.
Choose Desktop Page Area Width
You have a choice of having a desktop width that is full screen so it fills the entire screen no matter how big or small it is. You can choose a 1280 screen, 1140 screen, 1032 screen or you can choose a 960 width screen. This is the width of the page area that’s what you’re defining.
So in this instance right here we’re talking about how wide is it from here to here. The page area, that is the width you’re deciding on. Once you get off the desktop these widths shrink and move around so that the content displays correctly on mobile devices which is why you set the desktop width and all the other widths are are set on their own.
We’re going to choose the 1032 width. That is the critical starting point because Agility makes a whole bunch of calculations for you based on that width. Right now, it’s set up at 1140.
You’ll see that once we’ve saved 1032 the text is going to get smaller, the width of the space is going to get smaller. The space between paragraphs will get smaller, the space between lines will get smaller. Everything is going to adjust based on the width of the desktop.
Choose Typical Content Width
There are two other widths that you can set. Although most web pages have their typical width set at with their content taking up two thirds of the width.
You can choose to have your content always at full width or that it’s three quartered widths or two thirds width or half width. We’re going to say the content column is two thirds widths which is typical.
Choose Sidebar Width
Then you would choose for the sidebar based on the content width. You’ve got to do the math obviously. If a content column is two thirds width then the sidebar is going to be one third. You can choose a sidebar is either half, one third or one quarter width.
What Do These Sizes Affect?
Based on this advisory information, Thesis calculates all these different things like spacing, padding, line height, font size and all that kind of stuff which is why we really want to set that first.
That’s not to say that you can’t change your mind. But this does have a big impact on the question of what are the right size images. This desktop width and content width with have a strong bearing on the embed width and the size of the images that you use. So I think it’s certainly easier to make this decision earlier in the process rather than later.
We’re going to use 1032 for desktop, two thirds width for content and one third width sidebars. Let’s save the dimensions.
Agility Social Profiles and Yoast SEO Settings
With that set we’re going to go to Agility social profiles. I’m opening up this page and I’m also going to come down here to Yoast SEO and over to social and I’m going to open up a second page. We’re going to fill these at the same time.
I’m going to add my Twitter, Facebook and LinkedIn profiles. Now that I’ve checked those boxes these related areas show up here. You can see that you’ve got lots of profiles to choose from and these are links to your profiles. That’s what Agility social profiles and these Yoast SEO profiles are, they are links to your profiles.
Go to Twitter. So there’s my Twitter profile. Copy my that and then paste it here in my Twitter profile. I could change this link title text but “follow me on Twitter” is fine I could use a custom URL but that doesn’t matter to me. You can use a custom Twitter image instead of the icon that the skin provides if you want to here.
Then I come back over to Yoast and down to Twitter. This wants you to put in your Twitter username. So, @byobwebsite.
The next one is the Facebook URL. And I’m going to use my byobwebsite page. Copy that and paste it in. And then LinkedIn. I only have 691 connections. There’s my LinkedIn profile. Come back over and paste my LinkedIn URL.
I think that’s good for the time being. Save the changes here in Agility and save the changes here in Yoast SEO.
Now up at the top we’re going to start going to see some social links show up here. And I can click on these and go to my Twitter, LinkedIn and Facebook page. And I believe we will find out that Yoast has put in the necessary open graph tags. It has so we’ve got it open graph tags for Facebook and we have Twitter card stuff for Twitter. Sharing is going to work properly now.
If we come over to Facebook then in Yoast we’ve added our Open Graph metadata but something we ought to do here is add an image URL. So this is going to be the image that gets shared when the post or page doesn’t have an image. I’m going to upload that and I’m just going to choose my logo.
And then if I want to see Facebook insights added to this I can choose my admin name in Facebook. I don’t know where to find the needed ID and I don’t want to spend a bunch time finding it now. But it makes sense to add that information here when you can find it.
So that’s Facebook come over to Twitter the default. You can choose either the summary or summary with a large image. I think summary is fine. Save those changes I’m not doing Pinterest so that doesn’t matter. For Google+ I could put my Google+ publisher’s page here, this is not something that really matters anymore but I could put that here.
Social Sharing Links
And that gets our social profiles set up. Then we can come back over to our social sharing links. And for social sharing I’m going to use Twitter Facebook, LinkedIn and Google+. These are these are links that let people can click on a button and share your page.
Social Links and Profile Buttons That Don’t Slow Down Your Site
Most social profile linking plugins add lots of code that slows your site down but this doesn’t have any of that. If you want to share it on Twitter and then this pops pops up on Twitter. It’s nice and simply. The same thing is true with Facebook. And so on and so forth. It doesn’t require a bunch of extra files or processing in order work.
That’s the takeaway from the social profiles. What’s provided for you here is very, very lightweight and is designed to work essentially hand in glove with the social media profile settings in Yoast SEO so there’s no duplicate effort. Agility relies on Yoast for all of that extra metadata to work. I recommend that you use those because they are fast.
Agility Skin Video Tutorials
Before we go much further I should say that we have tons of videos on using Agility. Go to member benefits, skins for thesis themes 2.2 and then down to byob Agility 3.2. You’ll see a lot of videos showing all the different things you can do with Agility that are going to be more detailed than what I’m talking about today.
It’s best if you watch these along with this seminar. You’ll get an introduction to Agility. There are many, many videos on topics like styling, customizing templates, using images, setting Agility up for the first time, etc. Anything you want to know about working with Agility you’ll find here. These videos are on discrete topics so you can easily find what you are looking for.
Agility Skin Cheat Sheets
I’ve got some cheat sheets here for as well to make it easier for you to work your way through making stylistic changes to Agility. They are in the sidebar here. I’ve got four of them. One for the header, one for the front page, one for image sizes and one for template layouts.
How to Choose Your Image Sizes
Let’s take a look at one so you can see what they can do for you. This is this image size recommendations. If you open that up image sizes are suggested based on your desktop width and the content width.
We choose a desktop with of 1032 and our content width is two thirds. This tells you that for those settings, recommendations for the large image is 647 by 1032. And medium is 320 by 132 and thumbnail is 200 by 200.
Add Embed Width for Images
So when we’re setting up our embed it is based on this large. We know we should set our embed as 647 so let’s come back over here to the embed width and type in 647. Save the Agility global embed width.
Add Media Settings
Since we’ve got this set up already we may as well come down to media settings and set those up. Go to settings and then media. The cheat sheet said the thumbnail images should be 200 by 200. The medium size should be 320 by 1032. And the large size should be 647 by 1032. So, we’ll change all of those and save the changes.
Essentially what you want to do is to give yourself leeway to put as tall an image in possible but you want these image widths to be set this way. Interestingly enough, in responsive design, that is in making a website useful on mobile devices, the width of things is more important than the height.
Image Sizes in Agility
Let’s look at this image cheat sheet just a little bit further because Agility has some custom image sizes. The featured page image is 320 by 200 and the tiny thumbnail is 75 by 75.
If you want an image that fills the entire width of the page then it should be 1032.
And if you’re using a full background image, then you should shoot for 1920 by 1080. So when you’re looking at these full background images like this image here in the background that’s 1920 by 1080. And so is it here in the demonstration site, 1920 by 1080
If you changed your mind and went to a different setting, say 1280 then we should bump things up. So things change depending upon what your configuration is. I want to make it as clear as possible that if you want to know how big your images ought to be I’ve given you a list that covers all of the typical image sizes.