Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Thesis 2.0 is the most flexible and powerful WordPress Theme on the planet! It revolutionizes the process of customizing how your WordPress site looks and performs. Customization that used to be difficult or required extensive coding now can be easily performed without knowing or using a bit of code. However, there are some simple things you need to know in order to be able to use it effectively.

Sure, veteran web designers will understand the skin editor instinctively. And when they talk about it they do so in terms of code. There is a growing body of tutorials out there that will tell you to “add a div here” or “make that float left”.  One is left with the impression that you really need to understand code in order to use this powerful new tool. And frankly, if you know code then there are tons of complex tasks you can accomplish with the skin editor. But most regular folks can accomplish what they want without that.

This seminar is for beginners who don’t know HTML or CSS and who don’t want to learn them just to customize their sites.  It’s true, whether you are starting from an existing skin or starting from scratch regular folks can build effective custom websites without learning how to code.  The Thesis 2.0 drag and drop skin editor makes it possible for anyone to create their own unique WordPress website.

Please note that this is not a beginner’s guide to Thesis 2.0 in general but rather it’s specific to the Skin Editor. We will be creating a new Start Building Your Website Here course for Thesis 2.0 which will cover all the aspects of setting up a site.

The videos for this seminar can be found on the right in the sidebar or you can select the link below in the outline.

The 6 main Concepts You Need to Know to Effectively Use the Skin Editor

  • What a skin is
  • The relationship between templates and your web pages
  • How boxes are used to create templates
  • How packages are used to style templates
  • How boxes and packages are linked
  • How to use the Thesis skin editor interface

What is the Relationship Between Skins, Templates and Web Pages?

  • What is a skin?
    • a collection of templates
    • a set of styles
    • switching between skins means switching between templates and styles
  • 4 things to keep track of
    • structure
    • content placeholders
    • styles
    • content
  • A template takes your content and displays it as a web page
    • it adds structure
    • it places content
  • CSS styles
    • structure
    • content
    • example of my homepage
  • Where does the content come from?
    • From the admin interface
      • create a post or page
      • create categories
      • place widgets
    • In almost NEVER comes from the template
    • It NEVER comes from the style

The Interface

  • Skin Selection
  • Skin Editor
    • The Canvas
    • HTML – 5 sections
      • Template selector
      • Template layout
      • Box Library – shows available unused boxes
      • Box builder
      • Box Trash
    • CSS – 4 Sections – Not template specific
      • Package Library
      • Variable Library
      • Compile list – Skin CSS
      • Custom Code – Custom CSS
    • Images – 2 sections
      • Add image
      • Image library
    • Manager
      • Backup skin data
        • what skin data?
        • restore
        • export. delete
      • Import skin data
      • Restore default
    • THESIS

The Relationship of Boxes to Actual Pages

  • Body
  • Container (above and below)
    • nav menu
    • header
    • content
    • footer
  • Header
    • site title
    • site tagline
  • Columns (side by side)
    • Column 1
      • loop – explain
      • single post box
        • headline area
          • headline
        • post content
    • Sidebars
      • sidebar 1
        • text box
      • sidebar 2
        • widget box
  • Footer
    • Thesis attribution
    • WP Admin link

Types of Templates

  • 2 types of templates
    • core templates – automatically applied
    • custom templates – must be selected
  • Core templates
    • Home
    • Page
    • Single
    • Archives
  • Parent/child relationships in templates

Overview of the Skin Editing Process

  • What’s up with HTML and CSS?
    • structure – HTML
    • placeholder for content – HTML
    • style – CSS
  • Simple stylistic edits
    • select the package that applies to the thing you want to change
    • change the setting
    • example – tagline
  • Simple Structural Edits
    • moving existing boxes
    • removing existing boxes
  • Typical Structural edits
    • create the box
    • place the box
    • add content place holder to the box
    • create a package and link it to the box
    • adjust the package settings

HTML – The Template Editor

  • 3 types of core boxes
    • containers
    • placeholders
    • content
  • Description of core boxes
    • Container
    • WP Nav Menu
    • Post Box
    • Comments
    • Comment form
    • Trackbacks
    • Query Box
    • Widgets
    • Text Box
  • How to add a box
    • new box
    • name it – this should be meaningful
    • give it an id or class
  • How to position a box
  • Box persistence
    • create a box
    • edit a box

CSS – The Style Editor

  • What are Packages?
  • Types of Packages
    • Single element styles
    • Links
    • Horizontal Dropdown Menus
    • Post Formatting
    • Columns
    • Comments
    • Form Input
    • Widgets
  • How to Add a Package
    • pick the type of package to add
    • give it a name – this should be meaningful
    • reference – This must be unique
    • selector
    • adjust settings
  • The Skin CSS Compile list
    • the relationship between the library, the compile list and the css style sheet
    • syntax for the reference

How Boxes and Packages are Linked – Linking the Structure and the Style

  • Selector is the link
    • boxes have id and or class
    • packages have the selector
    • the composition of the selector
      • the selector needs to include the class or id designator
      • most often the selector will be simple
      • the selector can be compound
  • When to choose an ID or a class in the box
    • id for things that happen once on a template – generally for structural elements
    • class for things that may happen multiple times in a template
    • sometimes both
    • if you need to add multiple classes use a space between them
  • Do’s and Dont’s
    • use an id only once per template
    • use all lower case letters
    • use no spaces – a-z, 0-9, _, –
    • cannot start with numbers
    • make them descriptive
    • avoid WordPress generated class names
  • One-to-many relationships
    • more than one box can have the same id
    • more than one box can have the same class
    • more than one package can have the same selector

Example #1 – Change the background Style for the Site

  • This is a style only change
  • Upload a background image
  • Open the body package
  • Adjust the settings

Example #2 – Add Widget Areas to the Footer

  • This is a typical structural change that follows the typical process
  • Create the columns box
    • this is structure
    • give it a name
    • give it a class
    • drag it into place
  • Create the individual columns
    • this is structure
    • name
    • give each one a class
    • drag them into place
  • Create the widget boxes
    • these are content placeholders
    • name
    • give them a class
    • drag them into place
  • Create the Columns package
    • name
    • reference
    • selector
    • settings
  • Add reference to the compile list
  • Note which templates this affects

Example #3 – Create a Custom Template

  • Create a new custom template
  • Copy an existing template to the new template
  • Remove Elements
    • menu
    • header
    • footer
    • sidebars
  • Replace the container
    • new box
    • name
    • ID
    • move stuff around
  • Create a new package for the new container
    • new single element package
    • name, reference, selector
    • adjust width and margins
    • add reference to compile list
  • Apply custom template to a page

Question and Answer Session

9 Comments… add one
9 comments… add one
  • Susan Muschett October 29, 2012, 11:50 am

    _Is there video for this?

    • Rick Anderson October 30, 2012, 7:53 am

      Susan, there will be. The class was held yesterday and the videos are being edited right now.

  • Bob Jordan October 30, 2012, 11:28 am

    Is the Thesis 2.0.1 compatible template, that you used with the Thesis Basic Class Webinar examples, available for download? What is it called and what is the URL? THX

  • Melinda Maxfield November 3, 2012, 6:45 pm

    Rick you are my hero! Thankyou soooo so much for these seminars, you rock!

  • Richard Rodriguez November 3, 2012, 8:43 pm


    Is there video on the last part of the seminar for the question and answer part. I was cut off at the end by Hurricane Sandy. I lost all power.