Thesis Child Theme Starter Template

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

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:

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

To use the child theme:

Create a folder in the themes directory
Create a style.css file and a functions.php file
Copy/paste the code below to the relevant file
Navigate to Appearance > Themes and Switch to the child theme
Visit your home page. The background should be black.

	<?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

	/*
	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.

	<?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

	/*
	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