WordPress Child Themes

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

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