WordPress Themes & Child Themes

An introduction to what themes are, how they work, and the kinds of themes that are out there. Also, how to modify themes in the Customizer, with Plugins, and via child themes.

Transcript

1. KRISTARELLA.blog THEMES & CHILD THEMES WORDPRESS
2. KRISTARELLA.blog WP THEMES SHOULD BE GPL A NOTE ABOUT GPL - GPL is an open source license - It causes the code covered by the license to be free: to be used, modified, and redistributed - “Free as in freedom, not as in beer” - Free to do what you want, not necessarily zero dollars - WordPress is covered by the GPL, your theme should be too
3. KRISTARELLA.blog WHAT THEMES DO THEMES - Display the content - Control: - how your site looks - position of elements - colors - fonts - etc - the layout of your pages - whether you can use widgets - and where - how featured images display
4. KRISTARELLA.blog TYPES OF THEMES
5. KRISTARELLA.blog TYPES OF THEMES PLUG & PLAY - e.g., Twenty Sixteen - Menu - Header image - Widgets - Background/Colours - Featured Images
6. KRISTARELLA.blog TYPES OF THEMES OPTIONS THEMES - Have a boat load of options - Common from stores like: - ThemeForest - Elegant Themes - WooThemes - Theme Alley
7. KRISTARELLA.blog TYPES OF THEMES THEME FRAMEWORKS - Meant for building on - e.g., Genesis by StudioPress - some options - huge API - lots of child themes & plugins available
8. KRISTARELLA.blog MODIFYING THEMES
9. KRISTARELLA.blog MODIFYING THEMES WHAT CHANGES DO YOU NEED? - Only CSS - Additional CSS section in the Customizer! - Adding additional code - Plugins - Other files or functions - Use a child theme!
10. KRISTARELLA.blog MODIFYING THEMES ADDITIONAL CSS - No FTP access required - Saves in the database - Safe for theme updates - Revisions - Works with LESS and Sass - Live preview in the Customizer
11. KRISTARELLA.blog MODIFYING THEMES PLUGINS - Insert Headers and Footers
 https://wordpress.org/plugins/insert- headers-and-footers/ - Code Snippets
 https://wordpress.org/plugins/code- snippets/
12. KRISTARELLA.blog MODIFYING THEMES CHILD THEMES - Can be made for any theme types - Build on & customise existing themes - Change styles - Change layout of a page, or pages - Change text (e.g., copyright in footer) - Compartmentalise edits to their own directory - More portable - Keep edits update-proof
13. KRISTARELLA.blog THEME STRUCTURE
14. KRISTARELLA.blog THEME STRUCTURE THEME FILES - Essential files: - style.css & index.php - Each part of site breaks up into a new file - Post & page content files can be automatically detected in /template- parts - Child theme only needs style.css
15. KRISTARELLA.blog THEME STRUCTURE ANATOMY OF A THEME My amazing site Home About Blog header.php index.php, single.php, page.php etc sidebar.php content.php footer.php
16. KRISTARELLA.blog TEMPLATE HIERARCHY HTTP://WPHIERARCHY.COM/
17. KRISTARELLA.blog
18. KRISTARELLA.blog CREATE A CHILD THEME
19. KRISTARELLA.blog CREATE A CHILD THEME HOW TO - Need to create: - Directory in wp-content/themes - any name is fine - style.css file - functions.php file (optional) - Can use FTP or a plugin - e.g., Orbisius Child Theme Creator
 wordpress.org/plugins/orbisius-child-theme-creator/
20. KRISTARELLA.blog CREATE A CHILD THEME WARNING! - Options for a theme are saved according to theme’s folder name (eg “twentysixteen”) - You can have different settings per child theme - So options don’t port between parent & child theme automatically - Not all option themes can export/import their options - You might not be able to quickly switch to a child theme and import options you’ve already created in the parent theme
21. KRISTARELLA.blog CREATE A CHILD THEME ESSENTIAL STYLE.CSS FILE /* Theme Name: Twenty Sixteen Child Theme URI: http://example.com/twenty-sixteen-child/ Description: Twenty Sixteen Child Theme Author: John Doe Author URI: http://example.com Template: twentysixteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-sixteen-child */ the crucial bit
22. KRISTARELLA.blog CREATE A CHILD THEME PARENT STYLE.CSS - You still want your parent theme’s CSS! 1. Copy & paste file into child style.css - Won’t receive updates though! 2. @import(../twentysixteen/style.css); 3. Enqueue add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
23. KRISTARELLA.blog CREATE A CHILD THEME WORKING WITH CHILD THEMES - You’ll need to know, or at least recognise HTML, CSS & PHP HTML: <h1>My main page heading</h1> CSS: h1 { text-align:center; } PHP: <?php the_title(); ?>
24. KRISTARELLA.blog CREATE A CHILD THEME LEARN MORE CODE - HTML Dog http://htmldog.com/ - Codecademy http://www.codecademy.com/ - Learn PHP http://www.learn-php.org/
25. KRISTARELLA.blog THEME FRAMEWORKS
26. KRISTARELLA.blog THEME FRAMEWORKS WHY USE THEM? - APIs - Slightly quicker to customise (or a lot quicker if you do it often) - Familiar code-base - Easy to switch between child themes of the same theme framework - Lots of existing child themes - Popular ones make finding code, tutorials, and developers easier
27. KRISTARELLA.blog THEME FRAMEWORKS PLUG & PLAY VS FRAMEWORK Task Twenty Sixteen Genesis Change footer text 1. Copy footer.php
 2. Change HTML & PHP 1. Copy & paste command into functions.php Add breadcrumbs 1. Install plugin
 2. Copy header.php 3. Add plugin code to file 1. Turn on in settings Remove author box 1. Copy content.php
 2. Find & delete code 1. Copy & paste command into functions.php
28. KRISTARELLA.blog THEME FRAMEWORKS GENESIS CHANGE FOOTER add_filter('genesis_footer_creds_text', 'sp_footer_creds_filter'); function sp_footer_creds_filter( $creds ) { $creds = '[footer_copyright] &middot; <a href="http:// mydomain.com">My Custom Link</a> &middot; Built on the <a href="http://www.studiopress.com/themes/genesis" title="Genesis Framework">Genesis Framework</a>'; return $creds; } my.studiopress.com/documentation/snippets/footer/customize-the-credits-text/
29. KRISTARELLA.blog THEME FRAMEWORKS GENESIS REMOVE AUTHOR BOX remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 ); my.studiopress.com/documentation/snippets/author-box/remove-the-author- box-on-single-posts/
30. KRISTARELLA.blog THEME HANDBOOK HTTPS://DEVELOPER.WORDPRESS.ORG/THEMES/