Tutorial: How To Show Posts From Your WordPress Blog On A Webpage
In order to do this, your blog must be installed on the same server as the website you want to use to display the post. For example, you might have your blog located at www.example.com/blog and would like to display certain posts on the front page at www.example.com/index.php. Or you might have your blog at www.example.com/blog and would like to display certain posts on a completely different website located at www.location.com that is on the same server.
My tutorial specifically describes how to do this on GoDaddy, but if you know the path of the root directory of your server, you can do this on any host. I am also assuming that you are at least moderately familiar with PHP and editing your HTML files.
The power behind the ability to load WordPress from an outside page lies in the wp-load.php file. This file is included with your blog installation and is located in your blog’s root directory. It loads WordPress and makes its API available. Once you have included the wp-load.php file in your page, you can use WordPress functions in exactly the same manner that you do in your WordPress template.
Let’s assume that you have several posts of tutorials in your blog and would like to display the most recent 3 tutorials on the front page of your website. Your blog is at www.example.com/blog and the front page is at www.example.com/index.php.If your front page is HTML, you’ll need to rename your front page file extension from .htm or .html to .php. (Make sure you test this on your server before making any internal changes to be sure it doesn’t break anything.)
Add the Include
First, include the aforementioned wp-load.php file by adding the following to the top of your index.php page:
- define(‘WP_USE_THEMES’, false); – This tells WordPress not to display the blog template used within your blog. It will use the CSS or “theme” your front page is already using.
- require(‘./blog/wp-load.php’); – This grabs the file using a relative path directory.
- query_posts(‘category=tutorials&posts_per_page=3&order=DESC’); – Gets the content we want to display. Here, we are getting posts from the “tutorials” category. We’re displaying 3 of them in descending order.
You may need to display different types of posts. View the query_posts() documentation to see how to do different queries.
Include on a Different Web
Again, the different web will need to be on the same server. If it is not, you can grab the RSS feed for your blog and insert it in your page that way. Here’s the example of the code I used in one of my webs to include parts of this blog.
- /home/content– This is the GoDaddy server path for your website.
- /s/t/e– since my username begins with “ste”, this is the path that is used to get to my folders on the server
- /username – This is your GoDaddy server username
- /html – This is the path to your root FTP folder.
- /example/blog/wp-load.php – This is the GoDaddy server path for your blog beneath your root folder as if your blog were located at www.example.com/blog.
In this example, I am showing posts that have the tag “Disney”, in descending order by the custom field “vacationday”. Again, I recommend that you view the query_posts() documentation to personalize your queries.
Insert the Code in Your Page
Find the location in your webpage HTML where you would like to display your posts. Insert the following snippet in your page to display the post title and an excerpt, followed by a link to the full article in your blog page.
<?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?>