Dipping into Child Themes

Theme development looks complicated but it doesn’t have to be. WordPress Child Themes give you the power to progressively enhance a theme and adapt it to suit your needs.

During the WordCamp Los Angeles session I will cover the following in an almost code free presentation. In this post I provide the Child Theme template and slide presentation files as well as some practical examples.

What is a Child Theme?

A Child Theme allows you add personal customization and features to an existing WordPress Theme also known as the Parent theme. This parent theme can then be updated by it’s developer while your changes remain safely untouched. In this post we’ll be using Twenty Seventeen, as the Parent Theme.

Creating a Child Theme

Only three items are needed to start a child theme.

• A file folder that will contain
  • A style.css file
  • A functions.php file

The folder

The requires a unique name, and generally a good idea to name it after the parent theme and append -child at the end. In this case I’ve named ours… wclax-2018-twentyseventeen-child.

The sytle.css file

The styleheet requires a custom header allowing WordPress to identify it properly as a child theme and provide additional information to users. At minimum you’ll need.

• Theme Name:
• Template:
• Text Domain:

/*
 * Theme Name: WCLAX Twenty Seventeen Child Theme 
 * Theme URI: https://joseph-dickson.com
 * Description: A nearly empty child theme based on Twenty Seventeen ready for your customizations
 * Author: Joseph Dickson
 * Author URI: https://joseph-dickson.com/wclax-child-theme
 * Template: twentyseventeen
 * Version: 1.1
 * License: GNU Public License
 * License URI: https://www.gnu.org/licenses/gpl.html
 * Tags: minimalist, child theme, twentyseventeen, tutorial
 * Text Domain: wclax-2018-twentyseventeen-child
 */

The functions.php file

Next you’ll need to create functions.php and enqueue your Parent Theme’s stylesheet(s) followed by your Child Theme stylesheet so you’ll have a place for your custom CSS. The following tells WordPress some key information.

• add_action();  creates a hook for execution
• wp_enqueue_scripts and allows for adding your stylesheets via wp_enqueue_style.
• get_template_directory_uri() points to the partent theme directory where you can point it to style.css
• get_stylesheet_directory_uri() will point to your child theme directory where the child theme’s style.css file is available for your additional styles.

<?php
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );
function twentyseventeen_child_enqueue_styles() {
	wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'twentyseventeen-child-style', get_stylesheet_directory_uri() . '/style.css' );
}
?>

Putting it all together

Assuming there are no typos or errors in the style header or functions.php the Child Theme should be ready to be zipped up and uploaded to your testing server or localhost. Optionally you can add screenshot.png so a pretty thumbnail appears in your WordPress Theme Directory

Time to Customize

Lets start off simple. Within the style.css file I rounded the optional site logo using by adding the CSS below. I discover what I need to override by using my browser’s web developer inspection tools. where I test the CSS on the fly and when it works add it to the Child Theme.

/* round the site logo */
img.custom-logo {
	border-radius: 3em;
}

The ability to override the Parent Theme’s styles is what makes Child Themes a wonderful design tool and very easy to maintain. Tiny iterations can greatly improve your site’s appearance.

I’m not a fan of the heavy black edit button when I’m logged in so I decided to override it.

/* Edit button: Set background to orange */
.entry-footer .edit-link a.post-edit-link {
	background-color: #f7941d;
}

Updating functions.php is a bit more complicated but not terribly difficult. Just be sure not to edit your php files while on a live server. One wrongly placed character can bring down your entire site.

Shortcodes are an easy way to add functionality to a site. One problem I noticed with Twenty Seveteen is shortcodes would appear in my excerpt instead of the embedded video or gallery. to fix this I simply added the following to my functions.php file.

// Add shortcodes to post and page excerpts
add_filter( 'the_excerpt', 'do_shortcode');

When I started using Twenty Seventeen I noticed it didn’t integrate with social media all that well. So took advantage of the Template Hierarchy and added Open Graph support to my header.php file.

// Add Open Graph Support
// https://www.elegantthemes.com/blog/tips-tricks/how-to-add-open-graph-tags-to-wordpress

function doctype_opengraph($output) {
	return $output . '
	xmlns:og="http://opengraphprotocol.org/schema/"
	xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');

function facebook_opengraph() {
	global $post;

	if( is_single() || is_page() || is_home() ) {
    	if(has_post_thumbnail($post->ID)) {
		$img_src = wp_get_attachment_image_url(get_post_thumbnail_id( $post->ID ), 'large');
	} else {
		$img_src = get_stylesheet_directory_uri() . '/img/opengraph-default.png';
	}

	if($excerpt = $post->post_excerpt) {
		$excerpt = strip_tags($post->post_excerpt);
		$excerpt = str_replace("", "'", $excerpt);
	} else {
		$excerpt = get_bloginfo('description');
	}
?>

<meta property="og:title" content="<?php echo the_title(); ?>"/>
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
<meta property="og:image" content="<?php echo $img_src; ?>"/>

<?php
	} else {
		return;
	}
}
add_action('wp_head', 'facebook_opengraph', 5);

Conditional and Template Tags

• Conditional Tags check if the page is a post, a page or the home page. If this check passes as true it will load the featured image.
• If false it will load the site logo saved in my theme’s folder.
• Next it checks for an excerpt, If the post has an excerpt it used the Template Tag get_the_excerpt(); to display it. If there is no excerpt the check fails and I’ve set it to use get_bloginfo(‘description’); as a fallback. In this case “From the desktop of Joseph Dickson. will display under the featured image or alongside the default logo.

I realize this is a lot to digest, so I’m continuing to update this post as I refine the topic.