One way of making visitors keep coming back to your website is by having an attractive and unique design. If your business already has a WordPress-powered website, it is possible to have its look and feel matches your business/brand image without doing a complete re-design and without paying thousands of dollars to have the website developed. Nowadays, the internet almost has answers to all of our needs. By searching on Google you can find many kind of code examples, forums, tutorials and even outstanding innovations that enable anyone to build websites with little web development skills and knowledge.

Editing and customizing WordPress themes can be very intimidating if you are not familiar with how they work, but with some assistance you can have a unique design for your website in no time. This tutorial guide will teach you how to customize a WordPress theme the right way.

Just How Important Customizing a WordPress Theme is Anyway?

Before we start the tutorial, you need to understand why a brand or image is important for your site. A website is an opportunity to extend your reach to audiences who have never seen or experienced your company before. A unique website design will put your business, and your message, front and center to properly convey the value of your product or service. There are probably many sites that is using the same theme as yours, and you need to distinguish yourself from your competitors in every way possible.

Identify the Structure of a WordPress Theme

Before you begin doing changes, you need to understand the structure of the theme and how it works. If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page. For example, when viewing the front page of your WordPress site, you are actually viewing several template files: index.php, header.php, sidebar.php, footer.php. Those files will generate the final “look” and content of the front page of your site.

The core structure of a standard WordPress theme are a header, a sidebar, a content and a footer. WordPress Themes divide up the core structure between blocks called template files (PHP files). These are the template files:

• Header : The header is the structure that traditionally sits at the top of a web page. It has the site’s title, logo, menu, or some additional contents. The header is found within the header.php template file.
• Sidebar : Most themes have sidebar on either left or right side or both. The sidebar is found within the sidebar.php template file.
• Content : The content holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user. Generally for the front page a theme uses an index.php file, but for themes that has a unique function need to combine it with another templates, such as featured.php for featured area.
• Footer : The footer containts information at the bottom of a web page or another additional content depends on theme’s style. The footer is found within the footer.php template file.

Customizing a WordPress Theme

After you know which part of your website you want to alter, we can start customizing. There are two types of customizing we’ll be doing in this tutorial :

1. CSS Style Customizing
2. PHP Customizing

The first thing you should do is open your WordPress dashboard and see whether your theme support direct customization via the dashboard. If it doesn’t then you need to open the template files using FTP.

When you do customization via the WordPress dashboard, some of the codes are hidden to prevent a directory browsing or wrong codes that will make the site not running well. For example the index.php file has intentionally hidden codes, because this is the one of the more important file for the site to run, so you need to open this file using Control Panel > edit file or maybe using FTP.

1. Login to The Admin Area.

This tutorial is using a ColorLabs WordPress theme that has its own dashboard interface, so first you have to learn and understand the dashboard’s functionality (more detail about this functionality at themes documentation).You can do many customization on the ColorLabs Theme Options. But now we will guide you on doing some simple customizations outside from the ones available on the Theme Options. There’re file editor tools available on the dashboard: the default editor from the theme and the default editor from WordPress.

Theme – Custom File Editor. A Custom File Editor is available from within the WordPress admin panel, which allows you to make changes to your custom.css (and custom_functions.php if you want to add new functions) without the need for an external text editor or FTP program. Or you could upload a new custom.css from your computer using an upload field on the top of the panel. Most of the changes you will be making will be done to custom.css.

CSS code example :

#topmenu a { color: #333333; }

Function code example:

Function newCode {
/* your codes here */
}

Appearance > Editor

By opening this editor, you will see list of files with codes inside (except for index.php). Most of the time, we are using this editor to customize the php code, but sometimes by opening this editor you can customize default css style from the theme’s style.css.

Have a look around, go to different site to find inspiration, get a basic idea on how you want your website to look like. The first things visitors see is home page, so making it attractive and informative is your #1 task.

We know that WordPress sees the layout as a combination of a header, a body (content), a sidebar and footer, visualizing your existing website in the same sections will make the customization easier.

2. Placing Your Company Name / Logo on The Site’s Header

Now we will guide you on adding your company’s logo as a header instead of title. When the logo has a big size, you may need to change the style of the logo size, or you want to have a wide logo instead of another Ad, text, menu, and form near the logo. This will need you to change some codes and remove some. At above page, we see that there’s a logo with another image/Ad beside it on the right side. We can change the logo at dashboard setting :When we wanna use a bigger size or wider size for logo, example want to have a full logo wide at the top section, so you need remove some code for the right side content, you can upload the weide logo using a dashboard and you will see the result below :Right now, it still follows the default style for logo from the theme and we need to adjust the position, so you need to change some style using CSS code to make it looks better.

