kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / WordPress / Themes / Thesis / WordPress Child Themes and Thesis

WordPress Child Themes and Thesis

by

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 changes [ref]Chris Pearson’s themes have been using this since 2007, or earlier[/ref], and there were child themes [ref]from what I can see child themes made their splash in 2008[/ref]. 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 things [ref]I’m sure others will disagree, and that’s fine, they don’t have to use it[/ref]. 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!

Reader Interactions

Comments

  2. 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

  5. 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 🙂

  8. 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.

  9. 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).

  13. 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.

  14. 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

  15. 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


    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.

  16. 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

  17. Hi Kristarella so you advised I come over here from your comment on https:\/\/”www.”kristarella.blog/2010/09/thesis-squeeze-and-landing-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.

  18. 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.

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

    I appreciate it very much and thanks!

  21. 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

  23. 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

  24. 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.

  25. 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

  26. 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');

  28. 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.

  29. 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

  30. 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.

  31. 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

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

  33. 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

  35. 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.

  36. 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

  37. 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

  38. 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)