Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 2 – The Relationships Between Skins, Templates and Web Pages

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.

Video Transcript

Okay so let’s just start from the beginning with this. What is a skin? The term a skin is actually something that is not very often used in the context of WordPress because WordPress uses themes. And a skin is different than a theme. A skin is a collection of templates and a set of styles. And a skin is something that you create using the Thesis theme or specifically, Thesis 2.0 and using Thesis 2.0, you will create or customize a skin which consists of a collection of templates and a set of styles.

Now in Thesis, templates and styles are skin-dependent which means if you change skins then you are changing to a new set of templates and to a new set of styles. Okay so whatever templates and styles that you create in one skin, will only be in that skin. And if you switch skins, you’ll be looking at a new set of templates and a different set of styles.

So this leads me to tell you that you have 4 things you need to keep track of when you are understanding the relationship between skins, templates, and web pages. And those 4 things are structure, content place holders, styles and content. Essentially, your template is the structure and the content placeholders and your web page is the content inserted into the structure and then styled with styles. So you have these 4 concepts that you end up needing to convert or manage in your mind as you think about what happens when you create a blog post or what happens when you create a page and what happens when you make that content. And then when you style your template or you structure your template or you put content placeholders in your template, how well that stuff works together. These are really the 4 main things… well in fact, everything that we’re doing can be categorized either as template structure, content place holders, styles, or actual content.

And so what a template does is a template takes your content and displays it as a web page. So templates create the structure of your web page and templates include content placeholders. So let’s take a look at something like that for just a second here. If you look at this page here, the structure of this page is that you know, on the top of the page, there’s a header. And below that header, there is a navigation bar. And below this navigation bar, there’s another navigation bar. And then below that navigation bar, there’s a breadcrumb trail. And then below that breadcrumb trail, there are two columns. There is this content column and there is a sidebar column. And then below those two columns is a footer and inside that footer is a breadcrumb trail and below that is a menu and below that are these widget areas. And then below that is a copyright. That relationship of above and below and beside, that is the structure of this page. And it’s the template that gives the page the structure and that says that the header is going to be at the top rather than say the header being at the bottom. That’s the part of it that gives you the structure.

And then the content place holders in the template are the places in the template where, for example, the nav menu is. So the nav menu is actually content but there’s a place holder in this template that says insert this navigation menu. And a placeholder here that says insert this navigation menu and a place holder that says insert this post and insert widgets and that kind of thing. Those are the content place holders that direct the template to insert certain kinds of content. So the template displays your content as a web page. It creates a structure and it includes content place holders.

Now the css styles your web page and the style of your web page exists both for the structure and also for the content. So the css styles 2 different things. It styles the layout or the structure and it styles the content and you can see that in evidence here. Here’s my homepage right here. Okay, once I turn off my css, so if I disable all styles, now you can see that there is… I’ve lost all of my apparent structure and all of my apparent styles because all these things are just one thing stacked on top of another now in a long list. And that’s because the css was turned off and it’s that css that styles both the structure so it lets stuff sit side by side. And then it also does things like add color and so it builds a border around the box and it makes this thing a big heading and it’s got blue down here in the bottom and the text in the section is blue. That’s what css does is it gives your structure style and it gives your content style.

So where does the content come from? Well, the content comes from elsewhere on the administrative side of your site, right? So if you are on the admin of your site and you are… let’s say, we’ll just edit the seminar, for example. Once we do that, we’re on the administrative side of our site and I am creating this content or editing this content in the content editor you know, by giving it a title, by putting in content here, by assigning a parent, by choosing a template, by giving it lesson subjects and topics, by you know, putting SEO details and additional style. All of these different things here are different kinds of content that are created here in the admin but then are displayed in a template. And you know, that’s probably pretty obvious when they think about a page.

But this is also the case for things like… for example, your site title. Your site title comes from settings here in general. My site title comes from this setting right here and my tag line comes from this. and these are also both pieces of content that are captured and displayed by the template. Okay so you add it elsewhere in the admin side of site, elsewhere being not inside the Thesis Skin Editor.

Now it almost never comes from the template. That means that content is usually comes from someplace else than the template. That is there… you may have only a single page template but every page is displayed using that template. So each time a different page is displayed, a different kind of content or a different content is being displayed.

Over there is… there are a couple of singular examples where you will put content in the template. And so every time that template is used, that same bit of content will be displayed. But really, it almost never comes from the template. And it never comes from style. The style that you create for any given part of your template is never going to add content to your site. So where does the content comes from? It comes from some place else on the admin side. Sometimes, although very infrequently, but sometimes, it will come from the template and you’ll create that content in the template editor. But it will never ever come from the style of your site.

