Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 2 – What is the Relationship Between Skins, Templates and Web Pages

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

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

We’ve discussed the 6 main concepts you need to know to use the Thesis 2.1 skin editor effectively so now let’s discuss the relationship between skins, templates, and web pages.

We are going to talk kind of theoretically here for a few minutes because people come to this from all different kinds of backgrounds and some of you may have come to Thesis 2.1 straight from either taking a class in or learning ordinary HTML.

Traditional HTML Web Pages

So a traditional HTML webpage or website consists of a bunch of documents and each webpage is a single document and it may include other documents into it but each web page actually has its own file that is a single document. Everything that is displayed exists inside of that document.

For example, this webpage right here, this is an HTML document that is representing a web page. In a regular HTML site, in the straight HTML site, every single piece of this text would be included inside the HTML document. So it starts off with the ! DOCTYPE HTML and has stuff in the Head and then lays out all of the content of the page inside of this one file.

WordPress is Different than Traditional HTML Pages

WordPress does this differently. WordPress has two main components.

Content Management System (CMS)

It has the Content Management System component. That is you can open up your post editor and create a post and open up a page editor and create a page that is the Content Management side of it.

Theme System

Then it has the Theme System and the Theme System is the part of it that displays this content.

How the CMS and Theme System Work Together

So one half of the system captures the content, gives you a place to enter it and then stores it. The other half of it takes the content that you’ve stored and displays it and they’re both inter-dependent. The Theme System cannot exist without the Content Management System and vice versa.

WordPress can’t display anything, can’t exist, falls apart without a theme because the content has no ability to be displayed without a theme.

In WordPress, the content then is almost never in a file. Right? We started with an HTML file that had all that content in it. Well, in WordPress none of that content would have been inside of a file. All of that content is actually stored in the database. Then a WordPress Theme comes along and captures that content and displays it. And the theme consists of template files, function files and stylesheet files.

The reason why we are talking about this is because we are going to be talking about Thesis templates and Thesis templates are analogies of WordPress template files, theme template files, function files and stylesheet files.

Reviewing Thesis 2.1 Page Source

So let’s look at this, this page is with a standard Thesis 2.1 Classic Responsive Skin installed and I’m going to view the page source, capture all the page source and then make it readable by using this www.dirtymarkup.com.

So in this case, at the moment you are seeing what looks like a regular HTML file because all of the pieces of this have been assembled into an HTML file by WordPress. For example, “The purpose of this site is to demonstrate and test various function related to the use, display and manipulation of categories”, that does not exists in a file, that exists inside of the database.

However, by the time it is rendered here it is. The content “The purpose of this site is to demonstrate and test various function related to the site” has been inserted into this web page by means of a template.

And I want to show you this in a standard WordPress template so we are going to actually change from Thesis 2.1. See, I’ve been working on this site for a long time all the way back to Thesis 1.7. We are going to activate Twenty Thirteen and then visit the site.

WordPress Content is Separate from Themes

You probably noticed that its exactly the same content, right? We’ve got the same menu, the same stuff up here ‘Using Categories in Thesis – A site for demonstrating and testing functionality surrounding categories’. The same content ‘The purpose of this site is to demonstrate and test various functions’ right? These all exist in on the site regardless of which theme is being used because the content itself is separate from the theme and you can switch themes and it’ll still continue to display the content.

WordPress Content is Displayed Different by Themes

Now, let’s view the page source on this. Copy that and stick that in the new one of these. You can see this one is 481 lines long. The Thesis version is 350 lines long and there’s a lot of similarities between the two of them but they are not actually exactly the same.

Here’s ‘The purpose of this site is to demonstrate and test various functions’, right? So, you can see that in thirteen or Twenty Thirteen this is contained inside of a div with a class of “entry-content” whereas in Thesis 2.1, this is contained inside of a div called “post_content”. The two of them they still display the same content but their HTML is different and the way in which this works in standard WordPress is that it uses templates to do this.

Themes, Templates and HTML

So if we look at Twenty Thirteen, this is the file structure. It’s got a bunch of folders in here and these folders have style sheets and function files and the like but it also has all of these template files. And these are all or primarily template files that are being used to generate that content.

So if we want to look at the template file that is being used to show that front page, we need to look at the page template file. The page template file has all this stuff in it right? First it gets the header and the header is getting this header template file here, right? So it comes in here and it gets the header and then once it gets the header it goes into the standard WordPress loop. It says okay well let’s wrap it in this HTML, we’ll give it a div id of “primary”, a class of “content_area”, inside of that we’ll do a div id of “content” and class of “site-content”, role equals “main”.

Then if we come back over and look at the actual generated code, you can see here we go, “content_area ”, id=”primary”, div class=”site-content” id=”content” and all of this is being generated by this template file here. Right? header class=”entry-header”, article id=”post-

For example, down here div class=”entry-content” this template tag, the content is being used to extract the content from the database and therefore displaying that paragraph “The purpose of this…” right?

So that’s the way templates work, they have this HTML structure in them and they have these template tags or other functions that extract information from the database and assemble all that stuff together into a single web page. Hopefully you can see the difference between this, right?

