The WordPress Theme Stylesheet

The WordPress theme stylesheet

The stylesheet is what gets your WordPress theme started. It is a necessary file that not only controls the look of your site but also provides important metadata about your theme. In this article, we’re going to show you what kind of information goes into the stylesheet and how it’s used to customize your site.

It All Begins With The WordPress Theme Stylesheet 

Who knows about your theme? No one yet, because you’re just getting started. But you may already have a few things in mind:

  • Name of the theme (Theme Name)
  • Description of the theme (Description)
  • Developer’s name (Author)
  • Version number (Version)

This information is all contained in the header area of your stylesheet before CSS styles are applied.

You can add all of this information and more via the stylesheet, but the bare minimum can be simply a title:

 /* Theme Name: My Awesome Theme */

The above theme name will appear as the title when viewing all of your themes under Appearance > Themes in the WordPress admin area.

A More Advanced Stylesheet

As an example of how much content you can actually add to your header, here is a copy of the header information from the twenty-seventeen theme stylesheet:

 /* Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device. Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 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. */

You can see, beyond just the Theme Name, this stylesheet header contains all kinds of extra metadata. If your goal is to have your theme appear in the WordPress theme repository, you should consider adding this kind of information about your theme.

Where to Place the Stylesheet

In order for a theme to work properly, it must have it’s directory here under the wp-content directory. This means your CSS file would be place in this directory path:

/wp-content/my-awesome-theme/style.css

This precise placement is required in order for your theme to work properly.

Just add Pages and Style

Once you have added the stylesheet to your theme directory, the theme itself will be available to Activate. However, no content will appear on the site with this theme. That’s because you will need WordPress page templates with PHP code in order to grab content from the database.

Learn more about the power of WordPress Themes and how they can simplify your website building and maintenance.

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Was this article helpful? Join the conversation!