Customisation using a child theme

From Graphene Theme Documentation
Jump to: navigation, search

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.

How to create a child theme

  1. Create a graphene-child folder in the wp-content/themes/ folder
  2. Create a new style.css file inside the graphene-child folder
  3. 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 */
  1. Add your custom CSS directly under the line that says /* Your modification goes here */.
    Important: do not copy the entire style from the theme's style.css file. Doing so will break a lot of things.
  2. 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.

Additional resources