+4 votes
301 views
in Blogs by (242k points)
reopened
Child theme in wordpress: what are they and how to create them?

1 Answer

+5 votes
by (1.6m points)
edited
 
Best answer

What is a WordPress child theme?
What is a WordPress child theme made of?
Child themes in WordPress: how they work
Advantages and disadvantages of the WordPress child theme
How to create a child theme in WordPress: instructions
Step 1: create the WordPress child theme folder:
Step 2: create a stylesheet for the WordPress child theme
Step 3: load the stylesheet correctly in function.php
Step 4: activate the WordPress child theme

image

Child theme in wordpress: what are they and how to create them?

Over the years, WordPress has evolved from a simple blogging system to an easy-to-use CMS platform and has become ubiquitous on the web. Thanks to its popularity, many professionals have specialized in providing WordPress themes as website templates. These already include almost all the functionalities of a website and are very similar to how the final product should be, but not identical. Usually you have to make adjustments in the code to adapt the site to the corporate design, or you have to change the structure. But what about the changes when the theme is updated? This is what the child themes in WordPress are for..

Index
  1. What is a WordPress child theme?
  2. What is a WordPress child theme made of?
  3. Child themes in WordPress: how they work
  4. Advantages and disadvantages of the WordPress child theme
  5. How to create a child theme in WordPress: instructions
    1. Step 1: create the WordPress child theme folder:
    2. Step 2: create a stylesheet for the WordPress child theme
    3. Step 3: load the stylesheet correctly in function.php
    4. Step 4: activate the WordPress child theme

What is a WordPress child theme?

If you want to prevent your changes from being overwritten when updating, you must use a child WordPress theme. WordPress child themes they are, as their name suggests, the children of a parent theme . These are tied to the parent theme so that they inherit its appearance and functions. If you make individual settings in the child WordPress theme, they are automatically overwritten in the parent theme's instructions . Therefore, the changes have no effect on the main topic. If the parent theme is updated, the changes to the child WordPress theme remain in place.

advice

During major adjustments or updates, error messages may appear on the website. In order not to disturb users, you must activate WordPress maintenance mode..

What is a WordPress child theme made of?

A WordPress child theme it can have different components. In this sense, the changes and the files where they are made are decisive. However, for what WordPress child themes work correctly , there are certain files that you must create for each of them:

  • CSS style.css style sheet file
  • function.php
  • screenshot.png (optional)

Why is the WordPress child theme do you need these three files?

Child themes in WordPress: how they work

As we've already mentioned, a WordPress child theme needs three files to function. The files have the following functions:

  • style.css: contains all the CSS rules and declarations that control the appearance of the theme. The most important thing is the header section. This is where the CSS file tells WordPress that it is a child theme with a specific parent theme , and provides other basic information.
  • function.php: determines the order in which the stylesheets of the parent and child WordPress themes are loaded. For the child theme changes to override the parent theme's instructions, the browser must load the WordPress child theme stylesheet after the parent theme's stylesheet.
  • screenshot.png is optional, but it is recommended to directly recognize the WordPress child theme in the WordPress backend . WordPress will automatically display the screenshot.png files in the theme menu of the corresponding template.
Note

If you are only going to make minor changes to the theme, there are simpler solutions such as the Simple Custom CSS Plugin or the customizer integrated directly into WordPress from version 4.7.

Advantages and disadvantages of the WordPress child theme

Using a child WordPress theme has many advantages. However, it also has some drawbacks, so you have to consider whether it is worth creating an extra theme just to implement small changes to the CSS:

Advantage Drawbacks
Changes are not overwritten when the parent theme is updated. The original template update only fixes security vulnerabilities in the template files found in the main themes folder. For template files in the WordPress child themes folder, these loopholes remain.
A child WordPress theme offers more freedom compared to the possibilities of the WordPress backend. For example, you can adapt the design and structure of the website or extend the theme with certain functions. There may be a loss of performance, because the browser loads two stylesheets simultaneously.
Extensive CSS settings stay clear compared to WordPress customizer in style.css.  
WordPress child themes are ideal for beginners who want to get to know WordPress better. If an error occurs, you can always return to the parent topic.  
Child WordPress themes allow you to speed up development work.  

