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>

Read More......

WordPress Admin Comment In Different Color

Posted by Planeta Srbija | 4.7.09 | | 1 comments »

If you have a WordPress powered blog with lot of comments, it might be good idea to somehow highlight comments posted by Administrator. It looks better and it's much easier to follow comments.

1. To do so, open the style.css of theme you use and place anywhere this code:


li.bypostauthor {
/* CSS styles for author comments */
background-color: #FFFFCC !important;
}

Of course, instead of "FFFFCC" you can use any code for any color - there are some of them: link

That's it!

Note: This specific CSS class "li.bypostauthor" is automatically added by WP to author comments. For registered users WP adds "li.byuser" CSS class.

Read More......

Subscribe to: Posts (Atom)

Take a look on my other postings: