Rule #1 – This is my blog.

Create a WordPress Theme – Beginner’s Guide 3

Part 3 of How to create a WordPress Theme – Guide for Beginners.

WordPress CSS Contents

The Stylesheet is important not just because it dictates the appearance of the theme but also because it contains vital information about the theme like the theme name, theme description, theme version and the theme author.

Theme Info

/*
Theme Name: Practice Theme
Theme URI: http://ronangelo.com/Theme/
Description: The Practice Theme has a very simple and clean design. 
Author: ronangelo
Author URI: http://ronangelo.com/
Version: 1.0
Tags: black, white, two-columns, right-sidebar, fixed-width

------------------------------------- */

CSS Reset

Immediately after the Theme Info, we add what is called a CSS Reset. This ensures a consistent design when our theme is being displayed on different browsers.

Here’s a popular CSS Reset you can use.

Here’s another simple one based on the Graphene Theme’s css reset..

/* RESET */
html,body,h1,h2,h3,h4,h5,h6,p,img,ul,ol,li,form,fieldset {
  border: 0 none;
  margin: 0;
  padding: 0;
  list-style: none;
}

Theme Design

After the CSS Reset you can now add the css codes to alter your theme’s appearance.

There are too many to list them all here but a good practice (in my opinion) is to start with the containers like the body and other major wrappers. In our sample theme, these are the #container, #header, #content, #sidebar and so on. Our finished product already contains most of the stylings that you’ll need. Get the completed theme below.
 
Example:

body {
    color: #333;
    font: normal 13px/20px arial, sans-serif;
}

#container {
    width:960px;
    background: #FFF; 
    border: 3px solid #000;
    margin: 20px auto 30px;
}

h1 {font-size:28px;}
h2 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:18px;}
h5 {font-size:14px;}
h6 {font-size:12px;}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    line-height: 1;
}

Adding the Stylesheet

Now that you’ve created the style.css along with its contents, you’ll need to link it to your header template. The proper way to add your main stylesheet (style.css) is to add this code in your functions.php.

function practice_theme_enqueue_styles() {
     wp_enqueue_style( 'style-main', get_stylesheet_uri(), array() );
}
add_action( 'wp_enqueue_scripts', 'practice_theme_enqueue_styles' );

 
Our finished WordPress Theme will look like this:

Here is our finished product : Practice Theme

Share This Post :

8 Comments

Add a Comment
  1. I just installed one of your themes on my personal blog, and thought I would come and check out what you’ve got here on your blog!

    I’m really glad I did, as I learned quite a bit from your How to Build a WordPress Theme posts! I am currently attending a diploma program for web development, and this series of posts clarified a lot for me about WordPress theme development!

    Will definitely be sending donations this way over the holidays!

    Thank you so much!

    A Canadian Coder Named Andrew :)

    1. Hi Andrew,

      I’m glad you tried out the theme and found this post useful.
      I really appreciate it.

      Thanks,
      Ron

  2. I found it to be more than useful!

    It’s people like you that make the internet a better place to learn and refine a craft whether it be web development or how to bake cookies lol!

    Cheers!

  3. Manish Suwal 'Enwil'

    The finished wordpress theme doesn’t look like that you showed in the image. There ain’t enough CSS.

    1. “not enough css” Could you elaborate?
      Do you mean the menus are not exactly the same? This is just a practice theme and the one on the screenshot does not have/support sub-menus. This is just a very minimal version of the asteroid theme. Check out asteroid’s css file to see a complete handling of the sub-menus.

      1. Manish Suwal 'Enwil'

        Thanks for your response Ron,
        What I mean is that, I followed your instructions on making a simple wordpress theme from scratch. I kept doing exactly what you instructed and at the end I ended up making a website without proper CSS. And the CSS you wrote on the tutorial didn’t have enough CSS to design the whole website. I am having really hard time trying to figure out how to create a menu. Here’s what I ended up with : http://imgur.com/M6qw3zm

        I didn’t knew about asteroid’s, sorry for that. I was just concerned with creating a theme.

        The thing is that I’m beginner at this. I want to learn to create a theme, but I’m not able to till now. I want to start from basic but having really hard time. I’m not even able to figure out how to design a menu through CSS and align it horizontally.

        If you have any good resources then I’d gladly follow it.

        Thank you! :)

  4. October 2013: Theme File has been updated.

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>

ronangelo © 2012 - 2014 Frontier Theme
css.php