Building Your Zippy Courses Theme Part 2: How Do Themes Work?

What Makes a Zippy Courses Theme?

We know that your time as a business owner, developer, or designer is very valuable, so we have done our best to remove any guess work from custom themes.

You shouldn't have to spend your time climbing a drastic learning curve in order to build a beautiful new theme, so we chose to build the systems that runs Zippy Courses themes on top of popular, secure, production ready templating technology.

It's a short list:

  1. HTML
  2. CSS
  3. Handlebars

If you've done any work on the web, the only potential stranger on this list for you might be Handlebars. You may know its cousin, Moustache, but if not here's a brief explanation:

Handlebars allows you to include rich data and structural control in your templates with no frustration. If you've never used them before, but you're familiar with both HTML and CSS, you can be up and running in under a half an hour.

Note: Want to jump ahead and see Handlebars in action? Check out our Primer on Handlebars in Zippy Courses, and see how easy it can be.

Resources for HTML and CSS

If you're new to HTML and CSS, worry not! The world wide web is flooded with examples of how to learn and use these technologies. However, if you're brand new, it can be a little daunting to know which resources are the best to learn from and follow.

That's why we asked our engineers (our experts in HTML and CSS), as well as our Customer Service team (who have to learn a little when they start helping you) to give us their favorite resources.

Video Training

  • Codecademy: The Learn HTML and CSS course at Codecademy is an excellent introduction. Our favorite part is that the material is interactive, so you get a guided tour that also lets you see what you're making as you make it. Also, it's free!
  • Treehouse: If you're interested in tech for the long haul and you're just getting your feet wet, Treehouse offers excellent training programs at $25/mo. They range from HTML and CSS all the way up to how to create iOS and Android apps.
  • Tuts+: Envato's Tuts+ site has a killer introduction to learning HTML and CSS. Not all of the content is free (though many parts of the course are), but they offer a 10 day trial, which should be enough time to get through the HTML & CSS introduction.

Tutorials

  • Tuts+: In general, Tuts+ produces some of the best training material out there. Much of their content is specific and can be advanced, but if you're looking for specific examples of how to accomplish something using HTML and CSS, you can probably find it here.
  • CSS Tricks: One of the most popular and longest running resources regarding HTML and CSS, CSS Tricks is an amazing free resource. They have a curated series, Just Starting Out with HTML & CSS, that is one of the best on the web.

What's Inside a Theme

The basic structure of a theme is very simple. When you open one up, you'll find three folders:

  • /components
  • /layouts
  • /resources

/components is completely optional but encouraged. Components are elements of your design that are re-usable or something that has enough complexity (like a checkout form) that it benefits from being separated from the layout that includes it.

/layouts is the bedrock of your theme and includes all of the layouts for every area of your site that exists. If you'd like to know exactly what the required layouts are, you can jump ahead to Theme Requirements, but we encourage you to keep reading here for now.

Note: In both /components and /layouts, you will only be able to create .tmpl files, such as page.tmpl or course.tmpl.

/resources is where you are able to include static resources for your theme such as images, stylesheets, or javascript files. To facilitate easy organization, each of these has a designated sub-folder: /resources/css (for stylesheets), /resources/js (for javascript) and /resources/images for image assets.

How Do Themes Work?

We're glad you asked, because it's very important to understand exactly how themes work before you begin building your own.

Themes are used every single time someone visits your site and every time they load a new page. The layouts, components, and resources combine to control the look and feel of your site.

Let's walk through how this works in practice:

  1. A user visits the home page of your Zippy Courses site.
  2. Zippy Courses receives this request and prepares all of the information that your theme will need to display the page for your visitor.
  3. Your theme locates the correct template for the page being visited.
  4. Zippy Courses gives the template all of the information it will need for the page.
  5. Using Handlebars, the template replaces any references to the information with the information itself.
  6. The template creates the final HTML for your page.
  7. The HTML is sent to your browser, and the visitor sees the page.

Put more simply: a user makes a request using their browser, the correct data for that page is collected, and the page is rendered for the user using that data.

Examples Please?

Sure! If you want to see the final result in action, we recommend that you head over to our GitHub and check out the (**Starter Theme**) that we've made available.

Let's see a few templates file in action:

{{!-- layouts/page/page.tmpl --}}
<!DOCTYPE html>
<html>
<body>
{{> site.head }}

{{> common.masthead }}

{{> page.body }}

    {{#if entity.layoutOptions.showFooter }}
        {{> site.footer }}
    {{/if}}

    {{> site.footer.scripts }}
</body>
</html>

And let's break this down line by line:

  1. A comment indicating which file this is. In Handlebars, all comments will be wrapped in {{!-- comment --}} tags
  2. The doctype declaration, common to all webpages.
  3. Opening <html> HTML tag, including the lang attribute, which we use a Handlebars path ({{ site.lang }}) to include the settings for the site using this template.
  4. Include the component found at components/site/head.tmpl in the theme using Handlebars ({{> site.head }}).
  5. Opening <body> HTML tag.
  6. Include the masthead component, a common component in our theme.
  7. Include the Page Body component.
  8. Begin a conditional block that checks whether the Layout Options for this page should display the site footer.
  9. Include the Site Footer component (only if the conditional is true).
  10. Close the conditional block.
  11. Include the Site Footer Scripts.
  12. Close the </body> tag.
  13. Close the </html> tag and end the file.

If you're new to Handlebars, you can check out our Primer on Handlebars for Zippy Courses to get acquainted, but hopefully even just reading these items in "plain English" gives you a good idea of what's going on and how powerful just a few characters of text can be.

Let's take a look at one of the included files:

{{!-- components/site/head.tmpl --}}

{{> site.head.open-graph }}

<link rel="icon" href="{{ assets.favicon }}">

<title>{{ entity.title }} | {{ site.name }}</title>

{{> site.head.scripts }}
{{> site.head.styles }}

The core elements of this included component are very similar to the layout using it, but let's break this one down line by line as well:

  1. Opening comment to identify the file we're reviewing.
  2. Including a component file that has page information for Facebook's Open Graph tags.
  3. Include the site favicon.
  4. The title tag, composed of the entity (in this case, a page) title, a separator, and the site name.
  5. A component that has common javascript files to include in the <head> tags.
  6. A component that has common stylesheets to include in the <head> tags.

Much of the HTML elements here have been drawn directly from the Twitter Bootstrap framework and, where appropriate, customized with Handlebars to include data specific to the site that utilizes this template.

This system of using layouts and components is very similar to (and we think easier than) building themes in WordPress. We hope you agree and that you're excited to get started building your first theme.

But before that, let's go over Handlebars in greater detail in Part 3: A Guide to Handlebars.