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.
   

   View Slide

2. Themes
   Control:
   how your site looks
   the layout of your pages
   whether you can use widgets
   how featured images display…
   

   View Slide

3. Plug & Play
   e.g., Twenty Fifteen
   Menu
   Header image
   Widgets
   Background/Colours
   Featured Images
   

   View Slide

4. Options themes
   Have a boat load of options
   Common from stores like:
   ThemeForest
   Elegant Themes
   WooThemes
   Theme Alley
   

   View Slide

5. Theme Frameworks
   Meant for building on
   e.g., Genesis by
   StudioPress
   some options
   huge API
   lots of child themes &
   plugins available
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

13. Text
    More anatomy: Cheat sheet
    https://yoast.com/wordpress-theme-anatomy/
    

    View Slide

14. Text
    Template Hierarchy
    http://wphierarchy.com/
    http://codex.wordpress.org/Template_Hierarchy
    

    View Slide

15. Working with Child themes
    You’ll need to know, or at least recognise HTML, CSS
    & PHP
    HTML: My main page heading
    CSS: h1 { text-align:center; }
    PHP:
    

    View Slide

16. Learn more code
    HTML Dog http://htmldog.com/
    Codecademy http://www.codecademy.com/
    Learn PHP http://www.learn-php.org/
    

    View Slide

17. Why a theme framework?
    The API !
    Makes it quicker to change & rearrange
    

    View Slide

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
    

    View Slide

19. Genesis change footer
    add_filter('genesis_footer_creds_text',
    'sp_footer_creds_filter');
    function sp_footer_creds_filter( $creds ) {
    $creds = '[footer_copyright] · My Custom Link · Built on the
    title="Genesis Framework">Genesis Framework';
    return $creds;
    }
    http://my.studiopress.com/snippets/footer/#credits
    

    View Slide

20. Genesis remove author box
    remove_action( 'genesis_after_entry',
    'genesis_do_author_box_single', 8 );
    http://my.studiopress.com/snippets/author-box/
    

    View Slide

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
    

    View Slide