Pro Yearly is on sale from $80 to $50! »

WordPress Child Themes

WordPress Child Themes

The What, Why and How of setting up a WordPress Child Theme

9e3455512cf3e982e0eda1629b476124?s=128

Sue Fernandes

April 18, 2018
Tweet

Transcript

  1. The What? Why? and When? of WordPress Child Themes @suefernandesweb

    fernandescreative.co.uk
  2. WordPress Theme Types ➡ Free Themes ➡ Premium Themes ➡

    Theme Frameworks ➡ Custom Built Themes
  3. Theme Updates and Security

  4. “Where did all my changes go??? ARRRRRGGGGHHH!!!

  5. Child Themes

  6. The Parent/Child Relationship

  7. Child Theme Overkill Small CSS changes? Use the Customiser!

  8. So why would you need a Child theme? Extensive CSS

    Style Changes Custom functions Custom Fields Additional Javascript New Page Templates Changes to Parent Theme Templates Any Custom Code at all
  9. WordPress Theme Types ➡ Free Themes ➡ Premium Themes ➡

    Theme Frameworks ➡ Custom Built Themes
  10. WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  11. WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  12. WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  13. Setting up a Child Theme …/wp-content/themes

  14. Setting up a Child Theme /* Theme Name: [Your Theme

    Name] Description: The custom theme [Your Theme Name] using the parent theme Twenty Seventeen. Author: [You] Author URI: [Your URL] Template: twentyseventeen Version: 1 */ custom css goes here……. style.css
  15. Setting up a Child Theme function mychildtheme_enqueue_styles() { $parent_style =

    'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'mychildtheme_enqueue_styles' ); functions.php
  16. Activating a Child Theme

  17. <?php /** * The template for displaying all pages *

    * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/ content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); Parent theme - page.php <?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class=“wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role=“main"> ! Your Custom Code Here ! <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/ content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || Child theme - page.php TwentySeventeen
  18. <?php /** * Template Name: Whatever You Want * *

    This is the template that displays whatever you want it to be. * * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class=“wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role=“main"> ! Your Custom Code Here ! <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; Child theme - page-whatever.php TwentySeventeen
  19. Thanks for listening… Questions? @suefernandesweb fernandescreative.co.uk