How to Integrate a WordPress Blog Into an Existing Website, Twenty Twelve Theme

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.

This is a follow-up tutorial for the original How to Integrate a WordPress Blog Into an Existing Website. The main differences are:

  • This tutorial uses the Twenty Twelve theme that is installed with current WordPress installations.
  • We’ll use a child theme dependent on Twenty Twelve.

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 example site, a PHP website with a WordPress blog.

A side note… you may want to consider redoing the whole site completely in WordPress. It works great.

A favor please, I would greatly appreciate it if you would let me know if you find errors, typos, or something isn’t clear or doesn’t work. These are pretty complicated things to write and it’s easy to make a mistake or assume too much.

Prepare WordPress

Download and install WordPress

  1. Download the latest version of WordPress. Most 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.

Just so we’re clear, when you see words or phrases like ‘yourdomain’ or ‘Your Name’, use your real domain or your real name. If a URL does not use ‘yourdomain’ you can probably assume that it should be entered as is.

Create the Twenty Twelve child theme

  1. If you haven’t already, install WordPress in ‘blog’ folder.
  2. Find the themes folder blog/wp-content/. You should see the twentytwelve folder in there.
  3. In themes folder, make a new folder calling it the name of your theme. I’m calling mine mytheme for this tutorial.
  4. Make a new file called style.css and save it in the mytheme folder. It must be called style.css and be in mytheme, not in a folder in mytheme.
    1. It should be an empty file. Add the following:
      Remember to substitute your info for My Theme, yourdomain.com and Your Name.
    2. Next, import the Twenty Twelve CSS by adding:
    3. Below that import your existing site’s CSS. It will look something like the following but might be different. Be sure to put this below the Twenty Twelve stylesheet import so that your styles will take precedence over Twenty Twelve’s.
    4. Log in to your WordPress admin area and go to  Appearance > Themes, you should see My Theme ready to activate.
    5. Activate My Theme and check out your blog. It should look like an odd hybrid between your website and Twenty Twelve.

Adjust some theme settings

It may be possible to make some simple adjustments to get you started toward making the blog look like your website and get your blog working properly. These are my preferences and of course you can change them later.

Since this is going to be a blog and not a whole website you can adjust a few settings under Settings.

  1. Settings > General: make sure the Site Title, Tagline, Timezone, and Week Start On fields are correct.
  2. Settings > Reading > Front page displays: Use Latest Posts.
  3. Settings > Reading > For each article in a feed: Summary. To get summary to work, I use the More tag after the first paragraph or so in a post.
  4. Settings > Permalinks: I usually use Post Name.
  5. Appearance > Background: You can select your site’s background color or background image.

There may be other settings you want to play with before moving on. Don’t worry if it doesn’t work, you can always come back to this.

Take a look at your blog. There should be some content there, but it doesn’t look much like your website. In the next step we’ll create some files that match your site.

WARNING: it’s going to get worse before it gets better.

