Creating a Child Theme in WordPress [Guide]

Veröffentlicht am - Letze Bearbeitung am

You can set up an attractive website quickly and easily with a Wordpress theme, although it may not do everything that you want, or you might want certain elements to display in a different way. Creating a child theme is the most efficient way to achieve this.

Normally, when you change the functionality or design of a theme, you must change the theme's files. This could include anything from the style of headings and other text to more complicated changes. Making changes to the main theme files will work, but problems could arise whenever an update for your theme is released.

Most high-quality themes are regularly updated by their developers, usually done for security or compatibility reasons, or to fix bugs. For this reason, it's highly recommended that you apply updates to themes whenever they are released.

When you apply an update though, any changes you have made to the theme’s files will be lost. You can go back into those files and alter them again each time you update your theme, but that could take a lot of time and is likely to cause errors. Creating a child theme presents a more efficient solution.

A child theme takes its core functionality from the main theme—the parent theme. Before loading any element, WordPress will check the child theme first. If you have included it in the child theme, it will load it from there, and it will use the parent theme if the child theme isn't available.

This means you can apply updates to your parent theme without affecting the changes you've made in the child theme. This will keep your website more secure, and will ensure that everything works as it should.

Child themes are therefore powerful tools, and luckily they are also easy to set up. Here is how:

1. Create a Theme Directory

The themes installed on your WordPress site are stored in the directory wp-content/themes. You have to create a directory for your child theme by using an FTP program or a file management application from your Web host.

In this example, we will create a child theme using the WordPress Twenty Fifteen theme as the parent.

Now, create a new directory for the child theme. You can name this directory however you want, but standard practice is to use this format: YourThemeName-child. Just remember to write it as one word, without spaces. Your new directory should then look something like this:

 

2. Create style.css

A style.css file will tell WordPress how to display your child theme in the Dashboard and which theme is the parent. You can use a text editor like Notepad to create this file. Just make sure it is named style.css and saved into the child theme directory that you created in the previous step.

The content of your style.css file should be as follows:

/*

 Theme Name:   Twenty Fifteen Child

 Theme URI:    http://YourWebsite.com/twentyfifteen-child/

 Description:  Twenty Fifteen Child Theme

 Author:       Your Name

 Author URI:   http://YourWebsite.com

 Template:     twentyfifteen

 Version:      1.0.0

 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

 Text Domain:  twenty-fifteen-child

*/

You can use this code, but change the website URL, child theme, parent theme, and author details to match your website.

The important elements are:

·         Theme Name - how your theme is displayed in the WordPress Dashboard

·         Theme URI - should match the name of the directory you created earlier

·         Template - the name of the directory of the parent theme

·         Text Domain - should match the name of the directory you created earlier

3. Create functions.php

Now create a functions.php file so that WordPress queues the stylesheets from your parent and child themes. This simply tells WordPress to load one before the other. The functions.php file be created in a text editor, and it should be saved in the child theme directory.

Here is the code that you should put into the functions.php file:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

?>

4. Activate the Child Theme

Log into your WordPress Dashboard and go to Appearance > Themes. Locate your child theme and activate it.

Now go to Appearance > Menus and re-save your menu, then check your site. If anything is out of place or isn't displaying properly, update it in the theme options section of your Dashboard.

At this stage, your website should now be using your child theme.

5. Edit Your Themes Files

You can now edit the style.css file in your child theme directory as required, or the functions.php file. You can also change any other files—all you have to do is copy the file from your parent theme into the child theme, and make your changes there. For example, if you wanted to make a change to the footer of your Twenty Fifteen themed WordPress website you would copy the footer.php file from wp-content/twentyfifteen/footer.php to wp-content/twentyfifteen-child/footer.php. You can make your changes, and they will be applied to the website.

You can even create new files in the child theme directory, and WordPress will also load them.

As already mentioned, when WordPress sees any file in the child theme directory it will load this in place of the file in the parent directory. If it doesn't find a file in the child theme directory, it uses the parent theme.

The exception to this is the functions.php file that you created earlier. It doesn't replace the parent version of this file, and both versions are loaded instead. You shouldn’t, therefore, copy the contents of the functions.php file from the parent theme directory to the child directory. Just use the code given above, and then add additional functions as required. When you do this, everything will be loaded by WordPress together.

Now you have a website that uses your preferred template while also letting you personalize it to give it the functionality that you need. You can also apply all theme updates to keep your website updated and secure without losing the work you have done modifying the theme.

Gepostet 23 Dezember, 2015

Happymarli

Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Nächster Beitrag

How to Successfully Develop a Visual Brand Online