How to create and use a Child Theme
If you would like to change something about HeatMap Theme, then there are many things you can do without actually touching the core WordPress theme code.
You can instead use a WordPress child theme, which uses the styles and codebase of the original theme, but overrides the original settings wherever required to modify the behaviour of the original theme. Child Themes are available in the HeatMap Theme Store downloadable from the HeatMap Insider forum in a range of colours for you to use as a starting point for your styling adventures 
IMPORTANT: Make sure the directory in which your HeatMap theme is installed is named ‘heatmaptheme’. If it is named ‘heatmap-adsense-theme’ then please rename it to heatmaptheme otherwise the child theme will not work!
The Basics
Before you start using a WordPress Child Theme with HeatMap Theme its worth knowing how the original HeatMap Adsense Theme arranges it stylesheets…
HeatMap Adsense Theme uses two main stylesheets:
heatmaptheme/style.css – Contains ‘structural’ CSS elements (eg the pixel width div elements) and reset elements (those elements which set the default settings for the stylesheet).
heatmaptheme/default.css – Contains CSS elements which define things like colour and background image elements.
The stylesheets are set up in this so that if you did want to just change the basic colours and images of HeatMap Adsense Theme, you could easily find the CSS selectors to do the job in default.css without having to look through all the structural stuff (but this is not the recommended way to go. Don’t hack the core code; hack a Child Theme instead!). HeatMap Adsense Theme will automatically ignore heatmaptheme/default.css if you have a child theme installed.
Example Child Theme – Purple People
The HeatMap Insider Theme Downloads Forum contains a Child Theme called ‘Purple People’ . Its the exact same child theme that is used on CreativityPro.com.
If you have a look in the heatmap-child-purple-people theme folder you’ll notice just a few files in there…
- style.css – which contains the styles which add to, and override heatmaptheme/style.css settings.
- functions.php - a container for additional heatmap theme functions – you can potentially extend HeatMap Adsense theme with extra widgets and functions without having to touch the core code in the heatmaptheme folder.
- images folder – contains all the images for this child theme.
- screenshot.png – The image shown in the WordPress themes admin.
Creating Your Own Child Theme from the basic Purple People Child Theme
First, make a copy of the heatmap-child-purple-people folder. Rename the folder (for this example we’ll call it heatmap-child-gone-bananas). Make sure that you keep the ‘heatmap-child’ bit in the folder name, so everyone knows its child theme of HeatMap Theme.
Next, open up the heatmap-child-gone-bananas/style.css, and have a look at the comments at the top of the file…
- Change the details to suit your new child theme. Make sure you retain the format of the comments as WordPress and HeatMap Adsense Theme actually uses this information in the WordPress theme administration pages.
- Its important to give your theme a unique name. In this case its name is ‘Gone Bananas’.
- Make sure you retain the Template: heatmaptheme comment. It lets WordPress know that this is a child theme of HeatMap Theme. You’ll also notice there is a line just below the comments which reads @import url(“../heatmaptheme/style.css”); Make sure you also retain this.
Now it’s time to start hacking the css styles in here to suit your child theme. If you just want to style up the colours then this should be relatively easy if you know a smattering of css.
Changing the images
If you’re just doing a basic colour styling of HeatMap Adsense Theme then simply replacing the images that can be found in the images folder with your own versions of these images will do the trick.
Advanced Child Theme Customisation
If you want to do advanced CSS styling customisation (such as changing the structural elements so you can change sizes of sidebar columns, make the logo header larger etc etc) then you’ll have to copy the elements that you want to change from heatmaptheme/style.css to heatmap-child-gone-bananas/style.css. Any changes you make to these elements will override any settings in heatmaptheme/style.css.
Advanced Code Customisation
You can override any of the core HeatMap Theme Files, by copying them from your heatmaptheme folder, into your child theme folder. For example, if you want to make customisations to header.php, then you would copy header.php from your heatmaptheme folder, into the child theme folder and then start making your edits to header.php in there.
Its important to note that any core files that you override with your child theme will remain overidden with your version even when you upgrade the core HeatMap Theme files.
