blog Home

*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?

First 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:

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:

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 enjoyed this article, please enter your email address and get email updates on future posts!: