How to Customize my Themes without Changing Coding

Posted by on Dec 28, 2009 in About My Themes | 6 comments

This guide is very useful for the graphic designers who have little or no knowledge about theme coding. See how I turn my Wooden Fence theme into a kids topic below.

There is no such theme that fits all topics. Though I have created themes in many topics, you may not find the one most suitable for your blog.

At TemplateLite, I want to allow my theme users to have greater control over the look of my themes while keeping the core coding intact. You only need to change the graphic part to suit your topic. Minor modification of the font style is needed sometimes.

Before I start out, it is important to stress and explain why I don’t encourage changing the core coding in the whole customization process.

Reason #1

You may mess up the coding that makes the customization become very complicated and difficult.

Reason #2

Since you are not changing the coding, whenever a theme upgrade version is made available in this site, you can download and install the upgrade without having to develop your own upgrade version of your customized theme. This will save you a lot of time considering WordPress is constantly upgrading and improving it’s platform quite frequently.

In this tutorial , I am taking the Wooden Fence theme and show you how to customize the header and footer to suit your sites topic.

First of all, take a look at the theme before and after customization viewed at a resolution of 1600px.

Before Customization (Parent Theme)

Preview Theme | Download Theme
After Customization (Child Theme)

Preview Theme | Download Theme

You can see that the changes made to the theme include ONLY the header and the footer section. The design in the content and the sidebar area are left intact.

This is how I did it.

Step 1
Open the PSD file of the Wooden Fence theme. The header and footer design is shown below.

Header Design (Parent Theme)
Footer Design (Parent Theme)

Step 2
Turn off the layers above the wooden fence (make them blank).

Header Design (Parent Theme)

Step 3
Design your own header. In this particular case, I designed a stitched frame with 3 adorable children, rainbow, color pencil, and some kids playing kites.

I assume you possess the intermediate/advance Photoshop skill so I am not going into detail as to how I created them. This guide is mainly for graphic designers to customize the theme image without changing coding.

Header Design (ChildTheme)

Step 4
Now, repeat the same procedure in the footer. First, turn off the layers in the footer in front of the wooden fence.

Footer Design (Parent Theme)

and add your own footer image to it.

Footer Design (Child Theme)

Now you have completed the header and the footer design. The next steps will be slicing the right images to the correct size. To do it correctly, you need to open the header and the footer images of the parent theme to get the dimension.

Step 5
Under the parent theme’s “/images” folder, find all the files containing the header area that you have modified. There are only 16 image files (some of them are icons) in this theme so it would be easy to find the right images.

Files in “/images” folder (Parent Theme)

In this case, “bg_header.jpg” and “bg_top.jpg” contains the header area that you have modified in the PSD file.

Step 6
Open these two files and measure their dimension.

bg_header.jpg (Parent Theme)
bg_top.jpg (Parent Theme)

Step 7
In the modified PSD file containing your new design, slice the header using the exact same dimension. For “bg_top.jpg”, you need to turn off some of the layers in the center part of the header image to make them blank.

bg_header.jpg (Child Theme)
bg_top.jpg (Child Theme)

After that, save the two modified images as “bg_header.jpg” and “bg_top.jpg” and overwrite the two files in the “/images” folder.

Step 8
Repeat the same procedure for the footer images. Under the parent theme “/images” folder, find all the files containing the footer area that you have modified. In this case, “bg_footer.jpg” and “bg_btm.jpg”

Then measure the dimension of the images.

bg_footer.jpg (Parent Theme)
bg_btm.jpg (Parent Theme)

Step 9
In the modified PSD file containing your new design, slice the footer using the exact same dimension. For “bg_btm.jpg”, you need to turn off some of the layers in the center part of the footer image to make them blank.

bg_footer.jpg (Child Theme)
bg_btm.jpg (Child Theme)

After that, save the two modified images as “bg_footer.jpg” and “bg_btm.jpg” and overwrite the two files in the “/images” folder.

Step 10
Now, upload the images to your server to replace the old files and refresh your theme in the browser to see the changes.

Congratulations! You now have a new theme design that suit your blog’s topic!

After Customization (Child Theme)

Preview Theme | Download Theme
My Other Customization Work

6 Comments

  1. Too many pictures make more time to load . In China the line is much slower than USA. So the less pictuers the better

  2. cool steps to customization, thanks for sharing.

  3. thank you so much!!

  4. Love love love your tutorials!

    Thanks, Glen

  5. I love your templates and your tutorial. Thank you for the time and effort you put in these. Great work!

  6. Hi
    I have just changed to your theme and I am very pleased with it there are not many good dog themes out there.

    Thank you

Trackbacks/Pingbacks

  1. 60+ More Designer and Developer Community News | tripwire magazine - [...] Guide to Customizing Wordpress Themes [...]
  2. 60+ More Designer and Developer Community News | Afif Fattouh - Web Specialist - [...] Guide to Customizing Wordpress Themes [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Experience ThemeMask

View a mask:

Get the masks now!


Theme runs on
Elegantthemes Chameleon