Do you really need a Child Theme?

WordCamp Antwerp 2016
Bego Mario Garde 
@pixolin
Do you really 
need a Child Theme?

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!

Bego Mario Garde 
@pixolin
Some general assumptions
Don't hack WordPress Core. Never.
Reasons: Updates overwrite your changes  
Your site gets unmaintainable 
Difﬁcult to provide support

Bego Mario Garde 
@pixolin
Some general assumptions
Don't hack WordPress Themes.
Reasons: Updates overwrite your changes  
Your theme gets unmaintainable 
Difﬁcult to provide support

Bego Mario Garde 
@pixolin
The obvious solution
Create a Child Theme!
Reason: Updates don't overwrite your changes.
Changes are easy to spot.

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.

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

Bego Mario Garde 
@pixolin
.php .js .css
Child Theme
.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?

Bego Mario Garde 
@pixolin
.php .js .css
Child Theme
.php
.js .css
Parent Theme
.php
While the Parent Theme gets
ﬁxed by the theme developer,
… the Child Theme keeps the bug. 
(worst case: you don't even notice)

Bego Mario Garde 
@pixolin
.php .js .css
Child Theme
.php
.js .css
Parent Theme
.php.php
While the Parent Theme gets
ﬁxed by the theme developer,
… the Child Theme keeps the bug. 
(worst case: you don't even notice)

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

Bego Mario Garde 
@pixolin
Solution: Plugin Child Theme Check
Plugin Child Theme Check 
https://wordpress.org/plugins/child-theme-check/

Bego Mario Garde 
@pixolin
Parent Theme
Child Theme
Plugin Child Theme Check 
https://wordpress.org/plugins/child-theme-check/

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

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?

Bego Mario Garde 
@pixolin
So…
Do you really 
need a Child Theme?

Bego Mario Garde 
@pixolin
Step 1 
Check your Theme Options. Really.

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

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

Bego Mario Garde 
@pixolin

Bego Mario Garde 
@pixolin
Theme options generally provide
you with more options, than you
realize. Play with them. Use them.

Bego Mario Garde 
@pixolin
Step 2 
Plugins for Custom CSS

Bego Mario Garde 
@pixolin
Right Click ➞
Inspect Element
Try any value
Copy best result
Developer Tools
Chrome Developer Tools 
https://developer.chrome.com/devtools

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

Bego Mario Garde 
@pixolin
Support for SASS
Add-on or  
Replacement
Revisions
Disables on  
syntax errors
Jetpack
Plugin Jetpack 
https://wordpress.org/plugins/jetpack/

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/

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

Bego Mario Garde 
@pixolin
Step 3 
Add your own functions

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/

Bego Mario Garde 
@pixolin
Replace pluggable
functions
Code Snippets
if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :

Bego Mario Garde 
@pixolin
Error handling

Bego Mario Garde 
@pixolin
Hooks  
to the rescue
Need to add a
custom ﬁeld?
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;
}

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

Bego Mario Garde 
@pixolin
Step 5 
Bring your own JavaScript

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>'; 
}
in plugin Code Snippets
in plugin Custom JS Editor

Bego Mario Garde 
@pixolin
Step 6 
Performance matters 
Concatenate JavaScript and CSS

Bego Mario Garde 
@pixolin
Autoptimize
Aggregates and
minimizes JS,
CSS and HTML
Plugin Autoptimize 
https://wordpress.org/plugins/autoptimize/

Bego Mario Garde 
@pixolin
Autoptimize
Aggregates CSS and JavaScript
12 CSS files ➞ 1 CSS file 
14 JavaScript files ➞ 1 JavaScript file

Bego Mario Garde 
@pixolin
My personal Conclusion

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

Do you really need a Child Theme?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Do you really need a Child Theme?

Ähnlich wie Do you really need a Child Theme? (20)

Mehr von pixolin

Mehr von pixolin (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Do you really need a Child Theme?