Child Themes - WordCamp Dublin 2017
- 1. Child Themes Won’t someone think of the children? By Damien Carbery Photo: https://flic.kr/p/ccHYYL by Justkids
- 2. Intro - What's the problem? Editing core files is bad. Editing themes is bad. Child themes are easy.
- 3. Why do you need a child theme?
- 4. Perfect … Except for just one thing A child theme can help. Photo: https://flic.kr/p/4bnRok by m.a.r.c.
- 5. Let’s create a child theme
- 6. Just one file /* Name: Child Theme Template: twentyfifteen */ That’s it. Done. Now go Activate it.
- 7. What can you do now? ● Change the styles ● Change the layout of posts, pages, archives or individual ones ● Add new features e.g. add support for WooCommerce
- 8. Changing styles This is the simplest, least technical thing that you can do.
- 9. Changing styles Change the page font from “Noto Serif” to Arial: body { font-family: Arial, serif; }
- 10. Changing styles
- 11. Changing styles Change the header colours from #333 to red: h1, h2, h3, h4, h5, h6 { color: #f00; }
- 12. Changing styles
- 13. Changing styles Change ul marker from disc to a circle: ul { list-style: circle; }
- 14. Changing styles
- 16. Beyond style changes You can copy a file from the parent theme and modify it. Twenty Fifteen displays the full post content on archive pages. Let’s change it to show excerpts.
- 17. Excerpts in Archives Copy the template file and make your change. archive.php displays the archive. It uses content.php. That calls the_content() so change it to the_excerpt()
- 18. Excerpts in Archives .... You have to edit carefully and check your work. Now test the change - oops, single pages, single posts are showing excerpts. The fix: The code will be: if (is_archive() ) { the_excerpt(); } else { the_content( sprintf( 'Continue reading %s', the_title( false ) ) ); }
- 19. Adding new files Display a specific page or post differently from all the rest. You can make use of the template hierarchy to display a specific page or post differently. An ‘About page, with a slug of 'about', you can create a ‘page-about.php’ file in the child theme.
- 20. WooCommerce Fix or enhance the WooCommerce in your theme. If the parent theme doesn’t fully support WooCommerce, or you want to tweak how it displays something, you can do this. Let’s have a look at a quick example...
- 21. WooCommerce.. Change that button Change "Return to shop" text on empty cart to "Go buy something already!"
- 22. WooCommerce.. Change that button wp-content/plugins/ woocommerce/ templates/ cart/ cart-empty.php is copied to wp-content/themes/ child-theme/ woocommerce/ cart/ cart-empty.php
- 23. How does it all work? Photo: https://flic.kr/p/muJmAv by Christina T.
- 24. Find the file Template directory & stylesheet directory First some terms: ● Template directory = parent theme directory ● Stylesheet directory = child theme directory
- 25. Find the file Search order WordPress searches for the appropriate file in the child theme directory, then the parent theme directory. For a page, slug ‘about’, ID 2 it will look in: child-theme/page-about.php parent-theme/page-about.php child-theme/page-2.php parent-theme/page-2.php child-theme/page.php parent-theme/page.php The child theme always wins!
- 26. Beyond CSS and page templates
- 27. functions.php Much more control … if you are comfortable with php. functions.php is run automatically after all the active plugins have been loaded. The child theme’s functions.php runs directly before the parent theme’s functions.php.
- 28. functions.php... Override the parent theme A well written theme, like Twenty Fifteen, will run its code at the correct time, using the appropriate actions. You can override these by changing the priority in add_action()
- 29. functions.php... Correct the stylesheet loading. Twenty Fifteen does not load the stylesheet correctly. It only loads the child theme’s spreadsheet. We can use @import or redo the loading.
- 30. functions.php... Correct the stylesheet loading… the fix We run our code after the parent theme. The code unloads the child theme stylesheet and then reloads it, making the child theme stylesheet depend on the parent theme’s file and so loads after it in the html.
- 31. Correct the stylesheet loading... add_action( 'wp_enqueue_scripts', 'ct_styles', 11 ); function ct_styles() { wp_dequeue_style( 'twentyfifteen-style' ); wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('twentyfifteen-style') ); } Or: http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes
- 32. What about bad parents Photo: https://flic.kr/p/7Rdiq6 by IZATRINI.com
- 33. Bad parent themes Sometimes they do it their way … the wrong way Most themes on wordpress.org get the basics right but you may find exceptions. Example: wp_head(); echo '<link src="/path/to/".$colour.".css">';
- 34. Bad parent themes This stylesheet cannot be overloaded without editing header.php. Ideally it should be loaded via the ‘wp_enqueue_scripts’ action. Report it to the developer!
- 35. Bad parent themes Allow child themes to override all files. A theme may include other files that a child theme would like to override e.g. image files or javascript files. Example: wp_enqueue_scripts('cool-stuff', get_template_directory_uri() . '/js/cool.js', array( 'jquery' ) );
- 36. Bad parent themes Use get_theme_file_uri() Twenty Fifteen hardcodes the js/html5.js file instead of using this technique. We have to wp_dequeue_script() and wp_enqueue_script() to load our version. A fix... wp_enqueue_scripts('cool-stuff', get_theme_file_uri( '/js/cool.js' ), array( 'jquery' ) );
- 37. Summary - Child themes are great ● Simple to create. ● Changes are not lost when parent theme updated. ● You can change as much or as little as you need.
- 38. Thanks! Questions and Corrections to: Damien Carbery [email protected] http://www.damiencarbery.com @daymobrew Photo: Mine