How to Integrate a WordPress Blog Into an Existing Website (2011)

Want to host a blog at your own website without redoing your whole site? You’ve come to right place. Here you’ll learn how to add a WordPress 3 blog to your existing website. There are a few conditions: you should be using PHP, CSS and XHTML and, although it isn’t essential, you should be using includes for common parts of your site like the header, menu and footer. By the way, the Twenty Twelve theme version of this is available here.

This is not a tutorial about making a standard WordPress theme and it doesn’t adhere to the standards set in Designing Themes for Public Release. It is intended to seamlessly incorporate a WordPress 3 blog into your existing website.

Also, it uses a simplified file structure instead of a WordPress child theme. Child themes are great and should be used whenever you can, but I’ve found that for many people overriding the CSS in the parent theme can be too much of battle and just isn’t an efficient use of time.

You’ll need to know some basics:

  • how to FTP to your site;
  • how to set permissions;
  • your database hostname (probably localhost), the database name, your username and your password for the database; and
  • some CSS and XHTML basics.

Check out the finished example PHP website with a WordPress blog.

By the way, one might consider the option of redoing the whole site completely in WordPress. It works great.

Prepare WordPress

Download and install WordPress

  1. Download the latest version of WordPress. Some web hosts offer easy installation options from the website control panel.
  2. Install WordPress on your server in a new directory. Call it something user-friendly like blog or articles. For this article let’s call it blog. Follow these easy five-minute installation instructions.
  3. Complete the installation and make sure everything is working. See Common Installation Problems or add a comment below if you’re having trouble.
  4. Right off the bat you may want to activate the Akismet plugin to help keep spam at bay.

Create the folder for your own theme.

  1. FTP into the themes folder in your WordPress installation (blog/ wp-content/ themes). Remember, we’re calling the WordPress installation folder blog.
  2. Create a new folder in themes to hold your theme files. We’ll call it mytheme but you can call it whatever you like.

Create the two can’t-do-anything-without-them files, index.php and style.css.

  1. In mytheme, add a new empty file with the name of index.php. We’ll come back to this one later.
  2. Also in mytheme, create a new file called style.css. This file is necessary for WordPress to recognize your new theme.
  3. In style.css add the following code. Obviously, change what’s necessary to make it your own.

Change the current theme to My Theme.

  1. Login to your WordPress installation. In this case it would be at blog/wp-login.php.
  2. Click on Appearance then Themes if you aren’t already there.
  3. If all went well so far, you should see your theme, My Theme, the version number, your name and the description. Click Activate. If it tells you the theme is broken or similar, go back and check style.css.
  4. Preview your theme to make sure there are no serious errors. All you should see is a blank page.

