WordPress theme development might seem like something reserved for experienced web developers and designers alike but that simply isn’t the case. In truth, even with a basic level of web design and understanding of PHP anyone can put together a theme to use with their WordPress blog. Getting started is easy and in this article I’ll explain the basics of what you need to do in order to get a basic theme operational with minimum knowledge required!
Once you have a firm grasp on the basics you can begin developing out your theme to include the content and features you need but for now we’ll stick to the absolute basics. This article will cover theme construction from the ground up and we’re going to assume you have a WordPress setup with hosting to suit already.
The Directory / Folder Structure
If you’ve ever had a look around the directory/folder structure of WordPress, you’ll be familiar with the /wp-content/ folder contents such as themes and plugins. The themes sub directory is where our theme will be stored so first things first, to get started, simply create a new folder within that. Something like MyNewTheme will suffice. This is the first step. If you looked at your WordPress Admin theme activation screen now you will see the option to set MyNewTheme as your WordPress blog theme but obviously it will have a lot of errors as the folder doesn’t actually contain anything yet! But that’s step one. WordPress will literally read out that /wp-content/themes/ directory and offer all themes/folders found within it as options for setting a theme.
Screenshot / Splash Image
Some people do this first, some people do it last, somme not at all! But for me personally, I like to get it done. You may notice when selecting which theme to activate in WordPress each of the available themes will have a nice splash image along with the name of the theme. Splash images tend to contain the name of the theme, pretty picture or even a screenshot of the theme itself to help you identify it before activation. Creating one of these is EXTREMELY simple, all you have to do is open your favourite graphics program, create your image and save it as screenshot.png in your /wp-content/thees/MyNewTheme folder – that’s it. Do that and you’ll now see your image appearing when you refresh the theme activation page in WordPress Admin.
Next is the stylesheet. WordPress stylesheets are no different to regular stylesheets, all the code for your new design needs to be placed here with some important addition, the header. The header of the CSS stylesheet contains all the important information about your theme such as its name, author and version info. This information is used to provide details of your theme in the WordPress Admin back end. So if you want a name and author info to accompany your new splash image, you’ll need to fill this in. A basic header for a WordPress theme looks like this –
/* Theme Name: My New Theme Theme URI: http://www.myneewtheme.com Description: A demo of my new theme. Author: Your Name Author URI: http://www.myneewtheme.com Version: 1.0 */
WordPress automatically looks for a file called style.css so if you have all of your css in one file, be sure to name your file as style.css so WordPress can call it automatically. You can obviously include other stylesheets in your site code too but the default one WordPress will call is always style.css and there is where your header needs to be to provide WordPress with the theme data.
Outside of style.css and screenshot.png you need the following files – index.php, sidebar.php, header.php, footer.php, single.php and page.php – To start with, simply separate your header and footer from your design and place each in files called header.php and footer.php. If your design has a sidebar, place it in sidebar.php if not, just leave it blank – but create the sidebar.php regardless. Don’t worry about putting anything else in the header or footer yet, literally just place your design in there. Next we’ll move on to the guts of WordPress that actually outputs your content.
The Loop, Single and Page
All WordPress content outputs are based on “the loop”. The code for the loop can be found here. Literally dump the code into your index.php, load your blog and you’ll see an unstyled blog with your design header/footer and the blog posts looping out on the homepage. By default, anything outputting from the homepage (index.php) will display the full list of blog posts. Now literally copy the index.php and rename it as single.php and page.php respectively and these will then output specific pages and posts from your blog.
You may wonder why the code is the same for the index.php as it is for single.php but when viewing the blog homepage or a single post page, they’re different. This is because of the filename convention. WordPress knows that index.php should display the full list of posts and single.php must display a single post – even though the code used to output it is the same.
Once you’ve got your homepage loop and single/page posts outputting you can start to customise them. I’m going to assume you’ve already done the HTML/CSS for how you want your homepage blog output to look along with posts and pages. Now is the time to mix that code in with the basic barebones loop from above. It’s basically just a case of wrapping the post output with your post design but inside the loop so WordPress knows to duplicate the design code with each blog post it outputs.
Now you have your basic design and your posts outputting you can take things a step further and create a widgetised sidebar so you can drag and drop widgets in the WordPress back end onto your design.
For this, you’ll need to create another file in your /wp-content/themes/ directory called functions.php. Here is the full tutorial for creating a widgetised sidebar. You’re basically prefixing the output with a header/footer and a box to contain it. The sidebar will then loop through and output each widget using the same sidebar box header/footer as shown above.