Included in your purchase of Chronicl is a Child Theme Starter Theme. Using a child theme is the best way to customize Chronicl, and this Guide will show you how to get started.
Note: This Guide covers basic elements of a Child Theme that this WordPress Codex article does. For a more thorough analysis of Child Themes, be sure to check that article out.
Why Use A Child Theme?
By using a child theme, you have full range to edit template files, write custom CSS, and paste custom functionality into your theme without ever editing core files.
They key idea there is “without ever editing core files“. This means that when Chronicl receives updates, any changes and code you’ve added to your child theme will not be affected.
With a child theme, you can completely alter any template files. Rather than having to memorize a bunch of hooks, or go through other barriers, using a child theme is the surest way to get access to raw template code and make changes. No extra “barriers to entry”.
Let’s get started.
How To Install The Child Theme
Installing the Chronicl child theme is very straightforward, and follows the same exact process as installing Chronicl.
Login to your Kolakube account, and download the child theme .zip folder from your downloads area.
After that, login to your WordPress site and navigate to Appearance > Themes. Click the Install tab, and then Upload the .zip folder (
chronicl-child-theme.zip) you downloaded.
Follow the onscreen instructions, and then Activate the theme.
Keep in mind, that since a Child theme borrows the functionality of the parent theme (Chronicl), your site will still display Chronicl even though you’ve activated a different theme.
Making It Your Own
Now that the child theme is installed, you’re ready to go ahead and make it your own. Via FTP, and your favorite code editor, navigate to this path:
And open the
style.css file. This file is blank, apart from the comments at the top and the
@import reference. This is where you can paste all your custom CSS for your website.
The comments at the top of the file hold all the meta information about your child theme, including the name, description, version number, and other information (refer to this WordPress codex note for more info).
It’s encouraged that you change the info at the top from my details to yours, with the exception of the Template field. If the value of Template is anything other than chronicl, your Child Theme will break.
@import reference is crucial, and should not be removed. This imports the CSS from the parent theme, and will always add the latest version of Chronicl’s CSS to your Child Theme.
If you find yourself needing to make adjustments to any templates, you can very easily do so without editing any core files.
The basic idea of how Child Theme templates work is this: they mimic the Parent Theme. From the look and feel, to theme file structure — any changes you make in a Child Theme will be a reflection of the Parent Theme (see Codex article for more information).
Here’s the process we’re going to follow to make an example adjustment below:
- Figure out which file we need to edit
- Find the file in the Chronicl Parent Theme folder
- Open it, copy ALL the code, then close it
- Create the file in the Child Theme, and pasting/saving the exact code
So, say you wanted to make a tweak something in your header. In a WordPress theme, we use the
header.php file for header template code.
So, with the file name in mind, we need to search for it in the Chronicl Parent Theme folder. Via FTP, navigate to
After doing a quick scan through the files, you’ll notice that the
header.php is in the root directory of Chronicl. Open it up, and highlight all the code (command + A to select all, command + C to copy) and copy it to your clipboard. Close the file, without making any changes.
Now, go back a directory, to the
themes directory and open up the
In there, create/upload a new file named
header.php (name it exactly the same as the file in the Parent Theme). Paste the code from your clipboard in there, and save/upload it. We essentially just duplicated the header file from Chronicl into your Child Theme.
Once you create that file, your theme will now load the contents of the new
header.php file, not the Parent Theme anymore. To see this, try adding some dummy text to the bottom of the file in your Child theme.
Congrats, you just made your first adjustment with a Child Theme! Apply this logic to other template files (with the exception of
functions.php) to make adjustments throughout your entire theme.
Accessing Templates In Folders
As of Chronicl 1.0, there are 3 folders that contain template files you may wish to overwrite. Since they’re not in the root folder (like
header.php) is in our example above, we have to recreate the same folder structure.
So, in the
wp-content/themes/chronicl/ folder, say I wanted to tweak the
/content/content-single.php file. I’d need to go to my Child Theme and recreate the proper folder structure, as illustrated in the screenshot to the right.