Simple:Press Documentation

Creating a Child Theme

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:

  • Using Themes with Simple:Press, where the theme folders are located and how to select different themes.
  • Theme Structure with Simple:Press, where the structure of theme folders and files are located as well as the purpose of the various theme files.
  • About Template Files with Simple:Press, where the purpose of the theme template files is discussed.

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!

Note:
If any changes are desired in the supplied Simple:Press themes, it is recommended that a Child Theme using steps on this page or a Custom Theme be developed.

Steps to creating a Child Theme

1) Double Check Where the Simple:Press Themes are Located

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.

2) Pick a Parent Theme from the Simple:Press store and download it to the ‘forum-themes’ folder found in step 1 if it is not already there.

For the example on this page the currently supplied Default Theme is being downloaded to be the parent.

3) Download the corresponding Child Theme’s Framework from the Simple:Press store into the ‘forum-themes’ folder in step 1 if it is not already there.

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

4) Make a copy of the Child Theme’s Framework folder from step 3 with all its sub-folders and files, paste the copy into the “forum-themes” folder, and rename the copied “root” folder to the unique name for the child theme.

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.

Note:
If is not absolutely necessary to make a copy of the Child Theme Framework. The Child Theme Framework folder could just be renamed to the unique name for the child theme.If done this way, it is strongly recommended that the theme be renamed from the generic name/title that came in the framework so that a completed child theme will not be overwritten if the child theme framework is accidentally or intentionally downloaded again into the SP theme folder. All the work can be lost if this happens.

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

Note:
It is strongly recommended that all of the child theme’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.

5) Configuring the Child theme’s spTheme.txt file

The child theme’s ‘spTheme.txt’ file must identify the uniquely name child theme as well as identifying the uniquely named child theme stylesheet.

  • Click on the “DefChi” folder to open it.
  • Click on the “spTheme.txt” file to open it.
  • To the right of “Simple:Press Theme Title:”, change the title to the child theme’s name,”DefChi
  • To the right of “Parent”, the parent should already be identified as “default”. If not, for this example, change it to “default”.
  • To the right of “Description”, provide a description of the theme. This text will be displayed on the forum admin “Available Themes- Select Simple:Press Theme” panel along with the image in the theme’s “spTheme.jpg” file to allow identification and activation of the theme.
  • To the right of “Stylesheet”, provide the name of the style sheet. For this example, insert “DefChi.css” for the style sheet.
  • To the right of “Screenshot”, provide the name of the file containing the image to be displayed on the forum admin “Available Themes- Select Simple:Press Theme” panel along with the “Description” text. For this example, insert “spTheme.jpg”. If the desired image file has a different filename, the desired image filename should be changed to “spTheme.jpg” and brought into the “DefChi” root folder to replace the existing “spTheme.jpg” file.
  • Save the “spTheme.txt” file.

For this example, after modification, the “spTheme.txt” file is:

    • Simple:Press Theme Title:

DefChi

    • Parent: default

 

    • Version: 1.0.0

 

    • Theme URI: https://simple-press.com

 

    • Description:

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

    • .

 

    • Author: Andy Staines, Steve Klasen, Brandon C, and

Forum Admin

    • .

 

    • Author URI: https://simple-press.com/custom-simplepress-themes-for-every-need/

 

    • Stylesheet:

DefChi.css

    • Screenshot: spTheme.jpg

 

    Simple:Press Versions: 5.5.5 and above
Note:
This 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 the child theme css (DefChi.css). A child theme css file must exist in the child folder like in the parent theme, even if child css file is just an empty file.
Note:
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 is called an ‘Overlay’ file’. This second method makes color, font and other changes very easy and quick to make. The ‘default’ theme is a good example of this type of theme.

6) The Child theme’s spTheme.jpg file

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.

  • If the image is acceptable nothing more need be done with it.
  • Otherwise develop the desired image file, save it by naming it “spTheme.jpg”, and place it in the child theme’s root folder to replace the existing “spTheme.jpg” file.

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

