Creating a Child Theme for PressWork

When creating a site with PressWork, you might want to add some custom css on top of all the theme options that are available. The only problem with modifying any of the core theme files such as style.css is that when you upgrade, those modifications will be overwritten. That’s where a child theme comes in.

A 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.” In layman’s terms, it’s a way you can modify a theme that will never be overwritten, since it is a totally new theme that only relies on core elements from the “parent” theme.

Putting together a basic child theme really only requires one thing: a style.css file. A child theme has to be self-contained, so first you need to create a new folder. Call it presswork-child. In that folder, create a new file called style.css. The structure should look like this:

file-structure

Now open up style.css and add this to the top:

/*
Theme Name:	PressWork - Child theme
Theme URI:	https://presswork.me
Description:	A basic child theme for PressWork
Author:		c.bavota
Author URI:	http://bavotasan.com/
Template:	presswork
Version:	0.1
*/

The most important line is the Template: presswork. This lets WordPress know that this theme relies on PressWork. You need to always make sure that you are using the parent theme’s directory name. If you have changed the directory name to something like NewPressWork, then that line would have to read Template: NewPressWork.

If you would upload your new child theme into WordPress and activate it, you would get a theme with no styles whatsoever. The thing about child themes, is that they totally overwrite the style.css of the parent theme, so if you have no CSS in your new style.css file, then your site will have no CSS whatsoever. A great way to load up the parent theme’s CSS is to use @import. Now your new style.css file should look like this:

/*
Theme Name:	PressWork - Child theme
Theme URI:	https://presswork.me
Description:	A basic child theme for PressWork
Author:		c.bavota
Author URI:	http://bavotasan.com/
Template:	presswork
Version:	0.1
*/
 
@import url("../presswork/style.css");

This will include the stylesheet from the parent theme’s directory. Now, if you activate your child theme, it should look identical to the parent theme.

Any CSS you add will no longer be overwritten if the parent theme is updated. And, if the parent theme’s CSS changes, it will automatically be imported into your child theme’s CSS. So far so good, but what if you want to modify something in the single.php file? Simple, just copy over the file from the parent theme’s directory into your child theme’s directory. Modify to your heart’s content and your changes will be safe.

This may seem like a bit of work just to change one or two things, but taking the extra time to create a child theme will end up saving you more time in the long run, since you will no longer have to redo all your changes each time you upgrade.

Read more about child themes in the Codex at http://codex.wordpress.org/Child_Themes.