#creating Template: sandbox themes.

Introduction

How to customize your sandbox installation, while keeping the sandbox intact for upgrading. Originally posted by Scott in The SDC forums

Details

If you've had a chance to look at the designs for download on www.sndbx.org, you'll notice something possibly new in the header area of the style.css file:

/*
THEME NAME: My Design
THEME URI: http://www.sndbx.org/
DESCRIPTION: New curtains for an old room
VERSION: 0.1
AUTHOR: Scott Allan Wallick
AUTHOR Uri: http://scottwallick.com/
TEMPLATE: sandbox
*/

The /* TEMPLATE: sandbox */ line tells WordPress to use the theme in the /sandbox/ folder. If you wanted to do the same with, let's say, the Classic theme you'd use

/* TEMPLATE: classic */ This allows WordPress to use all the PHP files for a given theme, but use the CSS for your 'template'. Download some of the Sandbox designs and you'll see what I mean.

Such theme 'templates' are used and installed just like any other WordPress theme.

Now, in your theme 'template' folder you can also include a functions.php file that WordPress will also use. If there is a functions.php in the theme folder, it will be called first and then one in your theme 'template' folder second.

Including a functions.php with your theme template allows you to do all sorts of things, like hook the wp_head and wp_footer calls, allowing you to add scripts and customized CSS to the header, and add your own back link to the footer.

I'm working on my site right now, http://scottwallick.com/ and I'm using these techniques to create a fully-customized theme 'template' based on the Sandbox. Sort of a way to practice what I can do without messing with the theme files.

Anyhow, here's an example functions.php, stripped down, that I am using for my site.

<?php
// My Design
// Version 0.1

function header_mytheme() { // PUTS STUFF IN THE HEADER ?>
	<script src="<?php echo bloginfo('stylesheet_directory') ?>/js/scottyScripts.js" type="text/javascript"></script>

<?php } // END header_mytheme

function footer_mytheme() { // PUTS STUFF IN THE FOOTER ?>

	<div id="design-link"><a href="http://www.example.com/" title="My Design by Me">My Design</a></div>

<?php } // END footer_mytheme

add_action('wp_head', 'header_mytheme');
add_action('wp_head', wp_enqueue_script('jquery')); // ADDS JQUERY TO THE HEADER
add_action('wp_footer', 'footer_mytheme');
?>

(Of course changing "My theme" to the name of your theme. :cool:

You could also use the functions.php within a theme to build your own theme options menu specifically for your template. And all sorts of possibilities arise there: custom font choices, color scheme selections, etc.

That's just scratching the surface, but that's all I have time for at the moment.

For a working (and beautiful) example of everything I've described above, check out Adam's Bus Full of Hippies design/theme/template/etc.

Enjoy.

I'll follow this up a bit later with information on how to make a super easy SandboxOptionsMenu for your design.