WordPress Child Themes: Difference between revisions
Jump to navigation
Jump to search
Created page with "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 comf..." |
|||
Line 3: | Line 3: | ||
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... | ||
== 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. | ||
** 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 | ||
** The style.css file | **"connected"?: By "connecting" a Child Theme to a Parent Theme, all of the Parent Theme's style sheets, functions, capabilities, etc. are utilized. | ||
**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) | |||
*Add the below code to the functions.php file in the Child Theme's directory. 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 | |||
https://kinsta.com/blog/wordpress-child-theme/ | function childtheme_parent_styles() | ||
{ | |||
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); | |||
} | |||
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles'); | |||
</syntaxhighlight> | |||
*Within the WordPress GUI, Themes, select / activate the new Child Theme | |||
== 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"> | |||
/* | |||
Theme Name: Twenty Fourteen CHILD | |||
Theme URI: https://wordpress.org/themes/twentyfourteen/ | |||
Author: the WordPress team | |||
Author URI: https://wordpress.org/ | |||
Template: twentyfourteen | |||
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. But it didn't suit my needs, so I changed it. | |||
Version: 2.1 | |||
License: GNU General Public License v2 or later | |||
License URI: http://www.gnu.org/licenses/gpl-2.0.html | |||
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready | |||
Text Domain: twentyfourteen.child | |||
This theme, like WordPress, is licensed under the GPL. | |||
Use it to make something cool, have fun, and share what you've learned with others | |||
*/ | |||
</syntaxhighlight> | |||
== Additional Information == | |||
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/ |
Revision as of 21:56, 6 January 2021
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.
So here it is a very quick answer to create a Child Theme...
Creating & Enabling a Child Theme
- Create a directory in the website's ./wp-content/themes directory. It can be any name.
- 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
- 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.
- Suggestion (not a requirement): Name the Child Theme directory in such a manner that it is obviously connected to a Parent Theme directory.
- 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.
- 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)
- Add the below code to the functions.php file in the Child Theme's directory. 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)
<?php function childtheme_parent_styles() { wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); } add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
- Within the WordPress GUI, Themes, select / activate the new Child Theme
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);
/*
Theme Name: Twenty Fourteen CHILD
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfourteen
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. But it didn't suit my needs, so I changed it.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen.child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others
*/
Additional Information
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/