1,723
edits
Difference between revisions of "WordPress Child Themes"
m
no edit summary
m |
m |
||
| Line 1: | Line 1: | ||
It has proven very difficult to find simple information about creating a Child Theme for WordPress website. This article is oriented towards people that are familiar and comfortable with WordPress (themes, etc.), programming, etc. It is not intended to be a granular, detailed step by step tutorial. | It has proven very difficult to find simple (IE, non-"long winded") information about creating a Child Theme for WordPress website. This article is oriented towards people that are familiar and comfortable with WordPress (themes, etc.), programming, etc. It is not intended to be a granular, detailed step by step tutorial. | ||
So here it is a very quick answer to create a Child Theme... | So here it is a very quick answer to the question of "How to" create a Child Theme (with some notes)... | ||
==Creating & Enabling a Child Theme== | ==Creating & Enabling a Child Theme== | ||
*Create a directory in the website's ./wp-content/themes directory | *'''Create a directory in the website's ./wp-content/themes directory''' (It can be any name, although...); | ||
**Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory. | **Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory. | ||
***Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child | ***Example: Parent Theme is "twentyfourteen", Child Theme: twentyfourteen.child | ||
***Or, if you want to make all of your child themes easy to find, prepend a letter like X or Z to the name: x.twentyfourteen.child | |||
***Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen". Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested. | ***Note: Remember Linux is case sensitive, so a directory named "twentyfourteen" is not the same as "TwentyFourteen". Also keep in mind that may not apply for a WAMP stack (look it up) on Windows as that wasn't tested. | ||
*Important | *'''Create a file in the Child Theme Directory named ''style.css'' and add the minimum code shown below''' (an expanded version is in the Example Section);<syntaxhighlight lang="text"> | ||
**"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are available to the Child Theme and can are utilized transparently as if all of the Parent Theme's files were copied into the Child Theme's directory. | /* | ||
**Why not just modify or add functionality to the Parent Theme?: If a theme is updated it will most likely eradicate any changes that have been made. Whereas if modifications and additional functionality are added in the form of a Child Theme, all changes are preserved, even if the Parent Theme is updated. | Theme Name: Any Name You Want, including spaces, and will be displayed in Word Press Themes, | ||
*The style.css file and two very important directives (an example is given later); | Template: WhatEverNameOfParentTheme (Example: twentyfourteen) (NOTE: The name of the Template is not how it appears in WordPress, but rather the actual directory name) | ||
**Theme Name: twentyfourteen.child (This is name of the Child Theme. It is suggested that it be the same as the directory name of the Child Theme, but it doesn't have to be) | Text Domain: WhatEverNameOfChildTheme (Example: x.twentyfourteen.child) (NOTE: Used for "internal WordPress stuff that isn't clear in documentation, so the recommendation is to name it the same as the Child Theme, but with no spaces or underscores) | ||
**Template: twentyfourteen (This is the actual name of the directory (not just the name of the theme) in ./wp-content/themes that contains the Parent Theme) | */ | ||
* | </syntaxhighlight> | ||
**Important Information about how WordPress Child Themes Function; | |||
***A Child Theme is "connected" to a Parent Theme via the default Cascading Style Sheet (CSS) in the Child Theme's directory and is named style.css | |||
****"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are available to the Child Theme and can are utilized transparently as if all of the Parent Theme's files were copied into the Child Theme's directory. | |||
***Why not just modify or add functionality to the Parent Theme?: If a theme is updated it will most likely eradicate any changes that have been made. Whereas if modifications and additional functionality are added in the form of a Child Theme, all changes are preserved, even if the Parent Theme is updated. | |||
***The style.css file and two very important directives (an example is given later); | |||
****Theme Name: twentyfourteen.child (This is name of the Child Theme. It is suggested that it be the same as the directory name of the Child Theme, but it doesn't have to be) | |||
****Template: twentyfourteen (This is the actual name of the directory (not just the name of the theme) in ./wp-content/themes that contains the Parent Theme) | |||
*Create a file in the Child Theme Directory and add the below code to the functions.php file (In the below example, the function "child_theme_parent_styles" is arbitrary and could be named anything (as long as it matches in the add_action directive))<syntaxhighlight lang="php"> | |||
<?php | <?php | ||
| Line 24: | Line 34: | ||
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | ||
</syntaxhighlight> | </syntaxhighlight> Within the WordPress GUI, Themes, select / activate the new Child Theme | ||
==Example== | ==Example== | ||