Menu
homeWindows 10

WordPress child themes instructions. How to Create a WordPress Child Theme. How to Make a WordPress Child Theme

Want to create a WordPress child theme? After meeting WordPress Basics There is a completely justified and understandable desire to change the template design of the site to suit your tastes and needs. Creating a child theme is where you should start creating websites. In this article I will tell you how to create a child theme in WordPress.

Why create a child theme?

Creating a child theme is The best way customize your chosen one WordPress template. A child theme has all the features and appearance of the parent theme. You can do anything necessary settings without affecting the main template in any way. You can also easily update the parent theme without worrying about losing your settings.

Requirements

In order to make any changes to the template, basic knowledge of CSS/HTML is required, and it would also be nice to know PHP. You will really need the skills to copy and paste pieces of code from other sources.

To begin with, I would advise you to practice on localhost. You can also move your existing site to local server and practice on it or use dummy content.

Beginning of work

Any good topic WordPress can become the parent theme. However, there is huge selection themes and some of them are quite complex for the first experiments in creating child themes, so I decided to take a standard theme as an example Twenty Thirteen, which is one of the default themes in WordPress.

Create your first child theme

To begin, in the installation folder, open /wp-content/themes/ and create new folder for the child theme. Call it whatever you want. For example, I'll call it wpbdemo.

Open Text Document like Notepad and paste this code there:

/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Author: WPBeginner Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css");

Theme Name: WPB Child Theme

Theme URI: http://www.wpbeginner.com/

Description: A Twenty Thirteen child theme

Author URI: http://www.wpbeginner.com

Template: twenty-thirteen

Version: 1.0.0

Save this document in the newly created child theme folder and name it as style.css.

The lines of code here are self-explanatory. What you really need to pay attention to is the line Template: twenty-thirteen.

This tells WordPress that our theme is a child theme and the parent theme folder is named twentythirteen. Please note that the parent folder name is case sensitive, i.e. if you enter “Template: TwentyThirteen”, nothing will work.

The last line of code imports the parent theme's stylesheet into the child theme.

This minimum requirements to create a child theme. Now you can go to the menu Appearance" Themes, where you will see WPB as a child theme. Click the Activate button to start using it on your site.

Since you haven't changed anything in the child theme yet, the site will use all the functionality and appearance of the parent theme.

Setting up a child theme

Each theme directory contains a file with styles – style.css. most often it is the main style file, where there is CSS. However, for some themes, this file only contains information about the theme. In this case, as a rule, CSS files are in a separate directory.

Here you will need some knowledge and skills in working with .

Google Chrome and Firefox come with a built-in inspection tool that allows you to view the CSS of many elements on a web page.

If you want to see CSS navigation menu, then simply move the mouse cursor to the menu, right-click and select “View code”.

Once you do this, the browser window will be split into two parts. At the bottom of the screen you will see the HTML and CSS for the page.

When you hover your mouse over different HTML lines, the inspection tool at the top of the screen will highlight the corresponding element. As you can see from the screenshot, I chose navigation menu.

The chrome tool will also display the CSS rules related to the selected element on the right side.

You can try editing the CSS right here to immediately see how everything will look. Let's change the background color . navbar on #e8e5ce .

Background color The navigation bar has changed. If you like it, you can copy this CSS rule and paste the child theme file style.css.

