|

Child Themes in WordPress

wordpress-logoWordPress uses “themes” to display the content of the database. The theme determines what the end user sees. Deciding which theme to use is determined by the site requirements, and some research may be needed to find the perfect fit. Whether it’s a free or fee-based theme, a child theme is created to contain the customizations.

Once a suitable theme is decided upon,  a Child Theme is made that will reference the Parent, this is where all theme edits are done. This prevents any customization being lost when an update of the parent theme occurs.

To create a child theme, create a folder in the “wp-content/themes” folder with a unique name, a good practice is to add “-child” to the parent name:
For instance “twentyfourteen-child”.
(This makes it clear who the parent theme is.)

Create a new plain text css file and save it as “style.css”, place this inside the designated Child folder.
Copy the child theme sample code on:
http://codex.wordpress.org/Child_Themes
Copy/paste that into the style.css and modify the specs.

The child theme “style.css” file MUST include this at the top:

/*
Theme Name: your theme name
Theme URI: URL of the theme originator
Description: Child Theme of …
Author: Author of this theme
Author URI: Your author URL
Template: twentythirteen (The parent name)
Version: 1.0.0
*/
@import url(“../twentythirteen/style.css”);
/* =Theme customization starts below this ————- */

Upload the child theme folder into the themes folder in WordPress. Now it can be activated in the “Appearance/Themes” page in the WordPress admin area. As long as the ‘style.css’ file is set up correctly, it will access all the parent theme pages, functions and styles, and as no modifications have been done yet, the display will be identical to the parent theme.

Changes to the page display style is done by copying the css from the parent theme style, and pasting it into the child theme style.css file. Then modify that as needed. WordPress will give preference to the child theme style sheet.

CSS edits:

  • To locate the css name of an element, find the style ID or class name to change by using Firefox Firebug plugin.
  • Find the style in the parent theme style.css file
  • Copy the style into the child theme style.css file. Change the properties as needed and WordPress will give preference to the child theme styles, to override the parent theme style.

Sometimes the cascading inheritance of a style will prevent the customized style from displaying correctly. Try using the !important element before the closing semi-colon in the style settings.

For instance, to override a link style:

a {
color: #c00 !important;
}

Changes to the .php pages:

Any change to the code in a .php page is done by placing a copy of the .php page in the child theme, and making the edits there. They will override the parent theme.

WordPress uses template pages to display content. Sometimes we need to know which template is used for a specific display. To find out which template is used, place this code at the bottom of the functions.php page. The template path will be shown at the top of the page.

add_action(‘wp_head’, ‘show_template’);function show_template() { global $template; print_r($template);} 

Useful links:

http://underscores.me/

http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

http://www.hongkiat.com/blog/wordpress-child-themes-dev/

Similar Posts