Customize Your Own WordPress Theme

An increasing number of businesses and website owners are using blogs as a means of communication with their customers and website visitors. If your business already has a website it is possible to have a blog that matches the look and feel of your existing website without doing a complete re-design and without paying thousands of dollars to have the blog developed. Using WordPress you can tailor an already existing blog theme to seamlessly flow with the rest of your website.

Why is it important to have a blog that matches the rest of your website?

1 – Maintaining the same design throughout your website will help to give your visitors a consistent experience and message while on your site.

2 – A more professional look can be accomplished by creating a customized theme that matches the rest of the site.

3 – By maintaining a consistent design throughout the site you will allow visitors to focus on the content of your blog rather than focusing on the design and layout changes.

4 – Many WordPress themes are used by hundreds or thousands of websites, whereas your custom them will be unique to your business.

5 – Using a blog layout that does not flow with the rest of your site may confuse visitors into thinking that they have left your site.

Understanding WordPress Themes

Editing and customizing WordPress themes can be very intimidating if you are not familiar with how they work. Essentially, when you are viewing a post on a WordPress blog you are seeing a combination of several different files within the theme. WordPress uses what they call The Loop, a php function that determines what the visitor is looking for and what should be displayed on the screen.


Although the WordPress system is very dependent on php, editing a theme does not require php knowledge. The php portion of coding is contained in easily recognizable portions of code. The html around the php can be changed to customize your theme to your website without changing the php coding. I will not be getting into the details of The Loop in this post, so please see the WordPress Codex if you need information and documentation on The Loop.

As mentioned above, WordPress uses separate files for different sections of the blog page. The header (portion of the page located above the blog post) comes from the header.php file. The blog post (or posts, if you are looking at a homepage or a category page) comes from the MySQL database. Most themes contain a sidebar.php file that appears next to the blog post, either to the left or the right. And the footer.php file contains the information that appears below the post and the sidebar.

Together the header, sidebar and footer files form a template that is applied to every page (although some themes are set to not show the sidebar in certain situations). Because of the template-like structure, any changes that you make to header.php, sidebar.php and footer.php will be reflected on all of your pages. This makes the customization easier as you really only have to customize the template.

Throughout this article we will be looking at a sample blog that I customized for a client from the Kubrick theme. The customization was done to match their existing website. This picture shows which parts of the page are in each of the WordPress files.

Breakdown of a WP theme
Once you understand how these files come together to display in the browser, all you will need to do is adapt the design to match your existing website.

Installing WordPress

If you haven’t already installed WordPress you can do so at http://wordpress.org/download. For this website we use Host Gator (affiliate link), which provides an easier WordPress installation.

WordPress comes with two themes, Default (also known as Kubrick) and Classic. The Kubrick theme is a good starting block if you are creating or customizing your own theme. It is a fairly simple theme with clean and valid coding that has been used by thousands of bloggers. Almost any problem that could possibly occur with Kubrick has already been found and corrected.

However, if your existing website has a more unique design you may want to look for a theme that more closely resembles your layout, which can make the customization easier. You can find a gallery of free themes at http://themes.wordpress.net.

Breaking Down Your Existing Design

Since we know that WordPress sees the layout as a combination of a header, a body (blog posts), a sidebar and a footer, visualizing your existing website in the same sections will make the customization possible.

To start, take a page on your site that you want your blog to match and remove the content of the page. Leave the structure of the design and any images and navigation menus that you want to use on your blog. The blank space where you removed the content is where your blog posts will go. Anything above that will need to be included in the header.php file. For example, the header.php file of our blog theme includes the navigation menus and everything above. The picture below shows the portion of the design that is contained in header.php.

Our Header

Note: This is an older post and the design has since changed. The concept, however, remains the same.

If you’re working with Kubrick, the header.php file also contains the CSS code for the page’s background image. Most likely you will want to replace Kubrick’s background image with your own.

Chances are your existing website already has some type of sidebar. The sidebar may contain your primary navigation, text links to various pages, an email sign up form, or just about anything. Some of these things in your existing sidebar you will want to include in your blog sidebar. The blog sidebar by default includes a search box, links to pages that categorize your blog posts, a blogroll (links to other blogs), and some metadata that includes your login link.

To add content to your sidebar, open sidebar.php. If you are working with the default Kubrick theme your sidebar consists primarily of html code for an unordered list and php code. The php coding is used to generate links to your categories and archive pages. Any html that you want to add can be added in the sidebar, but it should not be placed inside php code.

For example, in our blog theme we added a form that allows visitors to sign up to receive our blog feed by email (a service that is provided by FeedBurner). In this case we simply inserted the code for the form, which was provided by FeedBurner, at the bottom of the sidebar. Editing your sidebar is pretty straightforward as long as you make sure that the html coding you add is valid and does not interfere with what is already there.

