How to import (embed) Wordpress in HTML page

Posted by Planeta Srbija | 9.7.09 | | 8 comments »

You want to import WordPress Posts, Pages or Widgets into the rest of your static (HTML) coded website? It's possible!

Supposed, your web presentation is on www.example.com, and the wordpress part is on: www.example.com/blog.

The access to Wordpressu "from outside" is possible thru wp-blog-header.php. This file loads Wordpress application and makes it API, which allows you the access.
Once inserted in "static page", you can call all of its's funktions like making a WordPress Themplate (Theme).

Let's say you want to import from WP the Latest Post into your www.example.com/index page. The only possible way for this is that your index page has the .php extension. If you have the .html or .htm extension just change it!

Keep in mind your linking to the rest of the site (!) The easiest way for that is to make a new index.html page with redirection to your index.php page! Use this redirection trick (copy the code in Notepad/Dreamweaver/MSFrontPage and save it as index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0; URL=http://www.www.example.com/index.php">
<title>Redirecting Page</title>
</head>

<body>
</body>
</html>

Now, at the very top of your index.php (Home) page insert following code:
<?php
// Include Wordpress
define('WP_USE_THEMES', false);
require('./blog/wp-blog-header.php');
? >

The first line is just a comment on what we are trying to do. The second one tells WordPress not to use template. Third calls our importatnt function, we are talking here about.

Now, we scroll the page down and find the place where we want "Latest Post" to show up, and insert this code:
<?php query_posts('showposts=1'); ?"
<?php while (have_posts()): the_post(); ?"
<?php endwhile; ?"

In first line: we look for the latest post, in second: we call the loop, and in third we close the loop.

If you don't want the latest post but something else, please take a look on query_posts() documentation which shows variations on this issue.

To style a bit our code above (show Title and ...Read more), you'll need some knowledge in HTML... But here is an example on how to do that:
<td bgcolor="#ffffff" style="padding: 10px; border:1px solid #dbdbdb" align="left" >
<font face="Arial" style="font-size: 10pt" color="#000000"><p align="left">
<?php query_posts('showposts=1'); ?>
<?php while (have_posts()): the_post(); ?>
<?php the_title(); ?>
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?></font></td>

I have found out that you can use this trick to import WordPress functions from completely different websites, but they must be hosted on the same server. Use this code to do that:
<?php
// Include Wordpress
define('WP_USE_THEMES', false);
require('/var/www/example.com/blog/wp-blog-header.php');
query_posts('showposts=1');
? "

Note: in some cases it might not work, it has to do with some PHP restrictions on your web server! It can be solved with use of "curl.php" (but it's another topic).

At the end: if you don't want to import the "Latest Post", baut something else (i.e. Categories, Comments, Tags... whatever), please take a look of WordPress list of all tags used to make Templates: LINK

An example for Categories would be:
<td bgcolor="#f6f6f6" style="padding-left: 20px; border:1px solid #dbdbdb" align="left" >
<font face="Arial" style="font-size: 10pt" color="#000000"><p align="left">
<?php wp_list_categories('title_li=0&orderby=name&show_count=1'); ?>
</font></td>

8 comments

  1. iggie // 6 October 2009 at 15:53  

    Thanks - this worked well on my site.

  2. Anonymous // 24 October 2009 at 14:45  

    i have tried but it does not work for me. Oh well i'll try again

  3. Unknown // 7 September 2010 at 14:36  

    Fantastic! Thankyou very much.

    How could I change the font of the post heading only?

    Thanks.

  4. Pyro // 24 January 2011 at 16:01  

    thanks for the tips!!!
    I am using Business Catalyst Alternative right now.. and it really helps on the php side...
    more power !!!

  5. goldendotcom // 10 March 2011 at 04:10  

    Thanks--this was VERY helpful! Is there any way to embed two different blog feeds in same html page?

  6. Tom // 20 September 2011 at 16:14  

    Hi, thanks a lot for your guide it was really useful.

    I was wondering if you could help with one thing, I want to display an entire post including any images, any ideas?

    Thanks again, much appreciated.

  7. Anonymous // 18 January 2012 at 21:07  

    Worked great thanks for the helpful tutorial

  8. Anonymous // 30 December 2012 at 16:41  

    dumb question. but as i read this, it sounds like i am going to put a link in my html page "blog" that points to the wordpress blog page, and then have a redirect in the wordpress blog page that points to my actual blog page, which is a static html. and at the top of that page is where i put the:



    is that correct? is there any chance that you can post a finished coded page/s that demonstrate the code placement.

    i am never great at constructing, but i am golden for reverse engineering. thanks

Post a Comment

Subscribe to: Post Comments (Atom)

Take a look on my other postings: