A Beginner’s Guide to Customizing a WordPress Site

October 1, 2013 in WordPress tips & tricks.

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 to use 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.php file. 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

Code
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 the Canvas 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.

Photo Credit: iamshinji

WooCommerce Bookings

9 Responses

  1. csfalcao
    1 October 2013 at 11:07 pm #

    It would be so cool if I just pressed a button to create a child theme…

  2. Susan
    4 October 2013 at 12:28 am #

    Thank you for this. I’ve learned most of this by the seat of my pants, but its nice to see it laid out like this and is a good review for me to refer to. I’m not a developer or a designer – just a person who makes my own simple websites and for a few friends. We aren’t all high tech who use Woo and it is nice to be remembered. I am amazed at what I have been able to create using Woo themes.

    Maybe that would be a fun thing to do for the more naive among us…..look at not the really amazing websites people create (although inspirational) with lots of developer knowledge, but some that made some easy to do changes and really made the site their own.

    • Susan
      4 October 2013 at 12:28 am #

      Thank you for this. I’ve learned most of this by the seat of my pants, but its nice to see it laid out like this and is a good review for me to refer to. I’m not a developer or a designer – just a person who makes my own simple websites and for a few friends. We aren’t all high tech who use Woo and it is nice to be remembered. I am amazed at what I have been able to create using Woo themes.

      Maybe that would be a fun thing to do for the more naive among us…..look at not the really amazing websites people create (although inspirational) with lots of developer knowledge, but some that made some easy to do changes and really made the site their own.

  3. Bradley Charbonneau
    4 October 2013 at 10:36 am #

    Thanks, Tom! I especially like your quick example of how a tiny bit of code can save using a plugin.

    About child themes for Canvas, I created a super-simple, completely empty, no-features-at-all child theme for Canvas free for download:

    Clean Canvas

    It has no features, no styling, just a blank ready-to-go child theme to get started with. Hope it’s helpful to the WOO community.

    One thing I hear sometimes is that people are concerned that the features of Canvas will be lost if they use a child theme. Quick answer: no! The child theme is in addition to the Canvas theme. So you still get the huge array of layout, design, and functional features of Canvas while protecting it from upgrades by using a child theme.

    Thanks for the post, Tom!

  4. Bradley Charbonneau
    4 October 2013 at 11:29 am #

    On the child themes note, I’m going to up the ante and add a new Canvas Child Theme called:

    Canvas Kaapstad

    Kaapstad is the Afrikaans name for what we call in English: Cape Town, the beautiful city in South Africa which is the headquarters of WOO.

    It’s an example of how, with just a few lines of code (25 to be exact) we can take a simple function and a tiny bit of styling and do something that’s a struggle in Canvas: to put the main navigation into the right side of the header. Can you do that to an empty Canvas child theme? Of course … if you know where to put the right code. But here it’s done for you.

    I’d love to see more child themes that did this sort of thing: delivered maybe a feature or style or two that people want with a simple child theme and a few lines of code–that the user would never have to touch and they still benefit from the power of Canvas.

    On a final child themes note, can I put this up in the wordpress.org themes directory? Are child themes of Canvas allowed in there? What about premium child themes for Canvas? Can we offer those in something like ThemeForest?

    The power of the Canvas Child Theme is a great tool, but then one more secret: you can use “Import Settings” in the WOO Framework to export (and then import) all kinds of customizations that you made in one site and import them into another. It’s almost a child theme of the child theme … what’s that? A grandchild?

    The fun is just beginning.

    Thanks again, Tom!

  5. David White
    23 October 2013 at 6:21 am #

    Thank you very much for the great tips! Very easy to follow :)

  6. Nicky Helmkamp
    4 November 2013 at 11:52 pm #

    Hey Tom! We featured your article in our monthly resource roundup, just wanted to let you know.
    http://blog.nexcess.net/2013/11/01/monthly-round-up-octobers-best-expressionengine-wordpress-magento-content/

    Cheers!