Build Your Own Business Website header image

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 protected content!

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

We are going to talk about the relationship between skins, templates and web pages. Some of you may be coming from the traditional HTML web building environment. In that case, a website consists of a whole bunch of documents.

Traditional HTML Web Environment

Each web page is a single document or documents with other documents imported in. You actually have a file on the server that represents that document. Everything that is going to be displayed actually exists there. Any text that is going to be displayed is actually typed into that document.

WordPress Environment

WordPress doesn’t work that way. WordPress is a content management web application. It really has two main components. It has the content management system and it has the theming system and they are both interdependent.

Content Management System and Themes

The content management system can’t be displayed without the theming system. And the theming system doesn’t have anything to display without the content management system.

So, as opposed to HTML the content is almost never in a file. If the content is in a file either the normal processes aren’t being followed or a template has been hacked. The content is almost never in a file. The content is stored in the database.

Content is Stored in the Database

Every post you write is stored in the database. Every category you create, the relationships of the categories to the posts is stored in the database. The URL of every image that you upload to the media library is there. Every setting that you ever set in a plugin or widget, the content of widgets, the arrangement of the widgets, all that kind of thing is stored inside the database.

Templates Provide Structure and Display the Content

A WordPress theme consists of template files which are the files that are going to show you the content. Function files are the files that generally add additional functionality to templates or additional functionality to the site, that is not related to templates. And then there are style sheet files.

When you open up a traditional template you can expect to find those files. If you ask the question “how should I create a template to display custom post type?”, the answer is to open up the Single template, copy it, rename it and then make the changes you want. That’s typical WordPress practice.

WordPress template files provide structure for the content. They contain placeholders for the content and they are styled with style sheets. This should sound familiar to what I said about skins. They have structure, they contain placeholders and they are styled with style CSS. There are similarities in the concepts.

Thesis is Very Different from Other Themes

Thesis is quite different from other Themes because Thesis entirely replaces the WordPress template system. There are no template files. There is no single file, no category file, no post type archive file. There are no template files, no header file or footer or sidebar files.

Thesis Stores Template Information in a Database

All of those kinds of files that you expect to see in a regular WordPress theme do not exist in Thesis. All of the template information is actually stored in the database. With Thesis you get less files and more data.

Thesis Uses Skins

Thesis uses skins to represent WordPress themes. It’s not actually creating a WordPress theme and it’s not creating a WordPress child theme. It’s creating a representation of that out of data. And, of course, Thesis needs a skin to display the content.

The skin is the mechanism for displaying content. That brings us to “What is a Skin?”. A skin is a collection of template definitions. Not template files but template definitions and a set a styles.

Those styles are also not a file of style rules. They are style rules that are stored in the database. When you save your CSS, that data is taken out of the database and placed on a file. But the file is dynamically regenerated every time you save CSS, Custom CSS, Skin Design, etc. That style sheet is dynamically regenerated.

Templates and Styles are Skin Dependent

These template definitions and these styles are skin dependent. That means that if you are using the Thesis Classic Responsive skin, its template definitions and its style only apply to it. So if you switch over to another skin like the Effectus skin, it will have its own set of template definitions and its own set of styles.

Switching back and forth between skins means that you are switching template definitions and style definitions.

Four Main Ideas to Understand

Working in Thesis, there are four things you want to keep track of in your mind.

  • Structure of the Web Page
  • WordPress Content Placeholders
  • Skin Content Placeholders
  • Styles

You want to keep track of the structure of the web page. That is the things that tell the web page how big it is, how wide the columns are, what the display order is. It is those structural elements that lay out the page.

Then there are WordPress content placeholders which don’t really have any definition of say height or width. In and of themselves they have no definition of arrangement. They get all their content from WordPress and they’re placed in the order that you want them in by structural elements.

Then you have skin content placeholders. In Thesis Classic Responsive there are only a couple of those but it is important to remember that Thesis gives you the opportunity to add content outside of the context of the WordPress admin interface.

Then you need to keep track of the styles. Each one of these things is actually a separate piece of the puzzle. I find that beginners often have a hard time keeping these straight. I’m going to do my best to illustrate each of the these things as we go through the seminar today.

So where does WordPress content come from? It comes from the admin interface. You create a post or a page, you create a category, you place a widget, you install a plugin and put some content in the plugin. That’s where WordPress content comes from.

It almost never comes from a template. It shouldn’t come from a template and it never comes from styles. Even though some people like to use CSS style rules to add content, it’s terrible practice.

Where does the skin content come from? It comes from box options. Really box options and skin content options are the same thing. They are just different ways of viewing and interacting with the same piece of information. Box options you can see inside the Skin Editor if you’ve got that setting turned on. Skin Content options is where beginners start because of how easy it is to set options there.

0 Comments… add one
0 comments… add one

Leave a Comment