Role of style.css in a WordPress Theme

Role of style.css in a WordPress Theme

The style.css is a required file in any WordPress theme. You can include additional CSS files in your theme, but there must be one with this filename, style.css in the root folder. Not only this file is must have, but also begin with a comment block containing the theme’s description. As in the previous post, I told why this file is must in a WordPress theme directory. So in this post, I will describe how we can add theme information and what they mean. So let get the start.

Theme Information Part in style.css

Here I copy theme information part from WordPress default theme Twenty Seventeen. Have a look on it.

/*
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 header video and immersive featured images. 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: http://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.
*/

as you can see there are theme related things are defined like theme name, theme URI and much more. Now I will describe them one by one. And most important thing, theme information part is first thing in a style.css of a WordPress theme. And this part is in CSS comment.

Theme Name

Theme name gives a name to your theme in WordPress dashboard. When you go to themes page in dashboard theme name comes from here. One thing to remember, theme name and theme root folder name should be same. Like here theme name is Twenty Seventeen than folder name should be twenty-seventeen. Even if you declare another folder name, the dashboard will show your theme. Theme name is as per defined in style.css. But when you come to create a child theme, it will be confusing with template name. The team from WordPress.org also recommended this.

Theme URI

The theme URI part has a link, link where demo related things defined by its theme author. Link theme’s demo, documentation and other things. It just for users to check how the theme will look after install.

Author And Author URI

Its let us know about the creator of a WordPress theme. In Author, you can define the name of the theme creator or the team that envolve in theme development. While in Author URI you can provide a link which let the user know about the author.

Description

In Description part, you can add an introduction of your theme. It gives a short description of the theme like for what kind of site you can use this theme. What features theme have. And as you can describe.

Version

The Version, tell about the version of the theme you are using. If you have downloaded a WordPress theme from WordPress.org or any premium theme market, and they publish a new version of the theme. Then version part will be compared and notice for New Version Available will generate by the WordPress system. So including this part is a must thing.

License and License URI

In License, you can define the license name. The license that theme follows. The license URI is the link where details about the license are described.

Text Domain

A WordPress theme should only use one text domain in its code. The text domain should match the theme’s name. This tell system that theme uses a text domain. And this text should be used while coding.

Tags

WordPress defines some tags for the WordPress themes. Every tag has a meaning. It let user about the functionalities that a WordPress theme have. Let have an eye on some tags.

  • one-column, two-columns it tells that this WordPress theme has one column and two columns layout.
  • right-sidebar it speaks that theme provides a sidebar on the right side.
  • featured-images theme provides an ability to add a featured image to the posts.
  • footer-widgets means theme have a widget area in the footer.
  • threaded-comments means you can reply to a comment in a post.
  • translation-ready theme is fully translatable. One can translate every single word in the theme.

For details about tags, you can follow WordPress Developer Handbook.

Conclusion

In this post, we learn about the role of style.css in a WordPress theme. How we can define theme information header in style.css. What they mean. Which part is compulsory to add. Why define a text domain in the style.css. How can we add a License to our theme? Also how to show the mind behind the theme.

 

Subscribe to this blog to get latest post direct into your inbox.

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.