Navbar ( background-color: #e8e5ce; )

Navbar (

Save your changes to the style.css file and preview the site.

Repeat the process for anything you want to change in the theme's style sheet.

Here full list styles that I created for the child theme. Don't be afraid to experiment - change it at your discretion.

/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author: WPBeginner Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css"); .site-title ( padding: 30px 0 30px; ) .site-header .home-link ( min-height: 0px; ) .navbar ( background-color: #e8e5ce; ) .widget ( background-color: #e8e5ce; ) .site-footer ( background-color: #d8cdc1; ) .site-footer .sidebar-container ( background-color:#533F2A )

Theme Name: WPB Child Theme

Theme URI: http://www.wpbeginner.com

Description: A Twenty Thirteen child theme

Author URI: http://www.wpbeginner.com

Template: twenty-thirteen

Version: 1.0.0

@ import url ("../twentythirteen/style.css" ) ;

Site - title (

padding: 30px 0 30px;

Site-header. home - link (

min - height : 0px ;

Navbar (

background - color : #e8e5ce;

Widget (

background - color : #e8e5ce;

Site - footer (

background - color : #d8cdc1;

Site - footer. sidebar - container (

background - color : #533F2A

Each WordPress theme has a different layout. Let's take a look at the structure of the Twenty Thirteen theme. There is: header, navigation menu, content part, bottom widget area, second (side) widget area, footer.

Each of these sections is processed various files in the twentythirteen folder. These files are called templates.

As a rule, these files have the name of the section to which they belong. For example, the footer is served by the file footer.php, the header and navigation menu are served by the file header.php. Some sections, such as the content area, are served by several files - “content templates”.

So, you need to get started by selecting the theme file that you want to change; copy it to your child theme.

For example, let's say you want to remove the "Powered by WordPress" text from the footer area and insert copyright information there. To do this: copy the footer.php file to the child theme, open it in simple text editor, such as Notepad. Find the line you want to remove and replace it with whatever you want. It might look like this:

© Copyright All rights reserved.

< ? php

* The template for displaying the footer

* Contains footer content and the closing of the #main and #page div elements.

* @package WordPress

* @subpackage Twenty_Thirteen

* @since Twenty Thirteen 1.0

? >

< /div> < ! -- #main -->

< footer id = "colophon" class = "site-footer" role = "contentinfo" & gt ;

< ? php get_sidebar("main"); ? >

< div class = "site-info" & gt ;

< p> & copy ; Copyright< ? php echo date(Y); ? > < ? php bloginfo("name"); ? > All rights reserved. < /p>

< /div> < ! -- . site - info -- & gt ;

< /footer> < ! -- #colophon -->

< /div> < ! -- #page -->

< ? php wp_footer(); ? >

< /body>

< /html>

By the way, troubleshooting is much easier in child themes. For example, if you accidentally deleted something that you need parent topic, then you can simply delete the file from the child theme and start over. For example, in this code, I replaced the Twenty Thirteen theme caption with a copyright notice.

Adding new functionality to a child theme

There are many tutorials online on how to copy and paste pieces of code into your theme's functions.php file.

Adding code snippets to the parent functions.php file means that your changes will be overwritten, regardless of whether the parent theme is updated. This is why it is always recommended to work in a child theme and add all the codes to its functions.php file.

Let's create a file in the child theme folder and call it functions.php. In this example I want to add a piece of code that will change standard image in the header to your image.

I've already created a header image and thumbnail by editing the default header image in the Twenty Thirteen theme. Next step– upload them to the child theme at inside/images/headers/folder .

IN next update platforms are always adding new functions, improving protection, and new opportunities appearing. So, one of several possibilities can be noted as follows useful tool, How . And this is just one of many functions. And there are also more significant ones, for example, a child theme.

What is a WordPress child theme?

I would not like to delve too deeply into this topic, given that there is a good Russian-language manual on the official website (). I’ll just say a few words about the benefits of a child theme and what it is.

Meaning: child theme (CT) is mainly designed to properly edit the parent theme (the one activated in this moment). Using this method will save everything changes made parent theme (PT) the next time it is updated.

Benefit: Colossal. Because this correct solution in any changes in RT.

How to Create a Child Theme in WordPress

The WordPress code (link above) goes into detail step by step description steps to create a child theme. In essence, there is nothing complicated here. Quite the contrary: everything is very simple. But not everyone has the desire to tinker with files (we won’t judge them - this is a personal matter). In such cases, there are plugins that will do almost all the work for you.

We will talk briefly about this option. In the repository, as always, big choice plugins in implementing solutions to any problems. My choice fell on the plugin " One-Click Child Theme", which will create a child theme in one click.

After activating the “One-Click Child Theme” module, go to the “Appearance – Child Theme” tab. There are three fields to fill out on this page:

How to work with a child theme

When you need to edit the parent theme (for example, make some changes, add new block, delete a block, etc.), then for the purpose of preservation or even security, it is best to do this through a child theme.

Theme files. A file in which you need to do something of your own is copied from RT and transferred to DT (note that if the file is in a subfolder of the topic, then you also create the same folder in DT). Then start working with it, change it, add what you need and check the result.

Design styles (style.css). In order to be able to edit parent theme styles directly in the child theme, you must first import them through the style.css file or functions.php file. Otherwise, changes will not occur. And this is done like this:

CSS @import

/* Theme Name: child-my-theme Description: Child theme

Function

Add_action("wp_enqueue_scripts", "my_theme_enqueue_styles"); function my_theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); )

functions.php. unlike the previous ones, it does not change or import, but is loaded as an addition to the parent file. You don’t need to copy it from RT, just create a file in DT called functions.php. And then in the usual way we add the functions you need to it. Thus it will be the right approach to modify and expand the capabilities of the parent theme.

Including files from a child theme. In order to connect files from DT, you must use certain functions that indicate the correct path.

Child themes in WordPress allow you to make changes to existing topics, and in such a way that such changes will not be lost when updating the original (or parent) theme. In addition to appearance, child themes allow you to change the markup and even the functionality of the parent theme, expanding it to suit your own needs.

Support for child themes in WordPress appeared a long time ago, but most users today still prefer to make changes to the source theme code directly. In this article, we'll cover how child themes work in WordPress and why child themes should be used to make any changes to existing themes.

What is a child theme

A child theme in WordPress is a theme that inherits the appearance and all the functionality of the parent (original) theme. This inheritance makes it easy to change and supplement separate areas parent theme without changing the original theme itself. Thanks to this approach, updating the parent theme will not affect such changes.

The parent theme can be any other WordPress theme (with the exception of child themes), and for the child theme to work, both themes must be installed, but the child one must be activated.

How to create a child theme

The simplest child theme consists of a single style.css file, which specifies the name of the child theme and the name of the directory containing the parent theme. The same file often contains a link to the parent theme's style sheet with using CSS@import directives.

As an example, we will create a child theme, My Child Theme, and use the default Twenty Twelve theme as the parent theme.

First, make sure that the parent theme exists - find the twentytwelve directory in wp-content/themes. Then create a new directory in wp-content/themes and name it my-child-theme . In this new directory, create a style.css file and paste the following header into it:

/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css");

Using this header, we determined the name of our new topic, and also indicated the parent one. @import directive in this case loads all the styles from the Twenty Twelve theme, on top of which we will make our changes. Without this directive, our child theme will only inherit the templates (markup) of the parent theme, and not the style.

After this, your themes directory should look something like this:

By going to the Appearance → Themes section, you will see that your new topic is already available for activation.

If you activate it and go to home page of your site, you will see that your child theme looks exactly like standard theme Twenty Twelve.

Working with styles

Child theme CSS styles can be set directly in the style.css file right after the @import directive. For example, to set the background color and link color in your theme, add the following code to the end of the stylesheet:

Body ( background: red; ) a ( color: green; )

This way you can change the styles of any elements of the parent theme, and you can easily find the required element using the developer tools in Google browser Chrome or using the Firebug extension for the Firefox browser.

Working with Templates

With a child theme, you can also easily change the templates of the parent theme themselves. To do this, just create a file in the child theme with the same name as the template in the parent theme. For example, to replace the footer.php template with your own, create a footer.php file in your child theme directory:

Footer text

Thus, we replaced the text in the footer of the Twenty Twelve theme with our own.

Often when working with templates in child themes, it is easier to copy an existing template from the parent theme and make changes to it in the child theme, thus maintaining the structure of everything HTML document. If you make a mistake, you can always delete the template and start again.

You can also create new template files that are not present in the parent theme, and WordPress will include them according to the template hierarchy. For example, if the parent theme does not have a page.php file, you can create a file with that name in your child theme and WordPress will include it when displaying any page.

It is also worth noting that not all parent theme files can be modified in this way. For example, you won't be able to change a file that was called by PHP include function or require .

Working with functions.php

If you have any questions about making changes to existing WordPress themes, leave a comment and we will answer you.

I don’t know exactly why templates for WordPress sites are persistently called themes, but this is what gives rise to a tautology in the introduction to this article: the topic of this article is how to create a WordPress child theme. To put it simply, how to make sure that changes made to a website template do not disappear after each template update by the author.

Why is this necessary?

Why a child theme is needed, I explained in the introduction. Let me explain in practice. I haven’t used templates in the author’s version for a long time, I’m constantly changing something in the file responsible for the design (style.css), removing links from the footer, swapping introductions and announcements for articles in the archives. In short, I make edits in the template files. Every time the author updates the template, I would lose and restore my edits if I didn't use child themes.

It should be noted that recently, the situation with the loss of edits has become somewhat simpler. In all modern topics, there is a custom edit to the style file (style.css), which does not change after updating the theme, however, this does not solve common task articles, create a WordPress child theme.

Create a WordPress Child Theme Manually

/* Theme Name: Daughter Template: father */

Note that the Template directive specifies the parent theme and is required.

Important! Now, when you place a file in the “child” directory, it replaces a similar file in the “parent”. This rule does NOT work for the functions.php file.

But that's not all. It is necessary to transfer the “parent” styles to the “daughter” styles. This is done in two ways:

Method 1. Simply transfer the contents of the style file (style.css) to a similar parent file;

Method 2. Or add a daughter’s style.css file next line:

@import url("../father/style.css");

Please note: relative address indicating the parent template.

Theme plugins for creating a child theme

About plugins for creating a child theme, I’ll say this: if you need a child theme, install the plugin, create a “daughter”, delete the plugin and don’t worry handmade. Any plugin listed below will take 10-15 seconds to work with unless you are creating a child theme of an already modified template.

Child Theme Wizard

Allows you to create a new child theme without having to use additional tools straight from the WordPress admin interface.

Child Theme Configurator

https://ru.wordpress.org/plugins/child-theme-configurator/

A fast and easy to use utility that allows you to analyze any working topic and create a child theme and customize it. Child Theme Configurator makes it easy to identify and override exact CSS attributes that you want to configure. The analyzer scans the provided theme and automatically configures your child theme.

Childify Me

https://ru.wordpress.org/plugins/childify-me/

Allows you to create a child theme for any installed theme, directly from the Appearance>>>Theme panel.

Create a child theme of the modified template

Let's imagine a situation: you are working with your website and you are tired of constantly editing the template after an update. What to do? You need to create a child theme of an already modified template. How to do it?

Option 1. Install the Child Theme Configurator plugin, it will “enlighten” your template and transfer the changed files to the child theme;

Option 2. Make a “daughter” in manual mode and further: Transfer the modified files from the parent theme to the child theme.

All! You are now working on a child theme that you modified earlier.

conclusions

Now you know how to create a WordPress child theme. Using this functionality simplifies working with templates and removes the task of monitoring constantly changing themes. With a child theme, you can edit the template without fear of losing the corrections after the update. Questions in the comments.

Hello everyone, today I want to tell you about a wonderful feature wordpress engine– child theme. At the very end of the post, I will show an example of how to make a WordPress child theme based on ready-made template, now I want to explain why we need a WordPress child theme.

Page navigation:

What is a WordPress child theme and why is it needed?

A wordpress child theme is a theme that is used in wordpress to modify or extend the functionality of the parent (main) theme.

Using wordpress child theme allows you to completely change CSS styles, HTML and javascript code, as well as PHP code or its individual functions without interfering with the author's theme. Simply put, after our edits, we will be able to update the downloaded or purchased theme without losing our edits and functionality.

Let's say we bought a paid theme with free updates and support for a year. We need to create our website based on ready theme+ deposit minor changes in styles.

The first thing that comes to mind (and this is wrong): you need to take and write your styles into the style.css file. This way we will get the required result, BUT:

When updating, all our styles will be lost. If we ask support for help, they will refuse to help us, and even if they help, they will have to update automatically...

Vicious circle? – not really, you don’t have to update the topic and don’t contact support :)

Good advice, isn't it??

In this situation, WordPress child theme can help us. We simply throw a clean (without edits) purchased theme into wp-content/themes, and also create a child one and throw in the only file: style.css (it is required).

Benefits of using WordPress child theme

(click on the numbers to see all the benefits)

How to create a wordpress child theme

To create a WordPress child theme, we only need to fulfill a few conditions:

  1. Create a directory with a custom name.
  2. In this folder create a file style.css with special text. (I'll show you below)

I present to your attention brief instructions By creating wordpress child theme for the Twenty Sixteen theme, which comes in the base of the new WP.

Brief instructions on how to make a WordPress child theme

Clicking on the numbers below will take you to the next step.

Creating a child theme for wordpress

This is what our website looks like now:

I suggest changing the color of the headings in the widget on the right. To do this, we need to add the following code to the child theme styles:

Widget h2.widget-title(color:#228E4F;)

This is what the style edits look like:

And this is the result of our edits:

I also suggest creating other edits. For example, all SEO developers are tired of the fact that widget titles are displayed in h2. It is quite simple to treat this problem using the WordPress child theme. To do this we must:

1) Create a functions.php file.

2) Write the following code into it:

__("Sidebar", "twentysixteen"), "id" => "sidebar-1", "description" => __("Add widgets here to appear in your sidebar.", "twentysixteen"), "before_widget" = > "", "after_widget" => "", "before_title" => "

", "after_title" => "
",)); unregister_sidebar("sidebar-2"); register_sidebar(array("name" => __("Content Bottom 1", "twentysixteen"), "id" => "sidebar-2", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); unregister_sidebar("sidebar-3"); register_sidebar(array("name" => __("Content Bottom 2", "twentysixteen"), "id" => "sidebar-3", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); } ?>

Here we do a very simple thing, remove all sidebars registered by the parent theme unregister_sidebar("sidebar-3"); and throw it in new code creating sidebars, which we took from the parent theme. That's all. Let's see the result:

Similarly, you can change the contents of any theme file, or add new ones, the only difference being that functions.php is not overwritten, but new functions are added. For theme files, when adding a file, for example, footer.php, this file in the parent theme will be disabled, and we will use this file from the child theme.

Differences between parent and child WordPress themes

The difference between these topics is in the logic of work:

if the file is not included in the child theme, then WordPress is trying to find it in the parent theme

if a file other than functions.php is in the child theme, then it replaces a similar file in the parent

Thank you all for your attention, this is probably all I have, we share the article with our friends

, write comments :)