A Child Theme is derived from an existing, supplied Simple:Press (SP) theme. It is an efficient way of incorporating minor customizing changes into the website’s forum theme. The long lasting benefit is reduced maintenance when the supplied Simple:Press themes are updated.
Before reading further please become familiar with:
Simple:Press comes prepackaged with a default theme and offers several other themes that can be downloaded and added to the website. The Simple:Press themes are available in our store. It is recommended that these themes and their associated files not be modified. The main reason for this recommendation is that any edits/customizations made to an existing Simple:Press provided theme can be lost because any new update in the theme will bring new files that overwrite the existing theme files including the ones customized. All the hard work customizing the files and checking out the changes will be lost! No one wants that!
First be sure to identify where the Simple:Press themes are located. The Using Themes page mentioned above talks about this but to reiterate check the Forum Admin > Integration > Storage Locations panel for the location of the forum themes. By default they will be in the …/wp-content/sp-resources/forum-themes/ folder.
For the example on this page the currently supplied Default Theme is being downloaded to be the parent.
The frameworks contain a minimum folder structure and the minimum files needed to for a child theme to operate and to interface the child theme with its parent.
For the example on this page Default Child Theme Framework is being downloaded. The Child Theme Framework may have its folders and files named something similar to ‘default-child’.
The new theme name need not (but may) maintain reference to parent or child because the “spTheme.txt” file identifies the child theme name and references the parent theme. In this example, the default child theme is named DefChi.
For the example throughout this discussion the parent theme will be the “default” theme, the Child Theme Framework will be named “default-child” and the child theme will be named “DefChi”.
The child theme’s ‘spTheme.txt’ file must identify the uniquely name child theme as well as identifying the uniquely named child theme stylesheet.
For this example, after modification, the “spTheme.txt” file is:
DefChi
A Simple:Press default child theme featuring changed tooltip background and text colors, non-stacked and increased font size of breadcrumbs in the forum header, and no forum statistics shown in the forum footer
Forum Admin
DefChi.css
Each Child Framework comes with a “spTheme.jpg” file. The image in this file is displayed on the forum Admin’s Themes > Available Themes > “Available Themes-Select Simple:Press Theme” panel along with the “Description” text from the “spTheme.txt” file to uniquely identify the child for activation.
In this example, the original Child Framework “spTheme.jpg” file in the DefChi theme folder has been replaced with a “spTheme.jpg” file identifying the “DefChi Theme”.
There is an empty “spFunctions.php” file in the theme folder in the theme’s “templates” folder. The supplied child ‘spFunction.php’ file contains only the opening and closing php tags with the tooltips define and help information included. This file is for the creation of custom functions that the forum admin may want to include. This file is the equivalent of the ‘functions.php’ file that can be used by WordPress themes to create custom code.
The child theme’s styles file must be renamed to the unique name of the child theme. Any overrides to the parent styling can be added.
After renaming styling files (either .css or .php), it is wise to reset the combined CSS/JS caches on the Toolbox-Housekeeping panel.
Now that the child theme is functional, additional customizing changes may be desired.
Often desired changes are accomplished by copying a parent theme’s “template” files to the child theme and making the changes within those child theme “template” files.
EXAMPLES USED IN THE SECTIONS ABOVE
Unstack the Breadcrumbs (put them on a single line) by modifying the ‘spHead.php’ file in the Child Theme “DefChi”based on the “Default” theme.
# Start the 'breadCrumbs' section # ---------------------------------------------------------------------- sp_SectionStart('tagClass=spPlainSection spLeft', 'breadCrumbs'); sp_BreadCrumbs('tagClass=spLeft spBreadCrumbs&tree=1', __sp('Home')); sp_SectionEnd('', 'breadCrumbs');
After modification the saved file’s breadcrumb section might be:
# Start the 'breadCrumbs' section # ---------------------------------------------------------------------- sp_SectionStart('tagClass=spPlainSection spLeft', 'breadCrumbs'); sp_BreadCrumbs('tagClass=spLeft spBreadCrumbs', __sp('Home')); sp_SectionEnd('', 'breadCrumbs');
Remove the Forum Statistics by modifying the ‘spFoot.php’ file in the Child Theme “DefChi” based on the “Default” theme.
Another approach left to the interested reader is to selectively remove functions within the ‘stats’ section of ‘spFoot.php’.
At this point modifications can be made to remove, add, or alter the code to make the unique child theme file before the file is saved.
# Start the 'stats' section # ---------------------------------------------------------------------- sp_SectionStart('tagClass=spStatsSection', 'stats'); sp_ForumTimeZone('tagClass=spForumTimeZone', __sp('Forum Timezone: ')); sp_AdminsList('tagClass=spLeft spAdministrators', __sp('Administrators: ')); sp_SectionEnd('tagClass=spClear', 'stats');
After modification the saved file’s forum statistics section might be:
# Start the 'stats' section # ---------------------------------------------------------------------- /*sp_SectionStart('tagClass=spStatsSection', 'stats'); sp_ForumTimeZone('tagClass=spForumTimeZone', __sp('Forum Timezone: ')); sp_AdminsList('tagClass=spLeft spAdministrators', __sp('Administrators: ')); sp_SectionEnd('tagClass=spClear', 'stats'); */
The overlay contains the font sizes for many of the forum parameters. Increase the font size for the Breadcrumbs to ‘1.85em’ by modifying the ‘DefChiSky-red.php’ file in the Child Theme “DefChi” based on the Default Theme.
... $spProfileShowHeaderEdit ='0.6em'; $spBreadCrumbs ='0.85em'; $spHeaderName ='100%'; ...
... $spProfileShowHeaderEdit ='0.6em'; $spBreadCrumbs ='1.85em'; $spHeaderName ='100%'; ...
The overlay file contains many parameters including font and background color defining the forum page. Change the tooltip text color to blue (‘#0000ff’) and tooltip background color of Pastel Yellow (‘#ffff99) by modifying the ‘DefChiSky-red.php’ file in the Child Theme “DefChi” based on the Default Theme.
.ttip {
color: <?php echo($alt1Color); ?>;
font-family: ;
font-size: ;
line-height: 1.2em;
background: <?php echo($alt1BackGround); ?>;
padding: 10px;
position: absolute;
z-index: 999999;
max-width: 300px;
}
body .ttip {
border: ;
}
…
... # ------------------------------------------------------------------ # Alternate color variations # ------------------------------------------------------------------ $alt1BackGround = '#990000'; $alt1Border = '1px solid #666666'; $alt1Color = '#ffffff'; ...
... # ------------------------------------------------------------------ # Alternate color variations # ------------------------------------------------------------------ $alt1BackGround = '#ffff99'; $alt1Border = '1px solid #666666'; $alt1Color = '#0000ff'; ...
ADDITIONAL CUSTOM THEME AND CHILD THEME FILE INFORMATION (For the interested reader)
If any changes are desired in the supplied Simple:Press themes, it is recommended that a Custom Theme or a Child Theme be developed.
If extensive customization in the forum is to be undertaken, it is recommended that a Custom Theme be created. The custom theme can be developed completely from scratch or by copying a existing theme in its entirety and modifying it. A Custom Theme must have a unique name on it’s top level or root folder in the SP theme folder so that it’s files are not confused with an existing theme. A Custom Theme is completely self contained within its theme folder. All the files required to allow the theme to operate must exist in the folder whether or not they are completely unique, modified from another theme, or just copied over and identical to another theme.
None of a Custom Theme’s files are updated when the Simple:Press supplied theme’s files are updated by a new revision of Simple:Press supplied themes because the Custom Theme’s top level or root folder is uniquely named. If the Custom Theme is based on an existing Simple:Press theme, updates to the Simple:Press core theme files are not automatically updated in the custom theme files because the custom theme’s root folder is named differently from the existing Simple:Press theme. Significant effort is made at Simple:Press to not make changes that require updates to custom themes, but occasionally WordPress or another WordPress theme or plugin make a change that requires an update. Core theme changes for every release are posted on our Changes page.
The author of the Custom Theme must evaluate changes in all the updated SP theme’s files and then incorporate the update differences into each of the custom theme files containing actual customizing changes to recreate the desired forum pages. This actually works quite well and is quite easy to make a custom theme based on a Simple:Press themes. More information on creating a Custom Theme is available on the Creating a Custom Theme page.
By contrast the Child theme relies heavily on the files in its parent’s folder. Only the minimum folder structure and necessary files are in the child folder. The necessary files consist of files that identify the child and the parent themes, support child unique files, or contain instructions unique to the child theme. Typically these files are custom functions, CSS files, overlays, and template files. When the parent theme is updated, the Child Theme benefits from the same updates as the parent in the files that are used by both. The author of the Child Theme must only be concerned with the updates in the file(s) that the Child Theme’s unique files have replaced.
Child Theme Frameworks
Simple:Press supplies Child Theme Frameworks are available for downloaded from the Simple:Press website and need to reside in the SP theme folder where the supplied Simple:Press themes reside. The frameworks contain a minimum folder structure and the minimum files needed to for a child theme to operate and to interface the child theme with its parent.
There are items in the supplied child theme framework that need to be renamed. The child’s root folder (for example, ‘default-child’ or ‘reboot-child) and the .css file (for example, ‘default-child.css or ‘reboot-child.css) are designed to be renamed to a unique theme name by the forum admin. By renaming the child theme it and its files will NOT be overwritten if the child framework is accidentally or intentionally downloaded again into the website’s SP theme folder.
After being uniquely named and the necessary supplied child framework files modified as discussed below, the new theme shows up in the forum Admin’s menu at Forum > Themes > Available Themes > “Available Themes – Select Simple:Press Theme” panel where the new theme can be selected for activation. Modifications can now be made to the new theme without worry of them being overwritten by updates to the Simple:Press themes or their child frameworks.
It is strongly recommended that all of the child’s files have their header updated with the child theme’s title and other information to reflect they are associated with the child theme. It cannot be recommended strongly enough that detailed comments be added for future reference in both the header and within the code itself describing the changes implemented in the child files. This is especially important when the parent’s template file is updated and the new parent is to be brought into the child to have the child’s customization made again.
spTheme.txt File
must
spTheme.jpg or .png File
The spTheme.jpg or .png file contains the image used in conjunction with the description text from the spTheme.txt file to identify the child theme in the forum Admin “Available Themes – Select Simple:Press Theme” panel found by navigating the forum admin menu through Themes > Available Themes. The framework provides the parent theme image in the child’s file with the words “CHILD FRAMEWORK” superimposed on it. The image may be modified or replaced by another image file, but the modified or replacement file must be named ‘spTheme.jpg’ or ‘spTheme.png’ and reside in the child theme root folder.
Styling Files
The generic styling file provided in the framework is a .css file and is empty of any styling rules. This file’s name needs to be changed to the new theme name. If styling is being changed, the forum admin can add any CSS override rules desired into this file. The file should only contain the changes in styling that are to override parts of the forum styling. More than that is a waste and adds time to loading the page. If the file is to be populated with CSS overrides, a header tying the file to the child theme needs to be included.
Note: With a .css extension only CSS can be in the file. No php code is allowed.
To minimize complications, it is suggested that any and all CSS rule overrides to be adopted should go into the main child theme’s style file. This would include plugin styling coverage, etc. Other CSS files could be created if absolutely necessary, but the added files would increase the overall complexity.
If it is preferred to use a PHP file to make use of pre-defined variables in the overlay (ccs-only theme excluded here of course), the supplied .css file must be changed to have a .php extension. With a .php extension the file can contain both CSS and php code.
Additionally a header and php tags must be added into the file. Along with the php opening and closing tags, insert the following 2 lines between the php opening and closing tags.
header(“Content-Type: text/css; charset: utf-8”);
header(“Expires: “.gmdate(‘D, d M Y H:i:s’, (time()+900)) . ” GMT”);
This allows use of the php variables created in the parent (or if present, child theme) overlay file. This would be considered advance use and should be carefully thought out before embarking on the path!
The child themes ‘txt’ file (in the example, ‘spTheme.txt’) must have its ‘stylesheet’ entry modified to point to the .php file whatever it is named.
Note: After renaming styling files (either .css or .php), it is wise to reset the combined CSS/JS caches on the Toolbox-Housekeeping panel viewed at Forum > Toolbox > Housekeeping in the forum Admin menu.
Template Files
Typically a ‘templates’ folder is supplied in the child theme framework. The ‘reboot-child’ framework template folder contains ‘traffic director’ files not present in other child theme template folders. All child theme template folders contain a near empty ‘spFunctions.php” file.
spFunction.php
The supplied child ‘spFunction.php’ file contains only the opening and closing php tags with the tooltips define and help information included. This file is for the creation of custom functions that the forum admin may want to include. These function must have names different from any functions in the parent. It is highly recommended that any code from added filters or actions be placed in this file.
Folders and Files Not Supplied in the Child Theme Framework
Some Simple:Press themes have more files and folders than other themes. If any file from the parent is to be brought over and modified, it must reside within the child theme folder in a similarly named sub-folder that is located at a similar location as it did in the parent theme folder. Before bringing over additional files to modify, review the parent file structure and update the child theme folder with the folder needed to house the copied file.
Other Child Template Files
Only the templates that are to be changed should be copied over. In operation the parent template will be loaded and then the child template. There is no reason to have redundant files and to be loading a child template file over the parent template file if both are the same.
It is strongly recommended that the child’s template file have its header updated with the child theme’s title and other information to reflect it is associated with the child theme. It cannot be recommended strongly enough that detailed comments be added for future reference in both the header and within the code itself describing the changes implemented in the child files. This is especially important when the parent’s template file is updated and the new parent is to be brought into the child to have the child’s customization made again.
Image Files
In some themes there are two (2) different ‘image’ folders in the parent structure. If it is desired to display different image files than in the parent, ONLY the different files are to be housed in the child’s image folder. If the new image is to replace a parent image file, the replacement file must must be named the same as the parent image file including the extension and reside in the corresponding child theme image folder. If the child’s image file is replacing a parent image file, the parent template or other files using the image do not need to be brought into the child structure.
If the different image file is not replacing a parent image file, the child’s image file must have a different filename than ones similarly located in the parent folder structure. If the image filename is different, copies of the template or other files in the parent must be brought into the corresponding child folders and modified to use the new image file. As discussed earlier the image folders in the child folder structure must parallel the parent folder structure to properly house any files brought into the child theme.
Overlay Files
If changes are to be made to one of the parent overlay files, an overlay folder is made for the new theme and the parent overlay is copied to the overlay folder. The new child overlay file must be given a different name from any of the parent overlay files. The new file is edited to incorporate the desired changes. It is strongly recommended that comments describing the changes made be added to the file.
On the forum Admin Themes panel this new overlay will show up and be selectable when activating the new theme from the forum Admin menu Themes > Available Themes > “Available Themes-Select Simple:Press Theme” panel.