Customisation using a child theme
Child theme allows you to make modifications far beyond what is available in the theme's options page, without ever needing to edit the theme's core files. This also means that whatever changes you made will be preserved when you update the theme. Therefore, it is the recommended method if you're going to customise the theme beyond the settings provided in the theme's options page.
Contents
How to create a child theme
- Create a
graphene-child
folder in thewp-content/themes/
folder - Create a new
style.css
file inside thegraphene-child
folder - Copy and paste the following code into the new style.css file:
/* Theme Name: Graphene Child Theme URI: http://example.com/ Description: Child theme for the Graphene theme Author: Your name here Author URI: http://example.com/about/ Template: graphene Version: 1.0 */ @import url("../graphene/style.css"); /* Your modification goes here */
- Add your custom CSS directly under the line that says
/* Your modification goes here */
.
Important: do not copy the entire style from the theme'sstyle.css
file. Doing so will break a lot of things. - In your WordPress Admin, go to Appearance > Themes and activate the child theme.
A note on Custom Header, Custom Background, and Menus
When you activate the child theme, your Custom Header and Custom Background settings will be reset. This is a default WordPress behaviour, because WordPress treats a parent theme and a child theme as two separate themes. Since the Custom Header and Custom Background settings in WordPress are associated with individual themes, you would need to set your Custom Header and Custom Background settings again after you have activated the child theme.
You will also need to reassign the custom menus you are using to their menu locations.
Child theme files structure
There are four types of files that can exist in your child theme.
Required file
This would be the style.css
file. This file defines the name of your child theme and which parent theme it is using. This file is automatically loaded by WordPress when the child theme is activated. The parent theme's style.css
file however, will not be automatically loaded. That's what the following line in the child theme's style.css
file is for:
@import url("../graphene/style.css");
WordPress template files
These are the files that WordPress recognised as template files. You can see a list of files recognised as WordPress template files from the WordPress Template Hierarchy Codex page. In addition to those files, any other files that the parent theme includes by using the get_template_part()
or the locate_template()
functions belongs to this group of files as well. For example, the loop.php
file.
If any of the files above is present in the child theme's folder, WordPress will automatically load those files, and it will not load the corresponding original files in the parent theme. This is the reason why you must copy the entire codes from the parent theme when adding files like footer.php
or header.php
into your child theme.
Special consideration
If you place any of the WordPress template files into the child theme, the corresponding files from the parent theme will not be loaded. This means that when you update the parent theme, and that those template files have changed in the updated parent theme, you will miss out on those changes, since WordPress will not load those files at all. This is why you should never replace the theme's template files in your child theme, unless absolutely necessary.
Most of the time, you can use the child theme's functions.php
file and the many action and filter hooks available with the theme to customise it.
The special functions.php
file
This is a special WordPress-recognised template file. It will be automatically loaded way before any other template files is loaded. It's used for a lot of purposes, such as defining new PHP function and setting up certain features for the theme.
This file is optional. Your child theme can work wihout this file, but if it is present, it will be loaded automatically. Unlike the other template files, when this file exists in your child theme, WordPress will load the child theme's functions.php
file first, and then the parent theme's functions.php
file. This means that both the functions.php
file will be loaded. That is the reason why you should not copy the entire codes from the parent theme's functions.php
file.
All other files
All other files apart from those described above will not be loaded, unless it is explicitly included in the other automatically-loaded files.