WordPress Theming Basics
This chapter is from the book
This chapter is from the book
This chapter is from the book
I’m often surprised to learn how complicated it is to work with other CMSs. As we’ve seen, WordPress has a very low barrier to entry, which means you can learn the system and build themes faster and more efficiently. At this point you know your HTML, CSS, and probably JavaScript. The only difference between a static website and a WordPress theme is stripping away that static content and replacing it with dynamic CMS calls.
I’m also surprised to meet web designers working in WordPress who don’t realize they are writing PHP. PHP is the server-side web development language behind WordPress. Even if you’re well aware of what it does and how it works, you probably haven’t written much PHP. Well, guess what? Today we’re diving right in.
What you’re about to learn
- WordPress theme requirements
- Theming basics
- Dynamic header calls
- Menu nav creation
- Content formatting
Five-Minute Theme Build
You need only two template files (index.php and style.css) to create a functional WordPress theme. Index.php is used to make WordPress calls to display content, while the style.css file houses site styles and defines the theme name, description, and other details. In this chapter, we’ll create a very simple WordPress theme using some basic required files.
Theme Requirements and Declarations
Let’s start by creating a blank style.css file and putting it in the theme folder. Name your theme folder something simple yet unique and don’t use any spaces, numbers, or special characters.
If you haven’t installed a local server application yet, that’s OK. For now we’re just doing some very basic programming. However, to test the theme you’ll need to install WordPress somewhere.
The absolute first thing in the style.css file has to be the theme declarations, which are commented out to prevent interaction with actual site styles. This section is called the “stylesheet header.” Below is the stylesheet header for our first basic theme. Be aware that changing this information on an activated theme is likely to cause a slight glitch and require reactivation.
/*Theme Name: My Basic ThemeTheme URI: http://webdesignerguidetowordpress.com/Description: My first WordPress themeAuthor: Jesse FriedmanAuthor URI: http://jesserfriedman.com/Version: 1.0Tags:License:License URI:General comments (optional).*/
Feel free to replace the text in maroon with your information. The black text must be absolutely perfect and mirror what you see above. Changing “Theme Name:” to “ThemeName:” will result in a broken theme.
The next step would be to add site styles, but we’re building a very basic theme so we won’t be inputting any styles at the moment.
We don’t actually have to add anything to the index.php file right now. Let’s start by simply creating a blank file and placing it in the same theme folder as the style.css file above:
Theme Installation and Activation
That’s it! You’ve created a WordPress theme. Now let’s install it by adding it to the themes folder on the server. Upload your files via FTP to the wp-content/themes directory on the server. You can avoid FTP by “zipping” up the theme and uploading it under the “Add New” tab in Appearance and Themes.
Once the theme is uploaded you can go to Appearance → Themes and see the theme ready and awaiting activation. It’s missing a thumbnail, but since we don’t really have anything to take a screenshot of at the moment, we can leave it blank. We will cover how to add a screenshot to your finished theme in Chapter 19, “Test and Launch.” You’ll also notice that all the theme details from the stylesheet header are there, too.
Activate the theme and then navigate to the front of the website. You’ll see a very simple site, with no content. Who says we shouldn’t be proud of a plain white screen?