Tutorials

Customize our premium WordPress themes and stand out from the crowd.

Customizing a WordPress Theme The Right Way

http://colorlabs.co/MvXeyY

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.phpheader.phpsidebar.phpfooter.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.

  • http://braginteractive.com Brad Williams

    This is a great tutorial if you are using a colorlabs theme. Would have been great to show your readers how to do these steps without your theme options.

  • millie

    I’m trying to use this ‘star’ thing and it just keeps on going minus and taking me back up to the top of the page! didn’t want to imply I didnt like the tutorial. It was very good! so I’m leaving this comment in case you wonder why the star rating is so weird! All the best!

  • Andrew

    I heard that it is best to always make custom changes on a child theme, that way you don’t have to worry about your site reverting to default code when updating.

    • ningtyas991

      HI Andrew, using a custom file editor like what she did is very simple and safe rather than using a child theme

  • ningtyas991

    Hi Sergio,

    If you want to assign a person as author, that person’s e-mail address should be first registered at your WordPress site.
    To register a new user, you can give that person this link: http://www.your-site.com/wp-login.php?action=register or, you can install a plugin like ‘Social Connect’, so people don’t have to register via WordPress. They can login with their Facebook, Yahoo ID, or Google+ ID.

    Also make sure if at: WordPress dashboard > Settings > General, at the option ‘membership’ you have enabled ‘anyone can register’

  • http://www.facebook.com/regina.scharf Regina Scharf

    Hi, Yanni, great tutorial!

    I was wondering: I need to add static content in the front page, instead of the Headline Spoiler. Should I use the Custom file editor? Thanks!

    • ningtyas991

      Hi Regina,

      If you want to hard code your theme, then you’d better to create a child theme. so, if there is an update for theme, your work will be save and you can update your theme without any problem

  • Ashish

    I need to know if I can make changes to the text in the footer and if so how can I do it for Lensa WordPress theme?

  • Temitayo

    hallos… dis mayb b off topic bt im tryn to quickly design a brochure website for my company… editing the free themes for wordpress is giving me some hassles dunno if anyone could recommend a theme that that caters specifically to brochure websites with static pages

  • Temitayo

    hallos… dis mayb b off topic bt im tryn to quickly design a brochure website for my company… editing the free themes for wordpress is giving me some hassles dunno if anyone could recommend a theme that that caters specifically to brochure websites with static pages

  • Gigih Wahyudi

    Hi, Yani !

    Please let me know how to make a fixed menu ? I use ‘Lensa’. I already set “fixed” and set margin: 0; but wont give me a good result. Here’s my custom..

    /*
    CUSTOM STYLESHEET
    ———————

    Instructions:

    Add your custom styles at the end of this file instead
    of style.css so it is easier to update the theme.
    Simply copy an existing style from style.css to this file,
    and modify it to your liking.
    */
    .left, .fl {
    float: left;
    margin-right: 15px;
    }
    .header-section {
    position: fixed;
    margin-top: 0px; width: 100%;

    }
    .main-content {
    margin-top: 0px;

    Please advise !

    • Gigih Wahyudi

      oops, look nicely, now..

      here is my custom..

      .header-section {
      z-index: 100;
      position: fixed;
      margin-top: -71px; width: 100%;

      }
      .main-container {
      margin-top: 71px;
      }

      • ningtyas991

        Hi Gigih, you can use this code:
        .header-section{

        position: fixed;
        width: 100%;
        top: 0px;
        }

  • http://rulookingfor.com/ sam

    Tanks for an excellent tutorial. Thanks for sharing it.

  • http://www.webexperttips.com/ Chelsy Brown

    Great tutorial and good work . Keep it up .
    Thanks for sharing this tutorial .

  • Alexis

    Hello! Thanks for this tutorial! Really helpful!
    I have a question: my website is in French and I would like to know how I could change the text of the contact form (fields + buttons).
    Thank you very much for your support!
    Alexis

  • Angie

    hi Yanni. Thanks for the site. I am also new at blogging and I am having a bit of difficulties getting the features photos to be displayed in the welcome page (first page that opens when entering the site). Also, I was preparing the blogs and I got an error page…I can’t correct it…I am not a tech savvy, how can I correct both situations?
    So maaannny thanks for your reply and help.

  • Charlotte

    Hi, I really love this theme … other than one feature! One of the things I liked was having a sidebar, yet that option only seems to be available when a ‘blog’ page is selected. Could you tell me either how to create a sidebar with the ‘default’ page selected OR…
    I’ve tried using plug-ins that refer to a post when I have ‘blog’ page selected, but I can’t work out how to display the full post, rather than the excert that’s selected.
    p.s. I have already gone into Settings>Reading and selected ‘full text’ but that doesn’t seem to make a difference.

    Many thanks in advance

  • Guy

    How do I get a background photo to upload to my home page only? I have Parasol and I can’t get a photo onto that center rectangular part of the home page.

  • juliana jones

    Thanks Yanni. Very informative article.
    via codingbrains dot com

  • EZ

    Hi People of Lensa, Thank you for the beautifull theme, I am trying to add a welcome text to the header, with , but it doesn’t show the content.
    I have created a welcome.php file in the childtheme, copied the header to here and the code above.
    Anyone who can help .?
    Thank you for your help,
    EZ