Build Your Own Business Website header image

Introduction to Creating Custom Skins in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Thesis 2.1 introduces a whole new set of tools for making and distributing custom skins. Those tools include a new API for Design, Content and Display options, a new developer friendly skin editor interface, new “valet methods” for incorporating custom programing and new tools for copying and distributing skins and parts of skins.

In this seminar we will review some of those new Thesis 2.1 tools as we create a simple skin from scratch. This seminar includes some light PHP and some significant HTML and CSS. We will be recreating the Barking Chihuahua Skin from scratch.

Introduction – What are the basic skills necessary in order to build a custom skin?

  • What we are building
  • Who is this for?
  • 4 levels of skin complexity
    • Simple skin – no custom programing
    • More complex skin – with custom boxes
    • Typical professional skin – with design and display options
    • Complex skin – with custom options display

Themes, Child Themes and Thesis Skins

  • Typical WordPress Themes
    • Primarily a set of template files
    • CSS to style the template files
    • Some additional functions
    • It is complete and doesn’t require additional help
    • Example Twentythirteen
  • Child Themes
    • At a minimum a CSS file
    • Can also include substitute template files
    • Example – Bee Crafty Child Theme for Genesis
  • Thesis Theme 2
    • There are no template files
    • Thesis stores template definitions in the database
    • Thesis assembles pages by generating HTML from those definitions
    • There are no CSS files – all styles are generated within the skins
  • Thesis 2 Skins
    • No template files – period
    • Function files
    • Thesis generated CSS file
    • Example – Thesis Classic Responsive
  • The Minimum necessary to create a complete skin
    • Templates
      • Home
      • Page
      • Single
      • Archive
    • Styles
      • Structural styles
      • Text styles
      • Main body
      • Sidebar
      • Widget Areas
      • Menu style
      • Comments styles
      • Comment form styles

File structure of a Thesis 2.1 Skin

  • Thesis user files
  • Skin files
    • skin.php
    • box.php
    • custom.php
    • images folder
    • default.php
    • screenshot.png

Create Your First Thesis 2 Skin from Scratch

  • A “bare bones” Thesis skin
    • folder
      • skin.php
      • image folder
  • Using the Developer Tools Box to create a skin
  • The Skin file – essential ingredients
    • Comment block contents
      • Name
      • Author
      • Description
      • License
      • Skin class name
    • Skin Class

Build the Page Template

  • HTML Structures
  • Our Layout
  • Preparing for responsiveness
    • column width
    • column context
  • Main horizontal structures
  • Main page structures
  • Header columns
  • Content columns
  • Footer columns

Add Content to the Page Template

  • Header
    • Header image
    • Menu
  • Content
    • WP Loop
    • Post box
  • Sidebar
    • Widget area
  • Add widgets to the widget areas

Create the Page Structural Styles

  • Using packages to quickly create styles
  • Create the header style
  • Create the content style
  • Create the footer style
  • Create the page wrapper style

Create the Page Text Styles

  • Body Style
  • Links
  • Site Title
  • Site Tagline
  • Post box style
    • Headline
    • Subheadline
  • Widget style
    • Headline

Create the Nav Menu Styles

  • Link
  • Hover
  • Current
  • Top Nav Menu styles

Create the Background Styles

  • body
  • page
  • content
  • footer

Build the Front Page Template

Distributing Your Skin

Question and Answer

0 Comments… add one
0 comments… add one

Leave a Comment