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 / </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