WordPress Theme Templates: Stylesheet

Every WordPress theme includes a style.css file. A browser uses this file, commonly known as the stylesheet, to provide style to the website design, such as font types, colors, and sizes; graphics; icons; background colors; borders; and other styling elements.

The stylesheet targets areas of the site to style using CSS IDs and classes. CSS IDs and classes are simply a means of naming a particular element of the site. IDs are used for elements that appear only once on a page, whereas classes can be used as many times as you need. Although this file references style, it contains much more information about the theme.

At the very beginning of the style.css file, a comment block, or the stylesheet header, passes information about your theme to WordPress. Comments are code statements included only for programmers, developers, and others who read the code.

Computers tend to ignore comment statements entirely, but WordPress uses the stylesheet header to get information about your theme. In CSS, comments always begin with a forward slash (/) followed by a star (*), and always end with a star followed by a forward slash (*/). The following code listing shows an example of the stylesheet header for the Twenty Thirteen theme:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/extend/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a gorgeous color scheme and matching header images, optional display fonts for beautiful typography, and a wide layout that looks great on large screens yet remains device-agnostic and is readable on any device.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

If you make modifications to the stylesheet comments, the changes are reflected on the WordPress Dashboard on the Themes page (choose Appearance→Themes).

Themes must provide this information, by way of comments, in the stylesheet header, and no two themes can have the same information. Two themes with the same name and details would conflict in the Manage Themes page. If you create your own theme based on another theme, make sure you change this information first.

Below the stylesheet header are the CSS styles that drive the formatting and styling of your theme.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.