Understanding WordPress themes

blue-xl These days, many websites run on WordPress.org. And for good reason. Along with a host of other benefits, the theming structure of WordPress means that website owners have a lot of control over how their site looks. And (with care!), they can change the look of their site just by uploading a new theme. It’s important to understand WordPress themes to get the most out of your website.

But what exactly is a theme? What’s included in a theme? Which parts of a WordPress site does a theme change? I thought I’d give a beginners overview of themes to help you get a better idea of how they work.

What is a theme?

As you may have seen if you’ve ever accessed your site via FTP, WordPress is comprised of many files and folders. A lot of these are the core files, the stuff that makes the WordPress back-end function. But there is also the contents folder (called wp-content), which houses all of your site’s images, themes and plugins. (Your blog posts and pages are stored in the WordPress database, which is in a different part of your hosting.)

When you upload new themes, whether through the back-end admin panel or through FTP, they are stored in the contents folder. Every time you install a theme, its folder is stored in this folder, even though only one theme can be active at a time.

A theme tells the site how to load the different components of your site, and also determines your site’s layout, colours, fonts, logos, and background images. Themes make your site “pretty” and readable, allowing you to customise and brand your site.

When you change your theme, WordPress applies these functions and styles to all the pages and posts you’ve written, effectively changing the look and feel of your whole website in one action.

The theme files

Theme developers have a fair amount of freedom when it comes to which files they include in the theme folder, so no two theme folders will look the same. However, there are some files that are fairly common across themes. These files determine how the theme functions, how it looks (for instance its fonts and background colours), and how the different components of a typical page (header, menu, content, sidebar, and footer) are arranged.

php

Here’s a look at some of these common files:

index.php is the home page of your site. This often contains the “loop,” which determines how your index of blog posts are displayed. However, you don’t have to show your blog posts on the home page – this is a setting that can be changed in General>Reading. This page, and all other .php files, are written in the coding languages of HTML (Hypertext Markup Language – a language used to determine the order in which to load page elements) and PHP (Hypertext Preprocessor – a language that talks with your WordPress database).

header.php, sidebar.php and footer.php are the templates for the header, sidebar, and footer of your site respectively. These are usually self-contained files as the header, sidebar/s and footer are normally consistent across a whole site.

functions.php determines the special functions of a theme, for instance whether there are any options the user can control themselves from the admin panel.

Template files, such as single.php (individual post), page.php (individual page), determine the way pages on your site display the posts and pages from the database. The code in these files will normally “call” (include) the header, sidebar, and footer templates, as well as display blog posts or pages.

The stylesheet, called style.css, must include the name and author of the theme at the top. After that, the stylesheet outlines each site element’s position, spacing, colours, images, fonts, and other stylistic attributes. In fact, if you didn’t have a stylesheet, your site would just look like a lot of boring text with blue underlined links. This file is written in a coding language called CSS (Cascading Style Sheets – actually one of the easiest languages to read for non-coders).

css

Child themes

Some themes may actually be a “child” theme, which is a theme that is based upon another theme’s functions, but has its own stylesheet. Child themes are used by many premium theme developers, such as StudioPress. Their themes are all based on the Genesis framework, which is a “parent” theme. This theme must be installed for the child themes to work, as they are based on the functions of Genesis.

Child themes are a great place to start if you want to have a go at making your own theme. The default Twenty Eleven theme (included with all WordPress installations) is perfect to build a child theme from – just create a style.css and get cracking!

Further resources

I hope you found this basic overview of WordPress themes useful! Leave a comment if you have any questions.

This post originally appeared on Grassroots Internet Strategy.