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. 2.

    WordPress Theme Types ➡ Free Themes ➡ Premium Themes ➡

    Theme Frameworks ➡ Custom Built Themes
  2. 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
  3. 9.

    WordPress Theme Types ➡ Free Themes ➡ Premium Themes ➡

    Theme Frameworks ➡ Custom Built Themes
  4. 10.

    WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  5. 11.

    WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  6. 12.

    WordPress Theme Types ✦ Free Themes ✦ Premium Themes ✦

    Theme Frameworks ✦ Custom Built Themes
  7. 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
  8. 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
  9. 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
  10. 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