1,723
edits
Difference between revisions of "WordPress Child Themes"
m
no edit summary
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 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. | ||
So here it is a very quick answer to create a Child Theme... | So here it is a very quick answer to create a Child Theme... | ||
| Line 5: | Line 5: | ||
==Creating & Enabling a Child Theme== | ==Creating & Enabling a Child Theme== | ||
*Create a directory in the website's ./wp-content/themes directory. It can be any name. | *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 | ||
***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 Fact 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 | *Important Fact 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 utilized. | **"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. | **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); | *The style.css file and two very important directives (an example is given later); | ||
| Line 27: | Line 27: | ||
*Within the WordPress GUI, Themes, select / activate the new Child Theme | *Within the WordPress GUI, Themes, select / activate the new Child Theme | ||
== Example == | ==Example== | ||
Below is an example of the beginning a Child Theme's style.css file. Notice the /* and */, which are comment delimiters for CSS files. And remember, the Template: twentyfourteen directive must match the name of the Parent Theme's directory name (not the "Theme Name", although they could be the same);<syntaxhighlight lang="text"> | Below is an example of the beginning a Child Theme's style.css file. Notice the /* and */, which are comment delimiters for CSS files. And remember, the Template: twentyfourteen directive must match the name of the Parent Theme's directory name (not the "Theme Name", although they could be the same);<syntaxhighlight lang="text"> | ||
/* | /* | ||
| Line 47: | Line 47: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== Additional Information == | ==Additional Information== | ||
It certainly isn't a very elegant or intuitive method that WordPress uses to enable this feature. But that's because it wasn't part of the original WordPress (Hint: WordPress started out as a different project and the modern WordPress is actually a branch of the original project) code and they shoehorned it in. Oh well, that's how so many things are that humans create. | |||
For a much longer explanation with more details and additional stuff that can be done, see this site: https://kinsta.com/blog/wordpress-child-theme/ | For a much longer explanation with more details and additional stuff that can be done, see this site: https://kinsta.com/blog/wordpress-child-theme/ | ||