Professional Thesis 2.1 Skin Development header image
A course in professional skin creation for Thesis 2.1

Course

Over 60 hours of video instruction

Most programming courses out there are short and sweet.  There is even one that promises to make you proficient in HTML, CSS, PHP and Javascript with 20 hours of video.  The fact is that unless you are already proficient in Object Oriented PHP you won’t get a thorough understanding of Thesis 2 programming in 20 hours.

This class assumes that you are a little familiar with PHP and then builds from there.  We lay the foundation and then step by step add concepts so that by the end you will be writing very advanced code.

By time you are completed you will have created a modern skin with 45 custom skin boxes using almost every possible Thesis API functions.

6 Hours of 1 on 1 coaching

Another big difference between this course and others out there is that you get 1 on 1 help from me.  I will help you get over the rough spots, get past hurdles and apply the concepts you are learning to your own personal projects.

59 Homework assignments with solutions and sample code

You won’t learn this without practice.  Each module gives you a set of homework assignments where you can implement the concepts taught in that module.  I will personally grade and evaluate every homework assignment plus at the end of the module I demonstrate the solution and provide sample code.

Fully indexed lessons

The website is designed to be a resource for you long after the class is finished.  Each lesson is tagged with it’s main concepts and when you need to refresh your memory you can go to the index and find the lessons that address the issue you need.

It’s not just a course – it is a full blown multimedia reference for Thesis Skin Development!

Class forum answered by Rick Anderson

Get all the help you need on the class forum.  I answer each and every question as quickly as possible.  Plus the questions others have asked may offer you the piece of information you need.

You can even ask questions about your personal project there.  Anything that has to do with programming in Thesis is fair game.

Course Syllabus

