Thesis Child Theme Starter Template

Applies to Version(s): Thesis 1

Does Thesis support child themes? That is a question many users have. The answer is definitively “yes”.

This tutorial will show you the best way to make a child theme for Thesis. We’ll start with a barebones class, then add in some flair to show you the possibilities. I think you’ll be delighted by how simple making a child theme with Thesis really is.

If you aren’t familiar with the Thesis Custom Loop API, quickly run over it as it is the foundation for what we’ll cover here.

The Basics

Every child theme needs to have, at the very least, a style.css. In theory, your whole child theme could simply be that one file. The basic example includes the necessary header information and one line of CSS.

The functions.php file, though not required by WordPress, is where all of your Thesis child theme customizations should occur. Do not include a custom folder with child themes! Thesis custom folders belong to Thesis, not the child theme.

It is important to point out that WordPress treats child themes in an interesting way. The child theme’s functions.php file is actually included before the parent theme’s. That means that each Thesis child theme must first include Thesis’ functions.php file in order to access the yummy Thesis goodness contained within.

You may also notice that we are using a class instead of a bunch of disparate functions. This is for a few reasons:

  1. To use the Custom Loop API
  2. Better organization
  3. Classes are how you will interact with Thesis 2.0, so you need to understand them

To use the child theme:

  1. Create a folder in the themes directory
  2. Create a style.css file and a functions.php file
  3. Copy/paste the code below to the relevant file (or just download the tar ball here)
  4. Navigate to Appearance > Themes and Switch to the child theme
  5. Visit your home page. The background should be black.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<?php
// Iinitial sanity check
if (! defined('ABSPATH'))
die('Please do not directly access this file');
// Bring in the main functions file so we have access to all the yummy Thesis goodness
include_once(TEMPLATEPATH . '/functions.php');
// we encourage you to set up a class. classes are a VERY important part of 2.0, so you need to be familiar with them.
class thesis_child_theme_example extends thesis_custom_loop {
public function __construct() {
// run the parent constructor so we can access the thesis custom loop api
parent::__construct();
// run the main init
add_action('init', array($this, 'init'));
}
public function init() {
// actions and filters that will run on init. you could put other things here if you need.
$this->actions();
$this->filters();
}
public function actions() {
// add and remove actions here
// this will force thesis to generate CSS when the user switches to the child
add_action('after_switch_theme', 'thesis_generate_css');
}
public function filters() {
// add and remove filters here
}
public function home() {
thesis_loop::home(); // remove this line and enter your custom loop
}
public function archive() {
thesis_loop::archive(); // remove this line and enter your custom loop
}
}
new thesis_child_theme_example;
view raw functions.php hosted with ❤ by GitHub
1 2 3 4 5 6 7 8 9 10 11 12
/*
Theme Name: Thesis Theme Example Child
Theme URI: http://diythemes.com/plans/
Description: Child theme for the Thesis
Author: DIYthemes - Matt Gross
Author URI: http://diythemes.com
Template: thesis_184
Version: 1.0
*/
 