A standard web page is pretty easy to understand. Anything you want to show up in that page is typed into that page in HTML. It is easy to understand but it’s difficult to maintain. On the other hand, WordPress keeps all of that content separate from the display of the content and uses the template files to display that content.

So, you just enter your information into the Content Management System. Enter it, create a post, create a page and then WordPress takes that information out of the database and places it inside of this template, which then renders the page.

WordPress Template Files Provide Structure

Why did I bother telling you all of that? As we saw, the WordPress Template Files provide structure that’s what those divs were, those were all HTML structural elements. It contains the content placeholders and those content placeholders are the template tags that are in there that extract the information from the database and then they are styled with style sheets.

WordPress Stylesheets Provide Styling

I’ll just show you, the standard WordPress style sheet is called “style.css” and it’s this style sheet here that provides all of the definitions for what the page is going to look like. If you disable the style sheet the page wouldn’t look anything like it does now because these are all the rules that get applied to the HTML elements that make the page look the way it looks.

How the Thesis Theme Works – A Theming Engine

You might think of Thesis as a theme and we refer as the Thesis Theme but it’s only a theme by analogy because what it really is, is a “Theming Engine”. Thesis entirely replaces the WordPress template system, which means that there are no template files. There’s no page.php like we saw in Twenty Thirteen. There are absolutely no template files and just like the content all of the data, all of the template information is stored in the database as data rather than existing in files.

Thesis File Structure

Let’s look at the Thesis file structure. I mean you can take my word for it but if we look at the Thesis file structure. Notice that all of these template files that exist down here don’t exist at all inside of Thesis. In fact something that you might think of as a template file, index.php, if you open it up there’s nothing in here but a comment with a ‘Welcome to the machine’. I mean that’s just little joke, it exists because WordPress insist that it exists.

It exists exactly like style.css exists because WordPress is expecting to see this file but the only thing that Thesis uses this files for is essentially just to trick WordPress into thinking that it is a theme. Because in fact it is a theming engine, it does not create any template files and all template information is stored inside of the database.

Thesis Uses Skins to Simulate Themes

As a “Theming Engine” Thesis requires skins or uses skins to simulate WordPress themes. Again this is a simulation because every other WordPress theme on the planet is file based. So each template is a file and each template file has structure and content placeholders and all that kind of that stuff like we have seen before. Thesis doesn’t have any of that but it uses skins to get WordPress into thinking that those files exists and Thesis needs a skin to display the content.

So skins are to Thesis as themes are to WordPress. That is, Thesis is not strictly speaking a theme that is complete in it of itself. Thesis plus a skin is the full theme and just like WordPress and a theme are necessary in order to display your content. If you are using Thesis, it’s WordPress, Thesis and a Skin that are necessary.

What is a Skin?

So, what is a skin? Earlier I said it’s a collection of templates but now what I’m really going to say is that it’s really not. We’re going to keep calling them templates because they’re templates in the generic sense of the word but really they are template definitions. Because there aren’t any template files, there’s no file anywhere that acts as a template file in Thesis.

Templates and Styles are Skin Dependent

But the Skin is a collection of templates and a set of styles and the styles are the css styles that we’ll look at in a little later. Templates and styles are skin dependent, remember I said at the beginning that if you change skins you will be changing templates and changing styles. Any styles and/or templates that you created in one skin are only in that skin and when you switch skins you are going to a brand new set of templates and styles.

New people ask this question often, “I did a bunch of work in Classic Responsive now I think I want to use Social Triggers but my styles don’t seem to be coming over?”. Well, that is because they can’t come over the styles are dependent upon the skin, okay? So templates and styles are skin dependent.

4 Important Things to Track

So as you’re working your way through there are really 4 things that you need to keep track of.

  • Keep track of the structure of the template
  • Keep track of the content placeholders in the template
  • Keep track of the styles and
  • Keep track of the content

What I mean by keeping track of, I mean mentally keep track of. You don’t really have to watch it but when you see something, you have to ask yourself, is this part of the structure of the template, is this a content placeholder, is this a style or is it content? And each of these things are different.

In fact there’s really no blending of any of the four. Structure, content placeholders, style and content are the sort of theoretical or philosophical elements of a template. So just to refresh your memory, CSS styles your web page. Again CSS is used to style the template structure and it’s also used to style the content but where does the “content” come from? The content comes from the admin interface.

Where Does Content Come From?

So, anytime you’re inside the admin side of your WordPress site and you are creating a post or a page, or you’re creating a category, or assigning a category or something, or you’re placing widgets, or you’re creating a new menu, or you’re changing your site title, or you are adding a new user, all of those things are content that are stored in the database.

And all of that content is created inside of the admin interface, okay? That’s where the content comes from. Content almost never comes from the template. But as we’re going to see here in a couple of examples it can come from the template. And content never comes from the styles. So, you’re never going to add content to your site by typing it into your custom css or by adding it to a style sheet. That’s not where the content comes from, content generally speaking comes from the admin interface, it almost never comes from the template.

0 Comments… add one
0 comments… add one

Leave a Comment