Professional Thesis 2.1 Skin Development
Learn how to create a professional quality Thesis 2.1 skin
Module 1 Pre-Course Preparation
Before the first lesson in the course please complete the following pre-course preparation
Unit 1 Course Introduction
Unit 2 Setup Your Forum Profile
Unit 3 Setup Your Working Environment
Unit 4 Familiarize Yourself with Related Seminars on BYOBWebsite
Module 2 Create the Skin Base
In this lesson we will setup the skin files and folder structure. We will also take care of some of the house keeping functions like adding fonts.
Unit 1 Module 2 Introduction:
Unit 2 Setup Your Project
Unit 3 Thesis Skin File Structure
Unit 4 Setup Folder Structure
Unit 5 Create skin.php
Unit 6 Thesis File Location Constants
Unit 7 Loading Javascript Files in the Skin
Unit 8 Create the CSS Reset
Unit 9 Add Google Fonts
Unit 10 Add Icon Font
Unit 11 Populate Skin CSS
Unit 12 Module 2 Homework
Unit 13 Question and Answer Session
Module 3 Create the Page Template & Page Banner Box
We will setup the basic skin template and begin creating custom skin boxes
Unit 1 Module 3 Introduction:
Unit 2 Deconstructing a Website
Unit 3 Add the Border HTML
Unit 4 The Neatly Grid System
Unit 5 Create the Page Template HTML
Unit 6 Fixing the Neatly HTML5 Errors
Unit 7 Introduction to Skin Boxes
Unit 8 Add HTML Options to a Box
Unit 9 Add Options to a Box
Unit 10 Add Post Meta to a Box
Unit 11 Module 3 Homework
Unit 12 Module 3 Q&A
Unit 13 Module 3 Homework Solutions
Module 4 Create the Custom Header Skin Box
The entire session will be spent assembling the pieces of the header box
Unit 1 Module 4 Introduction
Unit 2 How to Copy a Skin
Unit 3 Create the Banner Title/Subtitle Box
Unit 4 Make the Title & Subtitle Boxes Dependents of the Banner box
Unit 5 Make Post Meta Options Part of the Banner Box
Unit 6 Create the Custom Header Box
Unit 7 Add a Header Image
Unit 8 Add Label Options
Unit 9 Module 4 Homework
Unit 10 Module 4 Q&A
Unit 11 Module 4 Homework Solutions
Module 5 WordPress Security & Arrays
In this Module we finish the creation of the header box.
Unit 1 Module 5 Introduction
Unit 2 WordPress Security
Unit 3 Understanding Arrays
Unit 4 Add the Navigation Menu
Unit 5 Add Custom Menu Items
Unit 6 Create a Fallback When There Is No Menu
Unit 7 Add Search, Subscribe and Share to the Mobile Menu
Unit 8 Using Checkboxes In Thesis Options
Unit 9 Troubleshooting PHP Warnings and Notices
Unit 10 Module 5 Homework
Unit 11 Module 5 Q&A
Unit 12 Module 5 Homework Solutions
Module 6 Create Full Page Slider
We will begin creating the front page template and will create the full page slider.
Unit 1 Module 6 Introduction
Unit 2 Introduction to the full page slider
Unit 3 Add Slide Image Size
Unit 4 Add the Slides Post Type
Unit 5 Add the Slideshow Taxonomy
Unit 6 Create Slides
Unit 7 Create the Slider Using Stock Thesis Boxes
Unit 8 Identifying Parts of the Slider in Neatly
Unit 9 Create the Slider Box
Unit 10 Move javascript to box
Unit 11 Make Slider Javascript Load Slider Only on Pages with the Slider
Unit 12 Module 6 Homework
Unit 13 Module 6 Q&A
Unit 14 Module 6 Homework Solutions
Module 7 Finish the Slider & Develop the Front Page Template
In this module we will finish the slider, making it entirely stand alone and start developing the Front Page Template.
Unit 1 Module 7 Introduction
Unit 2 Add Options to the Slider to Select the Slideshow
Unit 3 Create the Slider Query
Unit 4 Create the Slider HTML
Unit 5 Move the Explore and overlay javascript to the slider
Unit 6 Add Post Type Support
Unit 7 Create the Neatly Style Parallax Call to Action box
Unit 8 Create the Front Page HTML
Unit 9 Setup Featured Content HTML
Unit 10 Setup Call to Action/Carousel HTML
Unit 11 Module 7 Homework
Unit 12 Module 7 Q&A
Unit 13 Module 7 Homework Solutions
Module 8 Refactor the Structural HTML and CSS
In this lesson we will take the 2 Neatly column systems and convert them into a single system that can be used in all contexts. While doing this we will learn how to use dependent options
Unit 1 Module 8 Introduction
Unit 2 Restructure Front Page HTML & CSS
Unit 3 Creating Dependent Options
Unit 4 Refactor the CSS
Unit 5 Equalize Column Heights with matchHeight.js
Unit 6 Module 8 Homework
Unit 7 Module 8 Q&A
Unit 8 Module 8 Homework Solutions
Module 9 Term Options, Class Options & Custom Query Boxes
In this module we will learn to use Term Options and Class Options and then we will create a custom Query box for the carousel.
Unit 1 Module 9 Introduction
Unit 2 Add Dependent Boxes to Thesis Boxes
Unit 3 Add Term Options to Thesis Boxes
Unit 4 Move the Social Links Options to Class Options
Unit 5 Create the Carousel Box
Unit 6 Create a Dependent Rotator Box to the Carousel
Unit 7 Create the Carousel Query Options Class
Unit 8 Create the Carousel Query Class
Unit 9 Create the Carousel HTML
Unit 10 Module 9 Homework
Unit 11 Module 9 Q&A
Unit 12 Module 9 Homework Solutions
Unit 13 Module 9: Refactoring the Homework Solutions - Portfolio Style Featured Posts Query Box
Unit 14 Module 9: Refactoring the Homework Solutions - Refactor the Featured Content Box
Module 10 Using OOP to Reduce Repeated Code
In this module we will create our own classes that will reduce a significant amount of code that we have written in box.php
Unit 1 Module 10 Introduction
Unit 2 Why Bother With OOP?
Unit 3 Anatomy of a Class
Unit 4 Set Up Our Config ID Class
Unit 5 Make our config ID class work for all conditions
Unit 6 Make our config ID class work with multiple options
Unit 7 Create a config html classname class
Unit 8 Module 10 Homework
Unit 9 Module 10 Q&A
Unit 10 Module 10 Homework Review
Module 11 Create the Display Options
We will wrap the course up by setting up Display Options for the skin
Unit 1 Module 11 Introduction
Unit 2 Module 11 - Fixing our Internationalization Text Domain
Unit 3 Understanding Thesis Display Filters
Unit 4 Control the Display Filters with Display Options
Unit 5 Using the $elements property to power the foreach loop
Unit 6 Understanding the Design Options
Unit 7 Create CSS Variables from Skin Design Options
Unit 8 Sanitizing Variables Using the Thesis CSS API
Unit 9 Module 11 Homework
Unit 10 Module 11 Q&A
Module 12 Create the Design Options
Here we will set up design options for color schemes and text styles and work them into the Skin CSS
Unit 1 Module 12 Introduction
Unit 2 Identifying and consolidating Neatly Colors
Unit 3 Introduction to Thesis 2.1 Color Scheme System
Unit 4 Setup Color Scheme for grayscale
Unit 5 Setup CSS Variables for grayscale
Unit 6 Add Variables to Skin CSS
Unit 7 Setup Color Scheme for Colors
Unit 8 Make CSS rule names more generic
Unit 9 Module 12 Homework
Unit 10 Fix the Responsive Columns so the Match Height works properly
Unit 11 Module 12 Q&A
Unit 12 Module 12 Homework Solutions
Module 13 Create the Portfolio Post Type and Portfolio Templates
In this module we will create the Portfolio post type and the Portfolio templates - including the sortable masonry template
Unit 1 Module 13 Introduction
Unit 2 Create Fixed Color Scheme Switching
Unit 3 Dynamic Color Scheme Switching - Setting the Foundation
Unit 4 Automatically Calculating Lightness
Unit 5 Automatically Calculating Contrast
Unit 6 Calculating Split Complementary
Unit 7 Fixing the color error
Unit 8 Calculating Triadic Colors
Unit 9 Set Opacity for Colors
Unit 10 Module 13 Homework
Unit 11 Module 13 Homework Review
Unit 12 Module 13 Q&A
Module 14 Adding Google Fonts with the BYOB Google Fonts Class
Learn how to implement any Google Font in your skin with the BYOB Google Fonts Class
Unit 1 Module 14 Introduction
Unit 2 Introduction to the byob_google_fonts Class
Unit 3 Create Font Family Design Options
Unit 4 Make Design Options Available to the Font Loader
Unit 5 Create the Font Family Variables
Unit 6 Setup Default Values for Google Fonts
Unit 7 Add the Variables to Skin CSS
Unit 8 Add Additional Fonts to the Google Fonts List
Unit 9 Modify Google Fonts that are Already in the List
Unit 10 Module 14 Q&A
Module 15 Advanced Dynamic CSS in Thesis Skins
In this module we will look at ways to extend Thesis Design Options to create dynamic CSS
Unit 1 Module 15 Introduction
Unit 2 Introduction to MixitUp jQuery Plugin
Unit 3 Create Taxonomy Terms Options
Unit 4 Setup a Default Taxonomy Based on the Archive Type
Unit 5 Dynamically Add Taxonomy Terms to Portfolio Items
Unit 6 Create the Filter List
Unit 7 Introduction to Dynamic CSS
Unit 8 Using Design Options to Populate Dynamic CSS
Module 16 Workshops
This module has workshops that were presented after the course was complete.
Unit 1 Skin Box Workshop - One Page Menu