The Child Theme Dilemma (EN)

The Child Theme Dilemma

WordCamp Cologne 2015Torsten Landsiedel

Hello!

Torsten LandsiedelWordPress- Freelancer

Moderator German Supportforum

Editor Team de.w.org

Translation Contributor and Editor

Co-Organisator WP Meetup Hamburg

Co-Organisator WordCamp Hamburg

@zodiac1978

Child Theme Usage

Who has used Child Themes?

Child Theme Usage

Why?

Child Theme Problems

SecurityExtensibilityPerformance

Security Problems

Parent Themesearch.php (with vulnerability)

Child Themesearch.php (with vulnerability)

Parent Theme search.php (without vulnerability)

Child Themesearch.php (with vulnerability)

update

overwrites

no update!overwrites

Child Themes aren’t safe?

Why nobody told us?

Extensibility

Pluggable Functions:

if ( ! function_exists( 'theme_special_nav' ) ) {

function theme_special_nav() {

// Do something.

}

}

Attention:Now you have to maintain the code!

Missing extensibilities

Framework Theme + Premium Child Theme?

WordPress.org Theme + Child Theme?

Where to put the customizations?

Thre are no Grandchild Themes :(

Missing extensibilities

Why shouldn’t there be Grandchild Themes?

Missing extensibilities

This idea of releasing advanced child themes just creates the same problem child themes were meant to solve: upgradability.

– Justin Tadlock

http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes

Update of Parent Theme

Without any problems?

It depends …

filter/actions removed?CSS classes changed?Markup changed?Paths changed?

Performance Problems

Many Child Themes are using @import@import url(../parent-theme/style.css);

But @import stops parallel loadingin all browsers.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Solution: De-register styles und re-register/re-enqeue parent and child styles

function twentytwelve_child_scripts() {

wp_deregister_style( 'twentytwelve-style' );

wp_register_style( 'twentytwelve-style',

get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'twentytwelve-child-style',

get_stylesheet_uri(), array( 'twentytwelve-style' ) );

}

add_action( 'wp_enqueue_scripts', 'twentytwelve_child_scripts', 11 );

Performance problems

Even simpler: Enqueue parent styles. Done! Just works if get_stylesheet is used (and just this) in the parent theme.

// Faster than @import

add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

function my_child_theme_scripts() {

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

}

Performance problems

New problem:Many themes are not build that way.Hardcoded stylesheets in the header.php for example:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Performance problems

Performance problems

Or the theme is not compatible with using a child theme.

Or you have to de-register everything to preserve the correct order.wp_enqueue_style( 'base_styles',

get_template_directory_uri() . '/css/base.css' );

wp_enqueue_style( 'responsive_styles', get_template_directory_uri() . '/css/mobile.css' );

wp_enqueue_style( 'ie_styles', get_template_directory_uri() . '/css/ie.css' );

Performance Problems

Can be very complicated for beginners ...

Performance Problems

Justin Tadlocks brilliant solution for the parent theme:

function my_enqueue_styles() {

/* If using a child theme, auto-load the parent theme style. */

if ( is_child_theme() ) {

wp_enqueue_style( 'parent-style',

trailingslashit( get_template_directory_uri() ) . 'style.css' );

}

/* Always load active theme's style.css. */

wp_enqueue_style( 'style', get_stylesheet_uri() );

}

add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

Hey Torsten!

Grab some water.

Don’t speak too fast.

:)

Child Theme Problems

SecurityExtensibilities

Performance ✓

Idea 1: Child Theme Lite

“Child themes from theme developers should be nothing more than a stylesheet and a few functions.”

– Justin Tadlock

http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes

Idea 1: Child Theme Lite

Child Theme just contains functions.php and style.css.

All changes should just be made with hooks and filters.

This would be made within a plugin.Child Theme remains update-ability.

Idea 1: Child Theme Lite

Problem:How many themes do something like that?

Idea 2: Child Theme Check

Every template file in the theme is ghetting a version number in the file header.

@version 1.0.0

Check of the version number via plugin(or even better via WordPress core).

Differences between files can be shown via wp_text_diff().

Idea 2: Child Theme Check

DEMO!

Child Theme Check

Voilá!

Child Theme Check

Child Theme Check

https://github.com/Zodiac1978/tl-template-checker

- This is a Twitter opportunity! -

Child Theme Problems

Security ✓Extensibilities (✓)

Performance ✓

● Is Tools the right choice for the menu? Or should it be Appearance?

● Just open an issue on Github:https://github.com/Zodiac1978/tl-template-checker/issues

Conribute? Great!

Thank you for your feedback!

Discussion!

Questions? Contradiction? Alternative solutions?

Theme Shop/Theme Developer: Interested?

Let’s speak about it!

@zodiac1978http://torstenlandsiedel.de/kontakt

Thank you for your time!

Safe travels! :)