Do you really need a Child Theme?
Transcript of Do you really need a Child Theme?
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Do you reallyneed a Child Theme?
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Bego Mario GardeHappy WordPress user since 7 yearsModerator in German support forumsGeneral Translation Editor
… and this is my first WordCamp session!
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Some general assumptionsDon't hack WordPress Core. Never.
Reasons: Updates overwrite your changes Your site gets unmaintainableDifficult to provide support
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Some general assumptionsDon't hack WordPress Themes.
Reasons: Updates overwrite your changes Your theme gets unmaintainableDifficult to provide support
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
The obvious solutionCreate a Child Theme!
Reason: Updates don't overwrite your changes.
Changes are easy to spot.
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
The obvious solutionCreate 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
.phpWe 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
.phpWe 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
.phpWhile 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.phpWhile 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.phpTheme 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 Checkhttps://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Parent Theme
Child Theme
Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Parent Theme
Child Theme
Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Plugin Child Theme CheckGreat 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 ThemesThings get a little messy, if you create a new Child Themefor 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 reallyneed a Child Theme?
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Step 1Check your Theme Options. Really.
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Photo "Strawberries" by @veeterzy, CC-0https://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 2Plugins 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 Toolshttps://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 Jetpackhttps://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 CSShttps://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 classhttp://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 classhttp://bit.ly/1seFLBw
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Step 3Add 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 Snippetshttps://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 Snippetshttps://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 Snippetshttps://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Error handling
Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Error handling
Plugin Code Snippetshttps://wordpress.org/plugins/code-snippets/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Plugin Code Snippetshttps://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 4Create 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 5Bring 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 / </a>'; }
WordCamp Antwerp 2016
in plugin Code Snippets
in plugin Custom JS Editor
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Step 6Performance matters Concatenate JavaScript and CSS
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
Autoptimize
Aggregates and minimizes JS, CSS and HTML
Plugin Autoptimizehttps://wordpress.org/plugins/autoptimize/
WordCamp Antwerp 2016
Bego Mario Garde@pixolin
AutoptimizeAggregates CSS and JavaScript
12 CSS files ➞ 1 CSS file14 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