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.