How to create a child theme in WordPress: instructions

After explaining the functions, here we tell you how to create a functional child theme in WordPress:

Step 1: create the WordPress child theme folder:

Using an FTP client, such as FileZilla, connect to your server and navigate within the WordPress installation to the following folder:

  tu ruta hacia la instalación de wordpress/wp-content/themes/  

There you create a folder for the WordPress child theme. It is convenient to use the name of the parent theme by adding ? -Child? in the end..

Step 2: create a stylesheet for the WordPress child theme

Create a style.css file and add the following information in the header area using a text editor:

  /* Nombre del tema: [Nombre del tema padre] Child URI del tema: [http://example.de/parent-theme/] Descripción: [Nombre del tema padre] Tema hijo Autor: [Tu nombre] URI del autor: [El URL de tu sitio web] Plantilla: [Nombre de la carpeta del tema padre] Versión: 1.0.0 Dominio de texto: [Nombre del tema padre] -child */  

Replace the bracketed placeholders with your specifications. You don't have to enter all the elements; It is only mandatory to add the following two data for the WordPress child themes to work:

  • Theme name : all themes need a name, and the same goes for the WordPress child theme. This name must be unique and must not be shared with any other theme in the WordPress installation.
  • Template : With this information, WordPress knows that it is a child theme of the specified parent theme.

When the file is ready, use the FTP client to upload it to the WordPress child theme folder.

Step 3: load the stylesheet correctly in function.php

In the best case scenario, the parent theme already contains the instruction to load the stylesheet of the child WordPress theme. But not all design templates do this. Therefore, it is important to take a look at the functions of the parent theme. One of the following three scenarios applies:

  1. The parent theme already loads both stylesheets. In this case, you don't have to do anything with the WordPress child theme .
  2. If the parent theme loads its own stylesheet via get_template_directory () or get_template_directory_uri () , the child WordPress theme just has to load its own stylesheet with the corresponding name of the parent theme's stylesheet as parameter in function.php.
  3. If the parent theme loads its own stylesheet via get_stylesheet_directory () or get_stylsheet_directory_uri () , the child WordPress theme has to load both stylesheets in function.php. Make sure to use the exact style sheet name of the parent theme.

If the second case occurs, function.php looks like this:

  <!--?php</codesnippet--> add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'Nombre de la hoja de estilo del tema padre'), wp_get_theme()-> get('Version') // Solo funciona si el elemento version también se especifica en el área del encabezado de la hoja de estilo ); } ?>  

If the WordPress child theme needs to load both stylesheets via function.php , the code looks like this:

  <!--?php</codesnippet--> function child_theme_styles() { wp_enqueue_style( 'Nombre de la hoja de estilo del tema padre', get_template_directory_uri() . '/style.css'); wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Handle 'Nombre de la hoja de estilo del tema padre')); } add_action( 'wp_enqueue_scripts', 'child_theme_styles' ); ?>  

Enter function.php in the style.css file in the child theme folder in WordPress.

Note

Optionally, you can also place an image file with the filename screenshot.png in the WordPress child themes folder. WordPress displays this image in the background of the theme, so you can better map the template.

Step 4: activate the WordPress child theme

After creating the WordPress child theme, activate it like any other theme in the WordPress backend . To do so, simply go to the backend and select the child theme in Design> Themes .

Note

If you have already made adjustments to the parent theme through the WordPress customizer, these changes will be lost when activating the child WordPress theme. With the Customizer Export / Import plugin, you can export the customizer settings and then import them again.

Now the WordPress child theme is completely ready for use. If you want to make changes to other template files, copy the parent theme file and save it in the child theme folder. The path must exactly match the path of the main topic. The main theme file is automatically overwritten by the file from the WordPress child themes folder.

advice

With WordPress hosting from IONOS, you will have a specially optimized WordPress hosting platform that makes it easy for you to create your own WordPress website.


...