• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

WP SuperGeek

WordPress Design, Help & Training

Main navigation

  • Portfolio
  • Services
  • Learn WordPress
  • About
  • Contact
  • Blog

Understanding WordPress themes

blue-xlThese 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

  • WordPress codex
  • WordPress free themes directory
  • Theme anatomy infographic from Yoast
  • W3 schools, a great resource for learning coding languages

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.

Share this:

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Email
  • More
  • Print

More on WP SuperGeek:

What are the WordPress core files? Think a free WordPress theme is too good to be true? It probably is. How to remove borders from an image in WordPress The whys and hows of premium WordPress themes

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Learn WordPress

WordPress Design

Categories

  • Ask a SuperGeek
  • Blogging
  • Coding
  • Design
  • General web help
  • Inspiration
  • Maintenance
  • Software
  • Troubleshooting
  • Uncategorized
  • WordCamp
  • WordPress Plugins

Search

Footer

Connect

  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
WordCamp US Speaker

Latest blog posts

Ask a SuperGeek: Understanding domain names and web hosting

How Dubsado has changed the way I do business

How to create responsive tables in WordPress

Ask a SuperGeek: How to redesign your WordPress website with no downtime

Why the Procreate app is the coolest thing ever

Search

Copyright © 2023 · Digital Pro on Genesis Framework · WordPress · Log in