Make a WordPress Child Theme in 15 minutes

A Child Theme in WordPress is used when you are start editing WordPress Child Theme
in your your WordPress files, such as 404 page, style.css, ,funtions.php, header page etc…When starting out with editing styles, most people starts with editing CSS3 in the style.css. As I have written before in adding /changing style of a page, the CSS can be edited in 3 ways. But the most prefered way is in the stylesheet.

To prevent that your work will be overwritten during the update of your theme, a childtheme is needed. The child theme needs mainly 2 files: the style.css and functions.php file and a photo. Ofcourse, if you want to change the 404 page, than this should also be in your child theme.

Creation of a childtheme is very simple and will cost you only 15 minutes.

What is a WordPress Child Theme?

A basic WordPress child theme has one folder which holds a minimum of one style sheet (called style.css ).  The WordPress child theme uses all folders / pages from the parent theme. The folders and pages in the folder of the child theme are overriding the data from the parent theme .

The pages which are used for manipulation of the parent theme should be in the child theme folder.

The child theme can’t live alone as it uses the parents theme folders. Only when you copy all the folders into your child theme folder, the child can live alone. In this case you will loose the advantage of not worrying about updates. Best practice is only copy the folders and pages into a child theme which you want to manipulate.

Which CSS is leading

All CSS written in the child theme will over ride the data of the parent theme. CSS in the header will over ride the child theme CSS. CSS on the page will override all before mentioned CSS.

Loosing data?

The only adjustment I had to made, after the change over, was the header photo and the preference of navigation menu.

The pages all stayed in tact, including the online styling. It is like changing to another theme, with out the difficulties of different layouts.

Also all the plugins will still be active after changing over to the child theme.

 

Creating the WordPress Child Theme

Making a WordPress Child theme is easy and it will not take more than 15 minutes of your time. Creating has different advantages:

  • loosing work, while updating the parent theme will not happen anymore
  • the new style sheet is short and has only the additional styling inside.
  • you can take your additional styling with you to your next project.
  • any theme (free or paid) can hold a child theme.

The Child Theme needs only a style.css page in its folder. This page has to start with the following lines:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: Your Name
Author URI: http://www.maritime-mea.com
Template: twentythirteen
Version: 0.1
Tags: light, orange, one-column, right-sidebar, responsive-layout
Text Domain: twenty-thirteen-child
*/

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

/* ----Theme customization starts here---- */

Explanation can also be found at WordPress codex

 A photo at your child theme

Make a screenshot from your webpage and put it in your Child Theme folder. In this case you will find the child theme more easy when you are looking under appearance / Themes.

Size can be small like 300 x 250 but is not really important. The last time I uploaded a long photo and this is also displayed.

Name should be screenshot.png or screenshot.jpg

Last updates:

WordPress is now preferring a funcions.php file in stead of the @rule. I used following text in the php file. To my opnion an update of your current child theme should be in your computer before you activate your new child theme!

<?php
add_action( 'wp_enqueue_scripts', 'wpsites_load_parent_styles');
function wpsites_load_parent_styles() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri().'/style.css' );
}

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: Your Name
Author URI: http://www.maritime-mea.com
Template: twentythirteen
Version: 0.1
Tags: light, orange, one-column, right-sidebar, responsive-layout
Text Domain: twenty-thirteen-child
*/

/*the @import .......is deleted in this option*/

/* ----Theme customization starts here---- */

 

In this new preferred option you will have to create two files inside your child theme folder: fuctions.php and style.css  with a photo sreenshot.jpg for your convenience.

Other files like headers, footers etc

Next to the style.css sheet, also the header.php or other files can be added to the child theme. In this case you can even adjust more, or put manually code  there. For example the header is often used for Google analytics or sliders.  But also the HTML inside those pages can be manipulated.

StudioPress

I am using the last 2 years only Genesis for my Themes. In this case the file with Genesis is the parent and the other file like ‘Altitude’ is the child. The preferrence of StudioPress is that you will not touch the parent called Genesis and if you want to adjust the theme, this can be done directly inside the files of for e.g. ‘Altitude’
What I typical do, is making an empty stylesheet and upload this via the section head / footer scripts in the Genesis general section. Ofcourse you still have to upload the file to your theme root, where you will also find your style.css. in this case you can edit the file via the WordPress dashboard appearance / theme editor