The style.css Template File

We will start with the main CSS style sheet, as good of a place as any. This is where you put the information about your theme for administrative purposes. Your users will see this informaiton in the Theme tab on their Dashboard, so put a little effort into it. You put the data in a comment at the top of the file.

A Note on Code Comments
A “comment” in coding terms is a line or block of text that is not executed and simply contains some informational text for other programmers or admins, usually about the code itself. The comment structure differs between programming/markup languages, but I’ve summarized them below. You an put anything you want inside of a comment and the browser or server will just skip right over it. This can be useful for debugging code by “commenting out” (putting a comment around) code you suspect to be faulty. This allows you to disable the code without having to erase it.

  • PHP
    • // anything left of these two slashes is commented
    • /* anything inside the slash/asterisk wraps is commented
      (even multiple lines)
      */
  • HTML
    • <!-- anything inside the arrow symbol wraps is commented
      (even multiple lines)
      -->
  • CSS
    • /* anything inside the slash/asterisk wraps is commented
      (even multiple lines)
      */

The header comment you put into the top of the style.php file should look something like below. Fill in your details, and remember to declare an encoding type at the very top of the page. (UTF-8 is almost certainly fine for you, so just copy it.)

@charset "utf-8";
/* 
Theme Name: Your Theme
Theme URI: http://your-url.com/themes/yourthemeslug
Description: A few words describing what your theme is about.
Author: Real Name (or your WordPress.org username)
Author URI: http://your-url.com
Version: 0.1.2
Tags: black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, white, yellow, dark, light, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, blavatar, buddypress, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, front-page-post-form, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, holiday, photoblogging, seasonal
License: GPLv3
License URI: http://shinraholdings.com/assets/license/gpl-v3.txt
	Copyright © 2012 You or Your Company (your-email@your-url.com)
*/

The main purpose of this files is to put style information for your theme, put I always add this header straight away, makes it seem more official. We will have to come back to the adding styles part, since we don’t have anything to style yet… Congratulations! You’re first from-scratch theme has just been born!

3 Thoughts on “Making a WordPress Theme – World’s Most Detailed Tutorial

  1. George Doe on July 13, 2013 at 4:13 am said:

    The end?

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation