Child themes in WordPress

Never heard of child themes, but one client found such an implementation and decided, what should be written about them. Try this method later.

So, learned from the code, what a child theme, this is the topic, which extends the functionality of another (parental) Topics, while the child theme allows you to change the functionality of the parent. As an example of a parent theme, take the standard Twenty Twelve, on it and we will train.

Creating a child theme is easy. Create a folder twentytwelve-child, put in it the appropriately written file style.cssand the child theme is ready! With little understanding of HTML and CSS, you can change this very simple child theme - changing the appearance and layout of the parent theme, but, without changing its files. In this way, when the parent theme is updated, your changes are saved.

It is for this reason that child themes are the recommended way to make changes to a theme..

With a basic understanding of PHP, WordPress templates and WordPress Plugin API, you can change literally every aspect of the parent theme with a child theme, yet again, without any changes to the parent theme files.

The child theme is placed in its own folder inside wp-content/themes. The diagram below shows the position of a child theme relative to its parent theme. (TwentyTwelve) in the WordPress folder structure:

public_html

  1. wp-content
  • themes (folder with all themes)
    • twentwelve (Twenty Twelve parent theme folder)
    • twentwelve-child (our child theme folder; can be named anything)
      • style.css (required file, should be named style.css)

This folder may contain both the main styles file style.css, and additional files, related to the topic:

  1. style.css (necessarily)
  2. functions.php (optional)
  3. file to the template (optional)
  4. other files (optional)

THEORETICAL PART IS FINISHED AND WE GO TO THE PRACTICAL

Required file in child theme style.css

style.css - the only one necessary file in child theme. It provides an information header, according to which WordPress recognize child theme, and it replaces the style.css of the parent theme.

The child theme style file should have an informational title at the very top., the only thing, what is required is a required parameter Template which is not in the parent theme. Parameter Template indicates, which template is the parent.

Child Theme Info Header Example

 

Brief explanation of each parameter:

Theme Name. (necessarily) Name child theme.

Theme URI. (optional) Child Theme Website URL.

Description. (optional) Description of the child theme. For example: My first child theme, buga!

Author URI. (optional) Website address of the author of the child theme.

Author. (optional) Child theme author name.

Template. (necessarily) Folder name parent theme, register dependent.

NOTE. When changing the parameter Template you have to switch to another theme and back to the child theme, to update this option of the selected theme.

Version. (optional) Child theme version. For example: 0.1, 1.0.

Part after closing */ used as a regular stylesheet. Here you write style rules, to be applied WordPress.

An example of importing a theme from a parent

Important! The child theme's style file completely replaces the parent theme's style file. (Parent theme style file not loading at all WordPress). If you just want to make small changes to the look and feel of the parent theme, instead of rewriting it from scratch - you have to import the style file parent theme with the directive @import, and then add changes.

An example of importing styles from a parent theme

  • Create a new folder in wp-content/themes, and call her twentwelve-child.
  • In folder twentwelve-child create a file named style.css.
  • Let's go to AppearanceThemes and activate our new theme Twenty Twelve Child.

An important rule for @import

There must be no other CSS rules above the directive @import.

Note for right-to-left languages

To support right-to-left languages (Hebrew or Arabic), add file rtl.css, containing below code, in your child theme:

WordPress automatically download the file rtl.css only if is_rtl(). Even if the parent theme does not contain the file rtl.css, it is recommended to add rtl.css to your child theme.

Using functions.php

Unlike style.css, file functions.php child theme does not replace the parent theme's corresponding file. Instead of this, he loaded in addition to the parent functions.php file. (Namely, directly before parent file.)

Say, You want add PHP function to theme parent. The fastest way to open her file functions.php and put the function there. But it's not a smart move: the next time you update your theme, your function will disappear.

Here is the correct solution: you create a child theme, add file to it functions.php, and put your function there. The function will do the same, plus it won't be affected by future updates to your parent theme.

File structure functions.php: opening tag PHP at the beginning, closing tag PHP in the end, and in between your code. Here you can write your functions. The example below shows an elementary file functions.php, which does one simple thing: adds a link to favicon to element HEAD pages.

Code Example

TIP FOR THEME DEVELOPERS. Fact, what file functions.php child theme is loaded first, means, that you can make your theme functions extensible, i.e. replaceable via child theme, declaring them conditionally.

In this case, child theme can override PHP function parent theme, just declaring it again.

Linking/embedding files in your child theme

When you need to insert files, which are inside your child theme folder, use get_stylesheet_directory(). Because. the parent theme's style file is replaced by the file style.css your child theme, which is located in the root folder of the child theme, get_stylesheet_directory() points to your child theme folder (not on the parent theme folder).

Here is an example of usage require_once, which shows, how can you use get_stylesheet_directory(), when the included file is in a child theme folder.

 

Using record formats

Child theme inherits record formats, defined in the parent theme. But, when creating child themes, be careful, because. function add_theme_support(‘post-formats’) redefine format, set by the parent theme, not add to it.

File to template

Templates in a child theme behave the same way, how style.css, they replace the corresponding parent theme files. A child theme can replace any parent theme file by simply creating a file with the same name. (NOTE. File index.php can only be replaced in WordPress versions 3.0 and higher.).

Making proper child themes, then the changes will be saved when updating the parent theme.

Here are some examples of using template files in a child theme:

  • Adding a Template, missing from the parent theme (for example, link map page template, or for single column pages, which can be selected in the page properties).
  • To add more specific templates (cm. template hierarchy), for example, template tag.php for label pages instead of the usual archive.php parent theme.
  • To replace the parent template (for example, create your own template home.php to replace the parent home.php).

To understand the principles of operation, you can install the latest version on the test site. WordPress and activate theme Twenty Twelve Child which I created, after that go and take a close look at all theme files.

zip wordpress theme archive

Look like that's it, think if you, like me, do all the recommendations, then the principle of creating topics based on parent ones will be clear to you. The article was taken from CODEX WordPress and published on my website, really wanted to share a great theme development method. Good luck developing themes based on parent!


Buy WordPress hosting
/* WordPress tutor
Online tutoring services. List of courses I teach
  • Basic web design course;
  • Site layout;
  • General course on CMS WordPress and continuation of the course on template development;
  • Website development in PHP.
Read more on the page WordPress tutor
*/

Nikolaenko Maxim

Director of web studies ProGrafika. I am developing, website design and promotion. Always glad to new blog readers and good clients.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Templates for WordPress
The best hosting in Ukraine
Stable hosting for Drupal