7) Edit the Functions Template and add new Functions

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.

    • Click on the child theme’s “templates” folder to open it to see the “spFunctions.php” file.
    • Open the “spFunctions.php” file with an editor.
    • change the “Theme” name to the new theme.
      • In this example, “DefChi“.
    • Add any new functions.
Note:
It is highly recommended that any code from added filters or actions be placed in this file.
      • The function names in the child must be different from those in the parent.
      • In the example on this page, no new functions are being added to “spFunctions.php”.
Note:
If new functions are being added to the child, be sure the files planned to use the new functions are copied from the parent into their corresponding child folders, identified as child theme files, and modified to use the new functions. Be sure to adequately comment the files before they are saved.
  • Save the file.

8A) Modifying the styles file (.css or .php)

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.

  • Click on the child theme’s “styles” folder to open it and see the “.css” or “.php” styling file.
  • Rename the “.css” or the “.php” file to the unique child theme name.
    • In this example to “DefChi.css“.
  • Open the child theme’s “.css” or “.php” styling file with an editor.
  • Change the file header to indicate it is associated with the child theme
    • In this example, “DefChi“.
  • Additional descriptive text may added to the header describing its origin and the changes being made to the code.
  • Only modifications to override the parent styling should be placed in this file.
    • If the styling file is to be a .php file, be sure to add the php opening and closing tags and the header instructions.
    • In the example on this page, the file is remaining a .css file (DefChi.css) and no styling changes from the parent are being made in it.
  • Save the file.

8B) Resetting the Combined CSS/JSS Cache

After renaming styling files (either .css or .php), it is wise to reset the combined CSS/JS caches on the Toolbox-Housekeeping panel.

    • From the admin menu, select Forum > Toolbox > Housekeeping to view the “Toolbox-Housekeeping” panel.
    • Scroll to the “Reset combined CSS/JS” section
    • Click on the “Reset Combined CSS Cache” button to reset the CSS cache.
    • Click on the “Reset Combined Script Cache” button to reset the JS cache.

 

9) Try the new Theme

  • After the modifications have been completed and saved, go to the forum Admin menu Forum > Themes > Available Themes > “Available Themes – Select Simple:Press Theme” panel.
  • Choose the new theme, for this example “DefChi” to verify the Child theme is working.
  • Click the theme’s “Activate Theme” button to cause it to be used on the site.
  • Navigate to the forum.
    • The forum theme should now exhibit the changes discussed so far in the example.
  • The unique child theme can be further modified without concern that an automatic upgrade will overwrite its changes.

 

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

Changes to a Working Child Theme

Now that the child theme is functional, additional customizing changes may be desired.

WARNING:
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.

10) Modifying the Child Theme’s Template files, If 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.

Note:
If no changes are desired to the functions controlled in the parent “template” files, no action is needed in this section.
  • Only the template files to be modified should be copied from the parent theme to the child theme and then modified.
  • The copied files should be copied into the ‘templates’ folder within the child theme. If the folder does not exist, it must be made first.
  • Two examples of changes made in a child theme’s ‘template’ files are:

11) Configure Image Files if desired

Note:
If no changes are desired to the functions controlled in the parent “image” files, no action is needed in this section.
    • Only image files that are directly replacing parent image files or are being added should to be brought into the corresponding image folders in the new child theme.
      • If the image is to directly replace a parent image, the image file must have the same filename as the parent it is replacing.
      • If the image is being added, it must have a unique or different filename from any in the parent.
Note:
Be sure any files that are to use the added image have been copied from the parent into the corresponding child folders, identified as part of the new theme, and modified to use the image.
  • In the example on this page, no image file changes are being made.

12) Configure Overlay Files if desired

