How to Integrate WordPress blog to your existing Website

Basically you can think of WP as a collection of functions or scripts that do specific things. If you want to have your site title to be somewhere on the page, you simply type in: This piece of code is all that is required on your part to achieve the desired affect. So let’s get down to brass tacks. Say you have a site all ready to go, and you only want to use WP to power the text of your site;

that is easy enough to do. First lets set the stage. For this example we will assume you have the following DIV’s defined in your CSS:

1. .header

2. .menu

3..content

4. .footer

Now all we will be concerned with in regards to WP is the .content DIV. Here is where you will need to insert your functions. I am going to assume that one would like to have the date, category, author name, time and comments in the .content area, following is how you would do that. First you need to add this to the top of your index page:

<?php $blog = 1; require(‘wp-blog-header.php’); ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt;

I am assuming that you are using XHTML 1.1 here, I mean isn’t everyone? The Now, within the .content DIV add these functions:

<?php if ($posts) { foreach ($posts as $post) { start_wp(); ?>
<?php the_date(”,'<h2>’,'</h2>’); ?>
<a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a>

Now this bit of code calls to the database and grabs the title of your post, the way it is set up here is to make the title your permalink; a permalink is the permanent URI of this article. I f you don’t want it to be a link, leave off all the code.
Okay so far we have the date and the post title showing up in the .content DIV, now on to the actual post content.
Next we want to throw this function in: That will call the body of your post and spit it out in the .content DIV. Pretty straightforward huh? Now we move onto the meta information, i.e. the category it was posted in (if any), the author who posted it (if you have more than one, or just like to see your name in lights), the time it was posted, and a link to any comments for that post. Here is the function code to make that happen:

<?php link_pages(“<br />Pages: “,”<br />”,”number”); ?> :: <?php the_category(); ?> :: <?php the_author(); ?> @ <a href=”<?php echo get_permalink(); ?>” rel=”bookmark” title=”Permanent Link: <?php the_title(); ?>”><?php the_time(); ?> :: </a> <?php show_post_count($post->ID, $before=”Read Count (“, $after=”)”); ?> <?php comments_popup_link(‘Comments (0)’, ‘Comments (1)’, ‘Comments (%)’); ?>

This will spit out the appropriate values looking something like this:
Pages: (if multiple pages for post) :: TheCategory :: Mr Author @ 4:44 PM/AM :: Comments (0)
Next you need to add this code immediately after the above:

<?php include(‘wp-comments.php’); ?> <?php if ($p > 0) { add_count($p);}?> <?php endforeach; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <?php endif; ?> </code>

That is all there is too it really, except that you will have to save this page with a .php extension. Now you will obviously want to style these, and add some sort of seperation between functions, like
’s or throwing each funciton in it’s own DIV nested within the .content DIV, it is really all up to you.
Let me know if this was helpful

Advertisements
    • james
    • February 21st, 2011

    do you have examples?

    Thank you

  1. example please…iam confuse..

  2. Thanks for any other informative blog. Where else may I get that kind of
    information written in such an ideal method?

    I’ve a project that I am simply now running on, and I have been at the glance out for such info.

  3. Link exchange is nothing else but it is simply placing the other person’s website link on your page at proper place and other person will also do same in favor of you.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: