Embed Size (px)
Citation preview
Child Themes Not the Mama!
What is a child theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
Child themes are the recommended way of modifying an existing theme.
From the Codex
Provides a way to update a theme without effecting any changes you’ve made.
Simplified
Advantages
- safe updates - easy to extend
- reduced development time
Disadvantages
- time invested to learn parent theme (multiple authors)
- parent theme could be abandoned
Implementing a Child Theme
twentysixteen
Default WordPress Theme
twentysixteen
Parent Theme
twentysixteen
Child Theme
twentysixteen-child
(empty folder)
Child Theme Files
twentysixteen-child
functions.phpstyle.css
Child Styles
style.css
style.css
/* Theme Name: Twenty Sixteen Child Theme URI: http://example.com/twenty-sixteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout Text Domain: twenty-sixteen-child */
style.css
/* Theme Name: Twenty Sixteen Child Theme URI: http://example.com/twenty-sixteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout Text Domain: twenty-sixteen-child */
/** Theme Name: Twenty Sixteen Child… */
@import url(“../parent-theme/style.css”);
style.css
functions.php
Child Functions
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
?>
functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
?>
functions.php
get_template_directory_uri()
get_stylesheet_directory_uri()vs
get_template_directory_uri()
get_stylesheet_directory_uri()vs
mama (parent theme)
get_template_directory_uri()
get_stylesheet_directory_uri()vs
mama (parent theme)
not the mama (child theme)
demo
Plugin: Simple Custom CSS
Plugin: One-Click Child Theme
Justin Tucker@certainstrings certainstrings.com
resources• codex.wordpress.org/Child_Themes • Plugin: One Click Child Theme • Plugin: Simple Custom CSS
slides: bit.ly/wpaz-child-theme-building
Developer at fansided.com
