Introduction to Creating Custom Skins in Thesis 2.1

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