Welcome, guest!

Feel free to read the blog, browse for themes, join the club, or search the site:

Cool Stuff

Browse: Home / Themes / Hybrid / Child Themes

Child Themes

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

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. You upload them in the same place as any other theme (/wp-content/themes). They then use the power of Hybrid and allow you to customize to your heart’s content.

Downloading a child theme

If you’re not a developer or designer, this option is probably best. Head over to the themes page, and browse through the available themes. There may be something that works for you.

If you find a child theme that suits your needs, install it like any other theme. Just make sure you have Hybrid installed too.

But, if you’re interested in creating your own child theme, read on.

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.

There’s also the option of using the Skeleton child theme as a base. It’s a nearly-blank child theme that has been developed for getting started with building custom child themes.

Styling your child theme

Well, stylistic changes should be up to you. However, I’ve put together several stylesheets to get you started. I highly recommend reading through the stylesheets tutorial, which documents the stylesheet packages included with the theme.

If you just want to start with the default Hybrid look, add this code to your style.css:

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

/* Get layout CSS */
@import url('../hybrid/library/css/2c-l-fixed.css');

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

/* Get drop-downs CSS */
@import url('../hybrid/library/css/drop-downs.css');

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

Modifying your theme

If you’re wanting to modify something in the theme, you should use action and filter hooks from your child theme’s functions.php file. You shouldn’t need to edit any templates at all.

If you do need to overwrite templates, continue on. Otherwise, check out the action and filter hooks tutorial.

This next part should only be used as an absolute last resort. Hybrid has enough action and filter hooks to make it nearly impossible to ever need to overwrite a template file.

Since WordPress 2.7, we have the ability to overwrite parent (Hybrid) template files within our child theme. Again, I want to reiterate that this is something that you shouldn’t do unless absolute necessary, which is a rarity.

Let’s suppose you wanted to create completely custom navigation links (next/previous post) links. The default Hybrid file that handles this is navigation-links.php. You could copy this file into your child theme folder (i.e., /hybrid-custom). From there, you could make any changes you want, and they’ll take effect on your site.

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