Thesis Skin 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.

Thesis makes building unique, custom designs easier than ever. This tutorial will show you just how simple it is. Before we get started, however, please familiarize yourself with the basic concepts of the Thesis Custom Loop API.

Basic Template

Let’s start with a very basic example.

The first file you see is the one line of CSS for our basic example. We’ll be changing the body background to #000 (black). That is primarily there so we can see that we have successfully forced Thesis to regenerate the CSS.

The next file is the barebones custom_functions.php file. This is a skeleton class that will force Thesis to regenerate the CSS when the skin is initially installed. It is important to point out that this will only happen once.

  1. Copy/paste custom.css and custom_functions.php to your files in the custom folder
  2. Once you’ve installed everything, visit any page on the admin side.
  3. Look at your site. The body background should have changed to black.
/*---:[ body ]:---*/
body.custom { background: #000; }
view raw custom.css hosted with ❤ by GitHub
<?php
// deny direct access
if (! defined('ABSPATH'))
die('Please do not directly access this file');
class thesis_skin_example extends thesis_custom_loop {
public function __construct() {
parent::__construct(); // this "activates" the Custom Loop API
add_action('init', array($this, 'init'));
}
public function init() {
$this->actions();
$this->filters();
$this->switch_skin();
}
public function actions() {
// add and remove actions here
}
public function filters() {
// add and remove filters here
}
private function switch_skin() {
// Since after_switch_theme won't run, let's make sure that we generate the CSS
if (is_admin() && ! get_option(__CLASS__ . '_generate')) {
thesis_generate_css();
update_option(__CLASS__ . '_generate', 1);
wp_cache_flush(); // flush the cache so things don't break!
}
else return null;
}
// below this line, use methods from the Custom Loop API.
public function home() {
thesis_loop::home(); // remove this line and put your own home loop here
}
public function archive() {
thesis_loop::archive(); // remove this line and put your own archive loop here
}
}
new thesis_skin_example;
view raw custom_functions.php hosted with ❤ by GitHub

Advanced Template

Obviously, a barebones skin class doesn’t really do much for the imagination. So, let’s take a look at a more advanced customization. Please read the notes in the code!

  1. Copy/paste custom.css and custom_functions.php to your files in the custom folder
  2. Once everything is installed, visit any page on the admin side.

This class does a few things:

  • strips the container from the nav menu
  • removes the default Thesis style.css
  • excludes the default “uncategorized” category from the home page
  • filters out some of the css related to the nav colors
  • applies a simple CSS reset ($this->css_reset) that is now a default part of the thesis_custom_loop class
/*---:[ 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 custom.css hosted with ❤ by GitHub
<?php
// Initial sanity check
if (! defined('ABSPATH'))
die('Please do not directly access this file');
// classes are a VERY important part of 2.0, so you need to be familiar with them.
class thesis_skin_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();
$this->switch_skin();
}
public function actions() {
// add and remove actions here
// 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, 4);
}
public function css($contents, $thesis_css, $style, $multisite) {
// 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 custom.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;
// return it
return $css;
}
public function filter_css($css) {
if (! empty($css)) {
// remove the nav colors
if (preg_match('|/*---:[ nav colors ]:---*/|i', $css))
$css = preg_replace('|/*---:[ nav colors ]:---*/(n.+){7}|i', '', $css);
// you could add more filtering here
}
return $css;
}
public function nav() {
// we're doing this so we can remove the default container div output by WordPress
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 switch_skin() {
// Since after_switch_theme won't run, let's make sure that we generate the CSS
if (is_admin() && ! get_option(__CLASS__ . '_generate')) {
thesis_generate_css();
update_option(__CLASS__ . '_generate', 1);
wp_cache_flush();
}
else return null;
}
public function home() {
// this is really just what thesis normally does, except we are excluding posts in "uncategorized"
$post_count = 1;
$teaser_count = 1;
$args = array(
'category__not_in' => array(1) // pass an array of cat ids you DON'T want
);
$home_query = new WP_Query($args); // stick that in the WP_Query class
while ($home_query->have_posts()) { // I do my while loops in brackets cuz I'm a rebel like that
$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 = '<div class="teasers_box$top">';
$close_box = '';
$right = false;
}
else {
$open_box = '';
$close_box = "</div>";
$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 "</div>";
}
}
new thesis_skin_example;
view raw custom_functions.php hosted with ❤ by GitHub