WordPress networks, child themes and Thesis

I’ve written about child themes and Thesis and WPMU and Thesis before, but as can happen with time and work both Thesis and WordPress have evolved. So I think both of these issues need to be readdressed.

WordPress networks and Thesis

A WP network is the new name for WPMU since it was included with the WordPress core in WP version 3. It allows you to create multiple sites/blogs with the one WordPress install.

Thesis uses a custom folder to isolate your own CSS and PHP customisations to the theme, and it also writes the CSS from the design options to this folder (to layout.css). Prior to Thesis 1.8.3 to use Thesis with a WP network and keep the customisations for each site separate you needed to use a new Thesis folder for each site in the network (which makes updates very tedious), or modify Thesis core files to use different custom folders for each site (also not amazing for updates), or use a child theme for each site. The child theme thing was fine with me, but now when Thesis is activated on a site in a network it gives it its own custom folder with the site’s ID. That is pretty cool, particularly since you don’t have to worry about it, and you don’t have to worry about sites changing each other’s CSS: the folders are automatically created and uniquely identified, so there’s no accidental cross-over.

An extra cool thing about this new system is that you can also use “master custom controls” on a network, so you can have PHP customisations that affect all the sites on a network by putting them in the “custom” folder of a network. That is, if you have a folder called custom in your Thesis directory, while all your sites have their own custom-ID folders, the PHP in custom/custom_functions.php will be applied to all the sites running Thesis.

Thesis and child themes

There are some other changes in Thesis, which benefit child themes and make them easier to implement.

Thesis now combines style.css and layout.css into one file (style.css gets written into layout.css and isn’t called separately). That’s great because it cuts down on the number of HTTP requests made when your site loads (always a good thing!), and it also means that the Thesis styles are always going to be loaded before your child theme style.css and custom.css (which didn’t always happen and occasionally led to oddities in CSS specificity). Also, we don’t need to call Thesis’ style.css in any way with our child theme, both it and custom.css are added to the site’s head by Thesis. That is nice: we only need to worry about adding extra stylesheets.

Thesis now (somewhere around 1.8.4 or 1.8.5) also combines child theme style.css into layout.css, so we don’t need to manually call any stylesheets! I have edited any code below accordingly.

So, to create a child theme for Thesis all we need to do is create a new theme directory containing:

style.css containing something like this (adapted from codex.wordpress.org)

As with the regular Thesis custom folder, you will need to make sure that your childtheme/custom/layout.css and childtheme/custom/cache directory have permissions of 666 and 775, respectively.

You might be wondering why, with the nifty multi-directory features I mentioned above, would anyone bother with a Thesis child theme. Well, I can think of two strong reasons! One is extra page templates: it’s a lot easier to manage updates on a site with extra page templates when they’re in a child theme folder. The other reason is when you’re using a mobile theme switcher, or something similar; if you want to make significant changes to the layout of your site for mobile devices a good way to do that is with a mobile child theme.

Child themes on Networks

I discovered a little quirk in the way child themes work with Thesis 1.8.4 networks: Thesis checks the child theme directory for a custom folder and if it doesn’t find one it decides that the site specific custom folder should be created in the parent Thesis directory. So, until further notice you should just keep a folder called “custom” in your child theme directory, whether it contains custom files or not. Thesis will then proceed to create a custom-ID directory for your site specific customisations in the child theme. It’s important to pass that initial check because that will determine the location of the stylesheets that get included in the head of the site, as well as where to write the design options CSS, and which files get edited by the custom editor. I think keeping an extra custom folder in the child theme is the best way to do that, for now.

Like this:

Related

Comments

Hi, Kristarella. First I want to thank you for all your articles, it has helped me understand WordPress and Thesis better.

But I’m now in the prosess of moving the site to another host, and decided to build it from scratch. And, since my father (in this case, the client) wants to have different blogs, I chose to go with the WP Network, but I’m not certain I would like to go on with Thesis. After some reading, it feels like Thesis is a bit bloated. Of course, the easy tweaking through custom_functions.php and custom.css has been, if not easy, at least somewhat straight forward, but still, I’m not sure if it’s the right tool for the job.

But reading this article, I might change my mind – if Thesis is Network-friendly, it might be the tool I need. So what would be the alternatives? Is WP-themes easy to implement on a Network-site? But maybe more important, how easy is it to tweak them. I have barely scraped the surface of php, and have a looong way to go to comprehend the syntax. And css? Barely touched it..

Any suggestions and recommended reading (like PHP and CSS learning tools) would be highly appreciated, both by you and you other folks who read this.. 😉

Jørn — Hey! Yeah, Thesis is much more network friendly since the release of Thesis 1.8.4 (I mentioned 1.8.3 in the post becauase the auto custom folders were implemented in that, but overall the network experience was slightly buggy, 1.8.4 is much better).

As far as other themes go, you would still need to go with a child theme, or separate theme folder for each site, unless they are themes that don’t write to any files (like Thesis does with CSS) and you want every site on the network to look the same. I don’t know how you would know whether they write CSS files until you try them, but if they have design options of some kind in the dashboard they either should write a CSS file, or they’ll insert a lot of CSS into the site head, which sucks and I wouldn’t recommend them.

I haven’t used any other WordPress themes in a while, so I can’t really give up-to-date advice on any particular themes that might work well in a network, but I think Thesis 1.8.4 is a pretty good option since you can do a reasonable amount with the design options and the forums are very helpful, and now network support is automatic.

Thanks for this post. I was totally confused as to why everything screwed up when I moved to 184. I am a web dev with Cru and was trying to nail this down before we moved forward with implementing a Thesis WordPress Network for the National ministry.

