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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. KRISTARELLA.blog
   TYPES OF THEMES
   

   View Slide

5. KRISTARELLA.blog
   TYPES OF THEMES
   PLUG & PLAY
   - e.g., Twenty Sixteen
   
   - Menu
   
   - Header image
   
   - Widgets
   
   - Background/Colours
   
   - Featured Images
   

   View Slide

6. KRISTARELLA.blog
   TYPES OF THEMES
   OPTIONS THEMES
   - Have a boat load of options
   
   - Common from stores like:
   
   - ThemeForest
   
   - Elegant Themes
   
   - WooThemes
   
   - Theme Alley
   

   View Slide

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
   

   View Slide

8. KRISTARELLA.blog
   MODIFYING THEMES
   

   View Slide

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!
   

   View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

13. KRISTARELLA.blog
    THEME STRUCTURE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. KRISTARELLA.blog
    TEMPLATE HIERARCHY
    HTTP://WPHIERARCHY.COM/
    

    View Slide

17. KRISTARELLA.blog
    

    View Slide

18. KRISTARELLA.blog
    CREATE A CHILD THEME
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

23. KRISTARELLA.blog
    CREATE A CHILD THEME
    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

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/
    

    View Slide

25. KRISTARELLA.blog
    THEME FRAMEWORKS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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] · My Custom Link · Built on the href="http://www.studiopress.com/themes/genesis" title="Genesis
    Framework">Genesis Framework';
    return $creds;
    }
    my.studiopress.com/documentation/snippets/footer/customize-the-credits-text/
    

    View Slide

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/
    

    View Slide

30. KRISTARELLA.blog
    THEME HANDBOOK
    HTTPS://DEVELOPER.WORDPRESS.ORG/THEMES/
    

    View Slide