Category Archives: theme

My first attempt at a WordPress child theme

My blogs use WordPress as the publishing platform. I host three blogs, The Journey of the Teal Owl at a hosting facility and two more which I host on a local FreeBSD server. The Technology Is Cool When It Works (TICWIW) blog acts as a proof of concept area for testing WordPress changes for The Journey of the Teal Owl. The KMNBLOOM2 weather blog is for my weather station reporting.

I have used several themes and finally settled upon Pilcrow for this blog and The Journey of the Teal Owl. However, the stock Pilcrow theme does not have an area for copyright text in the footer and the site description text was only in the footer. Other themes set the site description in the header as a subheading. KMNBLOOM2 uses the WordPress Twenty Fourteen theme.

WordPress themes use PHP and CSS for the bulk of the heavy lifting. Each theme has a number of files in a sub-directory of /wp-content/themes. For example, Pilcrow’s “home directory” is /wp-content/themes/pilcrow. The header and footer code files are header.php and footer.php, respectively.

Rather than directly editing those two files, I chose to create a “child theme”. When the Pilcrow theme is updated, all the files in the theme’s directory are replaced. This results in losing any customizations made since the previous update. Using a child theme mitigates the problem. A child theme inherits the code from the parent theme. If a child theme has a header.php file, the child’s header.php file is used instead of the parent’s header.php file. Honkiat.com has an excellent article detailing child theme development.

I am using the “SyntaxHighlighter Evolved” plug in for displaying code snippets. It gives me a greater degree of presenting code samples without requiring hours of reformatting.

Creating a child theme is quite simple. It requires creating a new directory in /wp-content/themes. Since I am using Pilcrow as a parent theme, my child theme will reside in /wp-content/themes/pilcrow-child. One requirement for a child theme is the child theme must have its own style sheet, named style.css. I am not changing style elements at this point, so my style.css is quite simple:

/*
   Theme Name: Pilcrow
   Theme URI: http://theme.wordpress.com/themes/pilcrow/
   Description: Pilcrow child theme customized for The Journey of the Teal Owl blog
   Author: Ken Hopperstad
   Author URI: http://tealowljourney.com
   Template: pilcrow
   Version: 0.1
*/
@import url("../pilcrow/style.css");

All I am doing is importing the style sheet from the parent theme.

Getting the site description into the header was simple. The site description is retrieved using calling bloginfo(‘description’). In my child theme header.php file, I merely added the highlighted two lines:

<<!--?php echo $heading_tag; ?--> id="site-title">
   
      <a title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" href="<?php echo home_url( '/' ); ?>" rel="home"><!--?php bloginfo( 'name' ); ?--></a>
      
      <!--?php bloginfo( 'description' ); ?-->
   
<!--<?php echo $heading_tag; ?-->>

The code inserts a break after the blog name and then echos the blog description.

All that remains now is the copyright text in the footer. I could easily have made a simple edit to the footer.php file with a static start year and using the system’s year part of the current date. Instead, I chose to use a dynamic method for adding my copyright text in the footer. Blog posts and post information are stored in a database. The global $wpdb handles database requests. I found a blog post which uses a code snippet modified from the ComicPress theme. The function creates the copyright text. All that remains is calling the function from the proper place in the footer.

</pre>
<div id="site-info">
   <a title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" href="<?php echo home_url( '/' ); ?>" rel="home"><!--?php bloginfo( 'name' ); ?--></a> · <!--?php bloginfo( 'description' ); ?-->
<!--?php echo comicpress_copyright(); ?--></div>
<pre><!-- #site-info -->

The highlighted lines show adding a break and the copyright function call.

Theme functions are found in the functions.php code file. However, a child theme should not have a full copy of functions.php in its sub-directory. The proper way to handle adding a function to a theme is to create a blank file called functions.php and then add the new function. I modified the ComicPress copyright code to be even more robust. My child theme functions.php file in its entirety is below:

<!--?php
/**
 * @package Pilcrow
 * @since Pilcrow 1.0
 */

function comicpress_copyright() {
	global $<span class="hiddenSpellError" pre="global " data-mce-bogus="1"-->wpdb;
	$copyright_dates = $wpdb->get_results("
		SELECT
			YEAR(min(post_date)) AS firstdate,
			YEAR(max(post_date)) AS lastdate
		FROM
			$wpdb->posts
		WHERE
			post_status = 'publish'
	");
	$output = '';
	$output1 = " Ken Hopperstad, All Rights Reserved.";

// Posts have been published but not for current year	
	if ($copyright_dates[0]->lastdate != '' && $copyright_dates[0]->lastdate < date("Y")) {
		$copyright_dates[0]->lastdate = date("Y");
	} 

// Posts have been published in current year
	if ($copyright_dates[0]->firstdate != '') {
		$copyright = "© " . $copyright_dates[0]->firstdate;
		if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
			$copyright .= "—" . $copyright_dates[0]->lastdate;
		}
		$output = $copyright . $output1;
	} else {
// No posts have been published yet
		$output = "© " . date("Y") . $output1;
	}
	return $output;
}

add_action('wp_head', 'add_google_rel_author');
function add_google_rel_author() {
	echo '';
	echo '';
}

If you compare my code to the example cited in the blog post about the ComicPress copyright code snippet, you will see several differences which I have highlighted:

  • Line 19 adds my name and “All Rights Reserved” to a string variable $output1 for later use.
  • Lines 21-24 deal with the case of the last post getting published in the previous year, but not in the current year. For example, the first post was published in 2011, the last post was published on December 31, 2012, but today’s date is January 1, 2013. The original code would happily print ©2011-2012.
  • Lines 30 substitutes an emdash for a hyphen.
  • Lines 32-35 deal with the case where a blog has just started but there are no published posts yet. The copyright will default to the current year. The text in string variable $output1 appends to the copyright date(s) in both cases.
  • Lines 40-44 are for a new WordPress Google+ feature which will show more information about the blog in a Google search. Lines 42 and 43 must be customized to your particular Google+ profile posts URL. It will accept either the newer custom URL style (line 42) or the older URL style based on a user ID (line 43).

Once the files are transferred to the child theme directory, the child theme is ready for activation from Dashboard->Appearance->Themes. If something breaks in your child theme, you can easily switch back to the original parent theme. Feel free to experiment!

Leave a Comment

Filed under child theme, theme, Wordpress