WordPress Themes & Child Themes

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.

6c3841b9afcb4477898d4396a74024c1?s=128

Kristen Symonds

November 16, 2017
Tweet

Transcript

  1. 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
  2. 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
  3. 5.

    KRISTARELLA.blog TYPES OF THEMES PLUG & PLAY - e.g., Twenty

    Sixteen - Menu - Header image - Widgets - Background/Colours - Featured Images
  4. 6.

    KRISTARELLA.blog TYPES OF THEMES OPTIONS THEMES - Have a boat

    load of options - Common from stores like: - ThemeForest - Elegant Themes - WooThemes - Theme Alley
  5. 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
  6. 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!
  7. 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
  8. 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/
  9. 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
  10. 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
  11. 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
  12. 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/
  13. 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
  14. 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
  15. 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' ); }
  16. 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(); ?>
  17. 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/
  18. 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
  19. 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
  20. 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/
  21. 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/