Integrate WordPress Into Existing Site Tutorial

Add Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 4.33 out of 5)
Loading ... Loading ...

*update 12/28/2010 - We have posted an updated video for 2011 using the TwentyTen theme on WordPress newer version. It is much more detailed and shows more info on how to properly integrate WordPress into any existing website you may have. View it here:http://www.websitedesign411.com/blog/integrate-wordpress-using-twentyten-2011/

Many of our readers have requested that we provide a detailed write up of how to integrate a WordPress blog into any existing website. We are going to show you step by step how to get a working WordPress installation seamlessly integrated into your current website. It doesn’t matter if you are using Joomla, Drupal, or straight HTML, this write up will work for your website too!

Okay lets start by talking about some preparations you need to make. We need to make sure that you have installed WordPress on your host. For the purposes of this tutorial we will install WordPress under the /blog directory. So we are clear your WordPress installation should be found at www.yourwebsite.com/blog. This should be a standard WordPress install, nothing special is required from the installation standpoint.

Once you can see the default WordPress blog on your site at www.yourwebsite.com/blog, then we can begin the customization, excited yet?

default WordPress Blog

wordpress ftp filesFirst thing we want to do is log into the admin area and make sure you have the WordPress theme set to the default theme. Now pull down all the .PHP files we are going to edit from the host. Navigate through your favorite FTP program to the following location: /yourwebsite.com/blog/wp-content/themes/default/. From here you will want to move the following file to your desktop (or whichever folder you will use to house the files while you edit them):

  • header.php
  • index.php
  • footer.php
  • single.php
  • comments.php

Now lets make sure you have a page setup on your site for the blog. This will be the “template” page you will use during your customization. If using HTML just make sure you have a page that you can actually visit for the blog at www.yoursite.com/blog. Leave the space where the blog content will go empty except for the text “blog content here”. Also make sure you have a space for your sidebar and write the text “sidebar here” so you can find it later as we edit the WordPress theme with this template. Below is a graphic example of what the blog “template” page could look like:

blog template page

Now right click on your template page and view the source. From the view source page press Control+A to highlight all the text. Now press Control+C to copy the text. Open up a blank HTML file in your HTML/PHP editor (we will use Dreamweaver from now on for this tutorial). Go to the code page of your editor and delete everything so you have a blank canvass. Now press Control+V to paste the details of your template page into this new document.

EDIT THE HEADER.PHP FILE

1. Open up the header.php file in Dreamweaver. In the code you will want to delete everything after the initial

<?php /** * @package WordPress *@subpackage Default_Theme */ ?>

Use the screen shot below if your unsure:

blog template page

2. Now go to your template you copied earlier and view the source. You should copy everything over exactly as it is. Start at the top and copy everything down to the area just before where your main body content for the blog will start. This will vary depending on your particular website layout, but it will work regardless. Once you have copied everything you consider to be the “header” from your template paste it into the header.php file. You can delete the title meta tag you copied from your template and replace with the the following one that you can find in the original header file:

<title><?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>

In addition you can paste the following code from the original header.php code and place it in the meta area of your copied template code:

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />


3. Since the blog is located in a sub directory we highly recommend making sure you input the full URL address to the files specified in all the meta tag info of your header.php file. For example

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

would become

<link rel=”pingback” href=”http://www.burnseo.com/blog/xmlrpc.php” />

Once you have done this for all the meta URL’s, you can save this file and transfer it to your host Copy over the header.php file in the default theme folder we discussed earlier.

EDIT THE INDEX.PHP FILE

1. Open the index.php file and delete everything after the inital PHP call for the header (leave that intact). Go back to your template code and copy EVERYTHING directly after the header area you copied ealier and UP TO the footer. Take this code and paste into the index.php file after the initial PHP header call. Now search your new index.php file and find the content filler text on your template that we suggest earlier. We used the text “blog content here”. Find that text and in it’s place paste the following code:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

<div>
<?php the_content(‘Read the rest of this entry &raquo;’); ?>
</div>

<p><?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?> Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘No Comments &#187;’, ’1 Comment &#187;’, ‘% Comments &#187;’); ?></p>
</div>

<?php endwhile; ?>

<div>
<div><?php next_posts_link(‘&laquo; Older Entries’) ?></div>
<div><?php previous_posts_link(‘Newer Entries &raquo;’) ?></div>
</div>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?>

