Simple:Press Documentation

Creating a Custom Theme

Simple:Press comes prepackaged with a default theme and offers several other themes you can download and add to your website. If you wish to customize the way your forum looks we recommend you create your own theme. The main reason for this recommendation is because after you edit an existing theme any new update will overwrite all your customizations. You don’t want to lose all your hard work!

You don’t have to create a theme from scratch – you can copy a supplied theme and then customize from there.

Before reading further you need to become familiar with Using Themes with Simple:Press, where the theme folders are located and how to select different themes. You can read more on that here.

Steps to creating your own theme

1) Double Check Where your Themes are Located

First you want to make sure you know where your themes are located. The Using Themes page mentioned above  talks about this but to reiterate you need to check the Forum Admin > Integration > Storage Locations  panel for the location of your forum themes. By default they will be in the /wp-content/sp-resources/forum-themes/ folder.

2) Pick a Theme to Copy and Create your New Theme’s Folder

Choose a currently supplied theme you wish to duplicate and copy the folders and files to a new folder bearing the unique name of your new theme. If your new theme is to be called ‘mytheme’ then create that folder and copy all the contents of  say ‘default’ into it.

Note that some Simple:Press themes are driven by simple, standard CSS files (the ‘CSS Only Theme for example). Others are driven by a php file that contains the base CSS rules but mixes in what we call an ‘Overlay’ file’. This second method makes colour, font and other changes very easy and quick to make. The ‘Default’ theme is a good example of this type of theme.

3) Rename your custom theme’s filename

Once you have everything from the original theme copied to your new ‘mytheme’ folder you need to rename and edit a few files.

Within your newly copied folder there will be a ‘styles‘ sub-folder and in there is your main theme file. This must have the same name as the theme so – using the above example – rename ‘default.php’ to ‘mytheme.php’.

4) Edit the spTheme.txt to name your Theme

In your new theme folder is a file names ‘spTheme.txt‘.  You need to edit the header details of this text file and change the theme name to your new theme’s name.

Open up the spTheme.txt file and change the two lines pictured below to the name of your theme and the php file name. Note that if you are copying a CSS only theme then this must point to the CSS file.

For example change “Simple:Press Theme Title: Default”  to: “Simple:Press Theme Title: mytheme” and
Stylesheet: default.php change to Stylesheet: mytheme.php

You can edit any other information in the spTheme.txt file you wish but the first line, naming your theme and it’s filename, is the only necessary change.

5) Edit the Functions Template to Change Localization

This is not mandatory but is recommended to keep things consistent and avoid error displays when changing themes. It is also necessary if you are using a language ‘mo’ file for translation of your theme – unless you decide to change all of the theme text in the theme templates themselves.

There is a spFunctions.php file in your new theme folder in your theme name’s > templates folder. This file is the equivalent of the functions.php file that can be used by WordPress themes to create custom code.

Open spFunctions.php with your editor and change the function names to match your new theme name. If you used the default theme as your starting point then replace all references to ‘spDefault’  in your theme’s name. Please note there may be several occurrences of the theme name in this file. They must ALL be changed to the new name.

In our example of using a theme named ‘mytheme’ you would replace all references to “spDefault” to “spmytheme” Spelling and capitalization need to match and be consistent with your theme’s name. IE; spMytheme is not the same as spmytheme.

6) Change the name of the Language ‘mo’ File

If you are using a translation for your theme and wish to continue to use the ‘mo’ file, then your final task is to rename this as well. So – for example – if you are translating your theme into Italian, the ‘mo’ file your installed will be called (to follow our example) spDefault-it.mo – or – spDefault-it_IT.mo. This must be changed to the new name – mytheme-it.mo – or – mytheme-it_IT.mo. Again take care to use the same capitalization for all references to the new name.

Try your new Theme

After saving your work you can go to the Simple:Press admin pages – Available Themes – Select Simple:Press Theme and choose your new theme. Now you can edit your custom theme without concern that an automatic upgrade will overwrite it.

It is also a good idea to occasionally check the supplied theme updates and merge any necessary changes into your custom theme to take advantage of new features.


Copyright © 2006-2019 Simple:Press. All Rights Reserved.