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?