Note:
If no changes are desired to the functions controlled in the parent “overlay” files, no action is needed in this section.
  • Only completely new or modified overlay files should be brought into the child overlay folder.
  • Whether modified from a parent overlay or completely new, the filename, header, etc. for the child overlay MUST be unique and different from any parent overlay files or any of the child’s other overlay files.
  • After a parent overlay file has been copied from the parent “overlays” folder into the new child theme’s “overlays” folder and renamed to be different from any parent overlay file or existing child overlay file, it can be modified as appropriate.
    • The completely new or modified overlay will show up and be selectable when activating the child theme from the forum Admin menu Forum > Themes > Available Themes > “Available Themes-Select Simple:Press Theme” panel.
    • On this page the example is to make a new Child theme overlay based on the “Default” theme and then make changes to that child theme overlay.

      • Making a Child Theme ‘DefChiSky-red.php’ from the Default theme ‘sky-red.php’ Overlay

        • Copy the ‘sky-red.php’ overlay from the “default” theme’s “overlays” folder (…default > styles > overlays) to the “DefChi” theme’s “overlays” folder (…DefChi > styles > overlays).
        • Rename the file ‘DefChiSky-red.php’.
        • Open the ‘DefChiSky-red.php’ file and
          • change the header text to indicate the file is associated with the “DefChi” theme
          • save the file before making further changes.

 

 

      • Try the new Child Theme Overlay

        • After the modifications to the ‘DefChiSky-red.php’ overlay file have been completed and saved, go to the forum Admin menu Forum > Themes > Available Themes > “Available Themes – Select Simple:Press Theme” panel.
        • If the “DefChi” theme is not the active theme, click on the theme’s “Activate Theme” button to cause it to be used on the site.
        • Click on the ‘down arrowhead’ to the right of “Select Overlay” to see the drop down list of available overlays for the theme.
        • Scroll the list to find, highlight, and click on the ‘DefChiSky-red’ overlay.
        • Click on the “Update Overlay” button to cause the ‘DefChiSky-red’ overlay to be used on the site.
        • Proceed to the forum and verify the changes implemented in the overlay are working.
Note:
It is also a good idea to occasionally check the supplied theme updates and merge any necessary changes into the unique child theme to take advantage of new features.

EXAMPLES USED IN THE SECTIONS ABOVE


 

10A) Template File Example 1 – Breakcrumbs

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.

    • If not already done, copy the ‘spHead.php’ file from the “Default” parent’s “templates” folder (… > default > templates) to the “DefChi” “templates” folder (… > DefChi > templates).
    • Open the “DefChi” ‘spHead.php’ file and change the header to indicate it is associated with the new child theme (i.e. “DefChi”).
    • Include additional descriptive test including the date in the header describing its origin and changes being made to the code.
Note:
Because a template file is to be a complete, standalone file, initially all the code in the file is the same as the parent.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.
    • In the example on this page, the change wanted is to have the breadcrumbs not be stacked.
      • They are to fill a single line before wrapping onto the next line of the header.
    • This is accomplished by removing the “&tree=1” from the breadcrumb function.
        The unmodified breadcrumb section might be:
# 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');

 

10B) Template File Example 1 – Statistics

Remove the Forum Statistics by modifying the ‘spFoot.php’ file in the Child Theme “DefChi” based on the “Default” theme.

WARNING:
Commenting out the entire ‘stats’ section of the footer as is being done in this example results in any modifications made to that section (either prior to or after the commenting out) not appearing in the footer of the forum page.

Another approach left to the interested reader is to selectively remove functions within the ‘stats’ section of ‘spFoot.php’.

    • If not already done, copy the ‘spFoot.php’ file from the “Default” parent’s “templates” folder (… > default > templates) to the “DefChi” “templates” folder (… > DefChi > templates).
    • Open the “DefChi” ‘spFoot.php’ file and change the header to indicate it is associated with the new child theme (i.e. “DefChi”).
    • Include additional descriptive test including the date in the header describing its origin and changes being made to the code.