You can also remove any of the items in the sidebar that you do not want. If you don’t want to have a search box, remove the small piece of php coding that includes searchform.php. For our theme we chose to remove the blogroll.

The footer is edited in much the same way. The footer.php file for the Kubrick theme contains very little coding. The php coding that is in footer.php is only there to gather the name of your blog and to provide a link to your RSS feed. This coding can be removed if you like and any html that you wish to use for your footer can be entered here.

Editing the Style Sheet

Every WordPress theme includes a CSS file, style.css. This file controls the look of the entire theme. Most of the changes you will be making to customize your theme will be done to style.css.

The style sheet for Kubrick is very user-friendly when you’re trying to customize the theme. It is broken down into the following categories:

– Typography and colors
– Structure
– Headers
– Images
– Lists
– Form elements
– Comments
– Sidebar
– Calendar
– Various tags and classes

With this type of organization it is easy to find what you are looking for in order to make changes.

Editing the styles to create your custom theme will take some experimentation, so it is best to create a test area where you can make mistakes and not affect anything. If you already have an existing blog do not attempt to make changes to a theme while it is currently selected as your blog theme. My recommendation is to install a WordPress blog in a folder on your site that is strictly for testing purposes. This way you can make changes to the style sheet and php files, update them to see how you theme looks, and not have to worry about causing any problems with your existing blog.

The CSS file for a WordPress theme works the same way as any other CSS file. Where you could run in to problems is in the naming of the divs and classes. Most likely when you are customizing a theme you will be leaving some of the structure in place, and you will be adding some of your own. For example, the header.php file for Kubrick contains a header div and a header image div. When you are customizing the header to add what you want you can either use the existing structure, or you can create your own. If you use the existing structure, anything in the header div will still be styled under the existing CSS file until you change the CSS to meet your needs.

In our example site everything we added to the header file, picture, navigation and search box, are all contained within the header div. To customize the header.php file we then changed the height and width of the header div to meet our needs, as well as changing the background image and color. If you’re used to working with CSS this process is not too difficult. Everything you see in the picture below is in the header.php file.

Blog header

The key to customizing the theme is breaking it down into pieces – header, sidebar, post area, and footer. Work on one piece at a time with the appropriate file and the CSS file. Once each piece is completed you will have you own customized WordPress theme.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

99 Responses

