Como criar o Child Theme no WordPress

Why SSL? 3 Benefits of Using an SSL Certificate
How to create an automatic e-mail receiving response in cPanel

Child Theme or coarse translation of the term, “children issues” was created by WordPress developers so you can create subtopics based on the characteristics of a parent or a teacher theme. A child theme allows you to use and modify a master theme and save the child theme separately without affecting the parent theme. In this tutorial, you will learn how to create and customize a WordPress child theme.

Why should you use WordPress Themes in children

A child theme allows you to change much (or little) a parent theme as you wish. Then you can change the child theme without affecting the parent topic or any other projects using it as an anchor for your own child themes.

How do the children WordPress themes

A child theme resides in a separate directory parent theme and each child directory must include their own files style.css  and functions.php . Custom files can be added as needed, but these files are recommended for the theme to function properly.

Using the css files and relevant .php, you can modify everything from the style parameters and layout, to the actual coding and scripts that use child theme, even if those scripts are not present in the parent theme directory.

Think of the child theme as a sitting overlay on top of the parent theme. When a visitor loads your site, WordPress first loads the child theme and then inherits styles and functions absent parent theme. As a result, most of your background coding is still removed from the parent directory, but it is modified according to the child theme parameters before the content is displayed on the page.

What do you need?

Before beginning this guide, you need the following:

  • Access to the WordPress administration area
  • Access to the file manager (recommended) or FTP

Step 1 – Creating a Child theme in WordPress

Raising a child theme is no more complicated than the work you are already doing with a single master theme.

You will create a directory for the child theme in the directory wp-content  / themes  existent. It is best to keep a good organization directories adding -child the end of the parent theme name. You can also add the name of the specific project, if you prefer. Remember not to include any spaces in the file name because they can cause errors. To create a new directory, you can use the FTP client or the File Manager.

The following example uses the File Manager to create a child theme based on the theme Twenty Seventeen, then the full path to the child theme folder is   wp-content / themes / twentyseventeen-child .

  1. Access the Hostinger control panel and click File Manager .
  2. Navigate to the directory of WordPress installation (usually called   public_html ) and open the folder wp-content  -> themes .
  3. Click the icon Create New Folder , type the name of your son , and then click Create .create wordpress child theme folder
  4. Access the newly created theme folder son.
  5. Click the New File , type style.css  as the file name and click Create.
    create css style for child theme
  6. Complete the file with the following code:

    * / 
    Theme Name: Twenty Seventeen Child 
    Theme URL: http://hostinger-tutorials.com 
    Description: Twenty Seventeen Child Theme 
    Author: John Doe 
    Author URL: http://hostinger-tutorials.com 
    Template: twentyseventeen 
    Version: 1.0.0 
    Text Domain: twentyseventeen-child 
    * / Custom CSS goes after this line
  7. Change all values to match the name of your theme and domain. The most important fields are the fields Template  and @import because they inform the WordPress which the main theme in which the theme of your child is based. When finished, click Save.
    child theme with custom css rules
  8. Add a new file functions.php  in the same folder, but do not copy and paste the father theme file code because it must remain separate from all the changes made in the child theme. Instead, create a blank file or add new functions .php necessary for your child theme.
  9. In the WordPress admin area, navigate to Appearance -> Themes  to see the child theme just created and click Activate.
    activate wordpress child theme
  10. Visit your website, and you’ll see your theme with some obvious problems (as shown below). Do not panic, because the file functions.php  is not carrying the theme CSS father yet.wordpress without css
  11. In the WordPress admin area, navigate to Appearance  ->  Editor  and select functions.php .
  12. WordPress has a function to load the CSS parents themes. Copy and paste the following code into the file theme.php  son theme:

    <? Php 
    add_action ( 'wp_enqueue_scripts' 'enqueue_parent_styles'); 
    
    enqueue_parent_styles function () { 
      wp_enqueue_style ( 'parent-style', get_template_directory_uri () '/ style.css.'); 
    } 
    ?>
  13. Click Refresh  at the bottom to save your changes.
  14. Visit your site again. You’ll notice that the CSS is loaded and your child theme looks exactly the same as the parent theme.wordpress with CSS

As you can see the creation of child theme in WordPress is quite simple if you break the process to separate steps.

Step 2 – Customizing a WordPress Theme Son

It is very likely that you want to customize your child’s theme appearance. That’s why we created it in the first place, right?

Step 2.1 – Customize the look of your Son Tema

To customize the appearance of the theme, you need to edit the file custom.css  son theme. You can use a text editor and FTP client, file manager or using the WordPress editor ( Appearance  -> Editor ). You also need a basic understanding of CSS rules and know how to inspect elements from your browser.

For example, to change the child theme background color of WordPress, add the following CSS rule to the file style.css :

.site-content-contain {
background-color: # d5ffa0;
position: relative;
}

Here’s how it would change the look of your WordPress site. Follow a similar process for any other element you want to change.

wordpress changed background

The same goes for any other element you want to change.

Step 2.2 – Adding and removing resources

Another great advantage of using a child theme is the ability to have a file functions.php  separate that, like Plugins, is used to add (or remove) certain features. By having the functions.php  in a separate child theme, you can be sure that any changes will not disappear after a theme upgrade.

To add new features to your theme, add the PHP code to the file functions.php  of your child. For example, the following code will disable the search feature of WordPress:

disable_search function ($ query, $ error = true) {
if (is_search ()) {
$ Query-> is_search = false;
$ Query-> query_vars [s] = false;
$ Query-> query [s] = false;
// to error
if ($ error == true)
$ Query-> is_404 = true;
}
}

add_action ( 'parse_query' 'disable_search');
add_filter ( 'get_search_form' create_function ( '$ a, "" return null; "));

Conclusion

The children WordPress themes offer a powerful way to create a totally new design based on parameters of a theme master without affecting the parent theme files, and vice versa. With some simple coding and directory management, you can modify the child theme as you want, providing a wide range of possibilities for your project. If you want to learn how to create a blog using WordPress, we have a step by step interesting.