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

Sunday, August 16, 2009 2:49
Posted in category cms, Open Source, themes, Tutorials

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:

myweb-450

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

myblog-450

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 dallas web design web Download myweb.zip
download dallas web design blog 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:

web-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):

blog-template

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.

copy-theme

Change Website Background Color

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

01.body {
02.font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
03.font-size: 62.5%;
04.text-align: center;
05.line-height: 130%;
06.margin-top: 5px;
07.margin-bottom: 5px;
08.color: #666666;
09.background-color: #A67E1C;
10.}

Here is the blog background:

bg-change

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:

org-web-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:

1.#masthead {
2.width: 750px;
3.height: 60px;
4.background-color: #343434;
5.border-bottom: 0px solid #CCCCCC;
6.}

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:

1.<div id="header">
2.<div id="masthead"><img src="../images/index/logo.jpg"
3.alt="dallas-web-design-logo"/></div>

Here is the result after logo was added into blog:

logo-added

Part 2: Navigation Bar Integration

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

01.#menu {
02.background-color: #373B3F;
03.height: 40px;
04.font-size: 12px;
05.text-align: center;
06.}
07.
08.#menu ul {
09.color: #FFFFFF;
10.width: 750px;
11.margin:auto;
12.padding: 0;
13.bottom: 0;
14.left: 0;
15.list-style: none;
16.}
17.
18.#menu ul li {
19.float: right;
20.}

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:

plugin-page-title

4). Add order to the menu:

plugin-page-order

5). Enter URL of the home page:

plugin-page-url

Step 3:
Add menu id to header.php:

1.<div id="menu">
2.<ul>
3.<div class="add-space"><?php wp_list_pages
4.('title_li=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1'); ?></div>
5.</ul>
6.</div>

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:

menu-add

Main Image Integration

Step1:
Add #graphic to style.css:

01.#graphic {
02.border-bottom-width: 1px;
03.border-bottom-color: #333333;
04.background-color: #FFFFFF;
05.width: 750px;
06.height: 135px;
07.border-bottom-style: solid;
08.margin: 0px;
09.padding: 0px;
10.}

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

1.<div id="graphic"><img src="../images/brownsky.jpg"
2.alt="dallas-web-design-main" /></div>

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:

header-out-align

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:

fix-content-out-align

Navigation menu is not line up to the center solution

Added following settings should take care of navigation bar problem:

fix-center-menu

The header is out of boarder issue

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

fix-out-of-boarder

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

remove-bg

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

scn-header-all

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:

remove-sidebar-page

Contents Customization

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

add-content-space

This can be fixed by adjusting id line-height.

fix-content-space

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:

unmatch-footer

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

delete-footer

2). Change footer id to:

footer-css-change

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

1.<div id="footer">
2.<p>
3.&copy; 2009 <a href="http://www.dallas-web-design.com/">
4.dallas-web-design.com</a>&nbsp;All rights reserved.
5.</p>
6.</div>

Final Page and Conclusion

final-blog

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.

Be Sociable, Share!
Father's Day Promo $40 OFF on ANY orrder
You can leave a response, or trackback from your own site.

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

  1. Logo Design Galaxy says:

    March 18th, 2012 at 4:23 am

    Logo Design Galaxy…

    […]Learn How to Customize WordPress theme to match an existing website – A Step-by-Step Blog Integration Tutorial | guidesigner[…]…

Leave a Reply