What is a child theme?

From the WordPress Codex:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

A basic child theme consists of only a style.css file.  If you plan on using the available Action Hooks and Filters in Base (more on this later), you will also need to create a functions.php file.  I always add a screenshot.png file, too, which shows up on the Appearance -> Themes page.  Instead of making changes directly to your Base theme, we recommend creating a child theme, so your code modifications are protected from theme updates.

BEGINNER: Creating a style.css stylesheet for a child theme

Every child theme needs a style.css file.  It tells WordPress specific required information about the child and parent theme.  Here is an example:

/*
Theme Name: Base Custom
Theme URI: http://graphpaperpress.com
Description: A child theme for Base Theme Framework.
Author: Graph Paper Press
Author URI: http://graphpaperpress.com
Template: base
Version: 1.0.0
License:  GPL
*/

@import url("../base/style.css");

/* ADD YOUR CUSTOM CSS BELOW THIS LINE */
body { background-color: #000; color: #fff }

Everything located between the starting /* and ending */ comments tell WordPress important information about the child theme.  These are mandatory:

• Theme Name: Base Custom – the name of our child theme
• Template: base – the folder name of our patent theme (in this case, base).  Case matters!

This line:

@import url("../base/style.css");

Imports the style.css file of our parent theme (Base) into our child theme stylesheet. The ../ tells WordPress to “move up one directory out of the base-custom folder and then move down into the base folder. It’s important to include this @import rule before your custom css. All css rules that show up after this rule will override the parent theme styles.  Now, you can override any CSS class in the parent theme.  Using the Custom CSS panel in Base also overrides default Base CSS styles.  To find and located the specific CSS class you want to override, use Firebug.

BEGINNER: Creating a functions.php file for your Base Child Theme

The functions.php file is where you can define your own PHP functions for your child theme.  To start, we will use this file to  declare the name of the child theme (populates the Theme Options page with your Child Theme name).  A basic functions.php file looks like this:

<?php
// Lets declare the name of our child theme
$themename = "Base Custom";

Comments in PHP code start with this // or this: /*.  They are used to make code easier to understand.  Now that we have a functions.php file and we’ve declared the name of our child theme, lets write a basic PHP function in our functions.php file that creates a simple message:

function gpp_base_custom_message() {

    echo '<h2>This is a short message that will appear below our header</h2>';

}

Now that we’ve created our function, we need to “hook” it into one of the available Base Action Hooks.

INTERMEDIATE: Using Action Hooks to Extend Base Functions

Action Hooks are essentially empty placeholders that can be injected with stuff.  ”Stuff” is added using a PHP function.  Once you understand how to write a simple PHP function and you know the exact Base Action Hook location that you want to hook into, you can literally override anything you want in Base.  Here is the Base Theme Documentation that lists all Action Hooks.

Lets add our welcome message to the gpp_base_below_header() Action Hook.  In the functions.php, add this:

add_action('gpp_base_below_header', 'gpp_base_custom_message');

Above, we are adding the function we wrote above gpp_base_custom_message to the gpp_base_below_header action hook.  Important Note: Some Base action hooks are already defined in Base, so it’s important to use the remove_action function if you want to, say, change the main index loop in Base:

add_action('wp_head','remove_gpp_base_actions');

function remove_gpp_base_actions() {

    remove_action('gpp_base_index_loop', 'gpp_base_index_loop_hook');

}

You can override as many functions in Base as you want, as long as those functions are listed on the Base Action Hooks Documentation.  To see where these Action Hooks are called in Base, view the Base Structure Guide.

INTERMEDIATE: Overriding Parent Template Files

If using Action Hooks is confusing, simply rely on the WordPress template hierarchy and template inheritance to override specific template files.  From the WordPress Codex:

Templates in a child theme behave just like style.css, in that they override their namesakes from the parent. A child theme can override any parental template by simply using a file with the same name. (NOTE. index.php can be overriden only in WordPress 3.0 and newer.)  Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.

If a child theme contains, for example, an index.php file, it will take precedence over the parent theme’s index.php template file.  This only pertains to files that fall within the WordPress template hierarchy.  You can’t override all parent theme files simply by recreating them in a child theme.

And that’s all folks

Well, actually that’s just a jumping off point.  Feel free to use the example Base Custom Child Theme to create you own child theme for our Base Theme Framework for WordPress.  In the next tutorial, we’ll show you how to essentially build child themes of child themes, so your modifications to child themes are never overwritten.

There are a few basic principle that you must know before jumping into this tutorial. First, javascripts are like car parts: You can’t mix Ford parts and expect them to work on a Honda. The same goes with javascript libraries. Conflicting javascript libraries can cause some javascript-powered features to “choke” or freeze. There are ways to use multiple libraries together, but that is beyond the scope of this tutorial. Second, you must load JQUERY before you load JQUERY plugins, like the ones we use on our sites. Make sure that JQUERY shows before other javascripts in the head of your site.

Demo

Download

First
Unzip the download files posted above. Upload slider.css, slider.php, timthumb.php, the /js/ and /cache/ folders into your active theme folder. Copy the contents of the /images/ folder into your themes /images/ folder. Do not overwrite your existing /images/ folder. TimThumb.php requires the GD library, which is available on any host sever with PHP 4.3+ installed. Manually change the /cache/ folder permissions to 777.

Open up header.php in the theme editor. Add these three lines of code somewhere between the <code>__abENT__lt;head__abENT__gt;</code> and <code>__abENT__lt;__abENT__#8260;head__abENT__gt;</code>

<code>__abENT__lt;link rel=__abENT__quot;stylesheet__abENT__quot; href=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;slider__abENT__#46;css__abENT__quot; type=__abENT__quot;text__abENT__#8260;css__abENT__quot; media=__abENT__quot;screen__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;jquery-1__abENT__#46;3__abENT__#46;2__abENT__#46;min__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;slider__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;</code>

If you already have JQUERY running on site, do not add it again. If you are unsure, view your source code and look for a line containing “jquery.”

Second
Now that we have loaded the css and javascripts required for running the slider, we can now include the slider.php WordPress template file in your theme files. Open up index.php or home.php and locate spot where you want to include the slider. If you are using our Modularity theme framework, you might insert the slider right above this line of code:

<code>__abENT__lt;?php<br />
$featured = get_option(__abENT__apos;T_featured__abENT__apos;);<br />
if($featured == __abENT__quot;On__abENT__quot;) { include (THEMELIB __abENT__#46; __abENT__apos;__abENT__#8260;apps__abENT__#8260;featured__abENT__#46;php__abENT__apos;); }<br />
?__abENT__gt;</code>

Paste this right above it:

<code>__abENT__lt;?php include (__abENT__apos;slider__abENT__#46;php__abENT__apos;) ?__abENT__gt;</code>

As you might guess, this tells WordPress to include the slider.php.

Third
Finally, we are going to create a custom write panel to your WordPress post, so that you can choose a thumbnail for each post. Open up your functions.php file and add this code right above the very last ?>.

<code>__abENT__#8260;__abENT__#8260; Custom Write Panel<br />
<br />
$meta_boxes =<br />
	array(<br />
		__abENT__quot;image__abENT__quot; =__abENT__gt; array(<br />
			__abENT__quot;name__abENT__quot; =__abENT__gt; __abENT__quot;image__abENT__quot;,<br />
			__abENT__quot;type__abENT__quot; =__abENT__gt; __abENT__quot;text__abENT__quot;,<br />
			__abENT__quot;std__abENT__quot; =__abENT__gt; __abENT__quot;__abENT__quot;,<br />
			__abENT__quot;title__abENT__quot; =__abENT__gt; __abENT__quot;Image__abENT__quot;,<br />
			__abENT__quot;description__abENT__quot; =__abENT__gt; __abENT__quot;Using the __abENT__#92;__abENT__quot;__abENT__lt;em__abENT__gt;Add an Image__abENT__lt;__abENT__#8260;em__abENT__gt;__abENT__#92;__abENT__quot; button, upload an image and paste the URL here__abENT__#46; Images will be resized__abENT__#46; This is the post main image and will automatically be sized__abENT__#46;__abENT__quot;)<br />
	);<br />
<br />
function meta_boxes() {<br />
	global $post, $meta_boxes;<br />
	<br />
	echo__abENT__apos;<br />
		__abENT__lt;table class=__abENT__quot;widefat__abENT__quot; cellspacing=__abENT__quot;0__abENT__quot; id=__abENT__quot;inactive-plugins-table__abENT__quot;__abENT__gt;<br />
		<br />
			__abENT__lt;tbody class=__abENT__quot;plugins__abENT__quot;__abENT__gt;__abENT__apos;;<br />
	<br />
			foreach($meta_boxes as $meta_box) {<br />
				$meta_box_value = get_post_meta($post-__abENT__gt;ID, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true);<br />
				<br />
				if($meta_box_value == __abENT__quot;__abENT__quot;)<br />
					$meta_box_value = $meta_box[__abENT__apos;std__abENT__apos;];<br />
				<br />
				echo__abENT__apos;__abENT__lt;tr__abENT__gt;<br />
						__abENT__lt;td width=__abENT__quot;70__abENT__quot; align=__abENT__quot;center__abENT__quot;__abENT__gt;__abENT__apos;;		<br />
							echo__abENT__apos;__abENT__lt;input type=__abENT__quot;hidden__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; id=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;wp_create_nonce( plugin_basename(__FILE__) )__abENT__#46;__abENT__apos;__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;h2__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;title__abENT__apos;]__abENT__#46;__abENT__apos;__abENT__lt;__abENT__#8260;h2__abENT__gt;__abENT__apos;;<br />
				echo__abENT__apos;	__abENT__lt;__abENT__#8260;td__abENT__gt;<br />
						__abENT__lt;td__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;input type=__abENT__quot;text__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;get_post_meta($post-__abENT__gt;ID, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true)__abENT__#46;__abENT__apos;__abENT__quot; size=__abENT__quot;70%__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__lt;br __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
							echo__abENT__apos;__abENT__lt;p__abENT__gt;__abENT__lt;label for=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot;__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;description__abENT__apos;]__abENT__#46;__abENT__apos; __abENT__lt;__abENT__#8260;label__abENT__gt;__abENT__lt;__abENT__#8260;p__abENT__gt;__abENT__apos;;<br />
				echo__abENT__apos;	__abENT__lt;__abENT__#8260;td__abENT__gt;<br />
					__abENT__lt;__abENT__#8260;tr__abENT__gt;__abENT__apos;;<br />
			}<br />
	<br />
	echo__abENT__apos;<br />
			__abENT__lt;__abENT__#8260;tbody__abENT__gt;<br />
		__abENT__lt;__abENT__#8260;table__abENT__gt;__abENT__apos;;		<br />
}<br />
<br />
function create_meta_box() {<br />
	global $theme_name;<br />
	if ( function_exists(__abENT__apos;add_meta_box__abENT__apos;) ) {<br />
		add_meta_box( __abENT__apos;new-meta-boxes__abENT__apos;, __abENT__apos;Photo for post__abENT__apos;, __abENT__apos;meta_boxes__abENT__apos;, __abENT__apos;post__abENT__apos;, __abENT__apos;normal__abENT__apos;, __abENT__apos;high__abENT__apos; );<br />
	}<br />
}<br />
<br />
function save_postdata( $post_id ) {<br />
	global $post, $meta_boxes;<br />
	<br />
	foreach($meta_boxes as $meta_box) {<br />
		__abENT__#8260;__abENT__#8260; Verify<br />
		if ( !wp_verify_nonce( $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__apos;], plugin_basename(__FILE__) )) {<br />
			return $post_id;<br />
		}<br />
	<br />
		if ( __abENT__apos;page__abENT__apos; == $_POST[__abENT__apos;post_type__abENT__apos;] ) {<br />
			if ( !current_user_can( __abENT__apos;edit_page__abENT__apos;, $post_id ))<br />
				return $post_id;<br />
		} else {<br />
			if ( !current_user_can( __abENT__apos;edit_post__abENT__apos;, $post_id ))<br />
				return $post_id;<br />
		}<br />
	<br />
		$data = $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;];<br />
		<br />
		if(get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;) == __abENT__quot;__abENT__quot;)<br />
			add_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data, true);<br />
		elseif($data != get_post_meta($post_id, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true))<br />
			update_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data);<br />
		elseif($data == __abENT__quot;__abENT__quot;)<br />
			delete_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true));<br />
	}<br />
}<br />
<br />
<br />
add_action(__abENT__apos;admin_menu__abENT__apos;, __abENT__apos;create_meta_box__abENT__apos;);<br />
add_action(__abENT__apos;save_post__abENT__apos;, __abENT__apos;save_postdata__abENT__apos;);</code>

You are done.
If you have made it this far, it’s now time to see your slider in action. Go write a new post in WordPress, paste the URL to your image in to the new image panel, and view your site.

Cheers.

Thanks to CSS Tricks for the jquery trick, TimThumb for thumbnail generation and WordPress for the great publishing system.

Open up functions.php and add this code to the very bottom of the file:

<?php function gpp_excerpt($text) { return str_replace('[...]', '<br /><a href="'.get_permalink().'">Read More &rarr;</a>', $text); } add_filter('the_excerpt', 'gpp_excerpt'); ?>

The above code “filters” WordPress’ default the_excerpt function and replaces it with our own gpp_excerpt function. We have just written a very simple plugin for WordPress.

If, however, you are writing your own excerpts and want to add a Read More permalink, replace:

<?php the_excerpt(); ?>

with this:

<?php the_excerpt(); ?><span class="read_more"><a href="<?php the_permalink(); ?>">[ Read More &rarr; ]</a></span>

If you found this tutorial useful, consider subscribing to Graph Paper Press. You will get access to our support forum, where additional tutorials similar to this one are available to our subscribers.