Simple:Press Version 5.5 – Child Themes

Posted on May 18, 2014

update-newsOne of the biggest development efforts in the forthcoming Simple:Press version 5.5 will be child themes. This should usher in an exciting new era of themes for Simple:Press.

Currently, we have themes and overlays which can be defined for a theme and allow easy color customization of a theme. However, each theme is completely standalone and we have been strongly recommending that all users create their own theme if they are going to make any customizations to keep from losing their changes on updates. While this works well and its quite easy to make your own theme based on one of ours, it is less than optimal since if we should make any updates to the core theme, you wont get those updates in your custom theme. We work hard to not require any updates to custom themes, but occasionally WordPress or another WordPress theme or plugin makes a change that requires an update. We have been posting all of these core theme changes for every release on our Codex site.

Still, wouldn’t it be nice to be able to make some minor customizations in CSS or custom functions and still get updates to the core themes? Well, SP Child Themes will be the answer you are looking for. Of course, if you are making wholesale changes to the theme, you may still be better off with your own custom theme. It’s also worth noting that with the introduction of child themes, any SP theme that you are currently using or have with 100% continue to keep functioning. Child themes are just another option for your customization of Simple:Press. But, how do child themes work and how do I take advantage of them? Let’s explore…

First, child themes will have the same directory structure as parent (or current) SP themes. In the main root directory of your child, you will continue to define the theme as normal. Take this example child theme:

Simple:Press Theme Title: Default child
Parent: default
Version: 1.2.6
Theme URI: https://simple-press.com
Description: The Simple:Press default theme featuring traditional forum layout with numerous color layout options
Author: Andy Staines, Steve Klasen and Brandon C
Author URI: https://simple-press.com/custom-simplepress-themes-for-every-need/
Stylesheet: my-child.css
Screenshot: spTheme.jpg
Simple:Press Versions: 5.5 and above

That is a standard SP theme definition with the addition of one line – the Parent: default. This will identify the theme as a child theme with a parent theme of default. The Stylesheet argument still points to your child theme css. It must exist like for a parent theme, even if just an empty file. That’s it, you now have a child theme.

childChild themes will show up in the SP Themes List admin panel like any other theme you can select to use. The one difference which you can see in the screenshot, is that the theme is identified as a child theme of the parent. IF the parent or child theme has overlays available, you will have a dropdown where you can select the overlay to use. You can select a child theme to be your main desktop theme or you can select it to be your phone and/or tablet theme as well. Once you have selected your child theme, you can begin to customize it. If you have made no customizations, it will look identical to parent theme and will continue to receive any updates to the parent theme as it gets them. So what can you do to customize the child theme? Let’s take a look…

If you want to customize any styles from the parent, just add the customized styles to your child theme stylesheet (the one defined in the theme template file). A nice feature of child themes is the that the parent theme css file is loaded first, followed by the child css file. So any changes you make in the child stylesheet will ‘override’ the style defined in the parent theme. So you can make the customizations needed, but still get the rest of the styles from the parent. Any updates to the parent will carry over to the child unless the customization takes precedence.

What about custom functions? Like the stylesheet, the parent spFunctions.php file will be included first, followed by the child spFunctions.php. So you can inherit any functions of the parent plus define your own special child functions. The only caveat here is that you cannot name a function in your child spFunctions.php file the same as a function in the parent. Any updates to the parent will still affect the child.

The same goes for template files. Say you want to make a slight tweak to one of the template files. All you have to do is copy the parent template file down to your theme and make your customizations. The child template file will be loaded instead of the parent, but the rest of the template files will be loaded from the parent. You can do this for as many or as few template files as you like. Another good way to continue to get any SP updates to a core theme but keep your customizations. Obviously if you make drastic css changes and modify every template file, you will be better off creating your own theme vice a child theme.

At the risk of sounding like a broken record, the same applies to icons. If you just want to change out an icon for a custom one, just drop in the images folder of your child theme. It will get used instead of the icon from the parent theme. Its an easy way to customize any number of icons, but continue using the parent for others.

Also, plugin template files and css files will continue to function the same way. The child theme will be searched first and if found will be used. If not found, the parent theme will be searched and if found will be used. If its not found in either the child or parent theme, the file from the plugin will be used.

So in a nutshell – okay a large nutshell – that is child themes and they will be making their appearance in Simple Press 5.5 which should be available very early in June. Any questions on child themes can be answered in our support forum and we will get some detailed information on the Codex.