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 (alaget_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.phpfile 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.
Comments