SlideShare a Scribd company logo

Do you really need a Child Theme?

•
•
P
pixolin

Many WordPress tutorials suggest, that you need a Child Theme to customize the layout of your website. While you should never modify WordPress core nor WordPress themes themselves, this session shows common pitfalls of Child Themes and provides you with save and efficient alternatives.

1 of 51
Download to read offline
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Do you really
 need a Child Theme?
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Bego Mario Garde Happy WordPress user since 7 years
 Moderator in German support forums
 General Translation Editor … and this is my first WordCamp session!
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Some general assumptions Don't hack WordPress Core. Never. Reasons: Updates overwrite your changes 
 Your site gets unmaintainable
 Difficult to provide support
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Some general assumptions Don't hack WordPress Themes. Reasons: Updates overwrite your changes 
 Your theme gets unmaintainable
 Difficult to provide support
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin The obvious solution Create a Child Theme! Reason: Updates don't overwrite your changes. Changes are easy to spot. 

WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin The obvious solution Create a Child Theme! Reason: Updates don't overwrite your changes. Changes are easy to spot. 
 Well, sort of.
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php We copy templates of a Parent Theme into the Child Theme and tweak them as needed. But what, if the Parent Theme had a bug or even security issues? The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php We copy templates of a Parent Theme into the Child Theme and tweak them as needed. But what, if the Parent Theme had a bug or even security issues? The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php While the Parent Theme gets fixed by the theme developer, … the Child Theme keeps the bug.
 (worst case: you don't even notice) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php.php While the Parent Theme gets fixed by the theme developer, … the Child Theme keeps the bug.
 (worst case: you don't even notice) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme Other issues? .php .js .css Parent Theme .php.php Theme developers may change function and class names. Worst Case: Your website shows an error message. Only. (That's when your client calls!) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Solution: Plugin Child Theme Check Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Parent Theme Child Theme Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Parent Theme Child Theme Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Plugin Child Theme Check Great idea, great tool, but … Theme Review Team not convinced 
 about version numbers in templates Changes still hard to maintain
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin More sites, more Child Themes Things get a little messy, 
 if you create a new Child Theme
 for every new client. How do you manage all of them 
 after two months? After two years?
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin So…  Do you really
 need a Child Theme?
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 1
 Check your Theme Options. Really.
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Photo "Strawberries" by @veeterzy, CC-0
 https://unsplash.com/photos/OJJIaFZOeX4
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin https://wordpress.org/themes/twentysixteen
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Theme options generally provide you with more options, than you realize. Play with them. Use them.
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 2
 Plugins for Custom CSS
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Right Click ➞ Inspect Element Try any value Copy best result Developer Tools Chrome Developer Tools
 https://developer.chrome.com/devtools
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .site-header { padding: 0;
 } .header-image { margin: 0 0 5em 0; img { width: 100%;
 height: auto; } }
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Support for SASS Add-on or 
 Replacement Revisions Disables on 
 syntax errors Jetpack Plugin Jetpack
 https://wordpress.org/plugins/jetpack/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin One Trick Pony Easy and reliable No revisions No support for SASS Simple 
 Custom CSS Plugin Simple Custom CSS
 https://wordpress.org/plugins/simple-custom-css/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Need to style individual pages? No Problem! WordPress adds the right body Class body Class WP Codex: Function Reference/body class
 http://bit.ly/1seFLBw
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Need to style individual pages? No Problem! WordPress adds the right body Class body Class WP Codex: Function Reference/body class
 http://bit.ly/1seFLBw
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 3
 Add your own functions
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Additional editor to add any function for front or back end Functions can be exported Error handling Code Snippets Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Replace pluggable functions Code Snippets if ( ! function_exists( 'twentysixteen_fonts_url' ) ) : Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Replace pluggable functions Code Snippets if ( ! function_exists( 'twentysixteen_fonts_url' ) ) : Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Error handling Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Error handling Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/ Hooks 
 to the rescue Need to add a custom field? You don't need custom templates.
Bego Mario Garde
 @pixolin add_filter( 'the_content', 'append_cf_location' ); function append_cf_location( $content ) { $location = get_field( 'location' ); $out = $content . 
 '<div class="location">Location: <strong>' . 
 $location . '</strong></div>' ; return $out; } WordCamp Antwerp 2016
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 4
 Create Shortcodes for your own PHP
Bego Mario Garde
 @pixolin add_shortcode( 'portfolio', 'get_portfolio' ); 
 function get_portfolio() { $portfolios = new WP_Query( 'post_type=portfolio' ); if ( $portfolios->have_posts() ) { while ( $portfolios->have_posts() ) { $portfolios->the_post(); $out .= get_the_title(); } } return $out; wp_reset_postdata(); } WordCamp Antwerp 2016
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 5
 Bring your own JavaScript
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Loads frameworks Error handling Revisions Custom JavaScript Editor Plugin Custom JavaScript Editor
 https://wordpress.org/plugins/custom-javascript-editor/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Loads frameworks Error handling Revisions Custom JavaScript Editor Plugin Custom JavaScript Editor
 https://wordpress.org/plugins/custom-javascript-editor/
Bego Mario Garde
 @pixolin jQuery(document).ready(function($){
 $('#smoothup').on('click', function(){
 $('html, body').animate({scrollTop:0}, 'fast');
 return false;
 });
 }); add_action('twentysixteen_credits', 'scroll_up_link');
 function scroll_up_link() {
 echo '<a href="#" id="smoothup" class="siteinfo" 
 title="Back to top">Back to Top /&nbsp;</a>';
 } WordCamp Antwerp 2016 in plugin Code Snippets in plugin Custom JS Editor
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 6
 Performance matters
 Concatenate JavaScript and CSS
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Autoptimize Aggregates and minimizes JS, CSS and HTML Plugin Autoptimize
 https://wordpress.org/plugins/autoptimize/
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Autoptimize Aggregates CSS and JavaScript 12 CSS files ➞ 1 CSS file
 14 JavaScript files ➞ 1 JavaScript file
WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin My personal Conclusion

WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Is it wrong to use Child Themes? Is it evil to use Child Themes? No. But you may have better alternatives. Dank u wel · Merci

More Related Content

Do you really need a Child Theme?

  • 1. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Do you really
 need a Child Theme?
  • 2. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Bego Mario Garde Happy WordPress user since 7 years
 Moderator in German support forums
 General Translation Editor … and this is my first WordCamp session!
  • 3. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Some general assumptions Don't hack WordPress Core. Never. Reasons: Updates overwrite your changes 
 Your site gets unmaintainable
 Difficult to provide support
  • 4. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Some general assumptions Don't hack WordPress Themes. Reasons: Updates overwrite your changes 
 Your theme gets unmaintainable
 Difficult to provide support
  • 5. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin The obvious solution Create a Child Theme! Reason: Updates don't overwrite your changes. Changes are easy to spot. 

  • 6. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin The obvious solution Create a Child Theme! Reason: Updates don't overwrite your changes. Changes are easy to spot. 
 Well, sort of.
  • 7. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php We copy templates of a Parent Theme into the Child Theme and tweak them as needed. But what, if the Parent Theme had a bug or even security issues? The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
  • 8. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php We copy templates of a Parent Theme into the Child Theme and tweak them as needed. But what, if the Parent Theme had a bug or even security issues? The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
  • 9. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php While the Parent Theme gets fixed by the theme developer, … the Child Theme keeps the bug.
 (worst case: you don't even notice) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
  • 10. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme What about security issues? .php .js .css Parent Theme .php.php While the Parent Theme gets fixed by the theme developer, … the Child Theme keeps the bug.
 (worst case: you don't even notice) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
  • 11. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .php .js .css Child Theme Other issues? .php .js .css Parent Theme .php.php Theme developers may change function and class names. Worst Case: Your website shows an error message. Only. (That's when your client calls!) The Child Theme Dilemma, T. Landsiedel 
 http://bit.ly/1SWpJFZ
  • 12. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Solution: Plugin Child Theme Check Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
  • 13. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Parent Theme Child Theme Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
  • 14. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Parent Theme Child Theme Plugin Child Theme Check
 https://wordpress.org/plugins/child-theme-check/
  • 15. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Plugin Child Theme Check Great idea, great tool, but … Theme Review Team not convinced 
 about version numbers in templates Changes still hard to maintain
  • 16. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin More sites, more Child Themes Things get a little messy, 
 if you create a new Child Theme
 for every new client. How do you manage all of them 
 after two months? After two years?
  • 17. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin So…  Do you really
 need a Child Theme?
  • 18. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 1
 Check your Theme Options. Really.
  • 19. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Photo "Strawberries" by @veeterzy, CC-0
 https://unsplash.com/photos/OJJIaFZOeX4
  • 20. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin https://wordpress.org/themes/twentysixteen
  • 21. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
  • 22. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Theme options generally provide you with more options, than you realize. Play with them. Use them.
  • 23. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 2
 Plugins for Custom CSS
  • 24. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
  • 25. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
  • 26. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Right Click ➞ Inspect Element Try any value Copy best result Developer Tools Chrome Developer Tools
 https://developer.chrome.com/devtools
  • 27. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin .site-header { padding: 0;
 } .header-image { margin: 0 0 5em 0; img { width: 100%;
 height: auto; } }
  • 28. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Support for SASS Add-on or 
 Replacement Revisions Disables on 
 syntax errors Jetpack Plugin Jetpack
 https://wordpress.org/plugins/jetpack/
  • 29. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin One Trick Pony Easy and reliable No revisions No support for SASS Simple 
 Custom CSS Plugin Simple Custom CSS
 https://wordpress.org/plugins/simple-custom-css/
  • 30. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Need to style individual pages? No Problem! WordPress adds the right body Class body Class WP Codex: Function Reference/body class
 http://bit.ly/1seFLBw
  • 31. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Need to style individual pages? No Problem! WordPress adds the right body Class body Class WP Codex: Function Reference/body class
 http://bit.ly/1seFLBw
  • 32. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 3
 Add your own functions
  • 33. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Additional editor to add any function for front or back end Functions can be exported Error handling Code Snippets Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
  • 34. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Replace pluggable functions Code Snippets if ( ! function_exists( 'twentysixteen_fonts_url' ) ) : Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
  • 35. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Replace pluggable functions Code Snippets if ( ! function_exists( 'twentysixteen_fonts_url' ) ) : Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
  • 36. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin
  • 37. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Error handling Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
  • 38. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Error handling Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/
  • 39. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Plugin Code Snippets
 https://wordpress.org/plugins/code-snippets/ Hooks 
 to the rescue Need to add a custom field? You don't need custom templates.
  • 40. Bego Mario Garde
 @pixolin add_filter( 'the_content', 'append_cf_location' ); function append_cf_location( $content ) { $location = get_field( 'location' ); $out = $content . 
 '<div class="location">Location: <strong>' . 
 $location . '</strong></div>' ; return $out; } WordCamp Antwerp 2016
  • 41. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 4
 Create Shortcodes for your own PHP
  • 42. Bego Mario Garde
 @pixolin add_shortcode( 'portfolio', 'get_portfolio' ); 
 function get_portfolio() { $portfolios = new WP_Query( 'post_type=portfolio' ); if ( $portfolios->have_posts() ) { while ( $portfolios->have_posts() ) { $portfolios->the_post(); $out .= get_the_title(); } } return $out; wp_reset_postdata(); } WordCamp Antwerp 2016
  • 43. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 5
 Bring your own JavaScript
  • 44. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Loads frameworks Error handling Revisions Custom JavaScript Editor Plugin Custom JavaScript Editor
 https://wordpress.org/plugins/custom-javascript-editor/
  • 45. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Loads frameworks Error handling Revisions Custom JavaScript Editor Plugin Custom JavaScript Editor
 https://wordpress.org/plugins/custom-javascript-editor/
  • 46. Bego Mario Garde
 @pixolin jQuery(document).ready(function($){
 $('#smoothup').on('click', function(){
 $('html, body').animate({scrollTop:0}, 'fast');
 return false;
 });
 }); add_action('twentysixteen_credits', 'scroll_up_link');
 function scroll_up_link() {
 echo '<a href="#" id="smoothup" class="siteinfo" 
 title="Back to top">Back to Top /&nbsp;</a>';
 } WordCamp Antwerp 2016 in plugin Code Snippets in plugin Custom JS Editor
  • 47. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Step 6
 Performance matters
 Concatenate JavaScript and CSS
  • 48. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Autoptimize Aggregates and minimizes JS, CSS and HTML Plugin Autoptimize
 https://wordpress.org/plugins/autoptimize/
  • 49. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Autoptimize Aggregates CSS and JavaScript 12 CSS files ➞ 1 CSS file
 14 JavaScript files ➞ 1 JavaScript file
  • 50. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin My personal Conclusion

  • 51. WordCamp Antwerp 2016 Bego Mario Garde
 @pixolin Is it wrong to use Child Themes? Is it evil to use Child Themes? No. But you may have better alternatives. Dank u wel · Merci