There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.
In step 1 we learned how the themes work, a first step in creating your own custom theme for WordPress. In step 2 we learned to create the template files.
Step 3 taught us about the header file, step 4, the footer and step 5, the sidebar. Do you see how the initial index.php file template set the outline for how these components interconnect?
Now, for the final elements, your cascading style sheets, or CSS.
Step 6.
The CSS File: name it style.css
In the top portion of the css file you will place information about the template:
/*
Theme Name: my custom theme
Description my first theme.
Author: me
Author URI: you can place your website link here (http://)
Version: 1 (or you can start with any number you like)
*/
Next you will place any extra fonts usually google web fonts that you would like displayed on your website.
/* Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/*------------------------------------------------------------ */
This is where you will begin your css information:
Remember for each element in your theme you can give it style here:
For example your main body style
body {
background: url(images/blue_background.jpg) repeat center top;
}
This will give you a background with the image called blue_background.jpg found in your images folder ( you can use any image or give it a color instead of image like this:
body {
background-color: #09F;
}
This would give your body a blue background the color hex color 0F9
For each element in you template you can create a css style to go along with it.
To link your stylesheet to you website you will need to add a link to the header file. You will notice that the header file that you created earlier has a link to the style sheet.
<link rel="stylesheet" type="text/css">
This will tell the header to look for the stylesheet and connect it to all the pages of your website.
Congratulations! You now have all of the information you need to create your own custom WordPress theme. Go forth and design, construct, and have fun.