Topics

Custom Theme Tutorial #1

Here's how to create a custom theme using an existing Exponent theme as a guide.  This could also serve as a basis for building custom themes from scratch, but we have another tutorial for that here.

A theme MUST be contained within its own folder which MUST have the same name as the theme and MUST end in the phrase 'theme' and MUST contain at least two (2) files:

  1. Theme class description file (class.php)
  2. Theme default template file (index.php)

And in most cases, a theme's folder will also optionally contain:

  • CSS style-sheets in a 'css' subfolder
  • Images in an 'images' subfolder

The best example theme is 'simpletheme' which is why it is the default theme.  Therefore we will use it in this tutorial:

  1. Copy the entire contents of the '/themes/simpletheme/' folder into a new folder within the '/themes/ folder
  2. Choose a name for your new theme.  It MUST be unique among all the themes installed on your site.  For this tutorial we will call it 'mytheme'
  3. Rename the new theme folder to 'mytheme'
  4. For now you can delete:
    • 'config.php' and 'config_Fall.php'
    • 'css' subfolder and contents (you may want to keep as examples?)
    • 'css_Fall' subfolder and contents
    • 'editors' subfolder and contents (you may want to keep 'ckeditor.css' as an example?)
    • 'images' subfolder and contents
    • 'mobile' subfolder and contents
    • 'subthemes' subfolder and contents
  5. Inside the 'mytheme' folder, edit the 'class.php' file to reflect our new theme name:
    • Change the following line: 
      if (class_exists('simpletheme')) return;
    • to 
      if (class_exists('mytheme')) return;
    • and change the following line:
      class simpletheme extends theme {
    • to 
      class mytheme extends theme {
    • IT IS IMPERATIVE - the folder name, and both of these entries be identical and end with the phrase 'theme' for the site to continue working.
  6. Edit the 'index.php' file to customize it as you see fit.  You are expected to have some working knowledge of html and css to complete this process.
  • Details about the structure of the theme template found here.
  1. Place any style-sheets you use inside the 'css' subfolder.  These style-sheets will either all be loaded or not loaded depending on the value passed in the theme template header.

You can find more details about 'subthemes' and 'mobile' in the 'Theme Variations' area.

Loading Help