Comments are now closed on this post.

  • Lee, July 24, 2007

    Creating your own look with wordpress is easier than you think. I like the way you have demystified the process.

    Thanks for the info see you in the Make money bogging 101 blog carnival .

  • Vandelay Design, July 24, 2007

    Hi Lee,
    Thanks for visiting and for the carnival!

  • dude alert!, July 26, 2007

    hey.. im doing my own theme for wordpress and i must say, thanks for the tips you have wrote here.

    and good post.

  • Vandelay Design, July 28, 2007

    dude alert,
    Thanks for your positive feedback. Good luck with your theme.

  • Vandelay Design, July 28, 2007

    Austin,
    I’m not quite sure exactly what your question is. It looks like the link you provided is a brand new WordPress blog just created today. If you’re not sure what to do, check out the WordPress Codex. It’s the best way for a beginner to get some info. Also see our article, New WordPress Blogs: 12 Steps to Set Up for Success. Hope that helps.

  • Prestamos, October 16, 2007

    Can you refer some companies where I could be able to send my psd wordpress design and they will make a wordpress theme for me ?

    Thanks.

  • Jenni, November 1, 2007

    Thanks for the excellent, helpful info! Is there any chance that YOU would be hire-able to change the header on my blog for me? If so, feel free to email me so we could chat about the prospect.
    Thanks!
    Jenni

  • Vandelay Design, November 1, 2007

    Hi Jenni,
    I just sent you an email.

  • Jenny, November 7, 2007

    I did that to mine. :) Works pretty well even though it’s simple and stupid.

  • Alberghi, November 9, 2007

    It’s really good article, itryed to do it with my blog and i have good results in few days.

  • SirCommy, December 12, 2007

    It is almost vital to make your blog match the design of your current site. Well, quite depends on your content and site’s intentions. A theme can be easily modified, but you’ll need some patience of course. It took me a whole day, not that much, but accomplished an unique and related design to one of my sites. Good post.

  • Dominico Hastings, January 6, 2008

    That’s some nice detailed information there. Thanks.

  • Dominico Hastings, January 7, 2008

    Would you recommend hosting a blog on a wordpress subdomain or using your own domain?

  • Klaus, January 8, 2008

    Thanks for the good description and ideas.

  • Prinz, January 8, 2008

    detailed infos, thanks

  • Florian, January 10, 2008

    Thanks for that informative post. Where can we find an overview about themes, especially themes with an german language file included.

  • cewekndeso, January 12, 2008

    your tips its so helpfull thank you so much. even i havent done yet join for the wordpress but i like to learn it how to make my own themes.

  • JBiggs, February 6, 2008

    I’m very enjoy reading this content.
    Thank you for good information :)

  • Karl, February 25, 2008

    Thank you for this – just in time, as we completed the redesign of our site a week or two ago. It’ll be great to have someone else’s guidelines to follow, as it’ll speed the process markedly.

  • Harry, February 28, 2008

    hi i have a website and i am new to wordpress. i want to rebuild my existing website with wordpress. But the problem is that i dont know where to start. Please help me, i had installed wordpress on my system and what is the next step

  • sheds, April 9, 2008

    your own wordpress theme would definately reflect your business.

  • em dash creative, April 10, 2008

    Thanks so much for the info, I’ve found it very helpful.

  • Designer-artist, May 15, 2008

    Certainly it would be desirable to have design corresponding your maintenance and that mood which is to be transferred users.

    Most easier to find an available theme for WordPress, the main thing to look at configuration and to make a start from it: to change the pictures, to replace backgrounds, to make redesign of a site.

    As a result – the individual website!

  • Web Design Company, July 24, 2008

    Thanks for the info. I would request you to help those with blogs on blogger as I have often heard that wordpress allows many things to customize the blogs as compared to blogger where the options are limited.

  • ReviewPage.com, September 15, 2008

    Awesome job! Keep it up!

  • julie, December 5, 2008

    With regards to this part of the article “To start, take a page on your site that you want your blog to match and remove the content of the page. Leave the structure of the design and any images and navigation menus that you want to use on your blog. The blank space where you removed the content is where your blog posts will go. Anything above that will need to be included in the header.php file. For example, the header.php file of our blog theme includes the navigation menus and everything above. The picture below shows the portion of the design that is contained in header.php.”

    What do I name that page and where do I put it??

  • Vandelay Design, December 5, 2008

    Julie,
    If you’re talking about the header, it’s header.php. if you’re asking the name of the homepage, it’s index.php. If you open up the index.php of a WP theme you should see php coding were it is pulling in the header, the sidebar and the footer. Does that answer your question?

  • shams, December 13, 2008

    this is the great thing i admire this

  • serhat, January 27, 2009

    this is great article thanks for sharing with us

  • Tierney, February 6, 2009

    Hi, I’ve been searching the net for answers to my question when I found this site. Hopefully, I can find the answer here. :) I would like to add a sidebar on my blog page but couldn’t figure out how to do it. No, I don’t want to change the sites theme just the blog page. Anyone who knows how to do this? Here is my website: http://tierneyomalley.com

    Thank you,

    Tierney

    • Vandelay Design, February 6, 2009

      Tierney,
      Looking at your site quickly I think you need to add the sidebar code to the single.php and page.php files.

  • Tierney, February 6, 2009

    Hi Vandelay Design,

    Good morning. Thank you for the reply. Mind telling me what those codes are. :(

  • Lifestyle, March 3, 2009

    Good article how to customize your wordpress blog.
    Thank for that Vandelay Design

  • Steve, March 6, 2009

    I’ve been searching around for info just like this; thanks for the straight forward facts!

    Glad I’ll be able to combine my Dreamweaver/CSS knowledge into learning WordPress :)

  • I have really found your post on customisation of my wordpress themes helpful. Fo sure I have started customising my theme that I downloaded basing on your instrutions. You have made it look so easy and simple.

  • Kaplang, August 9, 2009

    thanks for the tips :)

  • beginner, October 27, 2009

    customizing an existing WordPress theme rather than buying or creating a new one will indeed save you time and money!

  • danny, October 27, 2009

    Pls can some1 email me if he can customise a wordpress theme for me ?
    mail to dannyogolo (at) yahoo (dot) com

  • Hans, November 7, 2009

    basic tutorial, but so useful, newbie for wordpress must get much tutorial from here, so do I.

  • kaos murah halal, December 25, 2009

    Thanks for the good description and ideas

  • seo content girl, February 7, 2010

    Thanks for this! It helped alot

  • swiz, February 19, 2010

    I am tired of trying to clean up other designer’s crappy code…I think I’ll hit that codex and do my own thing.

    Thanks for the post

  • Barbara Alexandre, May 15, 2010

    thanks for the post very helpfull…I will definitely try the codex

  • Riz, June 26, 2010

    I just installed WordPress and was looking to customize the look and feel. This article is really very good and helped me in customizing my blog’s theme.

    Thanks for this post

  • Syenoh, July 28, 2010

    Thanks for this Info. I am at the beginner pace around wordpress. Searching for the possible tips and tricks on customizing wordpress I stumbled in your website and liking it. I would likely read your articles every now and then and apply it to my blog. Thank you so much your a big help!

  • rob, August 18, 2010

    hi, i’m trying to customize a wp theme… i have access to the header, sidebar and footer… but how do i edit the body (blog posts) area?

    you say this comes from the MySQL database…. ?

    • Vandelay Website Design, August 19, 2010

      Rob,
      The content will be entered and edited from the WordPress dashboard/admin area. It will be yourdomain.com/wp-admin and you should have a username and password from when you installed WordPress.

  • Suyono, October 5, 2010

    Hey, thanks for the tutorial! I’ve been out of web design for a while and was wondering how to use Dreamweaver to edit WP themes. Will give it a go

  • Alok Mishra, October 12, 2010

    Thanks for provide this tutorial! vey help full customize wordpress blog

  • Danielle, November 7, 2010

    AHHH!! I’m learning how to do this…and need help. I currently downloaded the Kubrick theme to follow the instructions, and have…but I need to make sure that I’m not just messing it all up, and that everything in my website style.css is transferred over to the blog style.css, without changing it so that the blog still works.

    Can someone take a look at my code to help me!? I would be SO appreciative…please!

    Thank you!!

  • Danielle, November 7, 2010

    I’m so close to getting this I know it…do I save the wireframe of my website in the index? Or do I call JUST the index.php in my new wireframe I made that matches my website?

    Help!

    • Vandelay Website Design, November 8, 2010

      Hi Danielle,
      The index.php file should contain just the main content area of your site. Then you’ll insert the call to get the header, sidebar, and footer.

  • Alphonsus Isusu, November 15, 2010

    Thanks for providing this tips. I will help me a great deal on my wordpress blogs.

  • SPDworks, December 1, 2010

    We have a huge mess going at this point, with various platforms for both blogging and website design. WordPress was my first thought for blog building, but the other business owners were already locked into a Yahoo! merchant account, which remained quite antiquated until recently, when they (Yahoo!) moved to make WordPress.com an option for existing merchant account holders. Therefore, once I found this out, I began the process of building a small blog for one of the branches of the business.

    Pressed for time (no pun intended,) and, with a then, current, prohibiting by Yahoo! of upgrading to the latest WP version, I opted to hard code the whole thing in basic HTML. It looks ok, but now, the owner finally wants to add a new post, and now the merchant account finally urges upgrading to the latest WP version (currently 2.8.4 to 3.0.2) meaning there’s a better chance to integrate a cool theme to the whole thing… finally. Which sent me looking on what’s to be needed to make this happen, without a lot of hassle, and without risk of losing the existing hard-coded pages of the original blog. That’s how I found your helpful pages. Thanks for sharing them.

    Now, if I can only figure out how your info will assist me in converting this WP blog into something much nicer for the owner. Of course, that does nothing for the Joomla site, or the huge WordPress.org setup of the granddaddy of all sites for the business, already in place, but completely not ready for prime time viewing.

    Did I mention it was all a huge mess?

    Thanks again, and hopefully I can implement your strategies to make this WP move to a new theme as painless as possible.

  • Danielle, December 1, 2010

    Hi Everyone,

    I figured it out…it was in the CSS :/

    Thank you!!!

  • Toronto Web Developer, June 10, 2011

    Really great points here. Thanks!

  • GoldeN, July 6, 2011

    Ya! its really helpful for us. I also had customized one of my theme based on some valuable tips from this post.

    Thanks a lot all of you guyz.

  • Jasmine, September 13, 2011

    I love this post, as it explains the basics of a WordPress theme in a simple and clear manner. Now, I have a better understanding on WordPress theme, and I think I can start customizing soon!

  • Mark, March 1, 2012

    branding is one aspect; how does one feed headlines from a wordpress blog into an existing NON-php site?

    Can’t find any straightforward suggestions on this one….

  • Malinda, June 11, 2013

    Thanks to my father who informed me regarding this website, this blog
    is really remarkable.

  • Oakley Half Jacket, June 17, 2013

    Sunglasses are all-around for a extended time. They’ve got usually been considered as products of vogue and fashion. Numerous individuals have constantly related sunglasses with appears of sleekness with out any functional function. Celebrities have already been regarded to work with sunglasses to assist hide their faces from the stares of their supporters. Regardless of the ignorance of many people as for the sensible significance of sunglasses, their popularity has grown steadily. It really is uncommon to seek out someone with no pair of sunglasses specifically through the summer time. These without having their sunglasses on probably have them stashed away someplace inside their closets. Contrary to common perception even so, sunglasses have a number of wellness positive aspects a number of which could be observed under.