Installing a theme

Congratulations, you've now got a working WordPress site! It comes with the default theme bundled, which, at the time of writing this book, is Twenty Fifteen. While this is a good theme, you probably want to give your site a more bespoke design, so the next step is to find and install a suitable theme from the WordPress theme repository.

Introducing the WordPress theme repository

The WordPress theme repository, at https://wordpress.org/themes/, contains thousands of themes that you can download for free and use on your site. They vary hugely in terms of their design and the kind of sites they're suited to, but there's a good chance that there'll be one that works for you.

To install a theme, you don't have to go to the WordPress site and manually download it; instead, you can use the theme's screen in your WordPress admin, which you'll learn next.

Choosing a theme

With so many themes to choose from, where do you start? The first thing is to identify a set of keywords to use for searching that may include one or more of the following:

• Colors
• Layout details such as fixed, fluid, responsive, or the number of columns
• Features such as accessibility or featured images
• A subject (the type of site you're running)

Let's try finding a theme by following these steps:

1. Go to Appearance | Themes and then click on the Add New button. This will open the theme repository in your admin screen.
2. Click on the Feature Filter button. This will give you a screen full of checkboxes that you can tick to select keywords and filter the themes you can choose from.
3. If you want your new site to look as similar as possible to your old one, or you have brand colors that you need to use, it makes sense to use Colors and Layout keywords. Add others as needed to filter down the list of themes.
4. Once you've ticked all the checkboxes you want, scroll back up and click on Apply Filters. WordPress will then display the themes that have your keywords applied to them:
   

   Fig 1.11: A filtered list of themes

5. Scroll down the themes on display and choose the one that you like the look of. Hover over it with your mouse and click on Preview to have a look at it or Install to install it. Installing it won't do any harm; if you don't like it, you can always uninstall it afterwards.
6. Once you've installed your theme, you'll see a screen telling you that it's successfully installed. It still isn't running on your site yet; to make this happen, click on the Activate link.

Next, we'll learn how to customize a theme for our own needs and change its settings.

Customizing your theme using the theme customizer

The theme customizer is a great WordPress feature that lets you make tweaks to a theme and see what difference they make without saving your changes, so it won't be visible to anyone visiting your site until you're ready.

Different themes offer different customization options, which vary from just editing the title and description to more comprehensive options such as customizing colors and layout. You can also edit widgets from the customizer.

I'm going to use a theme called Pinboard, which is responsive for mobile devices and offers the option to customize colors and the header and background image. This means I can create a bespoke site meeting my needs.

To install the theme and customize it, follow these steps:

1. Click on Appearance to go to the Themes screen and click on Add New.
2. In the Search themes... box, type Pinboard and hit the Enter key.
3. WordPress will display the Pinboard theme for you. Hover over it with your mouse and click on the Install button.
4. When you see the installation success screen, click on Activate.
5. Next, in the Themes screen (click on Appearance if it isn't already open), click on the Customize button for the Pinboard theme.
6. This will open the theme customizer:
   

   Fig 1.12: The theme customizer

7. Start by editing the background image. Click on the Background Image link to the left. To remove the wood graphic, click on the Remove button.
8. Click on the Colors link on the left and select Background color. Choose a color using the color picker. I'm choosing white, which will look quite nondescript for now, but will be better once I've made some other changes. Note that you can click on a color or type in the hexadecimal code.
9. Finally, click on the Save & Publish button to save your changes.

Note

Hexadecimal codes are codes made up of six letters and numbers which tell a browser what color an element is. They are always preceded by a # and are used in HTML and CSS files to define the color of backgrounds, text, and more. For more on hexadecimal codes, visit http://en.wikipedia.org/wiki/Web_colors.

We're not going to edit any more using the theme customizer because this theme has extensive options screens, which let us do more. Some themes have more options in the theme customizer and don't use separate options screens; it all depends on the way the theme has been designed.

Tip

Important: If you want to edit your theme's code, do this using a code editor. Never use the editor that you can access via Appearance | Editor. Using this means, you can't undo your changes and could break your site. So, avoid!

Let's take a quick look at how the site is looking with this theme. To view your site, click on the link in the admin bar at the top of the screen with the title of your site; in my case, it's WordPress Blueprints.

Here's the site:

Fig 1.13: The site with the Pinboard theme activated

Customizing your theme via the Themes options screens

This theme has multiple options screens, which we can use to make more changes. Not all themes will have these; it depends on the features that the developer has added.

Customizing colors

Let's make some changes in colors by following these steps:

1. Go back to the admin screens by clicking on your site's name in the admin bar again.
2. Click on Appearance | Theme Options to open the theme options screens.
3. Click on the Design tab. You'll be presented with a range of color pickers to help you define the colors in your site; either pick a color or input the hexadecimal code for your color.
4. Tweak some of the colors, trying to stick to a palette of colors that work well together. I'm using a palette of blues.
5. Click on the Save Settings button and view your site. Here's how mine looks:
   

   Fig 1.14: The site with colors adjusted

6. Repeat steps 3 to 5 until you're happy with your color scheme.

Customizing fonts

One of my favorite features of this theme is the fact that you can customize not just colors, but fonts too, a feature which not many themes have. So let's do this by following these steps:

1. Go to Appearance | Theme Options and click on the Typography tab.
2. There are three dropdown lists for fonts—Default Font Family, Headings Font family, and Body Copy Font Family.
3. Select a font you like for each. I recommend sticking to a simple, legible font for body copy, and making the heading font more interesting.
4. Scroll down to the Font Sizes options and make any changes you need for your design. Here, you can copy the font sizing that you used on your old site, if you want a similar look and feel.
5. Next, scroll down to the Colors options and make changes to the text colors. I'm making some changes to tie in with the changes I already made to the background colors.
6. Click on the Save Settings button and view your site. Here's how mine looks:
   

   Fig 1.15: The site with font changes applied

7. Repeat steps 2 to 6 until you're happy.

Tip

If you've been making lots of changes quickly, you might find that they don't all show up. If things aren't working as you expect, just save your changes and refresh the screen.

I'm just going to leave it at this for now, but if you want, you can explore all of the Themes options screens and make more changes. Now that we've done some work on the design, it's time to tweak your site's settings.