Learn How to Customize WordPress theme to match an existing website – A Step-by-Step Blog Integration Tutorial

In this tutorial, I will show you step by step to customize a WordPress theme to match an existing website.

Here is the original website I have made:

At the end, we will have an identical blog website like the following:

Download tutorial source files

Included two downloads are what you need for this tutorial. The first myweb.zip contains original website. To view myweb, just unzip file to your local drive or your server and double click myweb.html. The second file myblog.zip contains myblog theme. Unzip and install myblog theme to your server under wp-contentthemes directory, activate it through wp-admin and bring it up using your favorite browser.

Download myweb.zip
Download myblog.zip

Website Analysis

The original website (see the screen shot above) page layout includes the following sections:
1. Header – the top section of web page. Header section contains logo, navigation bar and main image.
2. Contents – content section includes left content and right content.
3. Footer – the bottom part of webpage.
Based on the website analysis, I created the following web design template:

WordPress Theme Layout

WordPress uses four php files to handle header (header.php), left content (index.php), right content (sidebar.php) and footer ( footer.php):

All above php files are in wp-content/themes/your theme directory.

WordPress Theme Selection

We are going to find a two column theme as the base. If you have installed WordPress on your machine, you should be able to find a default theme in the wp-content/theme directory. Copy the default directory, paste it and rename it as any name.

Change Website Background Color

1. Go to wp-content/themes/your theme
2. Open style.css
3. Modify body {..} as following:

Here is the blog background:

Header Customization

Header is your website’s identity. Header customization is one of the most important things to do. In this tutorial, I will work you through to transform the default theme header into a company identical header.

First, let’s look the original website’s header:

Like the picture shown above, the integration of header should include logo integration, navigation bar integration and main image integration:

Part 1: Logo Integration

Step 1:
Open style.css, add #masthead as the new id:

Step 2:
Add logo to header.php:
1). Goto wp-content/themes/your theme directory.
2). Open header.php.
3). Add the following code in to header.php:

Here is the result after logo was added into blog:

Part 2: Navigation Bar Integration

Step 1:
Add the following codes to style.css:

Step 2:
Download and install Page-Links-To plug in to your WordPress application:
1). Download page-links-to from
http://txfx.net/code/wordpress/page-links-to/
2). Follow the instructions to install.
3). From the admin panel (/wp-admin/), make a new page with the title you want to appear on the menu:

4). Add order to the menu:

5). Enter URL of the home page:

Step 3:
Add menu id to header.php:

By calling wp_list_pages function as the code shown above, the page titles and links will be added to the top menu.
Here is the result:

Main Image Integration

Step1:
Add #graphic to style.css:

Step2:
Added graphic id and main image into header.php:

So far I did everything in integrating logo, nav bar and main image into the theme, but, the job is not done. If you have followed the integration steps, you will get the page that need to be adjusted at the following places:

1). Content out of align.
2). Navigation menu is not line up to the center.
3). The whole header is out of the boarder.

Content out of align solution

To fix content out of align problem, I removed header height from style.css:

Navigation menu is not line up to the center solution

Added following settings should take care of navigation bar problem:

The header is out of boarder issue

Adjust page width to fit header’s width is the way to fix this issue:

Also, the background image should be removed from header.php:

That’s it, I have made all the changes, the header looks exactly the one expected:

Sidebar Customization

The look and feel of sidebar is pretty much in line with our original website, but we need to change sidebar contents. Since the page titles are shown on the navigation bar (menu bar), the same page title items should be removed from the sidebar. Just follow the steps as following:
1). From wp-content/themes/your theme directory
2). Select and open sidebar.php
3). Remove the following code:

Contents Customization

Only change needed in this section is to add more space between post title and date:

This can be fixed by adjusting id line-height.

Footer Customization

Step 1:
Current footer is built on the top of a footer background image. After all the changes made, the footer background image is no longer fit to new page:

Let’s change some codes from style.css:
1). Remove the following code:

2). Change footer id to:

Step 2:
To change footer content, select and open footer.php and make the following change:

Final Page and Conclusion

The page shown above is the final result I have created for this tutorial. If you are able to follow and understand the steps and get your page work, you should be able to do any WordPress theme customization to match your website scheme. Thanks for reading this tutorial, please leave your comments to share your thoughts.