Resources and Tutorials for Graphic Designers and Web Designers

How to Integrate a WordPress Blog Into Your Existing Website

By swolock | December 31, 2008

The alternate title for this tutorial is Or How I Added a Wordpress Blog to This Website. This tutorial assumes you’re using PHP, CSS and XHTML. This tutorial is based on WordPress 2.7. This is not a tutorial about making a standard WordPress theme. It does not strictly adhere to the standards set in Designing Themes for Public Release. It is intended to seamlessly incorporate a blog into an existing website.

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.

Download and install WordPress

  1. Download WordPress.
  2. Install WordPress on your server in a new directory. Call it something user-friendly like ‘blog’ or ‘articles’. A separate folder for your blog helps keeps the your site organized and reduces the chance of accidentally overwriting an existing file with a file in the WordPress installation. Follow the 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 install the Akismet plugin to help keep the spam at bay.

NOTE: The steps below assume that you can edit files with a text or web editing program on your local computer and save them directly to your web server. Alternatively, you can work on the local files (the WordPress directory you downloaded) and upload them to your server as you work.

Initial set-up for your blog template

  1. FTP into the WordPress installation on your server.
  2. Go to the themes directory. It’s in /yourwordpressdirectory/wp-content/themes.
  3. In the themes directory you’ll see that each theme has it’s own directory. Duplicate the classic directory, which houses the classic theme.
  4. Think of a name for your new theme, like ‘My Theme’ or ‘Existential’. Let’s call this one My Theme’.
  5. Rename the duplicated directory to your new theme’s name except use a server friendly name. Following the My Theme example, we’ll call the directory my_theme.
  6. In the my_theme directory, open the file style.css with a text or web editing program, I like Adobe Dreamweaver and BBEdit (Mac only).
  7. Change the following lines (should be about lines 2-7) to information about you and your theme:

    Theme Name: Your Theme Name
    Theme URI: http://yourwebsite.com/
    Description: A description for your theme.
    Version: 1.0
    Author: Your Name
    Tags: tags, for, your, theme, separated, by, commas

  8. Once that’s saved login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
  9. Click on Appearance then on Themes if it isn’t already selected.
  10. You should see your theme name, in this example, My Theme, with a thumbnail that looks exactly like the Classic theme thumbnail. That’s because we haven’t changed the thumbnail yet. Click on the thumbnail or the theme name. You’ll see a preview window that looks exactly like the Classic theme, then click on Activate “Your Theme Name” in the upper right corner of the preview window. Of course, in this example Activate “Your Theme Name” would be Activate “My Theme”.
  11. View your blog in another browser window or tab to make sure it’s still working. For now it should look just like the Classic theme.

Make an empty skeleton page of your website

This part gets a little ugly before it gets better. You’re going to overwrite index.php in your new theme’s directory with a page from your existing website then fix broken links to style sheets, images, hyperlinks, includes and scripts. Later you’ll add the WordPress code as needed after the skeleton page is working correctly.

  1. From your website, open an existing page that has a layout similar to the layout you would like for your blog. Consider the header, number of columns you’ll want, the footer and any other common parts. I will use my About Us page because it has the header, a simple 2-column content area the footer.
  2. Save the file as index.php in /yourwordpressdirectory/wp-content/themes/yourthemename. Make sure you save the file in the correct directory so you don’t accidentally overwrite an important index file.
  3. Leaving the page layout structure intact, delete the content from this file that you will not want in your blog. I deleted just the about us content and left the header, empty content area and footer as is. Preview your blog in another browser window or tab, it probably isn’t looking so great. Not to worry.
  4. Make sure the CSS file links are OK. You can use relative links with dots like ../../../../styles/main-styles.css, absolute links like http://www.mywebsite.com/styles/main-styles.css or a reference to the root directory like /styles/main-styles.css. You’ll know it’s OK if your background and divs are working. Personally, all those dots confuse me. I prefer the reference to root directory method.
  5. Fix links for hyperlinks, to images and to any scripts as above.
  6. If there are header, footer or other files that are used in your skeleton page with a PHP include() statement, copy the files into the yourthemename directory. WordPress 2.7 does not recognize the PHP include() statement.
  7. Replace the PHP include() statements with:

    Using include (TEMPLATEPATH . '/your_include_file.php'); is the WordPress 2.7 way to include a non-WordPress file. But as far as I know the file has to be in the template directory. I would be interested in learning an easier and better solution for this if anyone knows one.

  8. Preview your skeleton page again. It should look and function OK but without blog content.

Create the header and footer files

  1. Make a new PHP file and save it to the yourthemename directory naming it header.php. It will overwrite the existing header.php file. Again, make sure you save the file in the correct directory.
  2. Make a duplicate of the index.php in the yourthemename directory and name it index-backup1.php or similar. This is a backup copy just in case.
  3. Open index.php from the yourthemename directory if it isn’t already open. Cut (not copy) the code from the top of the page up to and including the closing head tag .
  4. In the new header.php, replace all of the existing code with the code in your clipboard cut from the top of index.php.
  5. Save both files.
  6. Make another new PHP file and save it to the yourthemename directory naming it footer.php. It will overwrite the existing footer.php file.
  7. From index.php, cut (not copy) the code beginning with your footer, just after the end of the content divs, and paste it into the new file footer.php, replacing any code that was there.

    You may need to customize this part some because this tutorial is assuming you are using well-defined div for the different areas of your skeleton page.

  8. Save footer.php.

