Build Your Own Business Website header image

Create a Thesis Responsive Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This is a new 10 lesson series that teaches a developer or designer how to create a responsive child theme for Thesis. If you are familiar with Thesis customization and want to create your own mobile ready website then this course is tailor made for you.  We will go through the process step by step and build the responsive child theme from the ground up.  When you are finished you’ll have a Thesis child theme that looks great on a mobile device, iPhone, tablet, iPad and desktop computer.

This course is designed for an intermediate WordPress and Thesis user.  This means that you are comfortable with the workings of WordPress and you have at least an introductory knowledge of HTML, CSS and PHP.  This class will be primarily focused on writing the code.  We will explain all of the concepts around the code that we write.  The class is intended to take someone who is comfortable customizing Thesis by cutting and pasting code snippets from tutorials to actually understanding those code snippets and being able to modify them for different contexts.

The child theme we are creating can be found here.  It is based on the “Blue Masters” PSD template published by Smashing Magazine. The course will teach all of the tools and skills necessary to completely build a child theme like this.

This class assumes that you are comfortable with the basic concepts of customizing Thesis.  It assumes that you are comfortable with the Thesis file structure and that you know what goes in your custom.css and custom_functions.php files.  It also assumes that you have a basic understanding of the syntax of HTML, CSS and PHP.  Essentially it assumes that you are comfortable with the material covered in Lessons 1-5 of the Customize Thesis Like a Pro tutorial course.

This class will be held every Thursday Morning from 9:00 to 11:00 am starting on May 17th.  The class will be held in a live webinar format with approximately 90 minutes of instruction and 30 minutes of Q&A.  The sessions will be recorded and will be made available for viewing a couple of days after the session is complete.

Course Outline

Lesson 1 – Understanding Child Themes

  1. Course Introduction
  2. What is Responsive Design?
  3. Child Themes in WordPress
  4. An Example Using Twentyeleven
  5. Child Themes in Thesis
  6. Mapping out the Thesis Blue Masters Child Theme

Lesson 2 – Create the Custom Header

  1. Set Up Thesis Design Options
  2. HTML Structures for Responsive Design
  3. Setup the Child Theme File Structure
  4. WordPress Constants and File Locations
  5. Understanding the Thesis Header & Nav Menu
  6. Construct the Child Theme Header
  7. Re-purpose the Thesis Custom Loop

Lesson 3 – Create the Footers and Sidebars

  1. Understanding Sidebars
  2. Register the Sidebars
  3. Call the Sidebars
  4. The Thesis Method
  5. Map Out the Child Theme Footer
  6. Register the Child Theme Sidebars
  7. Call the Child Theme Sidebars
  8. Create the Structural CSS

Lesson 4 – Create the Responsive CSS

  1. Introduction – Mobile Devices and Responsive Behavior
  2. Understanding Media Queries
  3. Set Up the Media Queries
  4. Tablet Landscape Responsive CSS Rules
  5. Forcing Device Width on Mobile Devices
  6. Tablet Portrait Responsive CSS Rules
  7. Smartphone Responsive CSS Rules

Lesson 5 – Create the Typical Styles

  1. Map Out the Site Background
  2. Create the Background Images from the PSD File
  3. Style the Background
  4. Style the Typical Page Content
  5. Style the Typical Sidebar
  6. Style the Footer
  7. Style the Main Nav Menu

Lesson 6 – Create the Front Page Template

  1. Map out the Front Page
  2. Set Up the Front Page Sidebars
  3. Set Up the Front Page Controller
  4. Using Thesis Filters
  5. Provide Support for the Orbit Slider
  6. Create Front Page CSS
  7. Make it Responsive

Lesson 7 – Create the Posts Page Template

  1. Map Out the Posts Page
  2. Setup Thesis Design Options
  3. Exclude Categories from Posts Page
  4. Restructure the Headline Area
  5. Modify the Excerpt
  6. Setup Ending Post Meta
  7. Add Custom Body Class
  8. Add the Faux Page Title to the Posts Page
  9. Add Posts Page CSS

Lesson 8 – Storing, Retrieving and Updating Thesis Options

  1. Understanding the Problem
  2. Create a Custom WordPress Hook
  3. Create Theme Activation/Deactivation Hooks
  4. Create Child Theme Default Options
  5. Set Child Theme Default Options at Theme Activation
  6. Play Nice – Restore Original Options at Theme Deactivation

Lesson 9 – Create the Featured Page Widget

  1. Understanding the WordPress Widgets API
  2. Create a Basic Widget
  3. Understanding WordPress Text Domains
  4. Understanding WordPress Loops
  5. Create the Featured Page Widget

Lesson 10 – Create a Theme Options Page

  1. Understanding the WordPress Options API
  2. Create a Basic Theme Options Page
  3. Create a Thesis Style Theme Options Page
  4. Security – Sanitize the Theme Options
  5. Using Theme Options to Load Widget Icons
  6. Using Theme Options to Save and Restore Custom Design Options

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one