WordPress Child Themes & Frameworks

What they are. Why you should use them. How to use them.

Transcript

1. WordPress Child Themes & Frameworks What they are. Why you should use them. How you can use them.
2. Themes Control: how your site looks the layout of your pages whether you can use widgets how featured images display…
3. Plug & Play e.g., Twenty Fifteen Menu Header image Widgets Background/Colours Featured Images
4. Options themes Have a boat load of options Common from stores like: ThemeForest Elegant Themes WooThemes Theme Alley
5. Theme Frameworks Meant for building on e.g., Genesis by StudioPress some options huge API lots of child themes & plugins available
6. What changes do you need? Only CSS? Might be easier to just use Jetpack Custom CSS Other files or functions? Use a child theme!
7. Child Themes Can be made for any of those 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 Keep edits update-proof
8. Making a Child Theme Need to create: New folder in wp-content/themes style.css file functions.php file (optional) Can use FTP or a plugin e.g., One-Click Child Theme
9. Warning! Options for a theme are saved according to theme’s folder name (eg “twentyfifteen”) You can have different settings per child theme Not all option themes can export/import their options You can’t quickly switch to a child theme and import options you’ve already created in the parent theme
10. Essential style.css file /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen 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-fifteen-child */ the crucial bit
11. 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(../twentyfifteen/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' ); }
12. 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
13. Text More anatomy: Cheat sheet https://yoast.com/wordpress-theme-anatomy/
14. Text Template Hierarchy http://wphierarchy.com/ http://codex.wordpress.org/Template_Hierarchy
15. 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(); ?>
16. Learn more code HTML Dog http://htmldog.com/ Codecademy http://www.codecademy.com/ Learn PHP http://www.learn-php.org/
17. Why a theme framework? The API ! Makes it quicker to change & rearrange
18. Plug & Play vs Framework Task TwentyFifteen 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
19. 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; } http://my.studiopress.com/snippets/footer/#credits
20. Genesis remove author box remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 ); http://my.studiopress.com/snippets/author-box/
21. Benefits of a theme framework 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 Usually more pre-made child themes available