Thesis 2.0 has been redesigned from the ground up. So EVERYTHING is new in Thesis 2.0! In this series we look first at the new interface and then step by step work our way through the process of altering and styling the default Thesis Classic skin that comes pre-installed. In this series we demonstrate how to change the existing templates, how to create custom headers and footers and how to style the backgrounds of the site. Along the way we present tutorials on how to use the main elements of Thesis 2.0
Part 1 – The Thesis 2.0 Interface
In this session we discuss the Thesis 2.0 interface and two of its main parts which are the Site screen and Skin screen. The Site screen allows you to choose settings that are entirely independent from skin settings so if you switch skins these settings are not altered. The Skin Editor allows you to have a canvas open which immediately reflects any changes made to the skin. We also discuss the HTML editor in depth and the CSS and Images editor inside the Skin Editor.
Well good morning everybody and welcome to this first session of What’s New in Thesis 2.0. Let’s go ahead and dive into this.
Our Demonstration Site
We are going to be building this site, The Barking Chihuahua Café. We’re going to take it from this classic Thesis style and turn it into something that’s totally cool. Most of the time we’re going to be working on setting up this demonstration site. But I do want to take a moment just to talk briefly about the different elements of Thesis.
Main Parts of The Thesis Interface
When you click on your Thesis menu, you come to the Thesis Site Settings screen. And the Thesis interface really has 2 main parts. It has this Site Settings screen and then it has the Skin Editor screen, it’s the screen that looks like this. But we’ll go back to the Site Settings screen first.
Site Setting Screen
In the Site Settings, you can set your site wide settings, that is those settings that are entirely independent of your skin settings. So when you switch between different skins, these settings stay the same.
Skin Setting Screen
You have the place where you can select the skin that you want to use and currently, Thesis comes installed with the Thesis classic skin which is what we’ll be editing today and the Thesis blank skin which is very much that -it’s a blank starting place that you’ll be able to create a skin from scratch. So you can select a skin and you can go to the skin editor under skins.
Box and Package Screens
Under boxes, you can select boxes to install. I don’t have any boxes uploaded and I don’t have a box ready to upload at the moment so I’m not going to be able to demonstrate that now. But when we get to boxes, this is where you’ll upload them. The same thing is true for packages. I’m going to talk about boxes and packages as we get further into the videos.
There’s a button over here that will take you over to look at your site and then there is information about using Thesis, the support forum and the affiliate program and all that kind of stuff over here.
So this is the Thesis Settings screen. Now there’s some pretty good help in here so it’s definitely worth scrolling down here and doing a quick read of all of this material. When we’re done setting this skin up we’ll talk about the issues that people are having upgrading and installing the helper plugin.
Now when you click on this Skin Editor, what happens is a canvass pops up which is on a separate pop up entirely. You might actually find that you have to enable pop ups for the site because your web browser may be blocking the pop up so you want to watch that. But once it does pop up, this is a canvass that shows you what the changes that you just made here look like. Now for the purpose of this video, there isn’t enough room to have both of the editor and the canvas going at the same time so I’m not going to have the canvass running. But if you’ve got 2 monitors and you’re working on your design, you can have the canvass on one monitor and your skin editor on the other and you’ll see the changes that you make in the skin editor immediately reflected in the canvass.
The Skin Editor has 3 different parts. It has the HTML editor which is essentially the place where you edit the structure of your page templates. It has the CSS editor where you create the CSS that you are using for styling your HTML. And it has an image library which is a place where you can add your images, skin-specific images in particular, and then you can use a relative URL for referencing those images in your CSS. And I’m going to demonstrate all that this in just a moment.
But the HTML editor has this template selector so right now, we’re looking at the front page. And if you click on that, you can see the core templates. We’ve got a home template, a single template and an attachment template. And then because I’ve installed the Meteor Slides plugin it creates a custom post type called slides. Thesis automatically creates a slides template that you can edit if you wish. There is a page template and under the page template is a front page template. And then there is your archive templates and these are all the different kinds of archive templates that you can create.
If you create a page template and don’t change the front page template then everything you do on the page template will pass through to your child pages in here. So the front page and the 404 page will get exactly the same styling and HTML as your Page unless you actually change that. The same thing is true with the single and the archives templates. So you can create your archive style once and then to the extent that you want a different one for say, a category you come in here and it will only change the category template but all the rest of the templates will still get the style of their parent.
And then you have the ability to create custom templates over here. The classic skin comes with a landing page custom template but you can also add as many new custom templates as you want. And in fact, one of the coolest new features of Thesis 20 is the ability to apply those new custom templates anywhere you want.
Let’s just take a look at posts and edit a post. You can see that in your post edit screen, you have the ability to choose a custom template. You can choose a custom template for every single post you post. This is something that you were never able to do in Thesis and it’s something that you’re not able to do generally in WordPress but now, you can simply select a custom template you’ve created and apply it to a specific post. The same thing is true with pages. When you’ve got one of your pages, you could choose to apply your own custom template or a specific custom template to a specific page and that will work fine. You’re not going to believe this but it also works in things like categories.
Let’s say you want all your category templates to be the same except for this one in particular. Well, this category template, you can simply choose a custom template to apply to that category template and now you can have an entirely different template for any specific category or any specific tag. If you’ve got custom taxonomies, it’s the same case. Any specific custom taxonomy can have a custom template. You can apply a custom template to absolutely anything.
So that’s the templates and you can choose when you’re creating a template to select one of the templates to copy from as well. So if you’ve got your page and you want to apply it to other things, when you select the template you want to edit, you can select the one you want to copy from and it’ll automatically copy all those settings over. So it’s pretty cool.
Another thing to look at is this little gear wheel here which allows you to open up template wide settings. So let’s just say you’ve got some custom landing page here and you want to do some special tracking scripts in it. Anything you put in here, say head scripts or footer scripts or whatever, anything you do here will apply to every page that has this template but to no other pages. For example, if you want something specific on your front page and you’re using the front page template, you can just put that on this page and it’ll show up there and no place else.
So that’s your HTML editor.