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 |