A Beginner’s Guide to Customizing a WordPress Site

If you’re new to WordPress, the thought of tinkering with its code can be a daunting one. But in reality, there are many simple things you can do in order to customize the look and feel of your site without risking disaster.

I recommended that you avoid making changes to themes directly. Creating child themes and working with offline files are the safest ways to make any changes to the code. Working this way means that way if you do happen to inadvertently create any issues on your site while tweaking it, you have the original files and can quickly re-upload them to overwrite your changes.

With that said, let’s take a look at what you can do to make get started customizing your WordPress design.

Create a Child Theme For Your Theme Customizations

The recommended option for doing any form of theme customization in WordPress is touse a child theme. A child theme is a theme that inherits the style and functionality of another theme, called a parent theme.

Child themes allow you to add new functionality and style changes without ever altering the parent theme files. This is especially useful if you ever update the parent theme. If you have made changes directly to the parent theme, any update will wipe them out and you will need to spend time recreating them all.

Child themes are never touched when a parent theme is updated, making them the perfect way to alter your design.

Creating a child theme is a simple process. All you need to do is create one folder and one file. On your local computer, create a folder with the name of your child theme. The most sensible way to name it is simply parentthemename-child. So if you were creating a child theme for our Canvas theme framework, you would call it canvas-child. You might also add a unique identifier onto this name, like canvas-child-yourname.

Create a file called style.css within the new folder (you can do this with a text editor — just remember to add the .css suffix. This file needs specific information inserted into it so that it knows it is a child theme. Add the following code within your style.css file:

/*
Theme Name: My Child Theme
Theme URI: http://mysite.com/
Description: This is a custom child theme I have created.
Author: My Name
Author URI: http://mysite.com/
Template: parenttheme
Version: 0.1
*/

This code contains mostly generic information, but there is one line you must change in order for the child theme to work. The Template line must be changed to show the name of the parent theme you are relating your child theme to (e.g. “Canvas”).

With this information added there is one other important step required. As it stands your child theme has no styling information whatsoever. In order to give it the same initial design as your parent theme you need to add the following line of code:

@import url("../parenttheme/style.css");

In this code you will need to alter the parent line to match the folder name of your parent theme.

Once you have made these changes and saved your style.css file it is time to add the child theme to your WordPress installation. You can do this by connecting to your web host with an FTP program (such as Filezilla) and browsing to the /wp-content/themes/ folder. Once you are there you should upload the child theme folder containing your new style.css file.

With the folder uploaded you should then be able to see and activate the child theme in your Themes area of your WordPress dashboard. You can now edit the style.css theme of your child theme to make design tweaks while retaining the basic theme design from the parent theme.

For more complicated customizations to your child theme you can include a functions.phpfile. This file allows you to change the functionality of your theme and should be created and added to the child theme folder when you want to make changes to your theme’s functionality.

WordPress have created a detailed section in their codex discussing child themes if you would like to learn more about them.

Edit the Style.css File to Make Customizations

There are a vast number of options you can add to your stylesheet to change your design. These changes are common to all themes, though most themes include custom section names that will vary slightly depending on the parent theme you are using.

Adding code to your style.css file can enable you to:

• Change the color scheme of your website
• Alter the typography and text size
• Move sections of the site around (such as the navigation bar)
• Change the way images are displayed
• Add or remove design information depending on the area of the site
• Make thousands of other design tweaks

Let’s take a quick look at a one of the simple styling options available to you.

Changing the Link Style

Whenever you add a link to your site they are all usually controlled by a simple style option. There are four link states that will need to be looked at. They are:

• a:link (or just “a”) – this is a normal, unvisited link
• a:hover – this is what happens when you hover over a link
• a:visited – this is a link the user has already visited
• a:active – this is a link at the moment it is clicked

You can use all of these options if you like, but the important ones are the unvisited link and the hover link. For our example, let’s make all of our links red with no other style decoration and the links you hover over have an underline style decoration:

a {
  color:#ff0000;
  text-decoration:none;
}
 
a:hover {
  color:#ff0000;
  text-decoration:underline;
}

If you are using the Canvas theme we covered a small selection of tweaks that you can make to the styles.css and functions.php files.

Use Custom Code Rather Than Plugins

Plugins are a wonderful aspect of the WordPress community. There are plugins out there that allow you to transform your website and enable you to do practically anything you can think of. However, constantly adding plugins is a great way to make your website bloated and slow its load times down to a crawl.

Plugins often require more code than is necessary for the jobs they carry out, simply because of the manner in which they interact with the core WordPress software. Each plugin also comes with management issues as you need to spend time updating them, as well as potential security issues if the plugin hasn’t been updated by the developer in a long time.

There are plugins out there that resolve one simple design aspect of your site, but often require additional code and files. Many of them can be replicated with a few lines of code added to the correct files which will reduce the overall load on your website and keep things tidier.

Let’s take a simple example. There are plugins out there that allow you to remove the titles from your WordPress pages on a page-by-page basis. That can be a useful feature if you want to hide the title of certain pages in order to give readers a smooth transition into the content.

However, with a few simple lines of code you can achieve the same effect. To show you how simple this can be, here is the code to add to your style.css file to do this with theCanvas theme:

.page-id-xxxx .title {
display: none;
}

In that example, replacing the xxxx with the page ID number will remove the title from that specific page. Simply add the code for every page you want to remove the title from.

Plugins for more complex jobs are essential and part of what makes WordPress great, but before you add one for any simple tasks on your site, take the time to stop and do a little research. You will often find a simple piece of code that can do the job instead.

I’ve talked about the danger of plugin ignorance before, but it really should be repeated. Adding plugins to your site without investigating whether there is a simple way to replicate its function is ignorant at best and lazy at worst. Every time you install a plugin you are putting the health and speed of your website into someone else’s hands.

Start Customizing Your Own Site Design

There are a vast number of changes you can make to customize WordPress to suit your own needs. They range from simple tweaks, to customizing color schemes, to the extremely complicated changes that alter the structure of your website.

WordPress customization can seem like a scary process to begin with, especially if you are new to the CMS. There are themes (like Canvas) that allow you to make some of those customizations with a point-and-click style design menu that help to take away some of that initial fear. These are amazing for you in the beginning of your customization journey.

However, if you spend some time using a child theme and the style.css file, you will learn to play with the building blocks of WordPress to create stunning website designs.

Have you started your own journey into WordPress customization and have any advice to share? Please let us know in the comments below.