Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Child Themes & Frameworks

WordPress Child Themes & Frameworks

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

Kristen Symonds

May 14, 2015

More Decks by Kristen Symonds

Other Decks in Technology


  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. Options themes Have a boat load of options Common from

    stores like: ThemeForest Elegant Themes WooThemes Theme Alley
  4. Theme Frameworks Meant for building on e.g., Genesis by StudioPress

    some options huge API lots of child themes & plugins available
  5. What changes do you need? Only CSS? Might be easier

    to just use Jetpack Custom CSS Other files or functions? Use a child theme!
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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' ); }
  11. 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. 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(); ?>
  13. 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
  14. 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
  15. 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