So that should help you understand these 4 pieces that draw together templates, skins, and web pages because your template is the structure and place holders that template takes content and displays it. And the skin styles the template with its styles. Okay so those are the 4 pieces that you’re managing when you’re creating anything here in WordPress.

11 Comments… add one
11 comments… add one
  • Joanne Steele November 10, 2012, 9:44 am

    DIY Themes should be paying you to create their user guide! This is so helpful. Thanks

    • Rick Anderson November 10, 2012, 1:26 pm

      Thanks for the compliment. I like Thesis and I like teaching it.

  • josef ralt December 18, 2012, 8:22 am

    hi Rick I am on the verge of giving up the whole thesis theme since I cannot even open a simple new page.
    I mean if I want to use just the same template style as the rest of my blog, I feel that it is totally beyond my understanding.
    I understand that this new theme allows for greater customization but if all I really want is just add a page, what previously was a snap, now it seems like an ordeal.
    Is there a chance that you can make a tutorial about a workflow of adding a page.
    I feel so inadequate with the new thesis 2.

    • Rick Anderson December 18, 2012, 8:53 am

      Joe, I think you have a fundamental misunderstanding of the relationship between templates and pages. You would create a page in WordPress just like you would in any theme. That page will automatically get the “page” template assigned to it unless you choose a custom template. The same thing is true for posts. You create a post in WordPress just like any other theme. Then the “single” template will automatically be assigned to the post.

      Once you have your templates completed, there is no reason to go back and edit them just because you are adding a new page or post.

      Creating a page is as simple as selecting Pages >> Add new page from your admin menu. There is nothing else to do. The rest is automatic.

  • josef ralt December 18, 2012, 9:23 am

    ok…I have a tendency to panic and get depressed apparently too quickly. i have been reading a little on the web about the new thesis 2 and got a little more insights and encouragement. After reading this post I got a little more content.
    http://www.sdavismedia.com/use-thesis-2/
    But I still feel that it would be great to have a simple workflow of adding pages to an existing site .
    I had this great idea of getting all of my friends artists to use WordPress and thesis theme but now I feel like a dumb newbie who needs to go and learn the basics of html and css.
    Anyways Rick..with all this said it is in no way criticism of your excellent teachings and your awesome help that you provide here and privately.Just venting my own frustration.
    Hope you don’t mind.
    Going back to the video.

    • Rick Anderson December 18, 2012, 11:14 am

      Joe the process of creating a page – that is the workflow of creating a page – is VERY simple. On the admin menu on the right hand side of your screen when you are logged into your website there is a “Pages” tab. If you hover over that the menu will fly out with a list that says “Add New”. Click on it, give the page a title and save it and you have created a page. There is ABSOLUTELY no HTML or CSS (or even much of Thesis) involved in creating a page.

      If you want to see that demonstrated go watch Lesson 7 of How to Build a Professional Website in Genesis – yes I said Genesis – because it is exactly the same in all themes. So you may as well see it done in a different theme to get your mind divorced from the concept that this is somehow tied to Thesis 2. If you have to read ANYTHING else about how to create a page then you are over complicating this.

  • jamie mondestin December 19, 2012, 10:40 am

    Rick is right Joe. Creating pages in Wordpress is not tied down to any specific theme. Put it this way. Where does the content for your pages and post come from?

    You, right? then you type that content into WordPress right? Before you did that, you had to create the Page or Post.

  • Jacob Scott February 26, 2013, 9:38 pm

    Rick,

    I want to give you the most sincere THANK YOU, for creating these videos for beginners. This is my first time using Thesis and I only purchased it because of the Internet Marketing training I’m taking online and this theme was recommended, however, the course was created before Theses 2.0 was created. I’ve been going crazy for a little over a week. I think I’m on the right track now. You are breaking the basics down, giving understanding of the terms and how they all relate to each other, and this is how I learn best.

    Again I truly appreciate you for doing this.

    btw. I did FB like this. I will continue to support you. Thanks bro.

    • Rick Anderson March 1, 2013, 3:35 pm

      Thanks Jacob. I’m glad you found the information helpful.

  • don donadio January 26, 2015, 9:43 am

    Hi Rick. I was watching this video and noticed that tool bar with the disable, Cookies, CSS, etc. in it. Is that a custom tool bar that you made or a Firefox addon? I can see how handy it can be, turning off CSS, etc. Thanks
    DonD

  • Rick Anderson January 27, 2015, 4:15 pm

    Don that is Chrome developer tools – it comes automatically with Chrome

Leave a Comment