WordPress has a huge selection of add-ons and styling options that let you customize your installation of WordPress exactly how you want.
Part of setting up WordPress and getting your website ready to go live is to think about how your site visually looks. Themes are an integral part of how WordPress displays the content you create and there are thousands of themes to choose from.
What Is A WordPress Theme?
Let's get straight to it. A WordPress theme is responsible for styling every aspect of your public WordPress website.
By public I mean your main website (www.yoursite.com) and not your admin area (www.yoursite.com/wp-admin).
For example, a WordPress theme determines these elements:
- Layout of posts, categories and media
- Header layout and contents
- Post layouts and quantity of post layout designs
- Category page designs
- Logo position and size.
- Font styling (size, color, font type, font weight, line height)
- Widget placement
- Shop design (WooCommerce)
- Page background
- Website layout – full width, boxed
A theme also determines how your website looks on mobile devices like phones and tablets.
A theme is a collection of php, js and css files that combine to depict how a website looks visually. The files have been compressed into one compact .zip file that can then be installed on any WordPress website (both sites using the latest WordPress version).
Now you know what a theme is and what it's made up of, let's look at the default theme.
The Default WordPress Theme
When you first setup WordPress, you'll see a pre-installed theme. The theme will look quite empty and sparse, but that's because you haven't got around to creating content yet – that's for a bit later.
The default WordPress theme changes every year, with the past default themes named “Twenty Sixteen”, “Twenty Seventeen”, “Twenty Nineteen” and “Twenty Twenty”. Here's how Twenty Twenty looks;
It's pretty basic, but helpful to leave installed on your WordPress site in case you need to fix bugs and revert to it.
There's a theme area inside the WordPress admin dashboard that will allow you to have more than one theme installed, but only one activated. That's how you can have more than one theme installed at once.
This is how a fresh copy of WordPress looks in the theme area
What Can Themes Do?
Themes manage everything visually. The way your logo looks, where the logo is on the screen, what yor homepage looks like, how the images are sized and more.
Some heavily modified themes even need to use plugins to function properly and display your WordPress data like posts and images in a certain way.
Just to show you how varied themes can be, this theme from CodeCanyon sets your WordPress site up to function like a directory – with maps, location reviews, prices, photos and more.
This theme will make your WordPress site function as a price comparison site, with products, auto price updates from Amazon, a comparison feature, coupons, deals and more.
This theme will apply a more personal blog feel to your WordPress website.
This has only really scratched the surface of the types of themes out there. It really is amazing once you start to look into them.
So themes can transform a boring WordPress website into something completely different, like a viral news magazine (think Buzzfeed.com) or a social network (think Facebook.com). They are powerful.
How Much Do Themes Cost?
They range from free to $70. There are so many themes that you'll almost always have a choice of several that can all transform your site the way you were thinking.
Even if you were just planning on using your WordPress website as a personal blog – nothing like a social network or viral magaizne – you can still find plenty of free themes and plenty of paid themes that will give you a different look on your personal blog.
Let me show you.
If you wanted a simple personal blog, you might feel the default Twenty Twenty theme good enough.
I think you'll agree, there's quite a big difference between free and paid themes. There are some awesome free ones, for sure – but let me say this, I don't have a free theme one on any of my sites. I need to be sure the theme is updated regularly and I have access to support if I need it.
I haven't seen a theme above $70, which honestly is a small fee for a website that can make you money 24/7/365.
What Are Themes Made Of?
Themes are a collection of files that are designed to make your WordPress website look a certain way.
The files are mainly php, css and a sprinkling of .js sometimes.
- PHP files contain a widely used script that's open source (nothing is kept secret) so everyone can use it. It's a general purpose script that works with html, another type of code.
- CSS files are cascading style sheets. They depict how the visual elements will appear on the screen. Think of it like the php files determine where the visual elements appear, the css files determine how they will appear (size, color, background color, typography and more).
All themes are downloaded as a single .zip file, which is a single file that contains many other files inside it. Think of it as one huge ‘folder' with many pages inside. The folder is the theme .zip file.
It doesn't matter if you use a free or paid plugin, the theme will always come in a .zip file which you can upload and activate on your WordPress website.
What Is The Difference Between A Theme And A Plugin?
- A plugin adds features or modifies existing features on your WordPress website.
- A theme adds a specific style layout to your WordPress Website.
Some themes need plugins to display properly. Some plugins need themes to function properly.
To find out if your theme needs a plugin, you'll almost always be prompted to install them when you upload and activate the theme.
Where To Find WordPress Themes
If you're shopping for a new theme – a new look – to your WordPress website, you've got two main places I'd recommend looking. The WordPress plugin directory and a website called Themeforest.
I've used both extensively and they are reliable and safe places to get your themes.
How To Use Themes From The WordPress Theme Directory
First, head over to the WordPress theme directory.
The first page you'll see are popular themes based on downloads (#1 above). Scroll down and check out what other people have liked and see if there's anything you like the look of.
If you have a bit more of an idea of what you want your website to look like a news website (#2 below) layout with a grid format (#1 below), you can use the most excellent feature filter and narrow down the results like this:
Once you've made your feature choices, click apply filters and you'll be able to browse the results to see if there are any themes you like.
Once you find something you like, it's easy to get it on your own WordPress website. Let's say we wanted to use the Axis Magazine theme (above, top left).
Instead of having you download the theme to your own computer then upload it to your WordPress website, we can just use the built in Theme browser inside your WordPress Admin Dashboard.
Go to Appearance -> Themes and you'll see a screen like this (yours might vary slightly)
Click the Add New button at the top of the page (#1 above). You should see a screen similar to the one you had on the WordPress Theme Directory website like this:
Here, you can use the feature filter (#1), see popular items (#2) and upload (#3) your own theme .zip file if you downloaded it elsewhere.
Let's say we still wanted to use the Axis Magazine theme, just type “Axis” into the search box (#1) and you'll see the theme show up (#2).
Once you click on the theme, you'll see a preview window open. Click Install (#1) to download the theme to your WordPress website and automatically install it.
You're not quite done yet! Next, click Activate to set the theme as the default one for your WordPress website.
How To Use A Theme From ThemeForest
There's a little different method to install themes if you decide to use one from Themeforest.
Themeforest has an excellent filter system and you can easily see important details about the theme without having to go far from the overview pages. Here's how it looks:
|#1||Filter panel. Narrow down the results to the ones you really want to see|
|#2||The title of the theme|
|#3||The category the theme is in on ThemeForest|
|#4||The developer of the theme|
|#5||Key features of the theme|
|#6||The price of the theme (+ $2 for ThemeForest fee)|
|#8||Number of ratings|
|#9||The total number of sales the theme has made|
|#10||The date the theme was last updated|
|#11||A shortcut to preview the theme.|
|#12||A shortcut to add the theme to your shopping cart|
You can quickly see important details about each theme using the numbered items in the table above. The first things you should check out are:
- Number of reviews
- Average rating of the reviews
- How many sales have been made
- How much the theme costs
- When was it last updated
- Key features of the theme
Once you find a theme you like on ThemeForest, clicking on the theme thumbnail or theme title will take you to the detail page for the theme where you can learn more about it.
When you're ready to buy, click the Add To Cart button and checkout. You'll see the theme in your downloads area on ThemeForest – https://themeforest.net/downloads.
Click the Download button (#1) then select Installable WordPress file only (#2). This will start the theme download to your computer.
Next, go to your WordPress admin dashboard and click Appearance -> Themes. Then click Add New.
Select Upload Theme…
Click Choose File and select the .zip file you downloaded from ThemeForest. Click Install Now to begin uploading the theme from your computer to your WordPress website.
And finally you'll need to Activate the theme to make it live and visible on your website.
Types Of Themes
I wanted to explain a little more about the types of Themes you can find. Some themes are very specific – set up for a dental office or a corporate website. Other themes are multi-purpose where they can transform into a variety of different sites.
To give you a real life example, the hugely popular Flatsome theme (119,600 sales as of right now) can equally perform as a corporate website, blog, e-commerce store or portfolio website for a photographer or designer!
Is it better to use a “niche” or specific purpose theme or buy one that's built to be multipurpose?
What I've found is that themes which have only one purpose – say, a personal blog theme – are easy to get to grips with and learn. If you're just starting out, one of the simpler themes that's designed specifically for what you want your website to be would be the best I think.
Themes that are multi-purpose usually have quite a bit more to learn. They are usually quite in-depth and there are a lot of options to configure things. The trade off with it being a bit harder to learn is that you can have one website that has several purposes.
For example, with Flatsome, you can setup an online store, blog and portfolio with the same theme. You can't do that with a basic “blog-only” theme…but it'll be easier to learn.
Now you have an idea of what themes are, what they do and how to get and install them, I want to look at how you customize the themes, add logos and change colors.
Almost all themes work with WordPress' theme customizer. Some even go one further and use the theme customizer for some things and an entirely seperate theme options panel in the WordPress admin dashboard.
To access the theme customizer, make sure you're logged into your admin dashboard and view your website from the public side (www.yoursite.com).
You'll notice you have a bar at the top of your screen – called the admin bar – and you have a few options. One of those is the customizer.
Click this and you'll see a menu appear. Depending on your theme, there will be different options shown. Most commonly, you'll find options to change the website title, description, menus and logo.
#1 – Site identity
Here you can change the name of your website, shown after your page or post names. Post title – Site Name. You can also change the site tagline and logo. Some themes, if they support it, allow retina logos so your logo looks awesome on high resolution retina devices (like the iPhone).
#2 – Menus
Change the menu items using this option. You can add items to menus, remove them or make a completely new menu and assign it to a location. You can also do this in the WP Admin dashboard by going to Appearance -> Menus.
#3 – Widgets
Setup which widgets you want displayed. This only configures widget areas that are always on display, like the footer area. For in-post and in-page widget areas, use the WP Admin dashboard and go to Appearance -> Widgets.
#4 – Homepage Settings
Setup which page should be shown when people visit www.YourSite.com. You can set this to show a specific page or a list of your most recent posts.
#5 – Theme Options
If your theme has extended options – like mine does – you will see a menu item where you can setup more features. This is theme specific, so you may or may not have this option.
#6 – Additional CSS
If you need to style parts of your WordPress website, you can use CSS code and enter it here. This is really handy as it updates in real time so you can see the changes you make as you make them.
This won't be needed much, but it's an option in the WP Admin dashboard under Appearance -> Theme Editor. Here you can see the code of each theme file and if you need to make changes you can do so. I'd recommend you leave this alone.
How To Delete A WordPress Theme
First go to Appearance -> Themes. Then select the theme you want to remove. In the lower right hand corner, you'll see a Delete option. Click this, confirm the deletion and the theme will be permanently removed.
Parent & Child Themes
You might come across a theme that gives you the option to create a child theme. A child theme allows you to make edits to core theme files, without the risk of them being lost when you update the theme.
See, the problem with editing the parent theme's files is that any changes you make will be overwritten when you update the theme and new files are copied from the update server to your WordPress website.
To give you a real world example where a child theme is very much needed is with this site you're on right now. I wanted to include an affiliate disclaimer on every post automatically, but needed to add it in a neat, visually pleasing way.
I opened up the post template files in my theme's folder and added the necessary code to display an affiliate disclaimer right underneath the post title.
If I didn't have a child theme, when I update the theme the edits I made to add the affiliate disclaimer will be overwritten by the new files and won't show up any more.
By using a child theme, the files I edited aren't overwritten – but the files I didn't edit are overwritten and updated as expected.
Pretty useful, right?
You can make child theme's out of any theme, the process is quite simple. Some themes give you a child theme that you can quickly install to make the process quick.
Almost all themes are responsive. The huge surge in mobile browsing – which has overtaken desktop browsing – means that themes must be responsive to be competitive with others.
Responsive themes mean your website will look good no matter the screen size. They will scale down, add finger-pressable menus, show high definition images and more. Themes do this automatically and there's no configuration needed on your side, save for uploading a high definition retina logo.
I'd be surprised if you find a theme that is not responsive. If you do? Get with the program developers!
One last word on themes…
If you feel brave enough, you can have a go at creating your own theme. Maybe you want a one-of-a-kind design? Maybe you need a feature that you haven't seen elsewhere? Whatever the reason, you can use theme frameworks as the foundation of your custom theme.
You can then build on the foundation and add the structure and styling you wish. You'll need some web development experience and you might be overwhelmed if you haven't worked with WordPress or php code, but it's do-able and there are some awesome tutorials out there explaining how you can make your own WordPress theme.
Want to do it from absolute scratch? There's a YouTube video for that.