The Basic Guidelines of Theme Customization

5 Comments

Customizing a WordPress theme is fairly easy. Most themes are developed to be easy to use anyway, so you can put up a decent looking site without touching a single line of code. But sometimes, you cannot make the most of what a theme offers without making small tweaks in the theme’s code.

In this post, we’re going to look at how to customize a WordPress theme the right way. You will not become an expert at building WordPress websites but you will have a better appreciation of how to approach theme customization.

But first, why is theme customization important?

Well, if you bought a WordPress theme today – or maybe downloaded a free one – chances are hundreds of other people did just the same. That means the theme you’re going to use is probably being used on hundreds of other websites.

For that reason, your website will be as unique as your customization allows, so this is why theme customization is important and why you should approach it the right way.

Also, with customization, you can tweak a theme to do exactly what you want. It can be intimidating but it doesn’t have to be.

Follow this simple guideline when you want to edit a WordPress theme.

Understand the Structure of a Theme: Template Files

All WordPress themes follow a basic structure that you should be familiar with if you want to properly edit the theme files.

WordPress uses template files to load and display content on a requested page. A theme’s template files are stored under /wp-content/themes/theme-folder.

The key template files that you will be editing are header.php, footer.php, sidebar.php, and index.php. These are the core template files of a standard theme.

Another file you’ll be heavily editing is the style.css file. It basically controls how your website looks.

The basic template file that WordPress loads by default is the index.php file (provided there is no other template file that supersedes it in priority). It is also the only template file that’s needed for WordPress to load a theme.

With this basic intro to the structure of a WordPress theme, you’re now ready to start customizing your theme.

How to Customize a Theme

As I hinted earlier, customizing a theme’s look is basically about editing the style.css file, along with the header.php, footer.php, sidebar.php, and sometimes the index.php template files.

Step 1: Create a Child Theme

Before you touch any of the files mentioned above, you should create a child theme. It is not a must that you have to create it but it is the smart way to customize a theme.

A child theme is basically a folder containing a style.css file that inherits all styles of the parent theme.

So, create a folder in /wp-content/themes and provide a suitable name (such as twentythirteenchild).

Create a new CSS file and save it as style.css inside your new child theme folder. Copy the following lines of code and save the file, changing theme name and template to your own.

pic1

There’s a lot more you can add to the comment section of your style.css file, but it’s all optional except one line:  Template: twentythirteen. This is what you should be concerning yourself with as it specifies the particular theme that is being inherited. Replace twentythirteen with the folder name of your theme under /wp-content/themes/.

And with that, you’ve just created a child theme for the theme you want to customize. This gives you a safe space to edit or customize the parent theme without editing its original files.

Correction

Since this post was published it has been pointed out in the comments section that the official WordPress codex has been updated, adding a recommended step to this process.

In addition to the new style sheet you created above, it is also now recommended that you create a functions.php file for your child theme and use the wp_enqueue_scripts action as the safest way to add/enqueue styles from your parent to your child theme.

All you need to do is the following:

1. Create a plain text document and name it functions.php

2. Place the following php code inside that file

(<?php)
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

3. Save and place your new functions.php file in your newly created child theme

Step 2: Override Parent Styles

Once you have your child theme, you can start the actual editing of your theme without worrying about messing about with the original files. The style.css file you created is where you’ll do most of your editing.

To edit your theme, go to the admin dashboard and load the child theme you created in the previous step so that you can view the changes in the browser as you edit the styles.

To edit any part of your theme, load the page in the browser and then use something like Firebug to inspect the source code.

pic2

You’ll be able to see the exact styles you want to edit. Simply copy that code and paste it into the style.css file in the child folder and then edit the code as you want.

pic3

 

Step 3: Override Parent Template Files

Editing your theme’s CSS is great and fairly straightforward if you’re conversant with CSS. However, if you want to customize your theme beyond aesthetics, you need to edit its template files.

Depending on the complexity of what you want to achieve, you may need to write some PHP code. Needless to say, you need a basic understanding of PHP in order to be able to edit template files.

To edit a template file, copy the original file in the parent folder and paste it into your child folder. Then, make all your changes in the new file.

For instance, if you wanted to make changes to the footer section of your theme, you’d copy the footer.php template file into your child theme and then make the necessary edits there.

Since version 2.7, WordPress checks in the child theme folder first (if there is one) for template files. If an alternate template file exists in the child theme, WordPress uses that one instead of the alternate file in the parent theme folder.

You can even make edits to a particular category using the template file category-ID.php where ID identifies the category.

Wrapping Up

This  basic guideline provides a solid foundation for you to customize your WordPress theme. You could edit the template files directly but that is unwise and certainly not recommended. This is the smart way of doing it.

Creating a child theme allows you lots of space to mess about and experiment with different things without being concerned about messing up code in the parent template files.

You also realize that if you don’t know PHP, you may be limited to only modifying the theme’s look via CSS. You may want to leave template file modification to a theme developer who knows how to properly customize them.

Hopefully you’ve learned something new and don’t mind sharing additional tips about theme customization you know.

Newsletter

We never spam. Subscribe to receive inspiration, news, and ideas in your inbox.

 

Brenda Barron is a writer from southern California. Her work has appeared on sites like Elegant Themes, WPMU DEV, and VentureBeat. She also blogs at Digital Inkwell about the life of a freelance blogger.

 

Our Themes

Zap

Zap is a premium business theme with an amazing set of unique features like before/after slider, team profile, testimonials, and…
This is a premium WordPress blogging theme that is well suited for all kinds of blogs. Whether it is a travel…

Guide to Getting Started with WordPress

Twelve free easy-to-follow blog posts covering all the essentials every WordPress user needs to know.

Cohhe WordPress tracks

Get news by email

We never spam. Subscribe to receive inspiration, news, and ideas in your inbox.

More from our blog

Top 20+ WordPress Music Themes For Musicians

WordPress is the most popular online platform for building websites. It is…
Continue reading

20+ Best WordPress Directory Themes

Are you looking to create a directory for a car dealership, real…
Continue reading

WordPress Popup plugin

Popups is a great tool for marketers but you have to be…
Continue reading

Leave a Comment

5 Comments
  1. Reply

    Whoops! The correction is now indicated above.

    Errors happen; I wouldn’t call them a regular occurrence on the site but of course we’re not perfect.

    I think the reason this one wasn’t fixed sooner is myself and another blogger probably miscommunicated and each thought the other was fixing it.

    I know that Brenda is a great researcher and her posts here and elsewhere are generally of high quality and accuracy.

    • Adam
    • June 15, 2015
    Reply

    The fact that you acknowledge the mistake and make no effort to correct it leads me to think there must be other incorrect information on this website.

  2. Pingback: Weekly WordPress News: New Theme Directory Layout, #VATMESS & 40% Off WPLift Review Offer

  3. Reply

    Brenda, you may want to check the WordPress Codex again concerning Child Themes. They have moved away from the practice of importing the parent styles and now recommend wp_enqueue_style() as the proper way to reference the parent style sheet.

    • Reply

      Once again, thanks for bringing this to our attention Tracy. You’re on it!