Stylesheet for WordPress

We have finally come to the conclusion of the Let’s Build A WordPress Theme From Scratch tutorial series. The final file I want to mention is literally the most important file. “Why?”, you ask. Well it’s because in WordPress you only need two files to start a theme, and those two files are a template file (index.php, home.php, or front-page.php) and style.css.

This is the tenth and final article in the Let’s Build A WordPress Theme From Scratch Series.

If you were to take index.php and drop in the typical html structure of a static site, you could then upload that to your server along with your style.css file with the proper WordPress declaration heading comment…and you would have a WordPress theme. It is that easy! Now it would just be a one page, static site but it would indeed be on WordPress and would be considered a custom theme. This is why I want to stress to all of you that building a custom theme isn’t as scary as you may think. Yes there is PHP involved and you may not know, or feel comfortable using it, but if you dive head first into it you will learn it pretty quickly!

Style.css

Ok…back to our topic of style.css. This file is used to tell WordPress that the site you are uploading needs to be considered a WordPress theme. How do you do that? Well, simply copy and paste the following code at the very top of your style.css file and replace the content with your content. See below:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/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 vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
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.
*/

As you will notice, this is directly from the WordPress codex on Theme Development and refers to the Twenty Thirteen theme. All you need to do is replace what they have entered behind each title and add whatever you want. For example, you must have the Theme Name: but it can literally be Cookie Monster Theme or anything you need it to be. All the other fields are important but could be omitted. I suggest filling them all out the way you think best.

Obviously, the rest of the style.css file is just the css that you want to use to style your html structure. Nothing else fancy needs to go in here to make it work with WordPress. And that is it folks!

I can’t thank you wonderful WordPress guys and gals enough for following this tutorial series! I really just want to be, and hopefully continue to be, a resource to all the other new developers out there trying to make it in this world! Please feel free to contact me on here or on Twitter, I am happy to answer your questions or chat anytime! I will still be blogging regularly about other great WordPress topics, so stay tuned!

Team Treehouse – Learn PHP for WordPress

If you are serious about learning to develop custom themes in WordPress, I highly recommend you join Team Treehouse. They have a full video course on everything WordPress development, including a course on specifically writing PHP for WordPress.