<?php endif; ?>

Good job your almost halfway done!

2. Now make sure you go to the very end of the code of the index.php file and paste the following code as the LAST LINE OF CODE for the index.php file:

<?php get_footer(); ?>

3. The last thing you will have to do with the index.php file is find the filler text you used for your sidebar. Remember that we used the text “sidebar here”. Find that text and in it’s place past the following code:

<?php get_sidebar(); ?>

you might have to place a div or paragraph tag around this one and center it or align it left or right depending on your taste.

EDIT THE FOOTER.PHP FILE

1. Open the footer.php file. You can delete everything AFTER the initial PHP call. Go back to your template and copy everything after your index text down to the last code on this page. Paste this code after the initial PHP call in the footer.php file. before the /body tag you will want to insert the following code:

<?php wp_footer(); ?>

if you would like to support WordPress or want to display the feed information in your footer you can paste the following code anywhere appropriate in your footer file (it’s not required to work so feel free to not include this if you don’t want to):

<?php bloginfo(‘name’); ?> is proudly powered by
<a href=”http://wordpress.org/”>WordPress</a>
<br /><a href=”<?php bloginfo(‘rss2_url’); ?>”>Entries (RSS)</a>
and <a href=”<?php bloginfo(‘comments_rss2_url’); ?>”>Comments (RSS)</a>.
<!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>

Okay now you have the basic blog customized to your website! you can overwrite the header.php, index.php and footer.php files in the default wordpress theme folder on your host. If you refresh the page you should see your working blog integrated with your site design! Great work, but not quite done yet…

EDIT SINGLE.PHP FILE

You want to copy everything from your new index.php into the single.php file. Highlight the WordPress code we told you to paste into the index.php file earlier and delete it. in it’s place replace it with this new code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div>
<div><?php previous_post_link(‘&laquo; %link’) ?></div>
<div><?php next_post_link(‘%link &raquo;’) ?></div>
</div>

<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h2><?php the_title(); ?></h2>

<div>
<?php the_content(‘<p>Read the rest of this entry &raquo;</p>’); ?>

<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
<?php the_tags( ‘<p>Tags: ‘, ‘, ‘, ‘</p>’); ?>

<p>
<small>
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/wordpress/time-since/ */
/* $entry_datetime = abs(strtotime($post->post_date) – (60*120)); echo time_since($entry_datetime); echo ‘ ago’; */ ?>
on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>
and is filed under <?php the_category(‘, ‘) ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link(‘RSS 2.0′); ?> feed.

<?php if ( comments_open() && pings_open() ) {
// Both Comments and Pings are open ?>
You can <a href=”#respond”>leave a response</a>, or <a href=”<?php trackback_url(); ?>” rel=”trackback”>trackback</a> from your own site.

<?php } elseif ( !comments_open() && pings_open() ) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href=”<?php trackback_url(); ?> ” rel=”trackback”>trackback</a> from your own site.

<?php } elseif ( comments_open() && !pings_open() ) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.

<?php } elseif ( !comments_open() && !pings_open() ) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.