66 thoughts on “How to Integrate a WordPress Blog Into an Existing Website, Twenty Twelve Theme

  1. I still have a blank page at the point where it says that I should see the header, navigation and footer. I am pretty sure it is because I have no idea how to work out what the basic divs that make my sites structure are. I am using opencart. I would be very grateful if someone could help me.

  2. Hi
    I have a theme boostrap 3.I have many CSS files, as two folders for CSS files.What would I do? Please tell me where how to impotrt all these files.Because with one file my page is messed

    1. Yes, this appears to be a mix-up with the instructions.

      At the bottom of Page 3 of this tutorial, where it says — “Take a look at your blog, you should see the header, navigation and footer” — I also get a blank page. I believe this is because — at that point in the steps — the index.php has not yet been populated with the “calls” to get header, get nav, and get footer.

      swolock, could you please address this? A number of people have asked about it. Thank you.

  3. So this is simply the BEST article I have found on this topic – have followed it before and just spent 15 minutes searching for the article again having failed to bookmark it that last time. This is such a simple implementation and your time to create this post is VERY much appreciated!! Bookmarked!

  4. Hi
    Thanks heaps for your tutorial
    Can I suggest that you don’t include the comment:

    at the beginning of the index.php file.
    For internet explorer it put the browser into “quirks” mode and really messed up the formatting. Took me ages to find out what was causing it
    Thanks

    1. oops – the comment got commented out in my post above
      This comment
      !– begin index.php —
      (with the angle brackets)

    2. NJW, thanks for bringing that to my attention. I changed comment to begin the header file.

      Those comments are supposed to be there to help reduce confusion, not create more.

      1. Hi

        No what I mean is you have to have NO comments at the start of index.php (or header.php) It is the comment that makes internet explorer go into quirks mode. It is because the comment ends up being before the DOCTYPE statement.

  5. Hi there,

    Great tutorial!

    I have been following the tutorial and all good right up until the last step. As you can see on http://www.trafiki.com/marketing-news/ I have the blog working and everything but the styling compared to the rest of the site (http://www.trafiki.com/) is obviously not quite there.

    I have tried to look at the source code and used web developer tools in Chrome (and Firefox) and don’t seem to be able to see below the header content. I have managed to make full use of this tutorial working fully on another site (http://www.charteredsurveyorinlondon.co.uk/news/) so followed the general layout for what I did on that one but no such luck!

    Any help will be greatly appreciated!

  6. I am not too certain what I am doing wrong, but my page stays a blank if I preview it. I am now on page three of your tutorial, but I probably mucked up something on page two. Care to give some assistance?

  7. Hey! Thanks for the great job with these instructions! Haven’t seen anything similar so far on the topic so the page is hugely appreciated :-)

    However, I struggled for some time with the end pf page 3.There it says “Take a look at your blog, should see the header, navigation and footer.”. Well, I did not see anything! Then I went on (after redoing everything twice from the beginning) and on the fourth page, with the get_header I finally saw something. Normal.

    So did I missinterpretated the quoted sentence, did I do something wrong (i.e., should you actually see something after completing page 3) or is the sentence a little bit too early?

    Keep on with the great work! Thanks again!
    Stefanie

  8. I’m still seeing a blank page when I preview the header:

    Here are the steps I took:
    1) Copied header file over to site_files and changed name to what you had in your example
    2) Inserted the code below right underneath “” in the head section

    Hope this helps…

    Michael

  9. Hi,

    I may be missing something, but at the end of page three you say you will see the header on your blog, but you don’t see it until you’ve added get_header(), at the start of page 4.

    Thanks for a great article.

  10. For this part of the tutorial:
    “Save your header file, mine is title.php, in the site_files folder.”

    What is the header file? It comes across to me to save as the header.php as ‘site_title.php’

  11. Hi. I’ve spent all day with this, and although frustrating at times, it’s a great learning tool. I’ve finally managed to complete the integration, but …. the blog content displays UNDER the “leave a reply” link…. http://www.gopati.com/socialmedia/ instead of inside the post box. Is this a issue in index.php, or something in the twentytwelve css files? If you have any idea, I would truly appreciate it! Thank you!

  12. Hi. This is a great tutorial. So appreciated. My question is re: the sidebar. My current site doesn’t have a sidebar, and I can’t sseem to get the wp sidebar to place. Any thoughts on how I can do this? Everything else looks perfect. Thanks so much!

  13. It is amazing how hard it is to find a good tutorial like this one. I been searching in Google for a tutorial like this for days; before this tutorial, I’ve just found many out of date info and bad youtube videos. Thanks for sharing your knowledge, I guess this will work with twentyfourteen theme as well. Cheers. :)

  14. Hi there, really liked the tutorial and found it easy to do and made sense!

    As you can see from my clients website I have installed it on the site and it works properly but there is one thing that I have noticed that is wrong. When I click on an author, in this case ‘admin’ you can see that the styling is not there and everything is just thrown onto the page. What can I do to change that?

    Thanks in advance

  15. Thanks for your help, finally have it up and running like I want now with help from your tutorial :-) I was wondering with the blog being intergrated into my existiting site so the wordpress files are stored in http://www.mydomain.co.uk/blog is there anyway to reuse the main sidebar again on the other pages?

    1. Stephen… do you mean use the WordPress sidebar on your original, non-WordPress site? I don’t know of a practical way to do that. It would probably be easier to convert your non-WordPress site to a WordPress site. Does that answer your question?

      1. Yeah I was afraid of that but the more I get into it the easy I can see how wordpress is but at the moment Im going to leave it like it is.

        Yeah I have a normal non wordpress site i’ve added the wordpress blog but on the homepage I want a side bar to say what my recent post are etc.etc like you get on the blog page itself.

  16. Hi Love the tutorial

    I am stuck at the start of page 3. I am new to worpress so me getting as far as page three is an achievement :-). I have created the header, index and footer files which you asked us to save in mythemes folder step one you ask to create a new folder named site_files in mytheme folder step two save my header file? do you mean header.php? which we created and saved earlier in mythemes folder do you want me to duplicate it and change the name to title.php?

    1. Hi Stephen

      The site_files folder is for reusable files from you existing website. The example website gets it’s header, navigation, and footer from single files that are included on each page. The header file might be called header.php. These files need to copied into the site_files folder. To avoid confusion and inadvertantently overwriting a file, it’s good to rename the files to something like site_header.php, ‘site_’ referring to an existing website file as opposed to a WordPress file.

      They are most definitely different from the files you created on page 2, header.php, index.php and footer.php.

      Does that help?

      1. Think I am getting there slowly.

        so for your example the contents of site_title.php is a snippet from your original site?

        in my example in my site_title.php file I should include everything from my header part of my original site and insert it in site_title.php is that all I need to include what about <!DOCTYPE html? or <?php

          1. O right I havn’t done anything prior to this tutorial except create a website all my sites have a .php extension but I haven’t used php includes

          2. I have followed it up towards the end of page 3 but nothing is showing as you state at the bottom of page 3.

            I have created the files with the snippets in all I have put in is the Nav for example just the html coding to make up that nav is that all that is needed?

          3. I think your question is is putting in a snippet for just the nav enough? It may be but you may want other things like your site’s footer and header. Header, nav and footer are often enough.

      2. Hi, i’m really sorry, but i am stuck exactly where Stephen was, except i didn’t understand this reply. So here goes y question:
        I did exactly as did Stephen, i created the Header.php, footer.php, and index.php files and saved them to ‘mytheme’ folder. Now here were on Page 3, you tell us to “Save your header file, in to the newly created ‘site_files’ folder. So i thought you ment copy the header.php file, change its name to ‘site_title.php’ and save that, to the ‘site_files’ folder. So i did that and well i reloaded the WP page but all i see is a completely white page. Now i saw this reply you gave Stephen, you said this new folder was for “reusable site files”, i have to say i don’t now what you mean by this, can you try explaining what you ask us to do in this step again please? I really appreciate the tutorial alot, thank you for this!

        1. In some places where he says “header file” he means YOUR header file from your existing website, not the header.php WordPress file that you created during the tutorial. This is a good tutorial and far better than most, but there is some confusing verbage such as this. There are also some errors in the steps, such as on the bottom of Page 3 of the tutorial, you won’t see anything when viewing the blog, until you have completed the “calls,” which don’t occur in the steps until page 4 of the tutorial.

          1. Hi Jim O.

            Before I edit this tutorial could you be a bit more specific about the confusing verbage and the errors? I’m not disagreeing with you at all, I just want to understand what you’re saying so I can be more clear. As I’m sure you can understand, this is a confusing thing and complicated process to describe.

            Thanks

            Steve

  17. Thank you for the time you spent on this guide. And I know your intentions were good. But unfortunately, the end result is highly unhelpful to all, except those who have only a very basic div structure for their page. E.g., my site’s “header” so a lot of dynamic content, with spry widgets, java, etc. It would be a total hell to try to splice it up the way you describe. Again, e.g., for the header, your header has to be such a simple one. And if it is that simple, why the heck shouldn’t the person just tinker with WP default modifications to get there, instead of all this jumbalaya? Again, thanks for your time, but you have essentially wasted 2 hours of my life … I went thru the instruction a while before realizing how cumbersome and convoluted the whole thing would get. But please do go ahead and delete this comment to make your readers see only the “glowing” feedback. At the very list, you should give a disclaimer at the very top: for basic webpages only!

    1. I think if you look at the top of the tutorial and look at the completed example, you’ll see that it’s a basic outline. There’s no way account for all of the many fantastic technologies that are happening with websites. I wish I could. The tutorial is for a very specific set of conditions. That said, one could add enhancements after the basic structure is complete.

  18. Hi!

    You have made a fantastic tutorial. This helped me so much while integrating wp into my website. Thank you for that.

    But I also have a question about some minor details. I faced some problems along the prosess. If you have time to check these issues, u can see them right here: (url to my blog) http://www.oma-tila.net/blogi/

    If you compare that site with my website’s ‘home view’, you will probably notice the difference (here is the link where I’m referring to: http://www.oma-tila.net). The site title within the banner is too small, width of the site is larger than originally intended and navigation (links) are not showing up. If u have some solusion for these problems, i would appreciate it. (I have tried to change so many things in style.css file but nothing seems to have influence and my head starts feel empty atm.)

    ps. Sorry if my text is hard to follow, english isn’t my strongest subject :D

    1. Actually i got it working now! I’m so happy. But still there is one thing that is bothering me: on the site where this blog is, the background is sligthly moved to left, as like everything else. Would u know how to fix this by editing the style.css stylesheet?

      I also noticed that if u click the link that says r67700 (writer, link is placed under each article) the site goes weird :o I have no idea which may be causing this.

  19. I am having two problems with implementing this. I have historically used Blogger, but I am trying to learn and use WordPress for my employer’s website. I have found that 1) the css is not loading at all, although I have verified and re-verified that style.css is correct (see below):

    /*
    Theme Name: SummitTheme (final)
    Theme URI: http://www.summitcommunitycounseling.com/
    Description: WordPress theme for my existing website.
    Author: Michelle Sanders
    Version: 1.1
    */
    @import url(“../twentytwelve/style.css”);
    @import url(“http://www.summitcommunitycounseling.com/css/style.css”);

    My second problem is that as soon as I insert the WordPress blog code into index.php and preview the blog, everything below header does not load. I looked at the source code and it seems to stop right where the code is loaded (right after my main content div).

    I realize I don’t have anything to show you right now so you might not be able to help me, but if you have any pointers or tips, I’d be so happy!

  20. Hi swolock,

    Great write up – exactly what I was looking for – much appreciated. I only have one problem now – looks like in header.php file breaks CSS styles/formatting – you can see at enject.com.au/blog

  21. I really value your effort to share your knowledge with us all, but I have very little experience with .php. For me there are a few holes. One of the largest is that I’m not sure exactly what you mean buy step: “Add your site’s basic structure to the core files”. I tried your 2010 tutorial, but found my knowledge lacking. I successfully learned html and css on my own, but am struggling with .php and attaching it to html/css.

    1. It looks like you’re doing pretty well. Do you have your #contents div around the WordPress content? That might get it centered on the page with a white background.

      1. Ok I’ve gotten a LOT further! Thanks for the reply. Now I have an actual good question that may aid other. Everything is working great except when I click on “Uncategorized” or the user name. I assume I will have to build another page as we did with “single” for those links. Is there another file name we should use to build the pages for those links?

      2. I’m also having difficulty finding where to adjust the css for the php code in index to get it to rise to the top. My css file over rides the 2012 one giving the divs a style=”position:absolute;top:0px;right:0px;width:100px” command but it isn’t working. If I remove the link to the 2012 css it works fine. Is it really importaint to link to the 1212 css file?

        1. Alright as you can probably see I have all previous problems solved, but am now having a problem getting the comments section to not overflow into the footer. Also need to do something to get the Uncategorized link to work properly along with the user name link. Last but not least I would also try and remove the wordpress link in the side bar. Again thank you for all your help!

          1. Ok, I realized placing the “position: absolute” on it is what broke the “single” code. So now I’m back to wondering why when I do it as instructed the loop sinks to the bottom.

      3. Removed the WP css and my problem goes away. The affected content appears to be in a “viewer” div that I can’t find in the css. Any idea?

    1. By reactivating I got the blog post and footer in. I also got the twentytwelve css on I guess, but still none of my own css, to which is correctly referred by
      @import url(“http://groovedorm.com/style.css”); imo

      1. It looks like you’re calling the CSS correctly. Why don’t you try removing the extra call to your site’s CSS that is immediately after div class=”title”. I’m not sure why that would be there. It should be just an @import in the blog’s CSS (style.css).

        1. The only thing I have after my div title is:

          and that should be there imo?

          But, trying to find the problem, I deleted the @import statements in my style.css for my blog and simsalabim, nothing happened!? I guess that’s a problem, do you know how to fix it?
          Where should be the link between this style.css file and the index.php?

          1. Sorry, I don’t understand your question about the link between style.css and index.php.

            Also, the code you entered between “The only thing I have after my div title is:” and “and that should be there imo?” was stripped out by WordPress. Try to write in such a way that WordPress doesn’t realize it’s code.

  22. Thanks for the tutorial! However, I’m stuck pretty early in the instructions. After creating a style sheet and adding the import statement for the twentytwleve style sheet, I get a gray screen with no content. After adding the import command for ‘mystyle’ style sheet, no changes to the gray screen. Any idea why I can’t get past this initial step?

  23. Hi I have reading your tutorial and was wondering if I need to splice my index.php up into header, nav and footer etc? I have found another tutorial where you just put some code in the header and where you want the blog to appear and it kinda works that way.
    Any help be greatly appreciated.

    Thanks

  24. Hi, this is a basic question but can I use this tutorial on a html site, or do I have to use php? I got to page 3 and got very confused, but am wondering if all I need to do is add php tags to my existing html code in order to name the sections of my site.

    1. Hi Ed

      I can see why you’re getting hung up on page 3. The PHP requirement is there only so WordPress can grab your site’s header, navigation and footer. Often with PHP websites the header, navigation and footer, plus other bits and pieces, are separate files as opposed to being part of every page. That way if you change something in the header, navigation or footer, you change it only in the header, navigation or footer file and not on every page. So each time a page loads, ‘get_template_part’ (used with WordPress) or ‘require_once’ (used with PHP) inserts the contents of the file it’s getting into the page.

      In your case, you could probably create two PHP files that replicate your HTML header, nav and footer without doing anything to the HTML site by copying the HTML code from your site’s header and footer. I would call them site_header.php and site_footer.php. I’m suggesting only 2 files and not 3 because it looks like your navigation is part of the header.

      The whole point of this is so you don’t have to mess with your existing website at all except to add a link to your blog. Did I make this too confusing?

      1. thanks for your reply! So what you’re suggesting is that I split the code from one of my html pages into the header and the footer, which the wordpress page will parse into a page that looks exactly the same but is made in a different way to html? I’ll do a bit of reading :)

          1. Like Ed, I started with an HTML website. Per your recommendation, I created a site_header.php file and a site_footer and one for the header, each of which include menus. The page looks pretty good except for two major issues:
            1) The links try to link the blog page (“news” in my site). For example, HOME .brings me to “icfmaine/news/index.html”.
            2) My logo, PNG image, does not appear in the title. I tried uploading the image to WP media folder, but WP is not finding it,

            ‘Would greatly appreciate your help!

  25. Nice updated tutorial! I successfully used the TwentyTen version on a few sites, and have been grateful for your knowledge. I do agree that I think that doing the entire site in WordPress is my preferred option, but in many cases I don’t have that option. It’s what I push for, however.

    Do you prefer using the TwentyTwelve or TwentyTen version to modify?

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=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">