Put it back together and add the WordPress parts

  1. Open index.php from the yourthemename directory if it isn’t already open.
  2. Also open index.php from the classic directory.
  3. Copy (not cut) the first PHP block, probably lines 1-7, from classic/index.php and paste it immediately above the body tag in yourthemename/index.php.
  4. Save yourthemename/index.php and preview your file. You should see your header but no blog, footer or sidebar with categories, recent posts, search, etc.
  5. Copy the last PHP block, it should be <?php get_footer(); ?> and paste it at the very end of yourthemename/index.php.
  6. Save yourthemename/index.php and preview your file. You should see your header and footer but still no blog or sidebar.
  7. Copy the middle section—everything between between the header block and the footer block—from classic/index.php and paste into the main content area of yourthemename/index.php.
    ?View Code PHP
    ','
 
'); ?&gt;
<div> id="post-"&gt;
<h3 class="storytitle"><a rel="bookmark" href="&lt;?php the_permalink() ?&gt;"></a></h3>
<div class="meta">  —   @  </div></div>
  8. Save yourthemename/index.php and preview your file. You should see your header, footer, your blog but no sidebar.
  9. Open classic/footer.php. Copy the code <?php get_sidebar(); ?> from classic/footer.php and paste into the div in yourthemename/index.php where you want the sidebar to go.
  10. Save yourthemename/index.php and preview your file. You should now see all of the basics.

Everything should be working now. Next you can customize sidebar if you want to or finish up with a screen shot.


Add the screenshot

The final step is to replace the screenshot of your blog.

  1. Take a screen shot of your new blog.
  2. Crop it to 300px wide by 225px high.
  3. Save it as a png to the yourthemename directory as screenshot.png replacing the classic screenshot that is currently there.
  4. Login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
  5. Click on Appearance then on Themes if it isn’t already selected.
  6. You should see the screenshot of your integrated blog. You may need to refresh the page.

In the blog you are reading this from, I modified the sidebar bar a bit. Please visit How to Customize the WordPress Sidebar.

I hope you find this tutorial useful and accurate. I would greatly appreciate comments, suggestions and corrections.

  • Share/Bookmark