243 thoughts on “How to Integrate a WordPress Blog Into an Existing Website (2011)

  1. Thanks for your tutorial. I’ve followed everything and now I’m stuck on how to transfer pages like the home and contact page…

    I have created a website (http://www.awarenessclinic.co.uk) and I’m trying to convert it to WordPress so that my client can edit the site himself.

    I have created a custom theme according to your instructions: http://www.awarenessclinic.co.uk/news/ which looks identical to the existing page.

    At the moment I have just managed to integrate the blog posts but these need to move to under the News link at some stage. Now I’m trying to work out, what I do next to re-create the home, treatment, fees and contact page so they can be edited in the WP back end.

    And once this is done what path do I use to update the navigation menu?

    Thanks for your help.

  2. Hi. I’ve followed your instructions and I’ve successfully set up a custom theme in WordPress. Now I’m stuck on how to set up/re-create the pages from the existing website. If you look on http://www.awarenessclinic.co.uk/news/ you see the blog is integrated in the WP custom theme. What I need to achieve is a home, treatments, fees and contact page (as you can see on http://www.awarenessclinic.co.uk) that can be edited from the WP back-end. Can you point me in the right direction please?

  3. Hi. thanks for this tutorial. Its been very helpful. I’ve got it 98% working but it doesn’t look quite right. Its as if there’s a container that sits 10-20px from the top of the page that my blog is sitting within. Please take a look at my site http://www.cinic.co.uk/. The blog is on the ‘news’ link. Thanks

  4. Thanks for a very useful tutorial, I just used it successfully (I know you now have a twentytwelve tutorial too, but I found it was easier to get twentyten to match my website’s style).

    However I think there’s one little omission – in the code you supply for the footer there’s a closing body tag “”, but neither your header.php nor index.php code has an opening “” tag in it. I’ve stuck mine in header.php, just after the closing head tag. Not that leaving it out makes any difference in my browser! But of course it’s good practice to include it, and I believe in certain circumstances it could cause an error, e.g. some (older) browsers, XHTML pages, or if the first thing inside the body element were a space character or a comment.

    Thanks again for such a good tutorial which I’ve been able to follow even having never used WordPress before yesterday!

  5. Great Tutorial but I was stopped as well on the part where you say add my site’s php. I am using opencart on my site. What files do I get for this header and footer? Some of the files are also .tpl. Is this possible to integrate into an opencart site? Thanks much for your help

    1. Hi Mark

      I haven’t explored integrating WordPress with OpenCart. Others have asked this question before and I’m pretty sure there’s a blog module for OpenCart. Alternatively, you could create PHP snippets from your OpenCart header, nav and footer calling them site_header.php, site_nav.php and site_footer.php or similar. Or, they may already exist. Then follow the tutorial.

      Other than using the OpenCart blog module, the easiest thing to do is install WordPress and have a link from WordPress to OpenCart and from OpenCart to WordPress. Unfortunately, this way wouldn’t let you keep the OpenCart header stuff in WordPress.

      I hope this helps.

  6. Great tutorial! However I had to stop when I got to the .php files bit for my own site.

    My own site doesn’t have any .php files that I have created. I have only used .html and .css can I do anything like this without .php as I have zero experience.

    I really just want to keep my own logo,nav bar and footer (all created with html/css) and create a div tag in the middle of the page where I can insert a blog.

    Any ideas would be great.

    Thanks
    Sarah

    1. Hi Sarah

      If you can create one file for the logo and nav bar, maybe call it site_header.php and another file for the footer, perhaps called site_footer.php, you should be OK to proceed. For site_header.php, make a file with everything above the banner, or you could include the banner. For site_footer.php use everything inside and including the div “.footercont”. It doesn’t matter if you call the files .php or .html but I would use .php just to help tie into WordPress. You’ll need to play around with it some and correct the links to other files including artwork.

  7. I am able to easily install wordpress on my exisiting website using cPanel. I also have a blog on wordpress.com that I’ve been running for years. I’m a newbie to wordpress stuff, but I have done a few things like make a child theme and edit it.

    I would love to remake my whole website (on a domain/hosting I already own) using wordpress AND integrate my exisiting blog onto my site in a directory or subdomain. How do I use my exisiting wordpress.com account to install wordpress on my domain? Or is there no way to do this?

    1. Hi Hannah

      I’m not very familiar with wordpress.com, but with the self-hosted WordPress installation, you can export your content as an XML file with Tools > Export, then import the XML file at another WordPress installation with Tools > Import > WordPress. After selecting WordPress under Import, you’ll be prompted to install the WordPress Importer plugin. It’s pretty easy. Let me know how it goes.

      Steve

  8. Hi. Thank you for this awesome post. But no matter how i do it, i just can’t get it right. I tried this tutorial with wordpress twentyten, it worked. But my page was not well aligned. It was looking very ugly. Then i tried the twentytwelve tutorial. But that ended up showing me a blank page all through. So i changed back and am currently using this twentyten tutorial. I will be very satisfied if i can get this twentyten tutorial perfectly aligned for my blog. Please if you have the time, check out my blog (http://luli-creations.internethood.org/blog/). Any help will be appreciated. Thanks in advance.

    1. Alignment problems are almost always CSS problems but in this case it looks to me like you have get_template_part( 'loop', 'index' ); in index.php twice. Plus, I can see from your CSS that you are using twentyten as a child theme Template: twentyten but import the twentytwelve styles @import url('../twentytwelve/style.css'); instead of twentyten. I suppose that could work but it might cause some headaches.

  9. Hi

    I have an existing asp.net web application and i wish to integrate a wordpress blog with the application. Also the user once logged in my web application can go to their home page in wordpress blog without the need of relogin. How can we map users from web application to their blogs in wordpress???

  10. Hi are using WordPress for your site platform? I’m new to the blog world but I’m
    trying to get started and create my own. Do you need any html coding knowledge to make your own blog?
    Any help would be really appreciated!

    Review my site: hotte aspirante ilot (ireport.cnn.com)

    1. Yes, you need to be somewhat familiar with HMTL, CSS, and PHP. It’s not hard to learn, but this tutorial requires a basic knowledge of those three technologies.

  11. I am viewing in wordpress twentythirteen . I can’t foung following files in it.
    loop-attachment.php
    loop-page.php
    loop-single.php
    loop.php

    AND also in 404.php i can’t found


    I AM BEGINNER TO WORDPRESS . CAN HAVE TUTORIAL COMPATIBLE WITH LATEST WORDPRESS ???

    1. You could use an iFrame. But that would show the blog header and footer. You could use CSS to not display that parts of the blog you didn’t want to show.

  12. Howdy would you mind sharing which blog platform you’re working with?
    I’m going to start my own blog soon but I’m having a hard time
    making a decision between BlogEngine/Wordpress/B2evolution
    and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely
    unique. P.S My apologies for getting off-topic but I
    had to ask!

      1. I think I would have a separate installation for WordPress with a link to it on your Opencart site. It’s easy enough to add links from WordPress back to Opencart and I’m sure it’s easy to add a link from OpenCart to a WordPress blog.

        There may be an Opencart extension for blogging or even one for WordPress.

  13. Awesome post, very helpful!

    I did have to make some adjustments, though, but to correct issues generated by my own coding (site divs with the same name as WordPress divs, URL paths, etc)

  14. Hello, Thank you so much for this tutorial. It was a lifesaver. I have a question about the pictures from the former website. None of my pictures are showing up in the blog. Everything else is working but the pictures aren’t showing up. I changed the path in the header.php in the mytheme folder to take me to the website image folder (outside of mytheme folder), but it still didn’t load the image. I also made a new images folder in mytheme folder, but it’s still not working. How can I get my header image to work in my blog? Thank you!

    1. There must be something up with the paths to the images. Try using an absolute path like “http://www.faithfulokoye.com/images/”. If you post your blog link here perhaps I can see what’s up.

      1. Thank you so much! I had figured this out, but then I run into an even worser problem when I started adding new posts. It seems like I needed to redirect it for every new WordPress post. But this answered my question. Thanks!

    1. Hi Dennis.

      I had a look at your blog and I see everything but the post or page content. Things look a bit rough right now but that can be resolved later with the CSS. Have you done the stuff on page 5 of the tutorial yet? That should get you some post or page content.

      Steve

      1. Thanks for the fast reply. Working on page 5 now. Seems I had header and footer there twice, since added early in process, then just finished adding website structure that added both a second time. Was that correct?

  15. Hi there this is really great and I am part way through. However the version of WP I have doesn’t have twentyten, just twentyeleven and twentytwelve. I tried to rework the loop part using the content files from twentyeleven instead but just got an error. Any chance you could let me know what to do from ‘Add the blog content’ onwards? I have the sidebar in place etc just need to get the main part of the blog in. Really helpful though and very detailed thank you!!!

    Deb

      1. Hi I did download the latest version and got it working so that a blog post gets pulled in but for some reason when I place this code in the index page:

        the footer content totally disappears! If I remove it it comes back. I mean the code totally disappears almost like the loop is causing it not to get that far. This is the URL http://www.smartparking.com/blog/ are you able to give me any pointers please? Are the div ids you put around the includes relevant and required? Thanks, Deb

  16. Thank you guys so much!!! I am new to .php and wordpress and this tutorial not only helped me wrap my head around WP (something the millions of tutorials failed to do), but it also blew open open my understanding of php and how to use it.

    Thanks!
    – Flipset, MPLS

      1. Yes!!
        I’ve been following your tutorial but some things have changed from ten to twelve and some files doesn’t exist (loop…)
        So right now, I’m halfway there but stuck.

        Any change you have progressed on the twelve updates since June 17th? (no pressure….. haha)

        Thanks a lot!

  17. Good tutorial, but I found some spots kind of confusing and ended up having to back track a lot… My blog didn’t turn out so good, so I will try again tomorrow..

    I will try starting out with twenty ten since that is what this tutorial seems to be based off.

    1. Hi Racheal

      This tutorial is definitely Twenty Ten. There have been other similar comments and I totally agree. I’m planning to do a new tutorial using Twenty Twelve or some other free responsive theme as soon as I can. Or if I’m really ambitious, do a responsive theme from scratch and use that. That does sound ambitious.

      Anyway, thanks for your comment and I’ll really try to address this soon.

  18. Dear swolock,

    that is just a fantastic tutorial. It took me less than three hours to seamlessly integrate a brand new wp blog into my website. And I have hardly had any experience with wp before.

    Very well done.

    You might want to update the inclusion of twentyten to a newer version as the new wordpress installation comes without twentyten and the newer templates use different files (there are no loopxy.php anymore).

    Thanks again for this wonderful piece – you’re a star!

    Best,

    Armin

    1. Hello Armin

      You’re right, I should update the tutorial. It’s out-of-date. I keep waiting for a quiet rainy afternoon to get started on it, but I just haven’t done it yet.

      And to tell you the truth, at this point I really prefer a complete rebuild using WordPress, one of the newer stock themes, and a child theme. For most smaller websites it isn’t that hard to rebuild the whole site with WordPress and it makes a lot of sense in the long run. It’s really terrific what one can do with Twenty Eleven or Twenty Twelve, a child theme, a decent knowledge of CSS, and a few plugins.

      Thanks for the nice compliment.

      Steve

  19. Thanks for a great post, I searched around for clues as to how to integrate WordPress as it was a totally new thing to me, and nothing came close to your blog in terms of help. Once I found it, I stopped looking elsewhere and followed all your instructions and it all worked beautifully. My blog is now up-and-running and my latest post links to your blog and thanks you for your help.

  20. Hi,

    Thanks for a great tutorial, have been wanting to intergrate a wordpress blog into a site i had to do for a while, i looked at a few other tutorials, but none got to the point like yours did. Well set out and informative and it works!!!!

    Thanks again you are a star

    Gus

  21. Hi,
    Thanks for a creating a great tutorial for us all to learn from.

    I have one question for you, do you have to use the twentyten theme or can i use twentyeleven or twentytwelve?

    Regards.

    Carl.

    1. The tutorial is written with twenty ten in mind but the concepts are similar. I need to update the tutorial for the newer themes, just haven’t had time.

  22. Hello
    This is the best tutorial I’ve found on this yet. The issue I’m having right now is from step 7. You said to repeat the process from step 6. However I’m not that clear on exactly what your saying to do. What exactly am I going to copy from those pages in the Twenty Ten folder, and what am I’m going to replace in them when I add those pages to the mytheme folder?
    I’m just not clear on what I’m repeating from step 6.

    The page I’m creating in wordpress for the blog is “Josh’s Lawn Care Advice” on my website.

    Website URL is http://jmrandall.org/JoshM/

    Thank you so much for your help.

    Mark

  23. Ah.. not to worry,found the answer to making the content be constrained to a percentage of the screen so it works with the responsive bootstrap setup

    #mainContent { max-width: 60%; float: left}

    Hope it helps some one else
    Thanks

    Jon

  24. Spoke a little too soon..

    One small problem that if someone could help I would be super grateful.

    to stop the side bar (search bar) being above the content and make it so it appears at the side, I added to my style.css file in mytheme folder.

    #mainContent { width: 400px; float: left}

    This solves the problem, but as soon as the content is constrained to a width (e.g 400 pixels) it is no longer responsive (it does’nt scale when the browser is made smaller so wont work on an iphone for example which is obviously the joy of having a responsive site.

    Without the 400px constraint the main content behaves as it should rearranging the paragraphs to fit.

    Can someone please let me know if there is a way to tell the content allow the sidebar to be at the side, unless the window is scaled down… My main site is using bootstrap if that helps?

    Please see my blog over at http://www.stormystudio.com/blog

    Cheers

    Jon

  25. AMAZING… ABSOLUTELY AMAZING…

    I consider myself a proper novice when it comes to HTML, PHP and web design… so thankyou so much for this tutorial.

    I followed through all your steps, got properly stuck here and there, cut up my own dreamweaver layout.dwt file into separate site-header.php, site-footer.php site-middle.php and it all worked…. amazingly.

    I honestly feel like I’ve scratched the surface of how CSS works and really quite excited and amazed that I’ve done it. I put an advert on a freelancer website and had over 30 quotes in an hour of people saying they would do it for over £150.00 so for me to do it by myself in about 2 hours is great.

    Hurdles I came up against and ways I fixed it. Hopefully some of these might be helpful for someone (as other peoples comments and fixes had been for me).

    Problem no.1: When creating the style.css for mytheme found that my current HTML website was missing a style.css file to be able to link to….but it had a good few other css files. I quickly found out my one was called light.css (and dark.css) as it was from a template and the seller included the two options. When linked correctly and testing the blog my background texture was seen at the blog address so I knew it had worked.

    Problem no.2: My WordPress installation did’nt come with the TwentyTen theme and all the loop files required for the tutorial. The newer versions, Twenty Eleven and Twenty Twelve have similar files called ‘content’ and ‘content-link’ (instead of loop-attachment). I’m sure there is a way to use those files instead, but in the end I went in the wordpress dashboard, looked at themes, searched on the ‘installing themes’ page and installed TwentyTen, and then used the files as described in the tutorial.

    Problem no.3: My site is HTML5 website is built from responsive framework bootstrap, and instead of having header and footer php pages it has a layout.dwt file, which is a dreamweaver template file that allows me to change that and it update the header and footer in all my HTML pages. To make it work with this tutorial I jumped in and broke the layout file up into the 3 needed php files, mostly guessing where to copy and paste text from, upload and test until it worked… essentially taking everytihng from the very top to the the last tag to make the site-header.php, from from the very bottom to the highest text for the site-footer.php and everything in the middle became my site-main.php (I called it site-middle.php). cutting around the description tags was a guess, but it worked…

    The last few steps of the tutorial went without a hitch and borrowing all the code from the different TwentyTen files was quick and easy once I understood what we were doing.

    Problem 4: My side bar (search box) was appearing above my main content, and my main content was hard on the left margin of the page. To move the main content up so it was level with the top of the search / side bar, and also to move the main content off the left margin I added the following to the bottom of the style.css file in mytheme folder.

    @import url(“../twentyten/style.css”);
    @import url(“http://www.yourwebsiteaddress/css/light.css”);
    #primary, #secondary { width: 240px; }
    #Content, { margin-left: 50px}
    #mainContent h1, { margin-bottom: 20px}
    #mainContent { width: 700px; float: left}
    #mainContent { margin-left: 50px}

    Once again, can I just say thankyou for making this tutorial, it’s one of the most helpful things I’ve seen and learnt from on the internet in a good while… now I guess I better start blogging :-)

  26. Hi… great tutorial…. by far the and away the best WordPress integration one online.. actually learning whilst doing it which is great.

    One problem i’m having is that my header and footer for my site and handles by a layout.dwt file. So are a dreamweaver template file, I adjust this one file and it updates the header and footer in all my files.

    Is there a way to use this with your method? … or do I need to copy out the header code and footer code separately to make the neccesary bits.

    My main site is also using a HTML5 bootstrap website template to make it responsive…

    Many thanks, it really is a well written article/tutorial. So thank you for putting it online.

  27. I’m trying to figure out how to get the Like/Send buttons to display on posts only, not pages (like the homepage). Is there a setting somewhere I’m missing?

  28. I was desperately looking to learn this and have been to various tutorial website. But this was one of the best I have ever come across and the most amazing one too.. I followed it and have my blog ready and working… Thanks.

  29. Hey Swolock,

    I have been trying to follow this blog and wanted to see what you thought. Right now I part of the way done and my site looks nothing like the original site. I am not 100% sure where I went wrong or if I am anywhere close or far away but would like to see what you see or think!

    my site: http://www.keilyfulton.com
    Blog: http://www.keilyfulton.com/blog
    site I want it to look like: http://www.susanstripling.com/blog.cfm

    Thanks for your help!

    Sincerely,

    Greg Fulton

  30. Hey Swolock,

    Thank you very much for this post, although I am spending hours trying to follow it I have gotten further with yours than any other way I have tried. I am having issues, my CSS was not pulling properly into Style.css in the my themes folder, so I just pasted all my CSS in there, obviously my blog at this point is looking nothing like my website so I am not sure where I went so wrong! Could you please take a look at it and let me know where to begin to fix my mistakes!?

    Thank you so much!

    Greg Fulton

    http://www.Keilyfulton.com is the original site
    http://www.Keilyfulton.com/blog/ is the blog I am trying to make look like her site
    http://www.susanstripling.com/blog.cfm is that i would like my blog to look like!

    Please help!!

    1. Hi Kimberly,

      It seems like everything is working from what I can see. I guess I don’t understand the problem.

      Do you want to just show snippets or excerpts on the blog ‘home’ page instead of the whole post?

      swolock

      1. Thanks so much for the response. Now I could be wrong here so please forgive me if I am. When you click on a post in a blog (for instance, this post) the title appears as: How to Integrate a WordPress Blog Into An Existing Website | Graphic Design. Website Design | River Graphics. The title changes depending on what you title the post as.

        But when I click on a post in my blog, the same title appears on every post (Boost Your Bank While You Hit The Books). I’ve tried every possible setting in the WP admin to no avail.

        The regular WordPress dev cant seem to fix it because it’s too integrated with php. Our php dev cant do anything with WordPress. :) Any ideas would be appreciated.
        Kimberly

        1. Unless I’m really not understanding your what you’re saying, I still think you don’t actually have a problem. When I visit boostapal.com/blog there’s a page with all of your blog posts on it. This is the main blog page. It’s a listing of a number of blog posts in one long page. When I scroll down to the What Boostapal is All About listing and click on the title I go to a page with just that post and with the title What Boostapal is All About. Same with the other articles on the main blog page.

          Is what you want is just snippets for each post on the main blog page and then when you click on the title you go to the full blog post.

          If this is correct, then the problem is not due to a WordPress setting. What you need to do is insert the ‘More’ tag (http://en.support.wordpress.com/splitting-content/more-tag/) after a few lines or a paragraph or so, OR use an excerpt (http://en.support.wordpress.com/splitting-content/excerpts/) in each individual blog post. When you visit the main blog page again you’ll see the titles as links, an excerpt or paragraph of each post and a read more link.

          1. Thanks so much for the help. We finally have it worked out. The meta title and meta description weren’t able to be edited. We finally used an SEO plugin and were able to finally get it to work (although not immediately). Thanks very much for all the instruction and for this great tutorial!

            Kimberly

      1. Hi Steve,
        Yes, I did! I found the needed code in a book and online. Thanks again for your wonderful tutorial — my clients will be thrilled with the results.

  31. Thanks so much for the tutorial!

    I’m having one issue with all my links in the blog redirecting to the homepage of my site. I need to revisit everything to try to figure out the issue, but so far I’ve come up empty.

    Regardless, thanks for the tutorial. It’s a huge help.

    1. Hello J.J. It looks like you figured out your issue. I’m guessing it something to do with getting the path correct.

      Steve

  32. Hello,

    I am stuckon “The Core Files” part and am having an issue finding the nav.php file. I’m looking in the Includes folder but there is only nav-menu.php and nav-menu-template.php . I skipped this step and performed everything up to “Add your sites CSS file to the WordPress’ style.css” and I am getting a 500 Internal Server Error when I try to view the blog.

    1. Hi Adrian

      The file names are just examples. Your nav.php file might be called something else. If you could provide the URL to your website as well as to your blog, maybe someone could help you.

      Steve

  33. HI! So I’m new at wordpress. Well at least thats my excuse. Anyway I am having a problem with the second step. Embarrassing I know. When I look in themes mine is under broken.It says their “Template is missing”. I have fallowed your steps however. Anyway if you can advise me that would be great.
    Thanks, Abeer

    1. You probably have something not quite right with style.css or the folder name. Is the file called ‘style.css’? It has to be. And it has to be in a folder named the theme name in the themes folder. Plus (obviously) all the stuff at the top of the CSS file has to correct. I can take a look at it if you want to paste the top content in your reply.

  34. Hi,
    This tutorial is exactly what I was looking for and I’ve managed to get the whole thing working without any problems whatsoever! So, thank you!!
    My only question is… my site’s include files will be getting updated regularly. From what I can tell, if these files are updated, they will need to be copied again to my WP theme in order for them to update in my WordPress blog. Is there any way to have the includes in WordPress reference the includes in my site rather than making copies every time?
    Any advice will be greatly appreciated.
    Many thanks,
    Rachel

    1. Hi Rachel… you might want to try a regular old PHP ‘require_once’. Do a search for ‘PHP require_once’ to find lots of info about it. Although not efficient, it doesn’t seem like a big deal to FTP a file to 2 different spots.

      1. Just thought I’d update with my fix for this. In the ‘site-nav’, ‘site-footer’ files, rather than copying and pasting content from my website’s include files into here, I simply referenced my site’s includes using:

        I’m not sure it will work for everyone, but it certainly has for me, and means not having to update the same content twice.

        1. Sorry, my code obviously got removed. I’ll try removing the php tags:

          include($_SERVER[‘DOCUMENT_ROOT’].’/includes/footer.php’);

  35. Can you help me resolve an issue I just discovered with my blog’s sidebar? Although it had been working for a month, I am suddenly unable to log in into WordPress from my blog page. That part of the sidebar has disappeared, and I’m not sure why. My blog URL is cefo.cornell.edu/blog.

    Some possible things that could have caused the disappearance of the sidebar:
    Today, I opened the my-config.php file to look for the host name and database password. I also opened a couple other files by accident. I closed them without modifying them, though, I’m pretty positive.
    Today, two different administrators of the blog were logged into the blog’s wordpress account on two different computers. We were trying to install a widget, but didn’t succeed.

    Can you think of an easy way to get the sidebar “log in” option back into being? Thanks very much!

    1. Hi Sophie

      Have you tried logging in through the standard login URL? It’s usually wp-login.php appended to the end of your blog’s URL. Send me an email through this website if you need more specifics.

      As for your missing sidebar login, it may be that it was removed from one of the sidebar widgets. Just drag it back in and click save at the bottom of the widget.

      I don’t know why it would have disappeared. Perhaps someone changed the theme and the sidebar widgets weren’t remembered by WordPress.

  36. Hi,

    Fantastic instructions and got the whole thing looking how it should.

    When the blog part of my site loads all the posts are there correctly. However, none of the links work, The Post Title, author name, comment or edit for example. The all produce “Not Found
    Apologies, but the page you requested could not be found. Perhaps searching will help.”

    Anyone have any ideas?

    Cheers

    Jack

      1. It looks like you figured out the problem! Can you tell us what was going on? I looked last week and everything looked OK. What was the problem?

      2. Hey Jack,
        It would be great to find out how you fixed this. I’m having the same problem – I’ve been messing about with htaccess files etc but still, none of the blog links are working.

        Can you help??

  37. Hi swolock. Thanks, I looked around for a week and this was by far the best tutorial.

    I only have one problem I don’t understand. I was waiting for godaddy access to create a database, so in the mean time I created the blog on my personal site, http://www.saltyart.com/blog and it came out great.

    I just created a database, updated wp-config with new details, and just moved the files over to the site the blog belongs to but it’s not lining up correctly in any browser but Chrome.

    I feel like I had this issue when I was building it on my site, and possibly copied the style.css to another directory and it worked.Did I miss a step you think?

    PS. I didn’t have to go through with page 4 css changes on the original (saltyart.com/blog) so I didn’t change that.

  38. Hi there

    Thanks for a brilliant tutorial, the best one I could find on this subject. I’ve got a blog page up and running
    but when I click on any of the links (eg admin, a categoty, a monthly archive) I am just getting a blank page,
    do you gave any idea at which stage I’ve gone wrong ?

    cheers

    JB

    1. Hi JB

      It would be helpful if you could share the URL to your blog. That way we could perhaps diagnose the problem.

      swolock

          1. page looks ok but when I click on any of the wordpress
            links I just get a blank page (eg admin / leave a comment / January 2013 etc)

          2. What are the setting in Settings > General > WordPress Address (URL) and Site Address (URL)? How about the setting under Settings > Permalinks?

            Is your website hosted by Network Solutions? They have odd and awkward server configurations that can raise hell with the basic WordPress settings.

  39. Hi,

    May I know if this method will work with WP themes other than TwentyTen? So that I can include other customised WP themes into an existing website? Thanks!

    cheers,
    tim

    1. This method could be adapted to other themes. But many themes handle the CSS structure a little differently so it could be some work. Understanding the theme structure is step one.

    2. Hello,
      AWESOME tut! However, I have run into a snag. My installation of WP doesn’t have twentyten, just twentyeleven and twentytwelve. There are no “loop” files in either folder. How do I skirt this issue? Which files do I copy and point to instead of the loop files?

      A little background on my project. I’m trying to add one blog page to my existing site. Should be pretty simple. I just want the one page /”blog” to look and function exactly how my existing site does. I converted my site from html to php and created include files specifically for this new blog page. That’s about it!

      Thanks,
      Casey

  40. hello

    i have 5 pages of catgorie content in bootstrap
    will i be able to show these specific pages of content, ie each blog category in its own page, as in the html version

  41. Thanks for this awesome tutorial. I went all the way through and it almost looks like my website.
    I still struggle with a few things:

    1) getting the header to link to the correct domain (it tries to getch the pages one the blog.afr… subdomain.
    2) getting the posts to show on top of the page, rather than below the side-navigation.
    3) getting the entire text (including header links) formatted to a Verdana family. I changed it in the 1011 stylesheet which caused at least half the text to format. 😉

    I’m pretty new to wordpress and php, and for now invested too much work in my current website to already do the full change to wordpress (i want to wait for my wp-skills to advance). It would be great if you could give me a hint, if you have any idea what could be the problem

    ALSO, my website includes a side navigation on the left…any way how to get this one in?

    Thanks in advance,
    Dan

    Here’s my website as it is:
    http://www.africaextreme.co.za

    Here’s the blog so far:
    blog.africaextreme.co.za

  42. thank you very much for this tutorial…it rocks!
    i’m new to wordpress and i managed by myself to integrate the blog inside an existing website

    1. I’d do the best I can to answer your questions. Sorry if they are oversimplified.

      1) getting the header to link to the correct domain (it tries to getch the pages one the blog.afr… subdomain.

      Try using absolute URLS instead of relative URLs. So http://www.africaextreme.co.za/index.asp instead of index.asp or /index.asp

      2) getting the posts to show on top of the page, rather than below the side-navigation.

      You’ll need to modify the CSS width of both sidebar1 and mainContent. Firefox and Firebug are very useful tools for helping to untangle CSS problems.

      3) getting the entire text (including header links) formatted to a Verdana family. I changed it in the 1011 stylesheet which caused at least half the text to format.

      Use Firefox and Firebug to see where in the CSS the fonts are declared. It isn’t just in body, there may be other spots as well.

      I’m pretty new to wordpress and php, and for now invested too much work in my current website to already do the full change to wordpress (i want to wait for my wp-skills to advance). It would be great if you could give me a hint, if you have any idea what could be the problem

      ALSO, my website includes a side navigation on the left…any way how to get this one in?

      You’ll have to create a third div for the content area. So you’ll have the left nav div, the main content div and the sidebar div. There are many ways to set that up. You could do search for 3 column CSS layout or similar. You may need to add extra divs to enclose what’s already there.

  43. Hi there a great tutorial ! the best i could find online and I will definitely recommend it on – but I seem to have messed it up. It was working fine before and now I have fiddled about with it, I have an issue.
    The following is fine:
    http://www.npcounselling.co.uk/TheHappinessConnection/index.php
    HOWEVER
    if I try to look at all the articles in one page as in:
    http://www.npcounselling.co.uk/TheHappinessConnection/Blog/
    There is no styling on the page, I cant seem to work out where I have gone wrong – can you help?
    Thanks in advance

  44. Hello,

    I am trying to do this and I face a small problem in faze 2 in the point 1 and 2.
    I use an OpenCart script and I wish to set up a blog for it. Well I don’t find the nav.php file (of course I wasn’t looking for that name) and I didn’t understand well if I have to include that file too to my theme folder along with the site-header and site-footer….
    Well if you can give me a hand here it will be awesome.
    Thanks anyway for this tutorial it is awesome.

    1. I’m sorry but the tutorial is very specific and does not address adding a blog to OpenCart. Perhaps OpenCart has a blog module. I would check in the OpenCart community forums.

  45. Steve, thank you so much for this detailed and well-written tutorial! It’s very helpful!

    I just stumble over one little detail. Seem to have a knot in my brain and I can’t solve the problem. I want to integrate a WP blog into a website that has no footer.php or header.php. It is simply one index.html and that’s all. I guess (hope) this simplifies everything for me, but I just can’t seem to get the point… would be great if you could give me a short hint on how to proceed.

    Cheers,
    Mel.

  46. Hi,

    Firstly id like to thank you very much for taking the time to create this tutorial as this is by far the best I have come across.

    I have followed your steps & created my blog under the news tab just how i wanted it, but now im hoping you may be able to advise me. Under the products & services drop down tab i currently have 3 static pages, what would i need to do to be able to turn them into pages i could update in wordpress also.

    Many thanks for any help & advise you could give me.

    Regards.

    Carl.

    1. Carl,

      I seems to me that the only way would be to convert your whole website to WordPress. It would involve a bit of work but would probably be well worth it. You could develop a child theme based on the standard Twenty Ten theme that is installed with every WordPress installation. It wouldn’t be very difficult since your current site has some Twenty Ten features already like the header, navigation bar (called access in Twenty Ten), sidebar, footer widgets, and the actual footer. You could install a plugin for the slider. There are many. You could create a custom widget for the logos at the bottom or just hard code them in WordPress’ footer.php. Be sure to read up on creating a Child Theme first. Do not change ANY files in the Twenty Ten theme folder. Plus you would be able to use the many fantastic plugins for WordPress for SEO, lightboxes, twitter and facebook connections, etc.

      Best,

      swolock

  47. Awesome, This is exactly what I needed for my three page html website! Now I can add as much content to my website as I want without writing new html files. Thank you so much!

  48. Wow, great just great! TY so much for this, Just one question what am I doing wrong when I try to add the rest of my pages. I have a very simple website, three pages. (I want this blog to be page four) I was able to rebuild the Index page but when I try to add the other two pages a Contact and service page I just get blank pages. the website link attached to this post is just the 3 html pages website, this WP mod is on my localhost. I’ll tell you what i did when I tried to add the next page and maybe you can tell me where I went wrong. I open index.php and add my main content from the contact page between the and save it as contact.php in the root folder, and get a blankpage, any ideas?

  49. I was so happy to find these instructions. They were exactly what I was looking for. Unfortunately, I am having trouble. I’m a complete novice. This is my first time creating a website and I’ve been fumbling along but making it work. I’m on the Core File section and can’t find the files containing the website anywhere. I’ve looked for days and I feel like an idiot but I don’t see them. The only files that I see are the WordPress files. Can somebody PLEASE help me? Thanks in advance.

    Laura

  50. Thanks for the amazing tutorial, I managed to get my site up and running great.

    I have however got 2 small problems:
    Above my navbar I seem to have a gap that I can’t see where it has come from
    The whole container seems to be pushed slightly left in comparison to the regular site

    I have tried playing about with firebug but nothing seems to be working, could anyone offer some help. The blog in question is http://uclultimate.co.uk/blog/ if you have the time. Thanks!

    1. Hi Alex

      Regarding your second problem, it may be that on some of your regular site pages you have no content and subsequently, no scroll bar. In Firefox, and perhaps other browsers, the scroll bar pushes the content to the left a bit.

      About the gap… I don’t see what’s causing that either. You might try putting titlebar2.gif in it’s own div with 0 padding and 0 margin.

      Here’s a cheat, one that I’m not crazy about because it doesn’t tell us why the gap is there. Make the bottom margin of .logobar about -6px. So the CSS would be margin-bottom: -6px;. That should close the gap.

      swolock

    2. I forgot to add…why not just do the whole site in WordPress? Create a child theme for the standard WordPress theme Twenty Ten. That could work really well.

  51. Hello!

    This was a fantastic tutorial and definitely the most straightforward one I could find for doing this particular task.

    I was able to follow along just fine despite my novice abilities in html/css. I got to the end and (in my estimation) I have just some serious CSS fixes that need to be done in order to get my blog looking like the rest of my site. Rather than spending another couple of days with trial and error, I was wondering if anyone would be willing to take on the little project of helping complete this blog. Let me know what it would cost to get this http://sumseattle.com/blog/ looking more like this: http://tinypic.com/r/2ypj1wp/6

    I know I’m not far off but there are certain things I just haven’t been able to figure out after a full day of tinkering. I haven’t been able to:
    -get my content centered correctly
    -make certain elements (header bar, footer blue color) stretch all the way across a browser window
    -position the actual blog post area and side bar correctly

    I built my html/css site myself so I think all of these issues are a result of a novice web designer trying to make this stuff work. It all just caught up with me so any help would be greatly appreciated! Thanks so much!

    1. Hi Kurtis,

      I’m glad you found the tutorial helpful, but not so glad you struggled with some parts. For me, CSS is sometimes a bit of a battle, so don’t feel too bad about spending all that time with it. I’m sure it was frustrating. And even though it didn’t work as well as you would have liked, I’m sure you learned a lot.

      To answer your questions:

      -get my content centered correctly
      In your #content div add 0 to the top and bottom margin like this margin: 0 auto; AND remove the float: left; you have assigned to #content. It looks like you have #content in 2 different CSS files so you’ll have to make sure making changes to one doesn’t mess up something else.

      -make certain elements (header bar, footer blue color) stretch all the way across a browser window
      Sorry, this one is fairly tricky and beyond the scope of this tutuorial.

      -position the actual blog post area and side bar correctly
      This is the most common problem people ask about. It’s usually a matter of adjusting the widths of the content and sidebar divs and making sure you clear the float after the two divs. See some of the other posts asking the same question for a more complete answer. However, in your case it’s going to be affected by all that comes above it, like the header that has absolute positioning. So I’m afraid I don’t have a clear solution for you on this one either. If I get some time I’ll take a more careful look at your CSS with Firebug. By the way, I only use positioning when I absolutely have to.

      Regarding your request for help, I’ll will send you an email about what I can offer.

      swolock

  52. This is a great tutorial, although I had some trouble in grabbing those header/footer/nav.php as my website was done in HTML. I then converted it to a semi html/php site to be able to proceed…

    Anyways, I seem to have a similar issue that the posts (main content) are appearing below the side bar, not only that, it also seem to stick (no padding) to the left side of the container… Also, the entire container has some distance between the top of the page, unlike the other pages I have on the website. The website is http://www.sterlingtowing.com, and the blog under /blog. (I haven’t updated the other pages yet, so the blog link is only appearing on the home page of the website).

    I am still very new at this, any directions would be greatly appreciated!!

    1. I fixed it by giving “content” a width, float left, and margin-top: -170px (I am not sure why it just wouldn’t move to the top… ).

      thanks again for the nice guide.

      1. I’m glad you solved the problem. That’s almost always fixed by adjusting the CSS. The content div probably wouldn’t move to the top because of the width of either the content div and/or the sidebar div. It looks like you have a div ‘sidebar1′ with no attributes. I believe if you give sidebar1 a float:right; and a width of at least 200px (the width of primary and secondary) you might be OK without having to give content the negative top margin. I see that it works but it seems a like a somewhat indirect route to a solution. That said, if it works, why not use it.

        1. I changed it to your method by giving sidebar1 some attributes, it worked better than my workaround method! (As when there is no post in the blog, the negative top margin is not working that well 😉

          Thanks again!

  53. First I’d like to thank you for this tutorial. Wonderfully explained! Unfortunately I do have a few issues.

    First, let me say I am new to web development in general but even newer to WP.

    So after I followed the whole tutorial, I end up with a decent looking blog page except for 2 things:
    1. My jQuery menu on top of the page does not respond like it should. It is working on all other pages of the site except for the blog page.

    What I did: I pasted the code for my own menu directly into site_nav.php. I also called jQuery and the other scripts I need into site_nav.php. Finally, I updated the paths in the css file so images appear properly. Result: the menu appears but is not responsive, e.g.: the JS code doesn’t seem active at all (I should get some sub menu on hover and an image should be called). Is site_nav.php the right page to use?

    2. I also have the problem, like others, where the sidebar appears higher than the main content. When i try to play with the top: property, both section move at the same time :( I tried adding a .clearboth class to my css but not sure where to actually put the tag?

    I’m running my site on localhost for now so I’m not able to give you a link. I would appreciate a hint or two but would understand if impossible with so little details.

    Thanks again!

    1. Fixed my second problem with the sidebar :) I had to set the position: relative first and then play with top: instead of messing with margin-top!

    2. Hello Orphu,

      I’m glad you figured out how to fit that pesky sidebar in the right place. It’s usually a matter of fussing with the widths and sometimes making sure you clear the floats.

      As for your jQuery issue, my guess is that path to the scripts isn’t quite right. Try using a full path like ‘http://mywebsite.com/thescriptsfolder/thescript.js’.

  54. By far the most comprhensive tutorial on the web. But I am stuck. I am following your tutorial to integrate a WP blog into a HTML site. And it doesn’t seem to work beyond the part where I get a title on the blog. The site is a subdomain on a shared host. Is that the problem?? Should I move the domain to its own host?
    Site in question is http://arizonamedicareadvisors.com
    The main domain is http://searchphoenixarizonahomes.com which is a wordpress
    I appreciate any direction that you can provide

    1. Hi Ralph

      The subdomain shouldn’t matter. Anyway, do you have an add-on domain, where an additional domain (http://arizonamedicareadvisors.com) is hosted in a folder in the primary domain (http://searchphoenixarizonahomes.com). Is there a separate WP install in the add-on domain folder? Maybe you could elaborate a bit more on your set-up. It’s unlikely http://arizonamedicareadvisors.com needs it’s own hosting account.

      Can you just add blog posts to http://searchphoenixarizonahomes.com and setup a redirect so that when visitors want http://arizonamedicareadvisors.com they end up at http://searchphoenixarizonahomes.com/blog?

  55. I really appreciate the detailed instructions. I am having the same issue with the main content appearing below the sidebar just as sifi and bill did. For the instructions you gave for May 29, 2012 at 4:04 pm response where does one do this exactly and how?

    “If anyone else is having a similar problem, that is if I understand what you’re saying, one thing you might need to do is “clear” the floats. So if you have a div that’s floating left and a div next to it that’s also floating, most likely right, you may need to add some CSS to clear the two floats. I like to do that with following: br style=”clear:both;”. That puts in a br that you can’t see and tells it to clear both floats. Of course the best way to do that would be to create a CSS style like .clearboth { clear:both; } and assign the class “clearboth” to the br, a la br class=”clearboth”.”

    How does one clear the floats and where is this done exactly in which files? Forgive me but I am new and pardon my ignorance.

    Thanks

    1. RzaRcta,

      It looks like you have a couple of problems. Before I try to answer your questions, I would like to suggest you become very familiar with and use Firebug for the Firefox browser. It’s an invaluable tool for seeing the CSS on your site as well as trying out solutions. It doesn’t solve a problem but it can help you figure out what’s what.

      Clearing the float: If you have one or more divs that have a CSS float, like float:left or float:right you often need to “clear” the floats so everything lines up as expected. My usual trick for clearing the float is the put a line break (br) with a clear:both style attached to it. So it could look like br style=”clear:both;”. A more logical way do this would be to create a CSS class, like clearboth { clear:both; } and attach that to the br, like br class=”clearboth”. This is a very oversimplified answer and there are loads proper explanations of float on the web.

      I looked at the your blog with Firebug and it looks like first you should change the #container id by removing the float, making the margin: 0 auto; (this will center the div) and make the width a fixed number of pixels, like width: 940px;.

      Then make #mainContent’s left and right padding 0. You may want to adjust width and left and right padding some so it looks better.

      Then make #sidebar1’s padding 0.

      Again, you’ll most likely want to refine the width’s and left and right padding some so that is looks good.

      Phew!!! Try that and let us know how it worked.

      1. Thanks so much. I followed your instructions and it worked spectacularly.

        Thank you again for your dedication and commitment to helping others.

  56. Hello Swolock,
    I tried and tried and tried to fix this but I just can’t find the way how. If you have the time and are in the mood please check out http://interestmore.com/blog/. Don’t focus on the styling and the colors as it is still under production. The problem as you can see is that the posts don’t stop and travel to the right of the page instead of changing line when they should (unless I hit the enter while I am writing the post…). I am not sure if it is a css problem (I don’t think so as I tried switching off each stylesheet I attached (twentyten stylesheet and two site specific) as well as deleting the extra inline code instyle the style.css file. By doing so the general layout would break according to what styles were missing but the main problem with the posts wasn’t fixed…
    I believe I followed the tutorial correctly and uploaded and modified all the appropriate files as described…. but …. heeelp. :)
    Thanks very much in advance

  57. Hi There,

    First THANK YOU THANK YOU for a great tutorial. Everything worked perfectly except one little thing. If you go to the site: http://www.crsdesigns.biz/blog/ you’ll see the right hand menu and the blog post don’t line up. I saw earlier some suggestions on how to fix this, but honestly, they’re a little above my head. Anyone willing to give some extra help?

    Wendi

    1. Hi Wendy,

      I took a look at your site using the ultra-useful Firebug plugin for Firefox. Does the div “mainContent” have any CSS attributes? I didn’t see any. If not, try adding something like #mainContent { width: 500px; }. You may need to add a float: left; in there too. Obviously the width will need to be adjusted to the width you want after you get the content and sidebar to sit next to each other. One other thing you might try is adding a clear: both; after the closing div for mainContent. I like to add those in a br, like lessthantsign br style=”clear: both;” / greaterthansign. That should clear the content and sidebar floats. I hope that helps.

      1. Thanks Swolock! That’s getting warmer. Now it looks like we’re off of alignment by just a little bit. Any idea on how to bring up the title on the blog post just a little higher so it lines up with the top of the search box?

        – Wendi

        1. There’s an H2 on line 27 of your css with top padding. Try changing the top padding to 0, so padding: 0 0 13px;.

  58. I’m only a novice with WordPress and working my way through the steps you’ve outlined. Definitely the most comprehensive I could find! And it was going really well, until I got to page 3 and hit a brick wall with this Step:

    ” Save your site’s includes files to the mythemes folder.”
    “Open your site’s header file and save a copy in the mytheme folder. Call it something that differentiates it from the original and indicates that is from your existing website. For this tutorial the existing file is called logo.php, we’ll call the new one is site_logo.php. It can be anything as long as it makes sense. It’s best to name these files without a hyphen because WordPress will see that in a different way. The files should be in the theme folder, not in a subfolder.”

    I honestly have no idea what ” includes files” are… or if that’s a typo. From the context of the following paragraph, it kinda sounds like I’m supposed to take my existing website (not in WordPress) and import copies of it into WordPress. Is that correct?

    These first couple sentences are a bit confusing… “Open your site’s header file and save a copy in the mytheme folder. Call it something that differentiates it from the original and indicates that is from your existing website.”

    My header file is already saved in mythemes. But then it mentions differentiating it from my “existing site,” which makes me wonder if the .php header, footer, etc files are supposed to be my “current” website. The current site is in HTML. Can I import html and still have this process work? Or am I not supposed to touch my existing site?

    Background: I’m in the midst of building a rather extensive site for a company, and just need one of the navigation tabs to access a blog. That’s all I am trying to integrate with WordPress. I really thought this would be a simple embedding & skinning kind of process. Am I even on the right path here or am I smoking crack? Should just link out to a separate WordPress site with a similar look/feel?

    Sorry for the long question. As I mentioned… brick wall.

    – rob k

    1. Ok… I was smoking crack. I found the “wp_includes” file.
      Went back a couple steps, and started over.

      Of course, now I cannot find the nav.php that resembles the Step on page 2 of the instructions, but I’ll keep poking around until I find it.

      1. robk… you may not have a nav.php. That is just an example file I used for my version of the existing site. It isn’t part of the WordPress installation. It’s just a file from the existing hypothetical example site where the non-WordPress navigation comes from. Others have been confused about that too, so don’t feel bad. I guess it isn’t as clear as it could be.

        1. thanks for chiming in.

          i made my own nav.php file based on the navigation from my actual website. it came up without a problem. now I’m trying to load all the other files from twentyeleven into mythemes and have the blog page load without errors.

        2. So the version of WordPress I have does not include the twentyten folder mentioned in the instructions. Likewise, I’m not seeing the “loop” files in the twentyeleven theme folder.

          Any suggestions?

          1. robk

            This tutorial is written for twentyten. You can download it here. I believe the equivalent to loop.php may be content.php in twentyeleven. You might want to give that a try. But like I said, this tutorial is written specifically to work with twentyten.

      2. Found the folder… hours later still can’t figure out what goes where.
        Seems like this should be really easy. Just embed some code into
        my existing site and call it a day.

  59. Hi there!!!
    This tutorial is EXACTLY what I have been looking for, and SO easy to follow!
    Thank you for sharing!

    Quick question though, from the ‘blog home page’ it all seems to be looking and functioning great. But then when I click on any of the posts, where i could then read and comment etc etc, all of my header styles etc seem to disappear. Another thing that I’ve noticed is that from these pages – where my navigation links used to be directed to, for example ../home.html, they are now being directed to ../blog/home.html and as such none of them are working.

    Any advice would be great.

    Thanks again, I will definitely be bookmarking this page for future reference!

    Michelle

    1. It’s a little hard to be specific without knowing more about your website. However, for your first problem, “all of my header styles etc seem to disappear”, it sounds like your WP page isn’t finding a) a stylesheet and/or b) the files associated with your header. That might be a URL path problem. Try using an absolute path like “http://mywebsite.com/path-to-missing-file” instead of just “path-to-missing-file”. I can’t be more specific because I don’t know which files are not being found. Regarding your second question about the links, that sounds like a URL path issue as well. Again, try using an absolute path like “http://mywebsite.com/home.html” instead of just “home.html”. I hope that helps.

      1. Hi,
        I have fixed the issue with the links – as you suggested the absolute paths has worked great!

        Just one other issues if you could advise, and I have just implemented your tutorial with a second website and I’m having the same problem with both sites. That is, when I activate my template, the sidebar only displays the ‘search’, ‘Archives’, and ‘Meta’ features. However when I activate, for example the TwentyTen theme, it shows ‘Recent Posts’, ‘Recent Comments’ and ‘Categories’ as well.

        Any ideas why this might be the case – and any suggestions as to how I can fix this?

        Regards,
        michelle

        1. Oh how embarrassing! I am so new at WordPress. I just realised it’s a widget thing! All sorted now! No need to answer my question!

          Thank you again for a great tutorial! I have saved you to my favorites!

          1. Hi Michelle

            Don’t be embarrassed! That’s an easy mistake to make. I’m glad you figured it out and thanks for bookmarking the tutorial.

  60. Hi there. I successfully followed this tutorial once already, so i know it’s great. However, I am using it for the second time and have run into a stumbling block. On the fifth page of your tutorial, once i’ve copied the various files from the TwentyTen theme, and i look at my blog, I am seeing this error where the content should be:

    Fatal error: Call to undefined function twentyten_posted_on() in /home/content/19/7957319/html/blog/wp-content/themes/myowntheme/loop.php on line 134

    I didn’t run into this error last time tha tI can recall. Any ideas?

    Note: When i look at line 134 of loop.php, it has this code:

  61. Hi and thank you for a great tutorial!

    It really helped me, especially the page entitled Different Files for Different Blog Pages. I’ve successfully got all of the pages listed there looking good, and just like the rest of my website. However, the comments page for each of my wordpress blog posts is missing all of the images (as in, the images in my left hand nav, header, etc). Any idea what I can do to fix it? My comments.php page makes no mention of the images (my index.php page does, obviously).

    Thank you!

    1. I actually just fixed it! I needed to put the full, proper image URLs in place, rather than the short codes. Thank you again!

  62. I have integrated wordpress in to my local website for displaying the articles posted in the wordpress site. I have written the following code in one of the menus of my local website.

    have_posts() ) : ?>

    have_posts()) : $my_query->the_post(); ?>
    in_the_loop = true;
    ?>
    <div id=”post-“>
    <a href="” rel=”bookmark” title=”Permanent Link to “>
    <!– by –>

    Posted in |

    Not Found
    Sorry, but you are looking for something that isn’t here.

    This page displays the posts in one category. After that if I click on another menu/page it displays blank.
    I’m unable to find out the issue. Can any one help me as I’m new to wordpress.

    Thanks in advance.

  63. Great tutorial. I have been searching and head scratching for some time before I came across this. Thanks for taking the time to do such a thorough explanation. Saved me tons of time!

    After a bit more head scratching, I have figured out that none of my padding/margins are working on the blog page. Which is weird because all the other styles seem to work.

    Regular page with working spacing: http://www.ameliaislander.com/articles/article.php?ID=132

    Blog: http://www.ameliaislander.com/blogs/blog1/

    style.css: http://www.ameliaislander.com/blogs/blog1/wp-content/themes/islander/style.css

    If you go back and forth between the 2 pages, you will see what I mean. Any insight you could offer would be hugely appreciated.

  64. Hello Swolock,

    Very nice post, simple, organized and easy to understand, I will forward your post to some of my potential clients if you don’t mind! I wanted to ask also if this was something that you might offer as a service and what that pricing might look like? I have been considering doing the same and would appreciate your thoughts regarding.

    Thanks again for nice post!

    -Martin Walker
    PageInvasion, Local SEO WordPress Plugin

    1. Hello,

      I’m glad you found this tutorial interesting. I do offer this as a service. The cost is completely dependent on the complexity of the project. If you like you can contact me directly. Thanks!

  65. OOPS, i meant to say in my first paragraph:

    paragraph text of the blog article is the same as Twenty ten,

    perhaps you can edit before you (hopefully) approve my comment :)

  66. This is such a great tutorial. thank you so so much!!!!!

    I am having trouble with my CSS.

    Even though I import my own CSS stylesheet after the Twentyten import, it’s not over-riding much of the styles. For example my paragraph text of the blog article is not the same as Twenty ten, rather than my own blog’s styling of paragraph text. Or perhaps I am wrong. Perhaps my paragraph text is not what I anticipate it would be, because there is specific styling within Twentyten that targets this text using divs and classes I haven’t send (obviously) in my own site’s CSS. So, the main blog article text isn’t simply a ….? Is that correct?

    If the above is correct, would you suggest it’s better simply to not import the Twentyten CSS, and instead, style the blog from scratch myself? (As my blog looks more inline with my sites look and feel just before I import the Twentyten CSS? OR do you suggest that would end up causing headaches and hardships down the line, as Twentyten CSS using some good styles that I am not aware of yet as so far I am only looking at the index.php file?

    I know my question is confusing, so please forgive me. I hope it makes some kind of sense. And again, your tutorial is magnifcent!

    1. Katrina

      You answered your own question. Your custom CSS just isn’t overriding some of the CSS in TwentyTen because it’s in use in your blog and the only CSS definition is in TwentyTen. You have to specifically add the TwentyTen style to your CSS and override the relevant TwentyTen styles. For example, there may be styles used in ‘branding img’ that you like but you don’t want the big rule above it. So you have to specifically add branding img to your CSS and give it a top border of none. Firebug is very helpful for figuring out what CSS file is controlling what.

      As for your question. Is it better simply to not import the Twentyten CSS, and instead, style the blog from scratch, my opinion is it depends. I almost always just create overrides because there are so many styles that TwentyTen provides that I’d rather not mess with. But I’ve done it the other way too. It’s really up to you.

      1. Hi Swolock,

        Thanks so much for your reply. I am going to re-download Firebug and see if that helps me. I tried it once before a while ago and didn’t really get the hang of it. But this situation provides a good instance where i should probably wrap my head around it.

        Again, thanks for this tutorial, it has been unbelievably helpful. I’ve tried loads of others and got 75% of the way there, but then encountered major stumbling block.

        This CSS issue I’m having at least seems surmountable :o)

        1. I just wanted to add something that I discovered (took me a long while!!) in case it helps anyone else: I had a div called ‘content’ and there’s also a default WordPress div that uses that same name. So I changed my div to another name and a few things fell into place and looked much better. In hindsight, this should maybe have been one of the first things I checked. In the future, now that I’ll be working with WordPress more, I’ll start to give my divs more unique names.

  67. Hi

    Thank you so much for the step by step method of description in the tutorial, it is very clear and I wish I had found it sooner.
    I couldn’t have done it without your great instructions.
    I got stuck up with css styles …
    Kindly help me out with minor changes.
    1)In header.php, which url has to be provided for bloginfo(‘stylesheet_url’) in the code as below:
    <link rel="stylesheet" type="text/css" media="all" href="” />
    2) Functionality of the code below:
    <link rel="pingback" href="” />

    Thanks in advance.

    1. Hi Pummy

      Sorry I’m just getting back to you. For question 1, < ?php bloginfo( 'stylesheet_url' ); ?> is the URL that goes there. It’s WordPress talk for getting the child theme stylesheet. Check the WordPress codex for more info. I refer to that page all the time.

      Regarding question 2, to be honest I’m not sure of it’s specific function. It obviously has something to do with pingbacks. Maybe someone else reading this can enlighten us.

  68. Hi

    Thank you so much for the fantastic tutorial, it is so clear and I wish I had found it sooner.

    I adapted your tutorial slightly and used it with the templates I had already made for my website and it has worked very well, just a little more styling to do and then it will go live.

    I couldn’t have done it without your great instructions.

    Thank you.

  69. Hi swolock,

    Great tutorial and exactly what I am looking for as not many like this on the web. I am however having some styling issues with the main content area and the sidebar. I have followed the instructions exactly but I seem to get the sidebar on the far right of the screen and the blog entries on the far left but way below the sidebar. They are not on the same level horizontally if that makes sense? I have used the twentyten theme as the basis. Do you know what I am doing wrong? I have imported my own style.css as well. I also noticed that the twentyten theme has the sidebar call inside the index.php file not the header.php. What file should I calling in the loop as well?

    Many thanks!!

    Sifi

    1. Hi Sifi,

      It’s a little hard to tell what’s going on without seeing it and the CSS, but it sounds like it has to do the div that constrains the page width. The content is floating all the over to the left and the sidebar to right. Maybe the CSS for the div that sets the page width is not set at the right amount. It’s hard to say without having a look.

      An additional problem is that the content is below the sidebar. That can happen because the width of the either the sidebar or the content or both is too wide and is pushing the content underneath the sidebar. Try adjusting the content and sidebar widths.

      Or it could be that you aren’t ‘clearing’ the two divs. This is a little complicated to explain with just words but to clear them try putting a br with style=”clear:both;” in it just before the closing /div tag that contains both the content div and the sidebar div. This should clear both the content and sidebar divs. I can’t tell you exactly where to put it because I have nothing to look at.

      Feel free to post your URL and I can have a look. Good luck.

      1. Thank’s very much. I’ll certainly give that a try tonight. I’m working on it locally so can’t post up a link im afraid. I can email you the code if that helps?

      2. I’ve having the exact same issue. I’ve adjusted the widths of the main content and the sidebar to some pretty small sizes and the content is still below the sidebar.

        Not sure what you mean by the tag that combines both the sidebar and content — it seems to me that the sidebar div is closed before the main content div starts?

        The bottom of my header.php:

        Website is at http://www.solarallianceofamerica.com/blog/

        Thanks!

        1. I checked out your blog and thought it looked OK. Did you figure it out?

          If anyone else is having a similar problem, that is if I understand what you’re saying, one thing you might need to do is “clear” the floats. So if you have a div that’s floating left and a div next to it that’s also floating, most likely right, you may need to add some CSS to clear the two floats. I like to do that with following: br style="clear:both;". That puts in a br that you can’t see and tells it to clear both floats. Of course the best way to do that would be to create a CSS style like .clearboth { clear:both; } and assign the class “clearboth” to the br, a la br class="clearboth".

          There are other ways to do this, but this is one technique that I like.

          I hope that helps.

  70. Hi,

    This is a great tutorial, thanks for putting it up. Do you have some ideas on what I should do to get the blog site look which is at http://www.shaldipur.com/blog to match the regular website look which is at http://www.shaldipur.com?

    Among the problems I have are two headers and two footers, a nav that has the contact link push down when viewed in Firefox as well as a search box that I would like to remove. If you have any suggestions I would be very grateful.

    Thanks.

    1. Hi Sachin,

      Here’s a suggestion you may not like very much, do your whole sight with WordPress. There’s no reason you can’t get the same look using a child theme of Twenty Ten or Twenty Eleven. FYI, although Twenty Eleven works well and is HTML5 (it can do some very cool stuff), I almost always use Twenty Ten as my child theme parent. This tutorial is good for people who already have content AND are using PHP includes AND don’t want to start from scratch. Sometimes, and I think this is one of those cases, it’s more efficient to start from scratch. WordPress can be an admirable content management system. This site, http://www.tru-block.com/ and http://zanyaspasalon.com/ are examples of Twenty Ten child themes. Here’s a good article on WordPress child themes. I hope all goes well.

  71. Greetings!

    Thanks for a great tutorial.!

    My attempt to follow along is pretty close to working, but I can’t seem to get over the finish line. I have the include calls working, including my placeholder nav flyouts, I’ve updated the PHP files and checked things over, but I’m off on something … probably looking right at it and missing it.

    Could you kindly take a look at http://todcohen.com/blog/ and see if anything jumps out at you? It looks kinda like the CSS is broken, but I’ve tried a couple of tests and the page reacts to the tests, yet the contents are just not where they’re supposed to be.

    Thanks in advance!

    Chuck

    1. Aha … I had some bad CSS going on, including a bad call. Mainly hadn’t matched my div names in header.php to the ones I’m using in style.css.

      I’m getting it to behave ….

      Thanks!

      Chuck

  72. HI, I appreciate this tutorial. Ive gone through it and have my header and footer working perfectly, but I am now having trouble with the final css editing of the body.

    My “mainContent” (the area where posts are shown) is stuck below the sidebar, instead of being next to it. I can’t figure out how to fix it.

    Also the body text is white, and therefore invisible against white background!

    I can’t figure out what css tags to fix, ive been trying everything i can think of. Any advice would be appreciated.

    1. ok, i figured out the text colour, but my main issue seems to be that i don’t get how the layout works for this theme; content, container, mainContent, …*$&^%$….

      1. Hi Matt

        There’s an INDISPENSABLE tool for figuring out CSS. It’s a Firefox extension called Firebug. It let’s you inspect and try out modifications to the CSS on a webpage. I use it all the time. You can get Firebug or similar for other browsers but it works best with Firefox.

        As for your misaligned body parts, it’s probably the width of one or the other or both. Try reducing the CSS width, for example change width: 650; to width: 400; to see what happens. If your parts pop back into place then begin making them wider.

  73. First, thank you for your tutorial!

    However, after following instructions on the first page and setting up the new files in the appropriate places at my website, when I click “preview” I do not get a blank page but rather the 2011 theme. Any suggestions?

    John

  74. First, I want to say this is a great tutorial, its very clear step by step explaination, Thank you for taking time writing this:

    Second….On Page 2 “Prepare your navigation or menu file”:
    “Open your current menu or navigation include file. For the demo site it’s nav.php and is in the website’s includes folder, so includes/nav.php.”
    x————————————————–x

    I can only see “nav-menu-template.php” and “nav-menu.php” inside wp-includes folder. Or am I at the wrong folder? what’s a demo site?

    1. APrather, I think you maybe looking in the wrong spot.

      First, the demo site is the site I created for this tutorial. Check it out. It’s mentioned on page 1 of the tutorial. It’s a regular PHP website that has a WordPress blog added to it.

      So… includes/nav.php is the nav or menu file used in the original PHP site, not the WordPress blog. That step is only asking you to add a navigation link to the blog-to-be in your currently used navigation file. You’ll save that file to your theme’s folder in later on page 3.

      FYI, I never change anything in the WordPress installation’s includes directory, it’s called wp-includes, not to be confused with your PHP site’s includes folder.

  75. This is very good tutorial. What I need to know is, if we can use another theme instead of twenty ten or not. What can be the issues if we use some other themes.

    Thanks for the great tutorial.

    Nitin

    1. Hi Nitin,

      You can definitely use other themes if you want to. But be warned that the code in other themes will almost certainly differ from the examples used in the tutorial. I’ve made child themes from themes other than twenty ten but always seem to go back to twenty ten. It’s straightforward and very flexible.

  76. As I look through several sites about how to integrate a WordPress blog into an existing website, yours has been the most comprehensible (is that a word?). But what I don’t understand yet is if I am copying my site files (header.php, nav.php, footer.php, etc.) into the WordPress themes folder and editing them, when I change the site files in the future, do I have to change them in both places? Does my question make sense? For example, if a phone number is listed on site’s footer and it changes, now I just change it in that one file and it’s updated for the whole site. Would I also have to change it in the Worpress-enabled files under /themes/? Thanks.

    1. The short answer is yes, you do have to edit them in both places. I know that’s awkward and not ideal but it’s the most expedient way that I can think of. It’s unlikely you’ll be changing them too much. Just be careful what you call them so it’s easy to distinguish the files used for your existing site from the new files AND that you don’t overwrite an important WordPress file like header.php or footer.php.

    2. I solved that way:

      1) i have put in the root the -block- files:
      block_1_header.php
      block_2_nav.php
      block_3_content.php
      block_4_footer.php
      inside these files i wrote all the code i needed to ECHO what i wanted

      2) i created four files in the blog/wp-content/themes/mytheme folder, named the same. inside them i’ve put just a line of code. in the case of header, for example:

      3) because i use some functions and website config variables (company name, seo, sitemap, etc) i’ve put this line of code at the beginning of my /index.php (in the root) and blog/wp-content/themes/mytheme/index.php files:

      4) in every block files (the original files in the root) i’ve put this line of code:

      global $config; // $config is the name of the array created in my config.php file

      that way, if the block files are included by wordpress, the $config variable is seen everytime

      exscuse me for my english!

  77. Thanks for putting together another great tutorial! One thing I found easier was to simply copy one of the style.css files from the theme in the latest version of WordPress. Add that to your own theme rather than referencing the original style sheet. Means you can have totally seperate style sheets then. Made it easier for me anyway! :-)

    1. Hi Megan,

      Thanks for your suggestion. That method certainly could work. I guess it just seems more efficient to accomplish the same thing with one simple line of code.

      Steve

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">