<?php } edit_post_link(‘Edit this entry’,”,’.'); ?>

</small>
</p>

</div>
</div>

<?php comments_template(); ?>

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

Keep the rest of the code in tact, you are only swapping out the main content code here. only replace the exact PHP code we told you to insert originally with this one. The last code should still be the call for the footer.php file as it is in the index.php file.

EDIT THE COMMENT.PHP FILE

Open the comment.php file and look for this line of code:

<p><textarea name=”comment” id=”comment” cols=”100%” rows=”10″ tabindex=”4″></textarea></p>

You will want to decrease the cols value to something lower than 100%. I suggest 75%-80% and see if that fits well with the site.

Now overwrite the single.php file and the comments.php file and go back and view an actual blog post on your site. It should look nice and pretty now.

At this point you have succesfully integrated a fully functional WordPress blog into your website. It now looks and functions exactly as the rest of your site does. You can go into your WordPress admin and install plugins and widgets to your hearts content!

if we missed anything or you have any other suggestions for future tutorials don’t hesistate to give us a suggestion! We welcome any feedback.

*12/02/2009 Edited the tutorial with code in the header.php that was causing a parse error. Also we highly recommend the use of SEO plugins to help with the meta tags once your blog is up and running. Happy blogging!


If you liked this Article, you might also like:

If you enjoyed this article, please enter your email address and get email updates on future posts!:

  • Maxi Hobbs

    I’ve got everything working but the stylesheet doesnt seem to link so |I have plain Markup with no style. I’ve followed it through a few times and still can’t see the issue.

    Anyone else had the same issue and overcome it?

  • Maxi Hobbs

    Fixed!! Just had a dodgy quotation mark! Standard issue!

  • Pingback: WordPress – Easy To Integrate Into Your Site | Buy Bendaroos

  • Pingback: The Four Elements

  • http://www.adsgah.com آگهي رايگان

    thnx for information

  • Leigh

    My INDEX.php page parse errors were all related to cutting and pasting from this web page into my html editor. The single quotation marks were all in a font that didn’t read in html. I just had to replace all the single quotation marks (  these — ‘ — ) with the “courier” font version (or whatever Textwrangler’s font is…)

    One other thing, on INDEX.php page, the line (for me, 16) where it mentions <!-by the_author, the code is wrong there too on this web page. It should be   (have to hav lesser than sign,  exclamation point, and  2 hyphens to open the string, then 2 hyphens and greater than sign to close the string. ( like this –  Then everything inside the greater and lesser than signs is hidden code. Those 2 fixes fixed everything. 

  • Leigh

    Just finished integrating the whole thing — blog is not a part of my website and doesn’t send people off site as it did previously. I’m so PROUD and this tutorial was really fairly easy to understand. I’m a dog trainer/lawyer, NOT a web designer. SO I’ll be damned. Thanks so much for the help!!!!!! 
    Leigh – http://www.ruffcustomers.com/howls

  • Pingback: Photoshop

  • Stacy

    Hi!  I’m also having this error.  I see that this was a year ago but I’m looking to solve this!  Thanks!

  • Pingback: California Web Design

  • Pingback: free seo software

  • Pingback: Funny facebook status

  • Pingback: how to use No Hands SEO

  • Pingback: Adobe Edge

  • http://allyourga.me AllYourGame Nick

    Does this work on dynamic pages? I’d like to integrate it into Magento eCommerce platform, but simply copying and pasting the source code as a new WP template would not work since the page needs to be dynamic. For example, if someone logs in, they should still be logged in and able to access their cart when viewing the blog.

  • Dan

    Chris – thanks for this – I have a question. I have wordpress installed on a subdirectory of my website, so it’s at www . mysite . com / blog and it works great. I have a sitemap for my main website which I update manually, but am not sure what to about the sitemap for my wordpress blog because of how it’s set up. Do I just add the blog posts to my main sitemap like my other website pages, or shold install a sitemap plug in? I’m confused as to what would be a better move SEO-wise…

  • Linkbuilding Software

    hi,
    excellent blog.
    Linkbuilding Software
    thanks

  • Ferdi

    Hi Leigh, I have changes my quotation marks but it still give me errors, can you plaese advise what else you maybe did?

  • Dipak kumar

    really nice tutorial. thanks buddy you really help me out

  • Sa

    thanx
     

  • How to start a blog

    this is great for someone who wants to know how to start a blog

  • Matt

    My web guy tells me that our site is .asp and WP is .php and they are not compatible.  What are your thoughts on this?

  • Michelle

    Hi, this worked really well thanks. But something has gone wrong with the WordPress stylesheet.
    The stylesheet for the site design is fine but the page seems to ignore all the WordPress styles – can you help?
    http://www.jeffgosling.co.uk/Blog

  • HT

    HI! This tutorial is very useful although I think you should tighten up the loose ends to really polish it! I am having trouble and was hoping you could help. It worked, except the bottom of my page is scrambled, not showing my post and the administrative widget is at the bottom and lacking the proper styles…

  • Rob_alex63

    hi ,i want to install wordpress in my website. i want to sign in both sites, but i am creating account  in any one…..want to log in viseversa

  • http://www.facebook.com/emraan.hundekar Emraan Hundekar

    thanx i integrated successfully but my comment is not working..pls help

  • Fsdfdsa

    gege

  • Gtswhitt

     I’m getting an error when following exact directions:
    Parse error: syntax error, unexpected T_STRING in /home/content/20/10014520/html/new-designers-decor/wp-content/themes/twentyeleven/index.php on line 40