do you really need a child theme?

WordCamp Antwerp 2016

Bego Mario Garde@pixolin

Do you reallyneed a Child Theme?



Bego Mario GardeHappy WordPress user since 7 yearsModerator in German support forumsGeneral Translation Editor

… and this is my first WordCamp session!



Some general assumptionsDon't hack WordPress Core. Never.

Reasons: Updates overwrite your changes Your site gets unmaintainableDifficult to provide support



Some general assumptionsDon't hack WordPress Themes.

Reasons: Updates overwrite your changes Your theme gets unmaintainableDifficult to provide support



The obvious solutionCreate a Child Theme!

Reason: Updates don't overwrite your changes.

Changes are easy to spot.



The obvious solutionCreate a Child Theme!

Reason: Updates don't overwrite your changes.

Changes are easy to spot. Well, sort of.



.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

http://bit.ly/1SWpJFZ



.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?





.php .js .css

Child Theme


.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)





.php .js .css

Child Theme


.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)





.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!)





Solution: Plugin Child Theme Check

Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/

https://wordpress.org/plugins/child-theme-check/



Parent Theme

Child Theme

Plugin Child Theme Checkhttps://wordpress.org/plugins/child-theme-check/

https://wordpress.org/plugins/child-theme-check/



Plugin Child Theme CheckGreat idea, great tool, but …

Theme Review Team not convinced about version numbers in templates

Changes still hard to maintain



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?



So…

Do you reallyneed a Child Theme?



Step 1Check your Theme Options. Really.



Photo "Strawberries" by @veeterzy, CC-0https://unsplash.com/photos/OJJIaFZOeX4


Bego Mario Garde@pixolin https://wordpress.org/themes/twentysixteen



Theme options generally provide you with more options, than you realize. Play with them. Use them.



Step 2Plugins for Custom CSS



Right Click ➞ Inspect Element Try any value Copy best result

Developer Tools

Chrome Developer Toolshttps://developer.chrome.com/devtools

https://developer.chrome.com/devtools



.site-header { padding: 0; } .header-image { margin: 0 0 5em 0; img { width: 100%; height: auto; } }



Support for SASS Add-on or Replacement Revisions Disables on syntax errors

Jetpack

Plugin Jetpackhttps://wordpress.org/plugins/jetpack/

https://wordpress.org/plugins/jetpack/



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/

https://wordpress.org/plugins/simple-custom-css/



Need to style individual pages? No Problem! WordPress adds the right body Class

body Class

WP Codex: Function Reference/body classhttp://bit.ly/1seFLBw

http://bit.ly/1seFLBw



Step 3Add your own functions



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/

https://wordpress.org/plugins/code-snippets/



Replace pluggable functions

Code Snippets

if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :





Error handling






Hooks to the rescue

Need to add a custom field? You don't need custom templates.



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; }




Step 4Create Shortcodes for your own PHP


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(); }




Step 5Bring your own JavaScript



Loads frameworks Error handling Revisions

Custom JavaScript Editor

Plugin Custom JavaScript Editor https://wordpress.org/plugins/custom-javascript-editor/


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>'; }


in plugin Code Snippets

in plugin Custom JS Editor



Step 6Performance matters Concatenate JavaScript and CSS



Autoptimize

Aggregates and minimizes JS, CSS and HTML

Plugin Autoptimizehttps://wordpress.org/plugins/autoptimize/



AutoptimizeAggregates CSS and JavaScript

12 CSS files ➞ 1 CSS file14 JavaScript files ➞ 1 JavaScript file



My personal Conclusion



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

do you really need a child theme?

Internet