Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Child Theme Dilemma

The Child Theme Dilemma

We always tell the people in the support forums they should use a child theme to make customisations. So many talks are introductions to create child themes. But what if you have a child theme and the parent theme got an update? How do you keep track of your changes?

A talk for people who don’t want to be beginner any longer and need to be intermediates. Including a plugin solution.

Presentation from WordCamp Milano 2016.

Torsten Landsiedel

October 22, 2016
Tweet

More Decks by Torsten Landsiedel

Other Decks in Technology

Transcript

  1. Hello! Torsten Landsiedel WordPress- Freelancer Moderator German Supportforum Editor Team

    de.w.org Translation Contributor and Editor Co-Organisator WP Meetup Hamburg Co-Organisator WordCamp Hamburg @zodiac1978
  2. Security Problems Parent Theme search.php (with vulnerability) Child Theme search.php

    (with vulnerability) Parent Theme search.php (without vulnerability) Child Theme search.php (with vulnerability) update overwrites no update! overwrites
  3. Extensibility Pluggable Functions: if ( ! function_exists( 'theme_special_nav' ) )

    { function theme_special_nav() { // Do something. } } Attention: Now you have to maintain the code!
  4. Missing extensibilities Framework Theme + Premium Child Theme? WordPress.org Theme

    + Child Theme? Where to put the customizations? There are no Grandchild Themes :(
  5. 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-an d-grandchild-themes
  6. Update of Parent Theme Without any problems? It depends …

    filter/actions removed? CSS classes changed? Markup changed? Paths changed?
  7. Performance problems Many Child Themes are using @import @import url(../parent-theme/style.css);

    But @import stops parallel loading in all browsers. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  8. 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
  9. 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
  10. 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
  11. 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' );
  12. 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
  13. 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
  14. 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.
  15. Idea 2: Child Theme Check Every template file in the

    theme is getting 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().
  16. Spread the word! The new default theme is using it,

    too! https://github.com/WordPress/twentyseventeen/issues/72
  17. • Italian Translation is waiting for you! https://translate.wordpress.org/locale/it/default/wp-plugins/chi ld-theme-check •

    Found a bug? Just open an issue on Github: https://github.com/Zodiac1978/tl-template-checker/issues • Help me to get this as a recommendation in the Theme Check Plugin (https://de.wordpress.org/plugins/theme-check/): https://github.com/WordPress/theme-check/issues/115 Conribute? Great!
  18. Thank you for your time! Have a great coffee break.

    Don’t miss the talk about Child Plugins from Bernhard Kau (Track 1 - 17:10 h)