Browse: Home / Themes / Hybrid / Child Themes

Child Themes

I developed Hybrid to be a complete theme framework.

It was made so that you could customize your site in any way without touching any of Hybrid’s files. This way, you can get updates and bug fixes without breaking your modifications.

Child themes are pretty simple. They can be as basic as a style.css file or as complex as a full theme.

If you make any modifications to Hybrid at all, it should be from a child theme.

Creating your first child theme

Let’s make a folder named hybrid-custom. Place this folder within your /wp-content/themes directory.

Now, we need to create a style.css file to go within hybrid-custom.

At the top of that file, add this:

/*
Theme Name: Hybrid Custom
Theme URI: http://link-to-your-site.com
Description: Describe what your child theme should be like.
Version: 0.1
Author: Your Name
Author URI: http://link-to-your-site.com
Tags: Add, Whatever, Tags, You, Want
Template: hybrid
*/

The most important line is this:

Template: hybrid

Your child theme must have this line, and it must look exactly like that. Otherwise, it won’t work.

Now, you can activate the Hybrid Custom theme. It won’t look like much at this point though.

Styling your child theme

Well, stylistic changes should be up to you. However, I’ve put together several stylesheets to get you started.

After the theme information we added at the top of our style.css file, you can add some of these rules:

/* Get base CSS */
@import url('../hybrid/library/css/18px.css');

/* Get default Hybrid CSS */
@import url('../hybrid/library/css/screen.css');

/* Get the plugins CSS */
@import url('../hybrid/library/css/plugins.css');

The 18px.css file is a good starting point. It resets all browser defaults and gives you some nice typography to work with.

The screen.css file is just the stylesheet for the Hybrid theme.

The plugins.css file is some default styling for the plugins supported within the theme.

From this point, you can write any CSS rules you want. It’s your child theme, after all.

For more advanced users, there are several other CSS files located within /hybrid/library/css that you may want to import and play around with.

Overwriting template files

I’ll be writing this part of the tutorial for WordPress 2.7. If using an older version, you’ll need the plugin-only version of the WordPreciousss plugin.

In WordPress 2.7, we have the ability to overwrite parent (Hybrid) theme files within our child theme.

For example, let’s suppose you wanted to remove a few things from single posts. Well, you’d just copy /hybrid/single.php over to /hybrid-custom (your child theme). From there, you can make any changes you want, and they’ll take effect on your site.

You can overwrite any WordPress files like this. Or, you can even create your own page template files right in your child theme folder.