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 contains original website. To view myweb, just unzip file to your local drive or your server and double click myweb.html. The second file 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
download dallas web design blog Download

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"

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;
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
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">
<div class="add-space"><?php wp_list_pages
('title_li=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1'); ?></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

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;

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">
&copy; 2009 <a href=""></a>&nbsp;All rights reserved.

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.

112 Responses to “Customize WordPress theme to match an existing website - A Step-by-Step Blog Integration Tutorial”

  1. PamelaUnow Says:

    Very nice blog. I totally agree with your thoughts.

  2. Sweet-Girl Says:

    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..

    plss help me :)


  3. Peter Says:

    go to your style.css add the following script:
    float: left;
    let me know if this is helpful

  4. Sweet-Girl Says:

    thanks for your help

    i haved add the code
    but its still have problm :)

    sorry maybe my wrong :)

    this is my css style

    and this is post that no to left


  5. Master EWTC Says:

    Thanks for good Tutorial
    Very Clear

  6. Michel777 Says:

    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,


  7. Peter Says:


    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.

  8. Kenneth Says:

    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?

  9. Peter Says:

    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.

  10. sms Says:

    awesome idea friend…just amazing !!!!

  11. Vijendra Says:

    Nice post … but this is for home page only how you gonna manage inner pages??

  12. Wordpress Autoblog Says:

    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

  13. Wordpress Autoblog Says:

    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

  14. Peter Says:

    As the tutorial said, the default theme is the only one I was using for customization. No extra template are needed.

  15. Watch Free Movies Says:

    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.

  16. hemen parekh Says:

    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 can
    do for your career.
    To impress the recruiters, what you need is a graphical / visual / analytical presentation.
    Hemen parekh
    Mumbai - India

  17. Wordpress Autoblog Plugin Says:

    Pretty good article about autoblogging. However, i really recommend you to visit 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.

  18. WordPress Layouts Says:

    Very good read, some valid points were made. (This isn’t some dumb spam reply either, I’m a real follower.

  19. Insanity Workout Says:

    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 !!

  20. IOB740 Says:

    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

  21. Rebecca Burmeister Says:

    Hi and many thanks for a well-written site. I thank you what you wrote here.

  22. Full Free Watch Movie Online Says:

    Some great tips in there! you did a fantastic job on this article ! Thanks!!!

  23. Full Free Watch Movie Online Says:

    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.

  24. Lindsy Fiorentino Says:

    ohh…nice post but really?/? :-P

  25. Bonita Helmsing Says:

    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 .

  26. White Flood Says:

    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!

  27. Save Mumbai Says:

    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

  28. Brian D. Paulson Says:

    Very insightful. Thanks for the information.

  29. Chin Ala Says:

    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 ;-)

  30. Premium WordPress Themes Says:

    Great Post…. Thanks ;)

  31. Lone Warrior Says:

    Are these settings applicable for WordPress MU?

  32. Javier The Movie Fan Says:

    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.

  33. Antonetta Belanger Says:

    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?

  34. Peter Says:

    Sure. Just send me the details.

  35. Brant Delusia Says:

    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.

  36. Lita Michalenko Says:

    Terrific Blog. then the simillar post I found last Tuesday online. Maintain the good work.

  37. Computer Help Blog Says:

    I like the information that you wrote here. Keep up the good work.

  38. Web hosting Says:

    You could go for VPS, or a reseller account may suffice.

  39. Lavina Scerbo Says:

    Really handy send. Really clear commentary and suggested phrasing are most impressive, as are his and your generosity in sharing this explanation and example

  40. Dolares Says:

    thanks for compliming.Cool site but İt’s give a mistake sidebar in i.e. You must fix it.I will follow you with rss.

  41. pozycjonowanie gdańsk Says:

    That is nice to definitely find a site where the blogger knows what they are talking about.

  42. pozycjonowanie gdynia Says:

    Date Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. Are you aware of any other websites on this subject

  43. Leatrice Molgard Says:

    I had a little trouble understanding at first, but I’m pretty sure I get what meant now. Cheers!

  44. Rodger Kowis Says:

    I normally do not comment on post but after reading yours I wanted to just write a short message. Thanks for the info on blogging I found it filled with great information thanks keep up the good posting.

  45. Sanford Unverzagt Says:

    I’m going to bookmark this blogg on Dilicious to get more traffic for you.

  46. Wiley Hernandaz Says:

    Thanks for your great work!

  47. Russell Sharrar Says:

    Great work! I have downloaded it!

  48. Jordan 25th Silver Anniversary Says:

    Perfect ideas, I want to keep remarks because the comments enables web owners to get more engaged and for the possibility to certainly know from each other.
    Jordan 25th Silver Anniversary

  49. Wrought Iron Bar Stools Says:

    Nice work and post research, I have liked your blog.

  50. Rosalina Call Says:

    Any other readings you recommend…

  51. touch up paint system Says:

    Great post. I’ve been searching for this exact information for a while now. I’ll bookmark it in the public bookmarking sites to get you more clicks.

  52. Burton Haynes Says:

    This is great information|Thanks for the great information. We were searching for something on this topic. I will be sure to check back periodically

  53. Tom Ford Says:

    Very interesting article. I learned a few things on WordPress theme customization tips here. Keep up good work!

  54. Benny Scholin Says:

    nice… thank you for writing about this. You make me easy today… :)

  55. Donte Brasch Says:

    Very interesting stuff.keep em coming…Donte Brasch

  56. Narcisa Freiheit Says:

    Thanx you for this great tip. I’m going to try it for myself and I believe that it will work well for me as well. I really love premium templates for WP as WP is the professional blogging platform out there.

  57. car detailing training Says:

    I’ve been looking for this exact information on this subject for a while.  Bookmarked and recommended!

  58. Laine Kudrna Says:

    Great website. I found it filled with good info thanks. Keep up the excellent job. Normally I do not comment on blogs but after reading yours I wanted to just write a short message. Thanks for the info.

  59. free bootleg movies Says:

    I have kind of a diffrent outlooks on this article. I agree with the author but some points I have diffrent views on.

  60. ecommerce Plugin Says:

    You got a actually helpful blog I’ve been right here reading for about an hour. I’m a newbie and your achievement is quite a lot an inspiration for me.

  61. Auctions Says:

    Nice precise info and this is one of the most nice blogs Ive read in a very long time. The amount of great information in here is stunning, like you practically wrote the book on the subject. Your blog is nice for anyone.

  62. residential cleaning Says:

    Hi superb blog im from scotland i found this on the yahoouk search engine keep the good work up i will add you to my favoroties.

  63. office cleaning companies Says:

    wanted to thank you for this great I definitely loved every little bit of it. I have you bookmarked your web site to look at the latest stuff you post.

  64. $$$ for you Says:

    This is my second time i visit here.

    I discovered so many fascinating stuff in your pages especially it’s discussion.

    From the loads of comments on your articles, I assume I am not the only one having all the enjoyment here!

    Keep up the good work. Thanks a lot !!

    Have a Happy day !!

    $ 61,000 in Two Days . It’s No Accident.

  65. Madie Sutton Says:

    Cheers. I’m definitely looking into articles or blog posts and info about website seo. You can’t predict where you’ll find a brand-new approach (well, new to me at least). Even though there are always essential Search engine optimisation techniques, a little fine-tune here and there, and your site will get a lot better search rankings. If you are using Wordpress using proper plug ins along with a quality premium template can help your Search engine optimization. It is also crucial to keep up to date with the changes in search engine algorithms.Best wishes

  66. Auto Detailing Training Says:

    Great blog. So many blogs like this cover subjects that just aren’t covered by magazines. I don’t know how we got by 10 years ago with just newspapers and magazines.

  67. Shira Doskocil Says:

    cool thanks for posting! btw are there feeds to your blog? I’d like to add them to my reader

  68. Angila Kennealy Says:

    Just wanted to say your is in my favorite blog list on |24, Cheers Angila Kennealy

  69. Barry Granberry Says:

    Interesting posts here.. thanks for sharing so much in your blog.. Greets, Barry Granberry

  70. Elliott Sayre Says:

    Just wanted to say this is in my best blog list on |29, Cheers Elliott Sayre

  71. Bamug Says:

    Pretty insightful post. Never thought that it was this simple after all. I had spent a good deal of my time looking for someone to explain this subject clearly and you’re the only one that ever did that. Kudos to you! Keep it up

  72. web-design-bournemouth Says:

    Great information - thanks for sharing!

  73. discount furniture connection Says:

    Once I started reading this post I couldn’t stop until I was finished, though it wasn’t precisely what I have been looking for, was a nice read though.

  74. Owen Mcclay Says:

    I think that as time goes on, the way of on-page and off-page SEO will change as we think it. I think we will see a transformation to client metrics in determining ranking results. That included with increased personal SERP results and we’ll be seeing a huge change of the users experience with Google and the other SEs. Each search result will not be made alike, just look at things like user involvement, bounce rate, bounce time, etc… Focus on a better website all around, and I think you’ll see better results in 2010.

  75. p90x dvd Says:

    I like the information that you wrote here. Keep up the good work.

  76. mxdxxtk Says:

    Good post, not what can not be said.

  77. x7roq8p Says:

    Good post, not what can not be said.

  78. 4i58quf Says:

    Absolutely agree with previous reports.

  79. Tattoo Removal Says:

    Just wasting some free time on Stumbleupon and I found your post . Not typically what I prefer to learn about, but it was definitely worth my time. Thanks.

  80. Tattoo Removal Says:

    That was intriguing . I admire your finesse that you put into your post . Please do move forward with more like this.

  81. tax relief scams Says:

    Thank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such great information being shared freely out there.

  82. perfect optimizer real Says:

    you could have a very good sense of humour.

  83. best pokemon plush shop Says:

    you will be specialized.

  84. electronic cigarettes Says:

    Awesome! I am going to try this in a few minutes.

  85. pc optimizer pro safe Says:

    Especially shutter out on a very limb, Ebert television shows he¡¯s being believed due to. Your man is jus¡¯ finding pleasure in y¡¯all (and becoming web publication sinks in).

  86. Kumar Says:

    Amazing idea dude! Keep posting such a useful article.

  87. watch hot tub time machine Says:

    Nancy Pelosi is known as a fucking bitch looking to bring handle of the nation.

  88. Felisha Lovie Says:

    Before I meet your pilot website, I incredible didn’t know something about this subject that I will use in my school task. After I read page by page, I found the significant thing for my initial idea, great article in your webpage, I discover many missing file and data in my book guidance, but you gave me the several options. I am postgraduate college and want to finish my subject; it is hard task (for me). I spent over 2 weeks, just browsing and finding this nice article.

  89. Disability Insurance Says:

    It is getting more and more difficult to know what is quality content on the internet these days. Your blog adds a sense of clarity. Good job.

  90. Disability Insurance Says:

    I wished I would find a way to continue your theme, ask a question, or offer a different perspective. This is more of a breadcrumb approach way of saying “I like your vision.”

  91. funny sms Says:

    Thanks for such a beautiful information.

    Thanks again for sharing

  92. titanium dog tag Says:

    getting a extra indepth look into an iPhone beyond the promoting and assumptions, consumers who bought the phone are actually realizing that this diverse toy is turning out to get an unforeseen luxurious paperweight. Dropped calls at the moment are occuring even more regularly, it is unavoidably a propose flaw coming from the designer, Apple. There was a category influence lawsuit filed only 6 days after publish accusing Apple and AT&T on copious fine print away negligence.

  93. Best Free Wordpress Plugin Says:

    THis is by far the best plugin on my blog.. capatures massive emails.. enjoy.. its free too.

  94. Jack3d Says:

    this page saved me big time im working on a job for a client and needed a traditional header 2 column footer template, thank you for this it saved me about 2hour build time.

  95. ray ban sunglasses 3293 Says:

    you have a good taste.

  96. jersey shore episodes Says:

    Great share! I love the write up, i’m going to try this on a few themes!

  97. Garrett Millin Says:

    Hello Blogger, Nowadays many people have a wordpress blog. Every one of them have different blog design, but most of them have something common. They are using the best blogging software available today. If you add to a robust blogging script a beatiful blog theme such as the one you are using, it definitely enhances the interactivity of this blog. Regards

  98. Tattoo Aftercare Says:

    This is very refreshing to come across a well layed out WP Blog such as this this is valuable information , nice template too

  99. wash tile floors Says:

    Outstanding post. I thought it was really interesting and am grateful you spent the time to make it. It could be good if everybody wrote similar to this.

  100. Metal Cabinets %0A Says:

    there are many new movies to watch this month, i would be going to the cinema and video rental store again -~,

  101. Free Wordpress Themes Says:

    I’m a huge fan of this Wordpress theme :) Good work, now get creating some other cool themes!

  102. Hershel Owens Says:

    Thank you so much for putting all those needed information’s in one interesting post. I bet that you spend much time writing all this. Thank you for great post and for sharing your knowledge with us!

  103. Buy Disulfiram Says:

    Okay, this here article definitely appears to be one where promoters have found a blog to submit a few web sites in hopes to get the leading search engines, or more specifically Google, to rank their homepages in the top results. Cannot really blame it considering your home page can be considered more or less dead without links from another few websites pointing to it.

  104. Ferrero Andrea Says:

    Incredible article. Bookmarked it right now. Thanks. Good day to all from Italy.

  105. upvc windows Says:

    Heya! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no backup. Do you have any solutions to prevent hackers?

  106. abercrombie fitch Says:

    I really enjoyed reading this. I think I will that a look through your other posts!

  107. Air Max 90 Says:

    I’m impressed, I have to say. Very seldom do I see a blog thats both educational and entertaining, and let me tell you, you’ve hit the nail on the head. Your blog is important; the matter is something that not a lot of people are talking intelligently about. I’m really happy that I stumbled across this in my search for something relating to it.

  108. Online Discount Codes Says:

    I was reading your site earlier and must say some of the writing on here is fantastic. So much so that I have decided to give you a dofollow link on my site as a thanks for the great work you have done. You can see your link is live at I hope you will approve this comment as a thank you but do not feel that you have to as the link will stay on my site anyway. Thanks so much for a wonderful blog.

  109. sell beats Says:

    I enjoyed reading your site… Plenty of crazy comments on this website.. Stick to the nice work. Looking towards the following post.

  110. Malorie Amborn Says:

    hey there and thank you for your information – I have definitely picked up anything new from right here. I did however expertise some technical points using this website, since I experienced to reload the website lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will often affect your placement in google and can damage your high-quality score if advertising and marketing with Adwords. Well I am adding this RSS to my e-mail and can look out for a lot more of your respective fascinating content. Ensure that you update this again very soon..

  111. Air Max 90 Says:

    I really enjoyed reading this post, big fan. Keep up the good work and
    please tell me when can you publish more articles or where can I read
    more on the subject?

  112. Arlene Beresky Says:

    This is a splendid post and I would give a five out of five rating to it. Need some more posts like this to be coming out Thank you and looking for more of this kind.

Leave a Reply

Anti-Spam Protection by WP-SpamFree