Deo — The only thing I can think of that you might have a problem with is that Thesis puts the custom-ID folders straight in the Thesis folder, whereas I think a lot of the older tutorials for setting up multiple custom folders had them inside the custom folder, so it was thesis/custom/custom-ID. If you copy the custom-ID folders to the thesis_184 folder they should be detected and be all right.

Hi Kristen. You’re the expert so here goes. I’ve played with Thesis, child themes & landing pages, and I’m getting some crazy things happening. Question why is your explanation and code of landing pages >> if (is_page(‘Squeeze Page’)) { <<< different from Thesis code function my_sales_page() { if (is_page('78')) You use page names they use page ID (confusing plus it failed to work).

I tried to run their child themes with code that they credit you for writing and I could not get it to run. Above you mention changing permissions on child themes, no mention of that in Thesis guides. What's up? Thanks Paul

Oh, you said above >>>As with the regular Thesis custom folder, you will need to make sure that your childtheme/custom/layout.css and childtheme/custom/cache directory have permissions of 666 and 775, respectively.<<< In the Thesis guide I was only told to create style.css & functions.php. When I added code to php file Thesis hung up. I deleted that code and then it worked again. No other filed created. No permissions to change.

Paul — First off, I think I wrote this before DIYthemes wrote anything about child themes, so everything I learned was from my own experimentation and testing. Some things have changed over the last three releases of Thesis, but generally what is in this post will still work.

On the landing page thing, using WordPress Conditional Tags you can use the page ID, page name, slug, pretty much any identifier for that particular conditional tag. I use page names because I find it easier to read, but the ID is a bit more reliable because it doesn’t change when you change the page name, or if there’s weird characters in the page name that can be dodgy too, otherwise it should work fine.

I’m not sure which Thesis guide you’re talking about, if you want to link to it I can comment more specifically… Sometimes they use code that I’ve posted on my blog or in the forum, but I did’t have anything to do with putting it in the user manual, so I don’t know all the articles that are there or whether the code is different to my original.

The permissions that I spoke of are the permissions that DIYthemes recommends on a regular install and upgrade of Thesis. They might not have mentioned it in regards to child themes, but it should be in the initial install instructions. I’m not 100% sure if the cache folder in the child theme custom folder is the one that gets used or not, but I mention it to exclude any thumbnail problems. layout.css definitely needs to be writable in the child theme custom folder (if it exists), otherwise your design options won’t display properly. A lot of servers will give the layout.css file sufficient permissions by default, so you won’t have an issue, it’s only if the server doesn’t do that, then changes to design options won’t do anything.

A child theme with only style.css and functions.php will work. If there is no custom folder in the child theme it will store layout.css in the main Thesis custom folder. I prefer to keep my custom folder in the child theme.

Also, since I wrote this post Thesis started compiling stylesheets together and it includes the Thesis style.css, child theme style.css and layout.css all in one file, so you actually don’t need to call the thesis style.css or child theme style.css at all, it’s done automatically in one file. Because of that though you need to resave the design options in order to bring through changes to the child theme style.css, whereas custom.css changes will come straight through (if Thesis is in “design mode”).

There’s pretty much no difference in using functions.php and custom_functions.php in a child theme situation (except maybe when using the Thesis custom loop), if it killed the site it was because there was an error in the code. You can check where that error is by the error message that shows, if none shows you can make it show by editing wp-config.php to add define('WP_DEBUG',true);.

Your comment in this post http://diythemes.com/thesis/version-184/ brought me to this one. Thanks so much for adding the note to your comment: “Note that it only applies the custom_functions.php to the network sites, not the custom.css, but you could wp_enqueue_style from custom_functions.php if you did want to use some CSS across the network.”

That key point is what caught my eye. I do want to use (some) functions and (some) CSS across the multi-site so I’ll have to look into wp_enqueue_style – that’s a new one for me. Although I suppose I could just copy-paste into each custom.css file till then.

You mention above, two strong reasons for still using child themes with thesis. – Could you explain why updates are easier with page templates being in a child folder? – Also could you point me in the direction for learning about mobile theme switchers? That would be themes which respond to detection of the browser type, I believe, yes? – I guess another benefit of a child theme would be the ability to switch via the WP dashboard. Would that be right? I’m thinking of setting up a multi-site of sample web site functional designs for prospective clients where, in each functional design, they could chose between different child themes to explore options for look-and-feel. Perhaps that could be achieved with just a single site and child themes. I’m trying to work out the best way to achieve this idea.

Regarding upgrades being easier… page templates (i.e., the ones that are used via the dropdown menu on the right when editing a page) need to be in the root theme folder; they can’t be in your custom folder. So when upgrading, if you’re working in Thesis with extra page templates you need to remember to copy all of those + your custom folder to the new Thesis folder. When you’re using a child theme, the only thing you have to do when upgrading is make sure that the template name in your child theme’s style.css is the same as the Thesis folder name, nothing else.

Theme switchers are plugins (rather than themes) that run all the time on your WordPress install, and when you’re on a mobile device, or when you manually specify, it changes you to a different theme. I’m afraid I don’t know of any particular posts that deal with the issue. There’s several plugins for WordPress that do it, for mobile, or just manually… Not sure what else to tell you, but yes, it’s a good idea for creating a demo styles site: I intend to do that in the near-ish future.

I’m also discovering interesting things about s2member deployed in blog farms. I think that would be quite an attractive model to let people set up their own blogs/sites (a la WordPress.com) but with the option of providing them a little more support, help and freedom along the way.