WordPress Child Themes and Thesis

Update 27 Feb 2012: As of Thesis 1.8.3 the below method for calling Thesis’ functions.php before your child theme functions causes as error. The rest of the info in this post is still valid, so I have crossed that section out. There is another method for this posted by Serge in the DIYthemes forum.
Update 3 Apr 2012: There was an incompatibility with some of these methods in 1.8.3, but they are not an issue in 1.8.4. Please see this new post for updates on these methods.

Years ago, two branches of WordPress theme customisation began: there was the custom CSS approach, where you used a custom CSS file to override styles in style.css and localise your changes1, and there were child themes2. As far as I can tell these were both in development around the same time: people realised there needed to be a better way to customise themes, and as that progressed we got theme frameworks and so on.

Now theme frameworks are abundant and we’re all trying to find the most efficient way to customise them. I’ve been using the custom CSS and functions file method for a while; first with the Copyblogger theme and then with Thesis. I like it; I find it to be a quick and simple way of doing things3. However, recently I’ve been seeing the advantages of child themes over custom files, particularly when using WordPress Networks (previously known as WPMU, sometimes now referred to as WPMS).

I’ve used child themes briefly with the Hybrid theme and others. Recently I started working on a BuddyPress child theme for Thesis (needs a DIYthemes login to access the forum thread). The BuddyPress theme compatibility plugin is pretty great, but for really smooth integration and to avoid pain when upgrading Thesis, a child theme is really the only way to go. That got me thinking that child themes would be a much simpler way of using Thesis across multiple networked sites with different customisations, without having to edit Thesis as I’ve done before. Instead of creating a new custom folder for each site, you create a new child theme and activate the child theme instead of Thesis.

