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:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 62.5%;
text-align: center;
line-height: 130%;
margin-top: 5px;
margin-bottom: 5px;
color: #666666;
background-color: #A67E1C;
}
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:
#masthead {
width: 750px;
height: 60px;
background-color: #343434;
border-bottom: 0px solid #CCCCCC;
}
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:
<div id="header"> <div id="masthead"><img src="../images/index/logo.jpg" alt="dallas-web-design-logo"/></div>
Here is the result after logo was added into blog:
Part 2: Navigation Bar Integration
Step 1:
Add the following codes to style.css:
#menu {
background-color: #373B3F;
height: 40px;
font-size: 12px;
text-align: center;
}
#menu ul {
color: #FFFFFF;
width: 750px;
margin:auto;
padding: 0;
bottom: 0;
left: 0;
list-style: none;
}
#menu ul li {
float: right;
}
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:
<div id="menu">
<ul>
<div class="add-space"><?php wp_list_pages
('title_li=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1'); ?></div>
</ul>
</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:
Main Image Integration
Step1:
Add #graphic to style.css:
#graphic {
border-bottom-width: 1px;
border-bottom-color: #333333;
background-color: #FFFFFF;
width: 750px;
height: 135px;
border-bottom-style: solid;
margin: 0px;
padding: 0px;
}
Step2:
Added graphic id and main image into header.php:
<div id="graphic"><img src="../images/brownsky.jpg" 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:
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:
<div id="footer"> <p> © 2009 <a href="http://www.dallas-web-design.com/"> dallas-web-design.com</a> All rights reserved. </p> </div>
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. If you need help, please feel free to contact us.
May 23rd, 2009 at 2:41 pm
Very nice blog. I totally agree with your thoughts.
July 18th, 2009 at 11:57 am
thanks for this tutorial..
i haved edit its at my blog
but i have one problm that mean
the entry not to left..hope u can see
my blog that i edited..
http://nicesspace.com/weightloss/hello-world.html
plss help me
thanks.
July 18th, 2009 at 10:23 pm
go to your style.css add the following script:
#content
{
float: left;
}
let me know if this is helpful
July 24th, 2009 at 2:10 pm
thanks for your help
i haved add the code
but its still have problm
sorry maybe my wrong
this is my css style
http://nicesspace.com/weightloss/style.css
and this is post that no to left
http://nicesspace.com/weightloss/hello-world.html
thanks..
August 15th, 2009 at 10:58 am
Thanks for good Tutorial
Very Clear
August 17th, 2009 at 6:31 am
Thanks for the helpful tutorial. There is some questions, still open for me:
1) How to reference images, placed in the /themes/my-theme/images ?
2) Is it possible to mix also blog pages in the menu ? E.g. about | archives | search | rss feed.
Further questions:
3) How to remove all the widgtes and comments (inlc. sidebar) and show them on separated page ?
Thanks in advance,
Michel
September 2nd, 2009 at 9:43 am
Michel,
1). If you look back to to the tutorial Part 1: Logo Integration, in step 2, the sample code states:
2). yes. you can change php code to add about/archives/search.. on any page.
3). again, look through the pages which contain widgets and comments, go back to php code and remove functions from there.
September 11th, 2009 at 8:16 am
You have great tutorial.
I wanted to ask how could I customized my project management template. There will be a homepage, about page, resource, and the staff access. Anything you can suggest please?
September 11th, 2009 at 9:53 am
Yes, you can customize any pages, no matter is a template or homepage or about page or others. To give you suggestions, I need to know more details about your website.
September 24th, 2009 at 12:31 pm
awesome idea friend…just amazing !!!!
October 20th, 2009 at 2:41 am
Nice post … but this is for home page only how you gonna manage inner pages??
November 16th, 2009 at 1:12 pm
I just want to ask what template do you use? Is it a expensive template? Did you hired someone to make it? I love your design. My website is http://www.wordpressrobot.com/
November 16th, 2009 at 2:02 pm
I just want to know what theme do you use? Is it a paid template? Did you hired someone to create it? I like the design. My website is http://www.wordpressrobot.com/
November 16th, 2009 at 5:50 pm
As the tutorial said, the default theme is the only one I was using for customization. No extra template are needed.
November 23rd, 2009 at 10:58 pm
Warning: Cannot modify header information - headers already sent by (output started at /home/sisco/public_html/books/wp-content/plugins/subscribe2/subscribe2.php:40) in /home/sisco/public_html/books/wp-login.php on line 290. i have deactivate until i find the solution. help. thank u.
December 14th, 2009 at 6:14 am
Customization of resume is an art that does not come easily to every jobseeker.
Then there is a science of customization which converts a plain text resume into
8 graphs, online / automatically / instantly.
If the main goal of a resume is to capture the attention of the recruiters and it’s
secondary goal is to motivate the recruiters to read it long enough to interpret the
jobseeker’s story, then you will appreciate what http://www.CustomizeResume.com can
do for your career.
To impress the recruiters, what you need is a graphical / visual / analytical presentation.
Regards
Hemen parekh
hcp@recruitguru.com
Mumbai - India
January 10th, 2010 at 11:02 am
Pretty good article about autoblogging. However, i really recommend you to visit http://www.wordpressrobot.com and see what the features are. Absolutely the most advanced autoblogger plugin available! There is not an Wordpress plugin that offers so many powerful features.
January 11th, 2010 at 6:24 am
Very good read, some valid points were made. (This isn’t some dumb spam reply either, I’m a real follower.
January 12th, 2010 at 6:57 am
We should thank you for maintaining such a creative website. Your blog happens to be not just useful but also bvery imaginative too. We find only few professionals who are capable of create technical stuff that creatively. A lot of people keep looking for information on this topic. I Myself went over several blogs to find information regarding this.Looking to many more from your site !!
January 23rd, 2010 at 2:16 am
Hi Peter,
Thanks for a very informative tutorial. The menu navigation for my site is on the left hand side of the page with a graphic on top, what would the code be for placing the this on the left side of the page. Thanks
January 25th, 2010 at 5:55 am
Hi and many thanks for a well-written site. I thank you what you wrote here.
February 14th, 2010 at 9:41 am
Some great tips in there! you did a fantastic job on this article ! Thanks!!!
February 14th, 2010 at 9:42 am
Just Googled and read the whole article and i must have to say that me and my husband loved reading your post. I liked your site because of the easy language you used to explain things here. Now i can stop my research having found my answer in this awesome article. We bookmarked and will regularly check more quality tips to come from your website. Thanks alot.
February 22nd, 2010 at 6:27 am
ohh…nice post but really?/?
February 27th, 2010 at 12:09 pm
Hey web entrepreneurs ! You have great ideas and are looking for the best value coding company and/or looking for investors to help you fund your project? Just enter this place, I found it days ago, it seems to be in alpha but the concept seems really good ! CODINGATE .
March 3rd, 2010 at 5:09 am
Hey - I appreciate the help! This is my first Wordpress site but it’s taking me a while to really figure it all out… there’s almost TOO many themes, plugins, and options to figure out! But I’m slowly getting the hang of it, thankfully. Hopefully it doesn’t take forever for me to setup next time. Anyhow, nice blog… I’m subscribed to your feed now so I’ll be checking in regularly!
March 16th, 2010 at 3:44 am
I have a growing obsession with Mumbai i have been scanning cyberspace for mumbai related material but having minimal luck, you have provided me with info i can actually use! i’m currently doing a project on Mumbai at school & i’ve been running into article after article of similar information. i can’t understand why these so called bloggers do it! if you feel strong enough feelings to create a blog on a subject particularly one as controversial as this, why wouldn’t they come up with their own opinions? i commend you for taking that extra step in your “» Blog Archive » Customize WordPress theme to match an existing website - A Step-by-Step Blog Integration Tutorial” page.
Regards, Save Mumbai
March 17th, 2010 at 8:08 pm
Very insightful. Thanks for the information.
March 30th, 2010 at 12:29 pm
Hey, just wanted to say thanks for posting - I’ve been adding articles on my own blog now for the last 6 months or so, and I know how awkward it can be to come up with unique content for visitors to your site. I’ll be sure to check back soon for more
April 5th, 2010 at 9:56 am
Great Post…. Thanks
April 7th, 2010 at 5:18 pm
Are these settings applicable for WordPress MU?
April 9th, 2010 at 4:58 am
Whoa, that was truly useful material. Thanks for the wonderful post. Shall be returning in a few days to see if there might be some other updates.
April 10th, 2010 at 12:09 am
Superb Blog, I just observed this post whilst searching by means of Dfwblogs I think that you and I could were buddies in the previous everyday living – the posts that I have studied so far are genuinely charm to me and to my sense of tatse! Anyways enough talk aside, it appears that your Feed would not appear to efforts in my browser (Ive just installed Google chrome) do you think you’re able to notify me how I can mend it?
April 10th, 2010 at 4:58 pm
Sure. Just send me the details.
April 15th, 2010 at 3:20 pm
Great post. I’ve been looking for this exact info for a while now. I’ll bookmark it in the public bookmarking sites to get you more traffic.
April 19th, 2010 at 7:32 pm
Terrific Blog. then the simillar post I found last Tuesday online. Maintain the good work.
April 25th, 2010 at 12:35 am
I like the information that you wrote here. Keep up the good work.