When building for Thesis (or any WordPress theme, really) there is a lot to take into consideration in terms of “upgrade-a-bility.” Thesis handles this pretty well for the most part, by relegating any user changes to the /custom folder. From there, it’s just a matter of protecting you against yourself.
I’m here to help.
Images
When ever possible, I like to serve images via CSS replacement. CSS-Tricks has a good article covering the basic about it at http://css-tricks.com/css-image-replacement/ . I like to use this method of displaying images because not only does it shift images out of content (think about it. is the background of your widget headline that should be tied to your html, or controlled via an easily updateable stylesheet), it also means that you can use relative paths to define an image, rather than a full URL.
.custom #logo a
{
display: block;
width: 500px;
height: 100px;
background: url(images/logo.png);
}
Because the background image is relative to the stylesheet (/wp-content/themes/thesis_16/custom/) that same code will work when you upgrade to Thesis 1.7 which will have a path of /wp-content/themes/thesis_17/custom. No need to hunt down images to update later on.
Stylesheets and Scripts
So what about things that can’t be managed and linked to from the stylesheet? That’s where a bit of php magic comes into play. Let’s say, for example, you wanted to include a link to a a file called “myscripts.js” in your Thesis custom folder in your to run some fancy jQuery widget that you absolutely need to have. There are two ways to do this.
1. Include the code with the full url to the file via the Thesis options panel. That’s not very php ninja of you, AND – you still set yourself up for failure when you upgrade because the url contains an exact theme name. Lame
2. Be a ninja and hook the script into the and use a PHP variable to set the url, which is the smart way to go.
function add_script_to_head() { ?>
<script type="text/javascript"
href="<?php bloginfo('stylesheet_directory'); ?>/custom/myscripts.js">
</script>
<?php }
add_action('wp_head', 'add_script_to_head');
The code above is pretty standard for adding things to the section of WordPress via hooks (which is to say, not anything unique to Thesis), with the addition of the bloginfo variable. This is a pretty handy WordPress function with a lot of uses. In this case, it dynamically writes the url of the style.css file for the current theme. To it, I’ve appended “/custom/myscripts.js” to complete the url.
Two simple changes you can make on your next project so you don’t need to worry so much about future upgrades. If you want to see these techniques in action, check out the ThesisReadyskins.
Have any tips you want to share? Leave a comment below.