You can check out the WordPress Codex for the basics of child theme development, but there are a couple of things to note when making child themes for Thesis:

  1. If you leave the custom-sample folder in tact when installing Thesis (instead of changing its name to “custom”) it will act as a fallback custom folder. If custom.css and layout.css are not found in a custom folder in your child theme there will be errors because the files won’t be found, but with custom-sample as a fallback, there won’t be. You can duplicate custom-sample and have both a custom and custom-sample folders in your main Thesis folder if needed.
  2. Copy a duplicate of the custom-sample folder to your child theme folder and name it “custom”. I don’t think it’s essential to keep using the custom folder structure in your child theme, but I highly recommend it, because you’ll have a unique copy of layout.css for each site for the Design Options to be written to, and a cache folder for that site’s thumbnails.
  3. You need to specify a template for your child theme (in style.css, e.g., Template: thesis and the template name is the folder name of the parent theme. So to avoid having to change the template name every time you upgrade Thesis you may want to name your thesis folder something generic rather than keeping the version number in the folder name.
  4. You need to import Thesis’ style.css to use in the child theme you can do that in one of two ways
    • add this to the top of style.css (note that the Thesis folder name is important here as well)

      @import url(../thesis/style.css);
    • or by add the following to the child theme’s functions.php
      if(!is_admin())
      	wp_enqueue_style( 'thesis-css', get_bloginfo('template_url') . '/style.css', '', false, 'screen,projection' );
  5. It’s important to notice that the child theme’s functions.php is loaded before the parent theme’s. This impacts interaction with Thesis in a few ways. The first I noticed was that constants such as THESIS_CUSTOM_FOLDER are not defined yet, so if you’re in the habit of locating images in the custom folder using that constant (as I am) it won’t work. Also Thesis classes (i.e., PHP classes, such as those that control the loop API) are not loaded yet, so if you are writing custom loops with the loop API you need to address this. There are multiple ways to go about it:
    • The simplest way I found was to add this line to the top of functions.php

      include_once(TEMPLATEPATH.'/functions.php');

      I don’t know if there are any caveats to doing it this way, but I haven’t come across any problems with it so far.

    • Use custom/custom_functions.php instead of functions.php: if it exists, custom/custom_functions.php should be included by the Thesis functions.php file when it is run.
    • Wrap all of the code you want to use that interacts with Thesis into a function that hooks into after_setup_theme, which is run by WordPress right after the child and parent theme functions.php files have been loaded.

Beyond that my use of child themes with Thesis has been pretty smooth sailing.

Let me know if you use them and what some of your tips are!

  1. Chris Pearson’s themes have been using this since 2007, or earlier []
  2. from what I can see child themes made their splash in 2008 []
  3. I’m sure others will disagree, and that’s fine, they don’t have to use it []

Comments

  1. says

    This is interesting and I look forward to seeing what comes of this over time.

    Recently, I’ve been messing around a bit with using child themes inside of the Thematic framework.

    I was recently turned onto it from a project I received and someone needed a very simple customization and basically a copy/paste of content from one blog to the next. So, I read a bit about Thematic, and then played around on the forums and just dove in. I really like the idea of being able to create your own theme without going into a ton of detail and having to mess with a ton of files.

    Just create a separate folder and name it whatever you want. Install it in the same directory in which the framework is housed and do yo thang!

    thanks for your awesome posts.

    JC

  2. says

    Thank you very much for your hard work on this child theme. Yes, it’s an infant but has such great potential that I was honored to install it. Your link for the 0.3 version doesn’t work yet but this is something you are probably working to solve.

    Again – your work is awesome. This child theme will be a fantastic addition to BP when it’s all working.

    PS. Sorry I didn’t see about the “not working” list you had on your post. Call it – early adopter slop for not reading everything first :)

  3. says

    Chico — It’s definitely moving towards having more support for a child theme structure. As to whether it would completely move over, I don’t know. I’m glad to be able to pick and choose which one I want to use. Child themes use a bit more infrastructure than the custom folder does at the moment, so it’s good to have the custom folder when you want it, but you can go child theme for something really heavy duty if you want to.

  4. says

    I love the grainy look of the header on this site. I also came across a similar one in a theme called fusion. I’ll appreciate if you can share with us how you created this grainy header. Many thanks for this tutorial (including the one on Thesis with wpmu).

  5. says

    Hey Kristarella, hope you had a very merry Christmas, only just cottoned on to your wp/thesis/buddypress project and find it very interesting. Looking forward to having a try of it soon, have you had any time since your last updates on it or been busy? :) Hope your well, and wish you the best in 2011, keep up the good work.

  6. says

    Hey Kristarella

    How to find the Site Footer in Thesis and paste the installation code I want above the tag? I am trying to find the body tag, and footer.php, but there doesn’t seem to be one.
    Thank you

    Martyna

  7. says

    David — I’m back on the web and I’ll post soon explaining my absence and plans for this year. Cheers!

    Martyna — Either add it to the Tracking scripts box on the Thesis Site Options page, or hook it into the footer using a function in custom_functions.php. E.g.,

    function my_footer_script() {
    ?>
    SCRIPT CODE HERE
    < ?php
    }
    add_action('wp_footer','my_footer_script');

    Check out the Thesis basics tutorials on Tech for Luddites for more info about the way Thesis works with custom.css and custom_functions.php.

  8. says

    Hey Kristarella

    I have added the code into custom_functions.php, and no change occurred.
    So I used the box for the Tracking scripts on the Thesis Site Options page, and it works!

    Thank you so much for your help:)
    Have a great day
    Martyna Bizdra

  9. says

    Hi Kristarella so you advised I come over here from your comment on http://www.kristarella.com/201.....ing-pages/

    I am not 100% comfortable with the process of a child theme. I will write below what I need to acomplish.

    – The option for the user to pick form multiple templates for each page using the sidebar where you can select a template. I see a lot of people prefer the conditional approach and just calling the custom template but as I would need multiple pages to call certain templates conditions wouldnt really work.

    – This isnt for a site with multiple authors, or installs, its one install, one user who has 100 pages on their old site and want to control whether the page they are adding has 1 2 or 3 columns and control the sidebar widget content individually.

    – I have used both widget logic and widget context lots of times and while they are useful I dont think they are that good in the hands of a rookie end user and in the situation where there are 100 pages all with their own sidebar content, especially since the html may still all be called and just hidden (load times etc).

    What I had thought was this…

    If the user could click add a new page, and select the 3 column template from the sidebar templates drop down and then use custom meta felds to add widget1 = then widget2 = add second widgets content, then it would be easy to handle the sidebar content on a page for page basis.

    I am also considering http://farinspace.com/multiple.....l-editors/ as this would make it even more user friendly allowing the user to easily add images and hyperlinks.

    What are your thoughts?

    Thanks, and did you post that article about where you have been and your plans for 2011 yet? :) Hope your well.

  10. says

    David — I still think that a child theme is easily the best way to go in this case. Thesis child themes are not very different to just using the custom folder. All you need to do is import style.css and make sure that the Thesis functions.php is loaded before your child theme’s functions (whether that be by using require_once as I have in the post, or by hooking all your functions into the after_theme_setup hook as is also mentioned in the post. That is pretty much the two differences between a child theme and just the custom folder. Then you can add as many page templates as you like to the child theme folder and it won’t make upgrading Thesis more confusing (by having extra templates in the Thesis theme folder).

    The way I do it is by duplicating the the no_sidebars.php template and giving it my own template name. Then I create functions in my child theme functions.php, or custom_functions.php to remove or replace the sidebars, as I did in the squeeze page post. Target that page template with if (is_page_template('page_1_sidebar.php')).

    My most recent post is a bit of an update, but I haven’t finished all the new stuff I wanted to do yet.

  11. says

    Great articles – very helpful and informative. You’re very good at this documentation in lamen’s terms ;)

    I appreciate it very much and thanks!

  12. Jeff Kinley says

    Hi, Great blog mate! Good on ya.

    I am trying to create a child theme for Thesis and can’t seem to make it work properly. I read your instructions several times, but I can’t help but say I’m a bit confused. Mainly with steps 4 and 5. With 4, you say that I need to import the style sheet from the parent theme. Yes. I have done this with other frameworks. Do I add the CSS import from the custom.css file within the custom folder in the child theme? Please clarify.

    Thanks,

    JK

  13. says

    Hey Kristarella,

    So I used this tutorial just the other day for the first time, with the diythemes advice for WP MU and your article on the same subject. Working pretty well so far so wanted to say thanks, I will show you the results of my idea once I am confident enough to share.

    Have you played with the above stuff much lately? or found out anything new? I recently did a pretty good post about using wordpress and thesis to create a facebook fanpage (latest interesting event). :)

    Cheers

  14. says

    David — Yeah, I’ve been using child themes more and more. They’re much better for using with multisite networks. I’m using child themes with Thesis on my site now. The sites aren’t all up and finished yet, but I’ve got:

    Each have their own child theme.
    I’ve noticed that child themes are great if you need page templates and if you’re using something like WP E-commerce that has extra theme template files it’s easier to deal with in a child theme.

  15. says

    Thats cool, I think its going to be a good solution for my developments also, a lot of time saving. On one project idea though I wanted to clone the content and settings for creating another test domain but no luck other than thesis export import options and then post options and having to tweak the plugin settings myself. Not a big problem though.

    Yeah those three look cool. Interesting you mention wp ecommerce, I love that plugin but still struggling with some loose ends in the new version and getting it 100% with thesis, I think i managed to sort out most of the problems the latest release has with Thesis but a few odd archive template issues I cannot get to the bottom of. Are you using the latest version for anything yet? I liked the basic upgrade concept in that it would now use custom post types for the products, using that I added support to these post types for thesis meta data and seo controls and hope next to get wp customer reviews a rich format review plugin to work on product pages also. Would love a chin wag about all that stuff sometime if your interested. You know what they say, two brains are better than one. lol

  16. says

    David — I was going to use WP E-commerce on my Studio site to sell skins, but I got fed up with it; it seemed to not be especially friendly for free or downloadable items, so I switched to eShop. I’m much happier with it. It’s easy to use with custom post types too, you just need to add a filter to add the meta box in:

    function product_posts($types) {
    	$types[] = 'product';
    	
    	return $types;
    }
    add_filter('eshop_post_types','product_posts');
  17. says

    Hey Kristarella,

    Glad to see your site back up and running! I just wanted to say a huge thanks – I referenced the details on this page to get my child themes up and running though I had to use a Google cache version at the time.

    I wrote an article on the blog about it – you can remove this link if you want:
    (http://www.hostliketoast.com/2.....wordpress/)

    Any feedback or tips on this article would be appreciated because I’m sure by now you have a more refined idea method for Thesis child themes.

    Thank you as always.
    Cheers,
    Paul.

  18. says

    hey Kristen
    how are you doing?
    I see a recipe on your front page, it must be tasty:) we do not have strawberries any more, but can it be good with nuts? what do you think?

    I have a question to you regarding Thesis and Cappuccino skin. I am trying to move the Nav Menu after Header, but the result is the old nav menu stays before and there is another one after the header.
    the part of my custom_function.php :

    // move navigation within #header
    remove_action(‘thesis_hook_before_header’,’thesis_nav_menu’);
    add_action(‘thesis_hook_before_title’,’thesis_nav_menu’);
    add_action(‘thesis_hook_comment_field’, ‘add_twitter_username_field’);

    I added:
    // move navigation within #header
    remove_action(‘thesis_hook_before_header’,’thesis_nav_menu’);
    add_action(‘thesis_hook_after_header’,’thesis_nav_menu’);
    add_action(‘thesis_hook_before_title’,’thesis_nav_menu’);
    add_action(‘thesis_hook_comment_field’, ‘add_twitter_username_field’);

    and it created the two nav menus I mentioned above.
    what would you suggest, What should I do to have my nav menu after the header?

    thanks!
    Martyna

  19. says

    Hi Martyna,

    It’s not my blog, but I have notifications on this post so I figured I’d jump in and offer and answer.

    I think you simply need to remove the line:

    add_action(‘thesis_hook_before_title’,’thesis_nav_menu’);

    because with the two add_actions, you’re adding the nav_menu twice.

    Try that and let us know how it goes.
    Cheers,
    Paul.

  20. says

    Hey Paul

    nice to meet you and thanks for your answer :)
    I removed the line as you suggest, and it resulted in a Parse error
    Parse error: syntax error, unexpected T_STRING in /home/successi/public_html/blog/wp-content/themes/thesis_18/custom/custom_functions.php on line 6

    but then I checked the “custom_functions.php” file on my server, and not all symbols were the same, so I corrected them, and now blog is back and the menu is where I wanted it to be.

    super, thanks :)

    one more question
    how to move the nav menu a bit to the right?

    ciao
    Martyna

  21. says

    glad I could help :0)

    It looks like the way you’ve done your menu now it’s waaay over on the right-hand side.

    If you just want it to align to the right of your page, use this instead of what you have:

    .custom ul.menu {
    float: right;
    width: auto;
    }

    how does that work?

  22. says

    Paul

    I do not know how to do it.
    Where should I put the code? Can you point me to the line that should be before the lines you suggested?

    Thank you!
    Martyna

  23. says

    Martyna — You need to change line 17 of custom.css from:
    .custom ul.menu {position:absolute; right:1.1em; width:auto;}
    to
    .custom ul.menu {float:right; width:auto;}
    to do what Paul was suggesting.

  24. says

    Hey Kristen
    nice to see you, I hope you are doing great :)
    yes, it works
    thanks a lot.
    It is an interesting job to change the traditional nav menu. I will work on it so it is centered with its shadow.
    your nav menu is also individual

  25. alan says

    hi kristarella,

    4. You need to import Thesis’ style.css to use in the child theme

    by add the following to the child theme’s functions.php

    if(!is_admin())
    wp_enqueue_style( ‘thesis-css’, get_bloginfo(‘template_url’) . ‘/style.css’, ”, false, ‘screen,projection’ );

    Q: what is thesis-css please ? did a grep on the thesis folder and, unless i’m mistaken, it isn’t declared anywhere.

    thanks

  26. alan says

    did look into the corresponding function reference before posting and, from what i understood, thought the handle had to be declared/registered first, hence did not understand where thesis-css came from, so apparently i misunderstood
    cheers to down under, from up above ;O)