/*---:[ body ]:---*/
body { background: #000; }
view raw style.css hosted with ❤ by GitHub

Advanced Customization

Now that we’ve covered the basics, lets dive into some real customization. Basically, what we’re doing here is:

  • forcing Thesis to regenerate CSS
  • exclude the Thesis style.css and include the child’s style.css
  • filter out styles related to the nav coloring, then adding our own back int
  • remove the containing div from around the nav menu

Be sure to copy/paste the code below to the correct files, or you can download the tar ball here.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
<?php
if (! defined('ABSPATH'))
die('Please do not directly access this file');
include_once(TEMPLATEPATH . '/functions.php');
class thesis_child_theme_example extends thesis_custom_loop {
public function __construct() {
parent::__construct();
add_action('init', array($this, 'init'));
}
public function init() {
// actions and filters that will run on init. you could put other things here if you need.
$this->actions();
$this->filters();
}
public function actions() {
// add and remove actions here
// this will force thesis to generate CSS when the user switches to the child
add_action('after_switch_theme', 'thesis_generate_css');
// modify the nav menu to exclude the div wrapper that WP defaults to
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', array($this, 'nav'));
}
public function filters() {
// add and remove filters here
/*
* Filter out the standard thesis style.css.
* Run this with a priority of 11 if you want to make sure the gravity forms css gets added.
*/
add_filter('thesis_css', array($this, 'css'), 11, 5);
}
public function css($contents, $thesis_css, $style, $multisite, $child) {
// filter the Thesis generated css. in this example we're removing all the nav styles related to color
$generated_css = $this->filter_css($thesis_css->css);
/*
* You can access the thesis_css object, which contains a variety of settings.
* As an example, I'll show you how to access nav text color.
* Remember that you can always do this in style.css if you don't care about users having control over the colors
*/
$my_css = "n/*---:[ my nav menu styles ]:---*/n" // it's always a good idea to add in comments as to what you're adding
. ".menu li a { color: #{$thesis_css->nav['link']['color']} }n"
. ".menu li a:hover { color: #{$thesis_css->nav['link']['hover']} }nn";
// put in everything except the main thesis style.css. also add an initial css reset
$css = $thesis_css->fonts_to_import . $this->css_reset . $generated_css . $my_css . $child;
// return it
return $css;
}
public function filter_css($css) {
if (! empty($css)) {
// remove the nav colors
if (preg_match('|/*---:[ nav colors ]:---*/(n.+){7}|i', $css))
$css = preg_replace('|/*---:[ nav colors ]:---*/(n.+){7}|i', '', $css);
// you could add more filtering here
}
return $css;
}
public function nav() {
global $thesis_site;
if (function_exists('wp_nav_menu') && $thesis_site->nav['type'] == 'wp') { #wp
$args = array(
'theme_location' => 'primary',
'container' => '',
'fallback_cb' => 'thesis_nav_default'
);
wp_nav_menu($args); #wp
echo "n";
}
else
thesis_nav_default();
}
public function home() {
$post_count = 1;
$teaser_count = 1;
$args = array(
'category__not_in' => array(1)
);
$home_query = new WP_Query($args);
while ($home_query->have_posts()) {
$home_query->the_post();
if (apply_filters('thesis_is_teaser', thesis_is_teaser($post_count))) {
if (($teaser_count % 2) == 1) {
$top = ($post_count == 1) ? ' top' : '';
$open_box = "ttt<div class="teasers_box$top">nn";
$close_box = '';
$right = false;
}
else {
$open_box = '';
$close_box = "ttt</div>nn";
$right = true;
}
if ($open_box != '') {
echo $open_box;
thesis_hook_before_teasers_box($post_count);
}
thesis_teaser($classes, $post_count, $right);
if ($close_box != '') {
echo $close_box;
thesis_hook_after_teasers_box($post_count);
}
$teaser_count++;
}
else {
$classes = 'post_box';
if ($post_count == 1)
$classes .= ' top';
thesis_post_box($classes, $post_count);
}
$post_count++;
}
if ((($teaser_count - 1) % 2) == 1)
echo "ttt</div>nn";
}
}
new thesis_child_theme_example;
view raw functions.php hosted with ❤ by GitHub
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
/*
Theme Name: Thesis Theme Example Child
Theme URI: http://diythemes.com/plans/
Description: Child theme for the Thesis
Author: DIYthemes - Matt Gross
Author URI: http://diythemes.com
Template: thesis_184
Version: 1.0
*/
 
/*---:[ body ]:---*/
body { background: #000; }
 
/*---:[ menu ]:---*/
.menu { list-style: none; }
.menu li { float: left; }
.menu li a { text-decoration: none; display: block; }
 
/*---:[ post image fix from @kristarella ]:---*/
.post_image { max-width: 100%; height: auto; }
 
/*---:[ widget lists ]:---*/
.sidebar_list { list-style: none; }
 
/*---:[ clearfixes ]---*/
#content_box:after, .menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
view raw style.css hosted with ❤ by GitHub