107 Comments | Leave a comment

  1. Hello,

    I have followed every step of this tutorial and it isnt working. When i preview my template all I see is:

    ‘,’ ‘); ?>
    id=”post-”>
    — @

    If you could help me fix this or even just make my template work with wordpress I would happily compensate you for your time. Thank you,

    Justin Edelson
    http://justinledelson.com

    [Reply]

    Comment by Justin — January 24, 2009

  2. Justin, can you provide a little more info?

    [Reply]

    Comment by swolock — January 25, 2009

  3. [...] How to Integrate a WordPress Blog Into Your Existing Website Entries by Month: [...]

    Pingback by WordPress Blog Intergration Update | River Graphics — January 25, 2009

  4. Hello Steve,

    No your post worked very well and it was easy to follow. The problem I had was my container stretching to fix the posts. Here is my container css

    background:url(images/background_main.jpg) no-repeat;
    height:auto !important;
    width:1000px;
    position:relative;

    I have the height set at auto but I don’t think my css could see how many posts there were so it would just overlap and go into my footer.
    So to solve this I just made a seperte tag and added the property: min-height. I set that to 1000 and changed the setting in wordpress to only allow 5 posts per page. Now I just have to make sure I don’t write posts that are too big. (open up in height or width?)

    Thanks,

    Justin Edelson

    [Reply]

    Reply by: swolock
    January 28th, 2009

    I use min-height a lot for main containers. I usually make mine a real minimum, like 400px. That makes the container grow with the content. The content for this particular post is really long and it works OK. It’s especially useful if you have a background image in the div with a repeat-y to create a fake column or a dividing rule. Happy blogging.

    [Reply]

    Comment by Justin — January 26, 2009

  5. The problem i was having was that it wouldnt stretch with my wordpress. It worked for regular text. But not for wordpress. I still would like it to stretch with wordpress if you know a way.

    [Reply]

    Comment by Justin — January 29, 2009

  6. It may be that you need to clear the float immediately after your sidebar and content divs. You can make a class like .clearfloat { clear: both } then assign it to a BR. That would go after the last closing div of the sidebar and content divs or right before the closing div that contains the sidebar and content divs. I don’t know for sure if that will help but it might.

    [Reply]

    Comment by swolock — February 2, 2009

  7. Great article! I personally have been working on this exact problem recently, and I think I actually came up with something tolerable, though a bit different from your solution. In my case, I was avoiding the whole Wordpress theming issue partially because I didn’t want to get sucked into theming more and more of Wordpress and partly because I hate having duplicate themes in different formats (my base web theme, the wordpress theme, a joomla theme, etc etc) So… I went ahead and just sucked the wordpress blog into my site using the rss feed. I based all of my work off of an RSS library I found online somewhere and basically have a library where I use one function to grab and url-rewrite the rss feed which services as a table of contents, and another function which gets the contents of any given posts and outs them. Anyways, if anyone’s curious, I talk about it Here

    [Reply]

    Comment by Vancouver Web Developer Palantar — February 12, 2009

  8. Thanks for a great post. I made two attempts before reading your step-by-step instructions and almost gave up. I surprised myself! My blog mirrors my website. The only problem is that instead of the page being centered, it’s left-aligned. My initial instinct was to fiddle around with the stylesheet, but to no avail. Any suggestions?

    Thanks again.

    [Reply]

    Comment by Debbie — February 18, 2009

  9. Hi Debbie

    Why don’t you email me through our website or post your URL here so I can look at it. It may be that you aren’t using that magic combination of a “text-align: center;” in the body CSS and “margin: 0 auto;” in the div containing your content. Does that make sense?

    [Reply]

    Comment by swolock — February 19, 2009

  10. This worked perfectlly for me and saved me hours trying to sort it out, a massive thank you!

    I assume that I can upgeate WP with no problems as this is now just another template?

    [Reply]

    Reply by: swolock
    February 20th, 2009

    It should work OK with upgrades but you never know for sure. I upgraded from 2.7 to 2.7.1 with no problem at all.

    [Reply]

    Comment by Steve — February 20, 2009

  11. Thank you so much for your great article. I almost got it to work but have two errors. One is that my time menu hangs down on top of the text of the blog. Secondly, the sidebar is not coming up right. If you could help me I would appreciate it so much.

    Thanks
    Justin

    [Reply]

    Reply by: swolock
    February 22nd, 2009

    Hi Justin,

    It’s a little hard to tell what’s going on but after looking at your page I noticed you have a div tag, div id=”content”, as the first thing in your code. I’m not sure where that should go, but certainly not there, probably immediately before where you want your content to begin. Also, it looks like your sidebar is in the footer div. If you want to have a column for the sidebar and a column for blog content you need to add an extra column that floats left or right. There are a few ways of doing this. I like a float left div and a float right div inside a parent div with a clear float right after the floated divs. Does this help?

    [Reply]

    Comment by Justin Katz — February 21, 2009

  12. Sorry type, meant to write top not time. Thanks again.

    [Reply]

    Comment by Justin Katz — February 21, 2009

  13. Unfortunately I am not that proficient in web design as yet. Perhaps I could send you the files and you could fix them. I would compensate you for the work. Thanks, Justin
    Please email me you response at yossik@breslov.org

    [Reply]

    Reply by: swolock
    February 23rd, 2009

    Justin

    Why don’t you just email header.php, index.php and footer.php to web.inquiry@rivergraphics.net and I’ll take a quick look at them gratis. If it’s something simple, and I think it is, I’ll just fix it, if it’s more complex I’ll let you know.

    [Reply]

    Comment by Justin Katz — February 22, 2009

  14. Your the best!

    [Reply]

    Comment by Justin Katz — February 23, 2009

  15. Hi Steve,

    Great article. Thanks heaps. I’ve been looking around for a simple solution to this ‘dilemma’ for a while. Thanks for laying it out so clearly. It worked a treat! Now the only problem to contend with is actually writing the content ;-)

    Cheers,
    Anthony.

    [Reply]

    Comment by Anthony Hortin — February 28, 2009

  16. Thank you!!! I was at this for a day and a half before I came across your post. Genius! Worked like a charm!

    [Reply]

    Comment by Mike — March 6, 2009

  17. Great and detailed explanation. Thank you.
    However, I keep getting an error message every time I upload the three files.

    “Parse error: syntax error, unexpected T_ENDWHILE in /mnt/web3/30/41/5799441/htdocs/mywebsite.com/wordpress/wp-content/themes/dhcom/index.php on line 23″

    This is line 23.

    Any idea what causes that? Sorry, I’m still a beginner.

    [Reply]

    Reply by: swolock
    March 25th, 2009

    Hi Christina

    Did you complete all of the steps? I ask because it won’t work until late in the process. Would you like to provide a link to what you have so far?

    [Reply]

    Comment by Christina — March 25, 2009

  18. Hi, thanks for your quick response. I spent the rest of the afternoon redoing everything a few times and it turned out I had copied the wrong code. I was just too stupid to read the instructions right. Sorry about that.
    Maybe as a little suggestion, you could split the box under number 7 so it becomes a little clearer which parts should be copied and pasted.
    Again, thank you. This works great.

    By the way, is there a way to add the blog archive from the side bar (or the whole side bar), as well? This only shows the posts.

    [Reply]

    Comment by Christina — March 25, 2009

  19. Silly me. Ignore… I found it.

    [Reply]

    Comment by Christina — March 25, 2009

  20. Hi

    im really new to this – i’m finding it really easy SO far — im a little lost on the header.php and footer.php section is this defining where my blog section starts and ends ? as in the area size i want my blog to be ?

    [Reply]

    Comment by Simon Taylor — March 25, 2009

  21. Hi, great tutorial, thanks… It looks really good but I have one problem that I simply cannot solve. I was able to adapt all the fonts in Dreamweaver to my current layout. However, the date above the subjects is not changable in Dreamweaver. It’s the same as the subject line. I figured it had something to do with H2 and so I made some changes in the style.css file. However, that didn’t change anything. I tried to remove the H2 tags from the index page but that only changed the date of the latest post and the older post dates were in this case not bold.
    How can I change the font? Thanks in advance.

    [Reply]

    Comment by Welch — March 26, 2009

  22. hello and thank you so much for the tutorial, i tried this on my bro in laws website i built for him for a portfolio for work and incorporated the blog tonight. the website is http://www.clauderhodes.com and for some reason when i put the code it for the side bar it pushed the blog part down below it. instead of even like it was. i changed no code only put that php part in the sidebar like u said. i am wondering if i was to change something else, if anyone has ideas thank you

    [Reply]

    Comment by Johnny Walker — April 4, 2009

  23. wow, so 1. not sarcastic thank you for not replying fast it gave me time to sit back and problem solve, it turned out that i had the sidebar coded before my main col for the blog and i just accidently put 2 instead of the just 1 needed and for some reason that pushed my blog content past my container and below my sidebar so it is solved problem fixed. clauderhodes.com/blg is up and running thanks to you.

    [Reply]

    Comment by Johnny Walker — April 5, 2009

  24. Thanks for the great tutorial. Worked perfectly first time.

    [Reply]

    Comment by mcred — April 23, 2009

  25. Hi Steve,

    I have scoured the web for instructions on how to implement this idea, and you tutorial, sir, is by far the best. Well written and professionally presented. I went through the process and got the gist of it all. Granted, I have much tweaking to do, but you are the only one thus far who has managed to get me off the ground by explaining the process in clear terms. Thank you for all the time you put into the tutorial. We’re reading and learning from it!

    Marc

    [Reply]

    Comment by Marc — April 28, 2009

  26. Hi thanks for the tutorial.

    I have a dir like this
    /docroot/mysitedir/blog/ with wp inside that will manage the post feature.

    Now I need to add another subdir
    /docroot/mysitedir/travel-diaries/ that will be managed by the wp pages feature.

    How can I do that without installing a second wordpress into /docroot/mysitedir/travel-diaries/ ?

    What I need is just the right dir name for site navigation:
    http://mysite/blog/...
    http://mysiste/travel-diaries/...

    Thank you in advance.
    Dana

    [Reply]

    Reply by: swolock
    June 17th, 2009

    Dana… Are you saying you want your blog to be in the directory travel-diaries instead of blog?

    [Reply]

    Comment by Dana — May 21, 2009

  27. I followed all the directions and find them very helpful, but when i insert my side bar, it does not stay “floating” to the left. Can you take a look at my site and my site source to see what the problem is? Thanks.
    http://www.eliterhino.com

    [Reply]

    Reply by: swolock
    June 17th, 2009

    What do you mean by ‘floating’. Your site looks fine to me!

    [Reply]

    Comment by kris — June 11, 2009

  28. Hi – Thanks, this was great! I was successful following these steps for my client’s site:

    http://www.expectthebestpregnancy.com/blog

    BUT — I want to delete the “meta” list in the sidebar. This is a WIDGET which comes in the Classic template, but it is not listed in the Widget page in WP admin. HOW DO I GET RID OF THE META LIST? I’m talking about the list that says “site admin” “log out” “rss” “comments rss” etc.

    THANK YOU!!

    [Reply]

    Reply by: swolock
    June 17th, 2009

    Are you saying that you didn’t see meta in the admin area under appearance > widgets?

    [Reply]

    Comment by Welltech — June 17, 2009

  29. correct. Under “current widgets” there’s just one in the dropdown, called “sidebar1.” when that is selected, it says, “You are using 0 widgets in the sidebar.”

    [Reply]

    Reply by: swolock
    June 17th, 2009

    I’m not sure about this but I believe the links you want to get rid of are coded in sidebar.php. In sidebar.php look for li id=”meta” or php _e(‘Meta:’); . Right under that you’ll probably see some wp links plus some regular HTML links to validator.w3.org, gmpg.org, and wordpress.org depending on what you want to do you can either delete the whole block beginning with li id=”meta” and ending with the closing li or delete the 7(?) lines above ?php wp_meta(); ?. If you delete the whole block the whole meta thing will go away. If you delete coded links (the 7(?) lines) and leave ?php wp_meta(); ? you’ll still have the meta block but be able to control through wp-admin. Your files might be a bit different but that should get you rolling. I removed the < and > from this post because wp doesn’t like them. I hope this helps.

    [Reply]

    Comment by Welltech — June 17, 2009

  30. You are ABSOLUTELY RIGHT ON. Thank you a million! I don’t understand how this was “disassociated” from the Widgets… well it’s probably better to have Code Control anyway. THANK YOU THANK YOU THANK YOU!!!

    [Reply]

    Comment by Welltech — June 17, 2009

  31. Hi

    thanks for putting up the tutorial I have follwed your instructions and it seems to be working fine although I do have two minor issues that I could do with some help with,

    1, It seems to be missing the one image from the navigaation menu and the mouseover images I have checked the paths and ri-inserted them but I can not seem to fix

    2, How can I change the text size and weight ive gone through the style sheet and change all font references but it does not seem to be making any difference.

    Any help would be appreciated

    Many thanks

    Gazelle

    [Reply]

    Reply by: swolock
    June 29th, 2009

    Hi Gazelle.

    1, It seems to be missing the one image from the navigaation menu and the mouseover images I have checked the paths and ri-inserted them but I can not seem to fix

    This is most likely due to in incorrect path to the image or a missing image. The paths seem OK but I’m guessing the mouseover images are missing.

    2, How can I change the text size and weight ive gone through the style sheet and change all font references but it does not seem to be making any difference.

    Looking at your source, I didn’t see a link to any stylesheet. Make sure there’s a link to whatever stylesheet you’re referring to. Also, make sure the < ?php wp_head(); ?> is in your header.php file.

    I noticed that you have the source code for a blank html page at the end of your page, you might want to clean that up.

    [Reply]

    Comment by Gazelle — June 29, 2009

  32. Hi thanks for the info

    you were right I had uploaded the wrong image folder which is why I could not see the images.

    I have attached style sheet which works fine aprt form the sidebar which is now been chucked out of of the frame and sits tight to the right hand side

    any thoughts

    regards

    Gazelle

    [Reply]

    Reply by: swolock
    July 1st, 2009

    Make sure you clear the float for your blog content div and the sidebar div. I like to create a class like .clearboth { clear: both;} then assign it to a br like br class="clearboth" . The important thing is to make sure you put br class="clearboth" after the closing tag of the content div or the sidebar div, whichever comes last. I usually deal with that by putting br class="clearboth" before the closing tag of the div that contains both the content div and the sidebar div. Does that make sense?

    [Reply]

    Comment by Gazelle — June 29, 2009

  33. Hi, Love the tutorial, just what I was looking for, this is the first time I have done a self-hosted wordpress blog and for some reason cant get it to work… I have followed the guidelines but when I preview online the file doesnt have the style sheet for my main site attached – it is in the header.php () but when previewing diplays without it… I have done the steps 3 times now and still no joy… any ideas? I just have a very simple one column page (no sidebar as yet as stripped that out for now)

    [Reply]

    Reply by: swolock
    July 13th, 2009

    It might be helpful if you provide a link to your blog. Also, see if putting the link to the CSS file just before the ending head tag helps.

    [Reply]

    Comment by Jon — July 13, 2009

  34. I got everything down, designed my theme & template, I see my header & footer–I’m just totally lost on:

    “7. Copy the middle section—everything between …area of yourthemename/index.php.”

    Can you explain it more thoroughly? In other words, where am I to replace that php code you provided for us? I guess that’s the ONLY thing that’s confusing me. Other than that, I’m pretty ok.

    [Reply]

    Reply by: swolock
    July 15th, 2009

    Eva,

    Sorry if this is confusing. Doing these things can be that way. Hence this tutorial.

    You should have an area in yourthemename/index.php where the content is going to go. Do you have a div that holds the main content? What you need to do now is copy the code from classic/index.php into where you want the blog posts, etc. to go. Copying and pasting the code in step 7 should work fine but you may need to tweak it depending on your page’s structure. Does this help?

    [Reply]

    Comment by Eva — July 15, 2009

  35. Ahh I think I got it! I wasn’t complaining if I said it was confusing. In fact, this was the ONLY tutorial that has helped me with Wordpress, after days of googling. Thank you so much Swolock, you’ve been extremely helpful! You don’t mind, if I have any problems with Wordpress, I could comment here & ask you? :)

    [Reply]

    Reply by: swolock
    July 16th, 2009

    I’m glad I could help. Ask away, if I can help I will.

    [Reply]

    Comment by Eva — July 15, 2009

  36. Everything’s going smoothly, thanks once again Swolock!
    I also reviewed my coding, it seems I was the one who made it confusing.
    Thank you so much :)

    [Reply]

    Comment by Eva — July 21, 2009

  37. Hi

    Wonderful tutorial for begginers to wrodpress like me! very simple and straight! I am trying to build a website, I have initially created a html based site that is still not launched and now I want to integrate wordpress blog. But, I have couple of questions:
    1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?
    2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

    Regards
    Sri

    [Reply]

    Reply by: swolock
    August 21st, 2009

    Sri,

    1. I want to know whether I need to merge the stylesheet from my theme into the main stylesheet (of my website)?

    No, you don’t need to merge the theme stylesheet with your website’s stylesheet. You can, of course, it in the head section if you want to.

    2. After going through your steps, I was able to integrate the blog\index.php into my existing site. But the initial “Hello World” blog link in the content area is broken. Am I missing something? Do I need to go to wordpress admin page to set things up?

    The Hello World post should show up if you followed the tutorial if you didn’t delete it. You may be missing something in index.php but it’s hard to know without seeing it. Try creating a test post in the Wordpress admin and see if that shows up.

    [Reply]

    Comment by Sri — August 20, 2009

  38. Hi

    Thanks for the reponse! I guess I made some mistake, as I went through all the steps again, it worked. I am now able to add new comments, see all the blogs but when I add new comments (from the blog site) to an existing blog, I still see comments count as (1). Not sure why?

    Sorry for asking so many questions :(

    [Reply]

    Reply by: swolock
    August 24th, 2009

    I’m not sure either. Make sure you refresh the page and trying logging out then viewing the page. It should be fine unless you changed the code where it states the number comments.

    [Reply]

    Comment by Sri — August 21, 2009

  39. I have completed this tutorial multiple times and have followed the instructions carefully, everything looks great for me until I begin to manipulate the header.php and footer.php. Once I paste the get_header(); in the index.php I get a “Fatal Error: Call to undefined function: get_header() in…” Is there something I’m missing. You can view the url here. http://www.vis.uky.edu/Vis_Center_Site_NEW/blog/wp-content/themes/my_theme/

    [Reply]

    Reply by: bob
    October 7th, 2009

    I have exactly the same problem. I even de-installed wordpress and went through all the second steps again, but still no luck: “Fatal Error: Call to undefined function: get_header() in…”

    See the website here: http://www.rietjens.nl/blog/wp-content/themes/rietjens_theme/index.php

    Did you find out what we’re doing wrong?

    Bob

    [Reply]

    Reply by: bob
    October 10th, 2009

    Me again.

    I was wondering what would happen if I would try to skip the part where i put the header and the footer in different files. I just kept all the code (including header and footer code) in the index.php file and removed the links to the external header and footer files.

    After that I copied and pasted the code under point 7 of “Put it back together and add the WordPress parts” in the index.php file with the exception of the last line of code.

    This didnt work either. I get the following error on the page: “Fatal error: Call to undefined function have_posts() in /usr/home/deb16951/domains/rietjens.nl/public_html/blog/wp-content/themes/rietjens_theme/index.php on line 34″

    Line 34 in my index.php file reads:

    Any thoughts anyone? Im close to giving up!
    B.

    [Reply]

    Comment by ACE — August 24, 2009

  40. Just wondering if you could help me figure out why my footer is not along the lower portion of the screen unless I make enough blog posts to get it to move down? Also, My original index file had a border around the lower area of the sidebar and it has now disappeared…can’t seem to get it back. I used the http://www.wellnesscenters.com/about.php page for my original (without the text and such) and I my blog site address is http://www.wellnesscenters.com/wordpress Any help would be awesome as I have been trying to figure this out for a day now. Thanks!!!!! The overall tutorial was GREAT! just wish I could figure these two things out and I’d be ready to start blogging :)

    [Reply]

    Reply by: swolock
    August 31st, 2009

    I suggest you take a look at your HTML. Visit your blog page, view source, then copy the source and paste it into a new PHP document in your HTML editor. You’ll see that you have some basic errors in there like 3 body tags and 4 head tags. I’m guessing that if you clean that up your problems will be resolved.

    [Reply]

    Comment by mary — August 30, 2009

  41. Hello!

    Really great tutorial – I got it (kind of) right the first time round. This is definitely one of the clearest tutorials for a WP newbie like me!

    Just wondering if you could help me with the white background from content downwards that has disappeared? I’m really wracking my brain and can’t figure it out!

    Thanks! :)

    [Reply]

    Reply by: swolock
    September 3rd, 2009

    Hi BQ,

    I’m not certain what’s going there but I did notice a couple of HTML errors on your page. 1) You seem to have 3 closing divs with no corresponding opening divs. And 2) you are missing your closing body and html tags. Like I said, I don’t know if that’s your problem but it may be. Also, make sure you clear your floating divs if you haven’t already.

    [Reply]

    Comment by bq — September 2, 2009

  42. Thank you,

    Great tutorial, did exactly what it said on the tin !!

    [Reply]

    Comment by Gary — September 8, 2009

  43. Hello, thanks for the great tutorial. I have a question about the backend of this. Where would be the admin panel where you post new blogs and delete or approve comments? I have built a admin page for my website where I can edit my event calender and other things. can I build in the admin for the blog into my already built admin page? This way I can maintain my website from one page…

    Hope to hear back soon!
    thanks!

    [Reply]

    Reply by: swolock
    October 1st, 2009

    Hi Beliy

    I’m pretty sure you have to use the Wordpress backend to manage Wordpress although I’m not sure. I suppose you could put a link in your site admin to the Wordpress admin.

    [Reply]

    Comment by Beliy — September 30, 2009

  44. Hi,

    This tutorial helped a lot, but i am facing some problems. the blogs are not coming up on my website while its there on wordpress website. can you please help me out to solve this issue?
    Below is the link for my blog.

    http://etsbpo.com/BLOGS/

    thanks.

    [Reply]

    Comment by Farooq Malik — November 6, 2009

  45. Can you be a little more specific?

    [Reply]

    Comment by swolock — November 9, 2009

  46. hi! i followed your tutorial and seamlessly integrated a beautiful looking blog into an already existing site. thanks so much for the great instructions!

    the only part i’m having trouble with is integrating the sidebar feature. when i put in a tag cloud, for example, all the aesthetic attributes were gone and all you could see was a boring list of words. it was so ugly i took it down. do you have any idea how to get around this?

    thanks!

    thea

    [Reply]

    Reply by: swolock
    November 23rd, 2009

    Thea

    It sounds like you don’t have styles for sidebar widget like the tag cloud in your stylesheet document.

    [Reply]

    Reply by: thea
    November 25th, 2009

    Thanks! That sounds about right. I’m sorry…I’m new to this. How do I get those styles in my stylesheet?

    Thanks!

    [Reply]

    Reply by: swolock
    November 30th, 2009

    Hmmm. Complicated question. I’m not sure this is the best answer but what I would do is in a browser view and copy the source of the page that isn’t working right, then copy the source into a new Dreamweaver page. There you can see exactly what styles are being used around the sidebar and widgets. Then you can add or modify those styles in your theme’s style.css.

    Comment by thea — November 20, 2009

  47. Thank you for such a detailed introduction to adapting WP to my site.

    I have the same problem as the guys on Comment #39:
    Fatal error: Call to undefined function: get_header() in /…/…/…/…/…/APPLEGARDEN/wordpress/wp-content/themes/classic/index.php on line 6

    which I can’t find a solution for.

    Any help in figuring this out will be tremendously appreciated.

    Mikka

    [Reply]

    Reply by: swolock
    December 3rd, 2009

    Mikka, I can’t say for certain but make sure you have the get_header() include tag at the right spot, probably just under the @package WordPress php block. Make sure you have a header.php file and see what’s on line 6.

    [Reply]

    Comment by Mikka — December 3, 2009

  48. Thanks a ton for this tut, I’ve at least got a starting point and have the wordpress blog “up” within my site. My problem is the actual wordpress blog section of my theme seems to be inheriting my websites’ css for text styling and everything else, overriding the theme’s style.css. At first this didn’t really bother me, but unfortunately it seems to remove all styling applied when using wordpress’ backend to create posts.

    In the post I have up for example, I specified in wordpress when I created the post that the photo should be right aligned, yet when I publish, it’s aligned left. If I change the theme back to the default, it goes back to it’s proper right alignment.

    The only successful styling I’ve applied to this section is the h2 tag, (which i specified in my main css file) to have any h2s in my wordpress div to have a certain styling (you can see it being used on the post’s date)

    So I guess my question is, where do I specify (and in what file) that the wordpress section should be taking it’s styling info from the theme’s css file and not the website’s main css file? My header and footer are fine, it’s just the main loop or whatever that’s not behaving.

    I’m a complete newb when it comes to wordpress, so I’m sure I missed something. I’m completely aware that the sidebar is at the bottom, I just stuck it there for now until I work out the rest of the kinks.

    Thanks in advance!

    Chris

    [Reply]

    Reply by: swolock
    December 10th, 2009

    Chris, This is a pretty complicated answer, sorry. I suppose the first thing to do is make sure there’s a link to the Wordpress CSS file in header.php. Look for php bloginfo(’stylesheet_url’). Then try moving that code before or after the link to your site’s CSS file. FYI, the last style in order will override one before. So if you load an H1 from a CSS file that come before another CSS file the later H1 will override or add to the previous H1. Get it? If it still doesn’t work make sure your CSS file links are right. You may need to CAREFULLY merge small parts of the 2 CSS files a little at a time. Sometime I’ll make a 3rd CSS file for overrides and merges so I don’t mess up the other CSS files. Make sure it comes last in head.php. CSS can be a battle but don’t give up.

    [Reply]

    Comment by kurisub — December 10, 2009

  49. Thanks so much for the prompt reply, it worked!
    Just put that @import url( ); line in the header after my site’s css and all the styling of the orignal theme shows up just fine!

    Maybe you should make a note in the tutorial that if people want the orignal blog’s styling to remain intact to leave that line of code in the header.

    My only problem now is that the sidebar didn’t seem to want to sit inside the sidebarwrap div I put it inside. After mucking around with the style.css and giving it a float:right I was able to get it where I wanted, but it just seemed weird to me that after I removed the default absolute positioning that it would end up on the left in my wordpresswrap div instead of my sidebarwrap div.

    Anyways, things seem to be behaving for now
    Thanks again!

    Chris

    [Reply]

    Comment by kurisub — December 10, 2009

  50. I did your tut… it all worked very well. Only problem is I cant get anything to be centered where my content is. Its driving me up a wall. Any help would be much appreciated. my site is hiphopoth.com, but the problem is on my wordpress test site at http://hiphopoth.com/blog/

    [Reply]

    Comment by Bryan — December 17, 2009

  51. fantastic tutorial. I had been looking for a way to integrate a blog into my new website, had tried a few other tutorials but never worked, until I found this one!! Fantastic, followed steps as clearly outlined and EVERYTHING worked perfectly first time of trying. For info, version of WordPress used was 2.8.6. Thanks VERY much for this tutorial.

    [Reply]

    Comment by David — January 19, 2010

  52. Yep, that pretty much covered it. Thanks a bunch.

    [Reply]

    Comment by Mark Mc — January 27, 2010

  53. Is something missing from ‘Put It Back Together – Step 5′?

    I hope so, I’m working on this now

    [Reply]

    Reply by: swolock
    February 19th, 2010

    Hi Barbara

    Yes there is something missing. Some php code keeps disappearing but I think I figure out how to make it display and corrected that line. In any case, what you are looking for < ?php get_footer(); ?>. Thanks for bringing that to my attention.

    Steve

    [Reply]

    Reply by: Barbara Pritchard
    February 19th, 2010

    The blog is up! It didn’t take too much longer to understand what I was looking for, your instructions are very well written. The blog is now integrated into the site, SKUforce.com, and I am working on the CSS. Next the sidebar, and later the comments, which are currently disabled. Thank you so much for this tutorial. It must have taken a goodly amount of your time.

    [Reply]

    Comment by Barbara Pritchard — February 18, 2010

  54. Thank you for this great tutorial!

    I have gotten the main page of the blog working perfectly except that when the title of the post is clicked on it goes nowhere – I get a page with a bunch of symbols. In the admin section the editor shows the source to be simply a page full of the same symbols. My FTP client cannot seem to change it, and when I change it in the browser based editor I get error:
    “Parse error: syntax error, unexpected ‘;’ in D:\Hosting\5699255\html\blog\wp-content\themes\WATtheme\single.php on line 30.”

    I get the same error when I click on the comments link.

    What do I need to change on the single.php and comments.php pages to make them work?

    -Alex

    [Reply]

    Reply by: alex
    February 19th, 2010

    Sorry to double up on the post – I seem to have solved that particular issue. The question now is how to move the submit comment box and comments themselves around on the page?

    [Reply]

    Reply by: swolock
    February 19th, 2010

    You probably need to create a comments.php page and put in your template folder if you don’t have one already. Then you can call it with < ?php comments_template(); ?>

    I hope that helps.

    [Reply]

    Comment by alex — February 19, 2010

  55. I just wanted to say thanks for this great tutorial. I was scared to try it – afraid that I would spend hours trying to solve problems, but it was very easy and exactly what I was looking for.

    Thanks,
    Jennifer

    [Reply]

    Comment by JGardner — February 22, 2010

  56. Justin,

    Excellent tutorial. I was able to wire up a prototype in less than half an hour. Amazing. Thanks!

    Phil

    [Reply]

    Comment by Phil — February 22, 2010

  57. I’m running through these steps for the first time. They’re overwhelmingly easy to follow, but I’ve just hit a wall.

    In the “Put it Back Together…” section, step 9 instructs us to “copy the following from classic/footer.php”. However, there is no code following this instruction.

    I assumed that the code in question is actually that contained above it in the PHP box between steps 7 and 8. However, that code does not appear in the classic/footer.php file.

    Could you clarify step 9? Thank you

    [Reply]

    Reply by: swolock
    February 24th, 2010

    Amanda,

    It’s a real pain to get php code to show up in Wordpress paragraphs. Just when I think I’ve got it, it goes away. I hope I’ve fixed it now so see item 9 above. In any case, the answer to your question is the call to sidebar, < ?php get_sidebar(); ?>.

    [Reply]

    Comment by Amanda — February 23, 2010

  58. Hi there,I wonder if you could help me before I give up completely… I installed WP so far, followed the tutorial – but the blog is not embedded in the website layout.It just shows the “skeleton”. Everything else is missing: the complete layout,images,css… Here’s the header(php) code I installed:

    Tierarztpraxis Biesenthal-Barnim, Dr.Lekschas, Heim- und Kleintiere,Exoten

    <!–
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i

    Thank you for advice!
    Susanne

    [Reply]

    Comment by Susanne — March 8, 2010

  59. sorry, the URL is http://www.tierarzt-barnim.de/wordpress/

    [Reply]

    Comment by Susanne — March 8, 2010

  60. Hi Swolock,

    Thank you very much for this rather detailed guide on merging wordpress into an existing site.

    I came across other tutorials that were more geared towards PHP pages, where as my normal website is complete HTML, so this worked beautifully.

    Thanks again,

    Keith.

    [Reply]

    Comment by Keith — March 13, 2010

  61. Hello,

    I am trying hard to get this to work… I can build the skeleton page and it runs fine, it’s when I cut the head out that I lose all the formatting. I would love to send you the code for you to give me a hint at where to actually break this. You can see it live at:
    http://www.duplicatethat.com/wordpress. I am a web designer and have several calls for this sort of work, this is my first attempt at this.

    Thanks in advance for a great tutitorial

    Bill

    [Reply]

    Comment by Bill DeLoach — March 18, 2010

  62. This tutorial was awesome! I tried a couple of other ones before this one and they all sucked. This tutorial was very succinct and to the point. The sidebar was splattered across the page, but then I added some div tags to the blog content section and the sidebar and it worked. Thanks!!!

    [Reply]

    Comment by Jean — March 19, 2010

  63. I am building a new site for my wife and am trayign to integrate an existing wordpress blog following the instructions. However as I go along I get this error when i preview index.php
    Fatal error: Call to undefined function: get_header() in …../wp-content/themes/susan/index.php on line 8

    When I preview the header i get <a href="
    Fatal error: Call to undefined function: bloginfo() in . . ./wp-content/themes/susan/header.php on line 38

    Here is the page I started with to make my index.php http://susanbanghart.com/writersblog.html

    What am i doing wrong?

    [Reply]

    Comment by dbanghart — March 26, 2010

  64. Swolock, I just wanted to let you know how great it is that you’ve made this tutorial. This is something I have not known how to do, and I’m sure many other people have wanted to do for an age, and I think your tutorial is the only one like it on the web (at least that I can find). Thanks so much!

    - Way

    [Reply]

    Comment by Way — March 26, 2010

  65. I thought I submitted this question yesterday but it is not here, so it must not have taken.

    I ran into some errors. For Step 4 of Put It Back Together, when I try to preview my index.php file I get this error
    Fatal error: Call to undefined function: get_header() in . . . /wp-content/themes/susan/index.php on line 6

    Nothing happens when I try to review my header.php

    [Reply]

    Comment by DBanghart — March 27, 2010

  66. Thanks so much; I finally got what I was looking for from your tutorials. I still have problem with my site as there is no contant area at all. I was confused about some of the codes to be copied.
    I hope you will help me to sort this out.Once again, a big thank you to you.

    [Reply]

    Comment by Sarah — April 6, 2010

  67. Thanks so much; I finally got what I was looking for from your tutorials. I still have problem with my site as there is no content area at all. I was confused about some of the codes to be copied.
    I hope you will help me to sort this out.Once again, a big thank you to you.

    [Reply]

    Comment by Sarah — April 6, 2010

  68. Steve,

    Great tutorial – worked like a dream!

    Thanks

    Tom

    [Reply]

    Comment by Tom Tom — May 10, 2010

  69. Thanks man! Really helped me save time and frustration. I know I would have spent countless hours figuring this out on my own.

    [Reply]

    Comment by Daniel Murphy — May 24, 2010

  70. Hey swolock,

    I have been googling from morning but found that most of the articles of integrating blogs to an existing website are based on PHP and wordpress. Can you please let me know if you have any idea of such similar tools to integrate blogging on a Java based website. Our site is based on Spring MVC framework.

    It would be really great if you can point me in the right direction. Your help is highly appreciated.

    Thanks,
    Shravanthi

    [Reply]

    Reply by: swolock
    June 2nd, 2010

    Sorry Sharanvathi, I’m not familiar with Spring MVC framework.

    [Reply]

    Comment by Shravanthi — May 27, 2010

  71. [...] This walkthrough provides an excellent way to get a WordPress blog on your OWN website. Most people choose something along the lines of http://www.YourDomain.com/blog. This tutorial guides you through creating a theme that matches YOUR websites layout and colors! No more lame, templates that come with WordPress. [...]

    Pingback by 805 Creative Blog :: Web Design : Brochure Design : Video Production : Commercial Photography : Copywriting :: Ashland, OH — July 2, 2010

  72. Thank you so much for this post… two thumbs up from me. I struggled for the first half of the day using other instructions and these were perfect… in about an hour I had my blog working!

    [Reply]

    Comment by Debbie — July 17, 2010

  73. [...] http://www.rivergraphics.net/resources-tutorials/how-to-integrate-a-wordpress-blog-into-your-existin... Comments (0) [...]

    Pingback by Danielle and Armon - The Wedding — July 19, 2010

  74. in the index.php file when previewed gives me “Fatal error: Call to undefined function get_header()”
    Does the code need an include of ” wp-includes/general-template.php” or maybe I missed something. Try this over and over. Please help…..

    [Reply]

    Reply by: swolock
    July 28th, 2010

    Hi Ernie

    Sorry to hear you’re having trouble. Make sure you have a header.php file in your template folder. There should not be a reference to ‘wp-includes/general-template.php’ in your template files that I’m aware of. Let me know how it works out.

    [Reply]

    Comment by Ernie — July 27, 2010

Leave a comment