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
- Templates
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
- 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
- Comment block contents
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