Advertisement
Theme Development

DIY WordPress Framework Part 3: Using the Framework as a Child Theme

by

In the last installment of this series, we created our theme framework, which amounts to a fairly simple boilerplate, where we added some functionality that we commonly use. There are 2 ways that we can use our framework now: as a child theme and as a true boilerplate that we just copy and edit. Today we're going to use our framework as a child theme.

I have done a tutorial about creating a simple child theme, but it's a bit different this time because we don't have a full-fledged theme to work with. We have just about the bare minimum as far as styles and functionality go. So with that in mind, let's move forward.

Note: So this tutorial doesn't get too long, I may assume at points that you're familiar with building child themes for WordPress.


Getting Started

The first thing we need to do is create the folder in our /themes/ directory. I've called mine wp-boilerplate-child (very creative, I know); you can name yours anything. As always, we're going to start off with our style.css file and the theme definition:

/*
Theme Name:     Framework Child
Theme URI:      http: //example.com/
Description:    Child theme for Your Framework Theme
Author:         Your Name
Author URI:     http: //your-site.com/
Template:       wp-boilerplate
Version:        1.0
*/

Remember that with child themes, we need that extra line to define which directory hosts the parent theme. Once that is established, WordPress knows where to grab the parent theme files from. The next thing we need to do is import the CSS from our framework:

@import url("../wp-boilerplate/style.css");

This is a necessary step if you don't want to start from scratch, as this will overwrite the CSS from the parent theme. Also keep in mind that this will get loaded after all of the CSS from our theme is loaded, including ie.css.

Now, if you'll remember, our framework without any modifications looks like this:


The unmodified Boilerplate Theme

Something to keep in mind here is that since this is our framework, we are much more familiar with it than with other frameworks; we've built it to our own personal coding styles. While this may seem similar to the other child theme tutorial I did, one big difference is that the parent theme is our own framework, built to our own needs.

We're going to add some style to it, starting with the some base CSS. Add these lines of code to your child theme's CSS:

body{
background: #000000;
}

a, a:visited{ color: #a2a085; text-decoration: none;}

#container{
background: #FFFFFF;
}

This lays down some groundwork for the transformation of our theme, which will take place mainly in the CSS. We've changed some defaults in the body, link, and container colors. Now we're going to make our header a bit more appealing.

header{
font-size: 1.4em;
background: #D1CFB5;
}

header h1{ padding: 10px; }

header h1 a, header a:visited{ color: #69652B; }

nav{
background: #ABA0B6;
font-size: 1.5em;
padding: 3px;
border-bottom: 1px solid #221F49;
border-top: 1px solid #221F49;
}

nav a, nav a:visited{
color: #221F49;
}

nav a:hover{ 
color: #4C4B55;
}

Like with our base styles, we've simple overwritten the header and nav styles from the framework.I've also gone ahead and added some other styles for our child theme, which are included with this tutorial if you'd like to take a look. What we ended up with was this:


Our Child Theme with some Style

Now let's take a look at creating a new layout template, which we will use strictly in our child theme.


Adding a Custom Page Template

Most of our theme is already taken care of thanks to our framework, but that doesn't mean we can't add to it. In this next section, we'll create a custom home page with page templates and a little function magic. Let's create a new page called page-home.php and add this:

<?php 
/*
* Template Name: Home
*/

get_header(); ?>


	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<h2><?php the_title(); ?></h2>

			<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

			<?php
				if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Homepage Widgets') ) :
				
				endif;
			?>

	<?php endwhile; endif; ?>


<?php get_footer(); ?>

We've got a pretty standard page here with template name, loop, and the same template tags we used on our framework's page. However, I also added a widget area right under the content so we can add whatever we'd like to the homepage. Now we have to define that widget area in our theme through our functions file.

Remember that our child's functions file is loaded before the parent's functions file.

Create a functions.php file in our child theme and add this:

<?php 

register_sidebar( array (
	'name' => __( 'Homepage Widgets', 'home-widgets' ),
	'id' => 'home-widget-area',
	'description' => __( 'The home widget area', 'wpbp' ),
	'before_widget' => '<div class="widget">',
	'after_widget' => "</div>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

?>

With this we can now add widgets to our homepage! I've added an RSS feed. Before applying any CSS it looks like this:


Homepage with RSS widget

You, of-course, can style this feed however you'd like.

Do More

There is absolutely a lot more we could do here using WordPress' extensive API. We can use functions to change the comments template, create a blank sidebar file to, in essence, delete the sidebar, or completely replace the footer. The possibilities are endless because our framework is so lightweight/simple.


Learning Experience

One of the really nice things about using our own homegrown framework is that we can make constant improvements to it. I actually use this more as a boilerplate that I copy and modify (tutorial coming soon) so switching it up and using as a child theme has shown me a couple of improvements I could make on the framework.

  • First, I'll change the overall template so that the sidebar is not married to the header. Instead I'll add <php get_sidebar(); > to the individual page templates. This will make it easier to remove it from new pages or even pass a different sidebar to it (ala get_sidebar('different-sidebar')).
  • There are some regular PHP functions/classes I use over and over again outside the scope of WordPress projects. I will probably add those to my functions.php file since I use them regularly anyway. One of the classes is a form processor so I won't need a plugin to do simple email forms.
  • Finally, I find that lately I've been integrating Custom Post Types into my designs a lot. I may create a simple CPT template to add into the framework. Then I could call that file in child themes as needed.

Remember that you have a lot of room for personal customization unless you plan on releasing your framework to the public.


Conclusion

Here we made some basic customizations to our framework through our child theme. This technique is especially helpful if you're keeping a similar structure to your site and you just want to make customizations via CSS (think CSS Zen Garden). It's also useful to add new page templates and custom function on top of what's already there. However, since we are using a basic framework/boilerplate, If we are completely changing the structure of the theme we might as well create a theme from scratch if we're using a child theme, since we'll probably be replacing most of the template files. Next time I'm going to go through copying and pasting our boilerplate and making modifications to the theme itself to get the most out of the code we've already laid out.

Related Posts
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…