According to Wikipedia.org, Cascading Style Sheets (aka CSS) has been around since December of 1996, so a whole lot of people know the basics of web design using CSS. WordPress was introduced in May of 2003, so almost as many people have heard of it, but a lot of people I talk to think it’s only a blog platform, so they dismiss it without learning about its power.
So, what if you’ve decided to give WordPress a second look, but you don’t know all the details of building a theme from scratch, but do know a little something about CSS? Did you know there’s a simple trick to build on a previous created theme, making the changes you want?
It’s a feature of WordPress called “Child Themes” and it’s actually pretty simple to implement if you know how. You just need to create a folder in the themes folder [ http://mysite.com/wp-content/themes/ ] named what you want to call your child theme. Let’s call ours “wp-daily.”
Ready to walk through it?
Ok, inside that folder you need a file called “style.css” and once you do that, you have all the required files to make your own child theme. You can put other files in that folder, but “style.css” is required, so don’t leave it out.
The first thing in the “style.css” file should be the following comment:
[code]/*
Theme Name: WP Daily
Theme URI: http://trinitydigitalmedia.com/
Description: Child theme for the Twenty Twelve theme
Author: Paul Alan Clifford
Author URI: http://trinitydigitalmedia.com/about/
Template: twentytwelve
Version: 0.1.0
*/[/code]
Let’s look at each line in turn.
- “Theme Name” is the name of the theme as you want it to appear in the list of themes in the WordPress backend. It’s required.
- “Theme URI” is the web address that you’d like people to visit if they want to locate you. It’s not required.
- “Description” is a description of the theme. A lot of people put colors, number of columns, etc. here. It’s not required.
- “Author” is your name. It’s not required.
- “Author URI” is the web address for you as the author. It’s not required.
- “Template” is the name of the parent theme. In this case, I’m using the “twentytwelve” theme which should be installed by default in all current releases of WordPress. Don’t delete or alter the parent theme or you’ll run into trouble. It’s required (otherwise wordpress wouldn’t know where to get the stuff you leave out of the child theme).
- “Version” is the version of the child theme. While you’re testing, people normally use numbers less than 1. Each major change after it’s released increments the number by one and minor releases increment the decimal numbers. This isn’t required, but it’s helpful.
Next, you should import the css from the parent theme. I’d type this as the very next item in the CSS file:
[code]@import url("../twentytwelve/style.css");
[/code]
It’s just a simple matter of changing the CSS so that your child theme looks the way you want it to. The element in the child theme’s “style.css” file will overwrite the element in the parent’s file. If you want the body’s background color to be black, you can write:
[code]body{
background-color:#000000;
}[/code]
What if you want to add something in the “header.php” file that the parent doesn’t have? Simple. Create your own “header.php” file in your child theme folder and add what you want.
This is a great way to get started in WordPress theme design without having to learn how the WordPress loop and other php functions necessary for a WordPress theme work.
I’ve personally done work for clients where I took an existing theme that was close enough and put my own flavor to it, customizing it to suit their needs. It’s a useful trick either way.
What ways would you tweak an existing theme for your business or client needs?
5 Comments