Adding a Wordpress Blog feed to your php or html page
Since I had a lot of trouble finding information on how to do something which I thought would really be pretty simple, I thought I’d write something of a how-to. Basically I wanted a way to take say, the first three entries from my Wordpress blog and display them in a summary format directly on my non-Wordpress site page (Ok, so it’s a web 1.0 page, get over it). I figured that there’d be a lot of people out there doing this but lo and behold, they’re all keeping it a secret apparently.
After poking around through the php code in the Wordpress file “theloop.php” (each theme should have one of these… it controls how your entries get displayed on the page), and vastly simplifying the code that I found, I came up with this:
<h3 class=”entry-header2″>Recent Blog posts</h3> <?php if(have_posts()){ for($count=0; $count<3; $count++) { the_post(); ?>
<div id=”post-<?php the_ID(); ?>” class=”entry”>
<h1 class=”entry-header”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=’Permanent Link to “<?php strip_tags(the_title()); ?>”‘> <?php the_title(); ?></a></h1>
<div class=”entry-date”><?php printf(__(’%1$s by %2$s ‘,’unnamed’), the_time(__(’ F jS, Y’,'unnamed’)), get_the_author()) ?></div>
<!– End of post header –>
<?php the_excerpt(); ?>
<?php wp_link_pages(’before=<p><strong>’ . __(’Pages:’,'unnamed’) . ‘</strong>&after=</p>’); ?>
</div> <!– End of post –> <!– End the loop –>
<?php
}
}
?>
Ok, so lets be clear here: I’m not writing this for you PHP and Wordpress experts out there. That said, let me walk you through this code. First, if you take a look at theloop.php you will most likely find a while loop that essentially cycles through all of the entries in your database and makes some decisions on how to display them. This code does basically the same thing, but since I’m only interested in the most recent three entries, I decided to use a for loop. I assume that if you have your blog set to display in reverse order that this will not work (just a warning, I have not tried).
So say instead of wanting just the last three entries, you wanted the last five. You would change this line:
<?php if(have_posts()){ for($count=0; $count<3; $count++) { the_post(); ?>
Let’s dig into this set of statements since this is really the bread and butter of the whole thing. The statement have_posts() queries your database and will be either true or false. The next statement is the for loop. If you don’t know how loops work, do a quick google on “for loop in php”. I promise you will find a lot of really good explanations. Finally, the_post() queries the database and retrieves the next entry. Now I havn’t dug deeply into this function, but based on the syntax I’m assuming that it stores the entry in a local variable that was defined by way of wp-blog-header.php, which is required on all pages that use the Wordpress engine (more on that later).
Next is the code to retrieve the basic information about the post that you retrieved using the_post().
<div id=”post-<?php the_ID(); ?>” class=”entry”>
<h1 class=”entry-header”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=’Permanent Link to “<?php strip_tags(the_title()); ?>”‘> <?php the_title(); ?></a></h1>
<div class=”entry-date”><?php printf(__(’%1$s by %2$s ‘,’unnamed’), the_time(__(’ F jS, Y’,'unnamed’)), get_the_author()) ?></div>
Ignore all of the <div> and <class> statements, and this really just boils down to (first line) retrieving the ID of the post, then building some links (second line), and then finally determining what day and time this post was created at.
Finally is the code to display your blog entry. While this may be wrapped in a lot of fancy if..then or possibly case statements in your theloop.php file, for our purposes it really boils down to this statement:
<?php the_excerpt(); ?>
The method the_excerpt() takes the first fifty or so words from your post and prints those words to the page. That’s where all the <div> and <class> statements come into play: they instruct the browser how to display all that text. If you don’t understand them, do a quick search for “CSS” or “Cascading Style Sheets” in google. Again, you’ll find a lot of good info on that.
One last thing, in order for this to work you will need to include a few extra statements on your page:
<?php require(’./wordpress/wp-blog-header.php’); ?>
This includes all of the Wordpress methods that you will be calling. This should appear somewhere in your <head> section, but doesn’t really matter as long as it’s before this next statement.
<?php wp_head(); ?>
This creates the connection to the Wordpress database, instantiates local variables and performs all of the setup that you will need done in order for your code to work. This should be one of the last statements in your <head> section.
So that’s it! Hope this helps at least one lost soul trying to figure out how to do this without mining through all the Wordpress files. The codex.wordpress.org documentation is pretty good, but I could not find anything really useful for this particular area. But then again, it’s written by developers, for developers. And I really didn’t want to have to put my developer hat on; but alas, so it was.
Oh one last thing. If you plan to insert this code into an html page (i.e., index.htm or index.html), you will need to add this code to the .htaccess file for your site:
AddType x-mapp-php4 .html .htm
This instructs the web server (probably Apache more likely than not) to parse the html documents as if they were PHP documents. Otherwise you will probably not see any difference on your page, or you will see some errors displayed.
Good luck!