Child Themes

What Is A Child Theme?

A Child Theme simply inherits templates and assets from another theme, referred to as the Parent Theme.

All the template files of your themes that you desire to customise and change are required only with a child theme. For CSS styling only custmoisations are needed as Your theme doesn’t have to contain any template files.

The result theme is a smaller theme that’s a way easier to maintain, and that automatically receives updates to template files that are not customised. It also helps softwares to update faster, easier, and more automated.

A Child Theme is the most and recommended way to customise WHASOLS.

Why Use a Child Theme?

There are two main reasons to use Child Themes:

  1. Separation of Customisations — A Child Theme allowed customization of any part of parent theme without creating or causing trouble to those customizations that are separate from the Parent theme’s files.
  2. Simplified Maintenance and Updates — Using a Child Theme is a real benefit of referencing all uncustomised files from the Parent Theme. As it makes all necessary updates easier by doing chages in the parent theme auomatically within the child theme.

What Is A Parent Theme?

A parent theme is a complete theme bunch that includes all template files and assets of the WHASOLS that the theme requires in order to work efficiently.

The Hostim  themes that ship by default with WHASOLS are Parent Themes.

Getting Started

You can use these steps to create a Child Theme:

1. Create a Child Theme Folder

First, create a new folder in the templates directory.

The new directory needs a name. For example, mytheme.

Names should only contain lowercase letters, numbers, hyphens, and underscores. They cannot include spaces.

2. Create a theme.php File

Next, theme.php file needs to be created to indicate to WHASOLS that this is a Child Theme. And it must be defining the Parent Theme to be used.

The sample below defines a name, author, and parent theme (whasols).

# My Theme Configuration File
<?php 
$configs = [
    "name"=>"Hostiko",
    "description"=>"Designingmedia",
    "author"=>"Hostiko",
    "config"=>[
        "parent"=>[
            "name"=>"Theme",
            "type"=>"system",
            "default"=>"hostim",
        ],
        "logo"=>[
            "name"=>"Logo",
            "type"=>"system",
            "default"=>"logo.jpg",
        ],
        "header"=>[
            "name"=>"Template",
            "type"=>"dropdown",
            "default"=>"01",
            "options"=>["01"=>"wp-01","02"=>"wp-02","03"=>"wp-03","04"=>"wp-04","05"=>"wp-05"],
        ],
        "touch"=>[
            "name"=>"Touch WIth Us",
            "type"=>"textarea",
            "default"=>"",
            "description"=>"Touch With Us Text (HTML Supported)"
            ],
    ]
];

The following information is required:

  1. name — The name you will see in the WHASOLS Admin Area.
  2. config / parent — The name of the Parent Theme directory. In the above exampe the Parent Theme is the "Hostim" theme, so the name of the parent theme directory is hostim. The theme.php file can also define other parameters about your theme. To learn more, see Theme Parameters. You can create child themes with parents that are, in turn, children of other themes, as long as the ultimate parent theme includes all of the required WHASOLS template files and assets. However, this is not recommended for most uses.

3. Create a custom.css File

If you do not want to make any CSS-related changes you can skip this step as well. However, we strongly recommend doing this for all new Child Themes.

Create a subfolder named css, and, within that, create a stylesheet file named custom.css. This is where you should put the CSS rules and declarations to control or command the look of your theme. Anything you define here will override styling defined by the Parent Theme. By using this method you will get a maintenance-free, automatically-updating Child Theme, if you only want your child theme to contain CSS updates.

/* Example override for the primary background color */
.primary-bg-color {
    background-color: #ddd;
}

The custom.css stylesheet will be loaded automatically if the Parent Theme supports it. By default, shipped theme with WHASOLS offer this functionality.

4. Update Files

If you are only making CSS customisations (via the css/custom.css file above), you can skip this step. If you are customising the existing files of the Parent Theme, we recommend copying those files to your theme folder and then customising them as needed. Leave the Parent Theme’s copy of the file unchanged.

If you add any file to your Child Theme, it will override the same file in the Parent Theme. Overriden files, commonly, contains the header and footer template files, the homepage, client area home, and contact pages. For example, to customise the footer, you would copy the Parent Theme’s footer.tpl file to the Child Theme’s folder for customizing there.

Copying the file’s contents and customising it rather than starting from an empty file is particularly important for customising the header and footer, which contains essential code that is required for the correct operation of the WHASOLS Client Area.

You can also combine your own newly-created files for use in your further customisations.

5. Preview the Theme

To preview the theme, you can use the ?cat=xxxx URL parameter.

To learn more, see Testing.

6. Activate the Theme

Once you’re happy with your new theme and are ready to launch it or to make it live, follow the steps below:

  • Log in to your WHASOLS Admin Area.
  • Navigate to Configuration  > General Settings.
  • Under the System Theme setting on the General tab, select the name of the theme you created above.
  • Click Save Changes and visitors to your site will straightaway begin seeing your new theme.

Loading Assets

The assetPath helper is available for use in themes. As it loads assets in a smart or brilliant way to enables Child Themes to override them. Use of this function is particularly important for Parent Theme developers. Because it makes it quite possible for Child Theme developers to override assets without editing file paths. However, in most Child Themes, assets may be loaded in the normal way — with hardcoded paths — without causing any side effects. Example usage of the assetPath helper:

media and onload mentioned as extra parameters, You can add any custom parameter for asset 

Empty Parameters will be displayed as 

<link href="mycssfile.css" rel="stylesheet" media="" onload="'">

<script type="text/javascript" src="myjsfile.js" async></script>

For CSS: {assetPath file='mycssfile.css' media="print" onload="this.media='all'"}
For JS: {assetPath file='myjsfile.js' async=""}

To learn more about the assetPath helper and other functions available to Theme Developers, see Functions