Note:
Because a template file is to be a complete, standalone file, initially all the code in the file is the same as the parent.

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.

  • In the example on this page, the change wanted is to no longer display the forum statistics at the bottom of the forum page.
  • A very easy way to accomplish this is to just comment out the entire forum statistics section rather than removing code.
  • Insert /* in front of the first instruction for the section and placing */ on a blank line after the last instruction for the section so the entire group of instructions become only comments and are not executed.
  • Be sure to include a comment and then save the modified file.

 

    The unmodified 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');

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');
*/

 

12A) Overlay Example 1 – Breadcrumb Font Size

Note:
This example assumes there exists a ‘DefChiSky-red.php’ file in the “DefChi” theme’s “overlays” folder that was initially made by copying the ‘sky-red.php’ file from the “Default” theme’s “overlays” folder.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.

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.

    • Open the ‘DefChiSky-red.php’ file in an editor.
    • Search the file for $spBreadCrumbs, the parameter controlling the breadcrumb font size.
    • In the unmodified file under “Misc Font Size” one sees:
...
$spProfileShowHeaderEdit       ='0.6em';
$spBreadCrumbs                 ='0.85em';
$spHeaderName                  ='100%';
...
  • Edit the ‘DefChiSky-red.php’ file to change the value for the $spBreadCrumbs parameter from ‘0.85em’ to ‘1.85em’
  • Be sure to include a comment and then save the modified file.
  • The modified portion of the file might be:
    ...
    $spProfileShowHeaderEdit       ='0.6em';
    $spBreadCrumbs                 ='1.85em';
    $spHeaderName                  ='100%';
    ...
    

 

12B) Overlay Example 2 – Tooltip Text and Background Colors

Note:
This example assumes there exists a ‘DefChiSky-red.php’ file in the “DefChi” theme’s “overlays” folder that was initially made by copying the ‘sky-red.php’ file from the “Default” theme’s “overlays” folder.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.

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.

    • The first step is reviewing the parent styling file to determine which parameters control the tool tip text and background colors.
      • In the example on this page, the file would be ‘default.php’ found in the “default” theme’s “styles” folder (… > default > styles).
    • In ‘default.php’ one sees:
        /* Tooltips

 

      • ———————————-*/

.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: ;

}

      • The color of the tooltip text is defined by the value of the ‘$alt1Color’ parameter.
      • The color of the tooltip background is defined by the value of the ‘$alt1BackGround’ parameter.
    • Opening the ‘ChiDefSky-red.php’ overlay file in an editor, one sees:
...
# ------------------------------------------------------------------
# Alternate color variations
# ------------------------------------------------------------------
$alt1BackGround		= '#990000';
$alt1Border		= '1px solid #666666';
$alt1Color		= '#ffffff';	
...
    • The ‘#990000’ results in a tooltip background color of Crimson.
    • The ‘#ffffff’ results in a tooltip text color of white.
    • For this example, the overlay file is modified to provide a tooltip background color of Pastel Yellow (‘#ffff99’) and a tooltip text color of blue (‘#0000ff’).
    • Be sure to include a comment and then save the modified file.
    • The modified portion of the file might be:
...
# ------------------------------------------------------------------
# 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.

    • Custom Theme

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.

    • Child Theme

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.

      • In the ‘reboot-child Framework’ for example, there are a number of files in the template folder that are ‘traffic directors’ for files from the parent ‘desktop’ or ‘mobile’ folders which can be copied over to the child ‘desktop’ or ‘mobile’ folders and modified. The reboot-child framework will not operate correctly without these support files.

 

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.

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

 

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

      • The spTheme.txt file is used to uniquely identify the child theme, its parent, its description, its main styling (.css or .php) file, its identifying spTheme.jpg or .png file, and other specifics for the theme. The description text and the picture in the spTheme.jpg or .png file are displayed in the forum admin “Available Themes – Select Simple:Press Theme” panel to identify the theme for activation. Several of the generic entries in this file

must

      • be modified to uniquely identify the new child theme and some of its files.

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

      • If changes are to be made to any parent template files, the parent template should be copied from the parent into the child’s ‘template’ folder, identified as a child theme file in its header, and modified with the customizing changes for the child.

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.


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