Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes
The Child Theme Dilemma (EN)
-
Upload
torsten-landsiedel -
Category
Internet
-
view
999 -
download
0
Transcript of The Child Theme Dilemma (EN)
The Child Theme Dilemma
WordCamp Cologne 2015Torsten Landsiedel
Hello!
Torsten LandsiedelWordPress- Freelancer
Moderator German Supportforum
Editor Team de.w.org
Translation Contributor and Editor
Co-Organisator WP Meetup Hamburg
Co-Organisator WordCamp Hamburg
@zodiac1978
Child Theme Usage
Who has used Child Themes?
Child Theme Usage
Why?
Child Theme Problems
SecurityExtensibilityPerformance
Security Problems
Parent Themesearch.php (with vulnerability)
Child Themesearch.php (with vulnerability)
Parent Theme search.php (without vulnerability)
Child Themesearch.php (with vulnerability)
update
overwrites
no update!overwrites
Child Themes aren’t safe?
Why nobody told us?
Extensibility
Pluggable Functions:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
Attention:Now you have to maintain the code!
Missing extensibilities
Framework Theme + Premium Child Theme?
WordPress.org Theme + Child Theme?
Where to put the customizations?
Thre are no Grandchild Themes :(
Missing extensibilities
Why shouldn’t there be Grandchild Themes?
Missing extensibilities
This idea of releasing advanced child themes just creates the same problem child themes were meant to solve: upgradability.
– Justin Tadlock
http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
Update of Parent Theme
Without any problems?
It depends …
filter/actions removed?CSS classes changed?Markup changed?Paths changed?
Performance Problems
Many Child Themes are using @import@import url(../parent-theme/style.css);
But @import stops parallel loadingin all browsers.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Solution: De-register styles und re-register/re-enqeue parent and child styles
function twentytwelve_child_scripts() {
wp_deregister_style( 'twentytwelve-style' );
wp_register_style( 'twentytwelve-style',
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentytwelve-child-style',
get_stylesheet_uri(), array( 'twentytwelve-style' ) );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_child_scripts', 11 );
Performance problems
Even simpler: Enqueue parent styles. Done! Just works if get_stylesheet is used (and just this) in the parent theme.
// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
Performance problems
New problem:Many themes are not build that way.Hardcoded stylesheets in the header.php for example:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Performance problems
Performance problems
Or the theme is not compatible with using a child theme.
Or you have to de-register everything to preserve the correct order.wp_enqueue_style( 'base_styles',
get_template_directory_uri() . '/css/base.css' );
wp_enqueue_style( 'responsive_styles', get_template_directory_uri() . '/css/mobile.css' );
wp_enqueue_style( 'ie_styles', get_template_directory_uri() . '/css/ie.css' );
Performance Problems
Can be very complicated for beginners ...
Performance Problems
Justin Tadlocks brilliant solution for the parent theme:
function my_enqueue_styles() {
/* If using a child theme, auto-load the parent theme style. */
if ( is_child_theme() ) {
wp_enqueue_style( 'parent-style',
trailingslashit( get_template_directory_uri() ) . 'style.css' );
}
/* Always load active theme's style.css. */
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes
Hey Torsten!
Grab some water.
Don’t speak too fast.
:)
Child Theme Problems
SecurityExtensibilities
Performance ✓
Idea 1: Child Theme Lite
“Child themes from theme developers should be nothing more than a stylesheet and a few functions.”
– Justin Tadlock
http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
Idea 1: Child Theme Lite
Child Theme just contains functions.php and style.css.
All changes should just be made with hooks and filters.
This would be made within a plugin.Child Theme remains update-ability.
Idea 1: Child Theme Lite
Problem:How many themes do something like that?
Idea 2: Child Theme Check
Every template file in the theme is ghetting a version number in the file header.
@version 1.0.0
Check of the version number via plugin(or even better via WordPress core).
Differences between files can be shown via wp_text_diff().
Idea 2: Child Theme Check
DEMO!
Child Theme Check
Voilá!
Child Theme Check
Child Theme Check
https://github.com/Zodiac1978/tl-template-checker
- This is a Twitter opportunity! -
Child Theme Problems
Security ✓Extensibilities (✓)
Performance ✓
● Is Tools the right choice for the menu? Or should it be Appearance?
● Just open an issue on Github:https://github.com/Zodiac1978/tl-template-checker/issues
Conribute? Great!
Thank you for your feedback!
Discussion!
Questions? Contradiction? Alternative solutions?
Theme Shop/Theme Developer: Interested?
Let’s speak about it!
@zodiac1978http://torstenlandsiedel.de/kontakt
Thank you for your time!
Safe travels! :)