Remember how a page has structures and template files? The logo is located at the top of the site so it’s in the header section. So now you have to open header.php. At this point, we want to make the width bigger. Locate the “<div id=”header”>” section of the header.php file, see below for the example :

Focus for the logo that use “fl” class for div tag, and at above codes there’s still another div that makes the logo small, it’s “col9″ div tag. So we only need to use &#60div class="fl"> and remove all &#60div class="col9"> codes.

It would be better if you change the class for “fl” and make your own style. For example, change the class for “fl” to “logoWide”, so when we custom the css style it won’t effect other style that probably use the same class. After you change the class, now it’s time to customize some css code to make the width for default logo wider, need to resize, add new style, or maybe change style from the default style at style.css. To make it easier, you don’t need to change default style at style.css file. When you want to make a different style even it’s the same class / id, you can put the new css codes at custom.css (see the above explanation for editing on custom.css editor)

For this example, below are the codes needed to make a new style for logo and make the logo wider.

.topmenu .menu-block {border-bottom: medium none;margin-bottom:none;background: none repeat scroll 0 0 #622155;}
body {margin: 25px 0;}
#header{background-image: url("images/swirl.png");}
.logoWide{width:900px;height: 243px;}
.logoWide img{position:absolute;margin-top:-30px;}
.logoWide p{float:right;width:500px;}
.topmenu{margin-top:1px;}

And below is the result for this simple step, you can customize the rest of the style if you want to.

From the logo, usually we will have more inspiration on how we want the rest of the website look like.

3. Adding New Functions to The Theme

When we need to improve something that needs new custom functions added to the theme, you don’t have to hunt where’s the function are located, because we located all new fnctions at custom-functions.php. One of the things that I like about these functions is that they’re all so concise, simple, and effective.

Not only this, there’s many examples for customizing your site, from adding new function, change the layout, add new layout, integrating with plugin, etc. To change the layout, you need to see correctly what file and what part/section that you want to change, duplicate, remove, or replace to do for this custom. Check the codes carefully for every tag, line, characters, function that needed for each section on the layout and after that you can continue to change the layout using the codes available at the template.

4. Updating a Theme Version of a WordPress Theme That Has Been Customized

Now it’s time to save your customization code when there’s a new theme version update. A new theme version usually comes out when there’s a new update version of WordPress, plugin, framework and also the theme itself. When there’s a new theme version you must becareful to update the theme especially when you had done some customization to it. You need to follow these steps to prevent unwanted things from happening before you update a theme version if you have done some customizing to the theme:

1. Note down or make a list of the files that you’ve customized.
2. Copy all codes at Custom File Editor > custom.css to your local driver, name it with your own.
3. Copy all codes at Custom File Editor > custom-functions.php to your local driver, name it with your own.
4. Download the new version of the theme, then extract it at your local driver.
5. Based on the list of the customized files you’ve made (step #1), it’s time to break down your files at your new version theme folder before you upload theme to the server. Because, when you automatically active / update the new theme version, it will render to a default theme again and you will loose all your customization code. So, please be patient for this to break down the files.
6. Still at your local. At the new version theme, replace some codes/files in this theme folder with codes/files that had been customize. You can copy/paste custom codes/files using a dashboard or maybe use the ftp. That’s why the check list is very important to prevent a mistakes codes/files replaced. This step not appliacble for #2 & #3 step when you copy paste codes from custom.css and custom-functions.css, because you will copy paste this codes at the same place after you active the newe version theme
7. After it’s done to break down the files, and copy/paste custom codes/files to your new theme version, now to make a child theme in the site you need to rename the theme folder i.e backbone_new. Be careful when renaming the folder, some character will give a bad effect to the site, it may cause the functions in your website won’t works perfectly or the worst things is make your site is a blank screen.
8. Now you can upload the theme folder to the server and then active it.
9. As we mentioned above, now it’s time to copy paste codes from your temporary custom.css & custom-functions.php (see above step again), paste all codes at the same place at the dashboard > custom.css & custom-functions.php
10. Check and trial all the steps one by one from beginnning, make sure you had did all those steps
11. Running your site with a new version theme, see the customize there with an update theme version
12. Do the same step when there’s another update theme version for the future
13. Have fun experimenting! :D

Hope this tutorial is helpful and give you an idea to start making your site as you needed. Please let us know if you have any question or issues, and we would be glad to help you out.