About

Thoughts on Design is a blog on web design and front-end coding. Served up monthly-ish by Jamis Charles.

Search

Categories

How to add recent WordPress post exceprts on an external html page

25 of May2007

*** Update (Apr 4 08): I added a line of code that should strip out all HTML tags and formatting. So the resulting excerpt should only be text

*** Update (Apr 25 2012): I’ve added another post for how to accomplish this without accessing the database directly. Take a look.

Related Post: How to display 5 full posts…

Say you have a homepage that is not run by WordPress, and you just have your blog in the /blog/ directory or something like that. Yet you STILL want to display an excerpt from your recent post on your home page.

The solution? Use PHP and MYSQL to directly fetch the content from the WordPress database without even using WordPress.

1) Here’s the code you will want to write in BEFORE the Doctype (so the very first of your HTML):

<?php
//db parameters
$db_username = '###';
$db_password = '###';
$db_database = '###';

$blog_url = 'http://www.jamischarles.com/blog/'; //base folder for the blog

//connect to the database
mysql_connect(localhost, $db_username, $db_password);
@mysql_select_db($db_database) or die("Unable to select database");

//get data from database
$query = "Select * FROM wp_posts WHERE post_type='post' AND post_status='publish' ORDER BY id DESC LIMIT 1"; 

$query_result = mysql_query($query);
$num = mysql_numrows($query_result);

//close database connection
mysql_close();

//assign data to variables
$blog_date = mysql_result($query_result, 0, "post_date");
$blog_title = mysql_result($query_result, 0, "post_title");
$blog_content = mysql_result($query_result, 0, "post_content");
//$blog_permalink = mysql_result($query_result, 0, "guid"); //use this for 'p=11' format

$blog_permalink = $blog_url . mysql_result($query_result, 0, "post_name"); //combine blog url, with permalink title. Use this for title format

//format date
$blog_date = strtotime($blog_date);
$blog_date = strftime("%b %e", $blog_date);

//how many characters should be shown?
$maxchars = 135;

//strip out the html tags, such as images, etc...
$blog_content = strip_tags($blog_content);

//cut down the size of the post to 135 characters
$blog_content = substr($blog_content, 0, $maxchars);
$blog_content = $blog_content . "...";

// html page starts after ?>
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>

2) Find the “wp-config.php” file and the first three lines or so should contain your database name, user name, and password. Enter those in your file where I have ### for the db parameters. Just copy the names as shown in below. Do NOT CHANGE the “wp-config.php file”. WordPress will stop working if you do.

<?php
// ** MySQL settings ** //
define('DB_NAME', 'my_wordpress');    // 'my_wordpress' is the name of the database
define('DB_USER', 'my_user');     // 'my_user' is your MySQL username
define('DB_PASSWORD', 'my_password'); // 'my_password' is the password

3) Rename the file you are using to .php

4) Find a spot in your html where you want to display your date, title, and post excerpt. For example:

 
<div id="myId">< ?php echo $blog_date; ?>:

< ?php echo $blog_title; ?> 

< ?php echo $blog_content; ?>
 

<a href="<?php echo $blog_permalink; ?>">More </a>
</div>

The above code will display the following:

May 25:
Show only the titles on the Archive Pages

Thanks to www.spiritfolk.com for this one. 1) Open up /wp-content/themes/default/archive.ph…

More

Related posts:

How to get WordPress on an external page without hacking the db
How to add 5 full WordPress posts on an external html page

Show only the titles on the Archive Pages

25 of May2007

Thanks to www.spiritfolk.com for this one.

1) Open up /wp-content/themes/default/archive.php
2) Delete or comment out these lines (if you comment it out be sure to use html comments):

<div class="entry">
<?php the_content() ?>
</div>

3) If you are using any theme but the default, this step is necessary.
    a) Log in to your site via ftp. Find the “/wp-content/themes/default/archive.php” page
    b) copy it into the theme directory you are currently using.
   Example: If you were using the “classic” theme, copy archive.php (with the changes from step 2) from the “default” directory to the “classic” directory.

Showing only a certain amount of characters in PHP

24 of May2007

Say you want to post part of your blog on your front page, but only want to show the first 30 characters or so. This is way you do it:

 

<?php
$blog_content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."; 

//how many characters should be shown?
$maxchars = "30";

$blog_content = substr($blog_content, 0, $maxchars);

//add a "..." at the end of the entry
$blog_content = $blog_content . "..."
?>

This takes the $blog_content variable and cuts it down to 30 characters, and then adds a … at the end of it.

1 Comment »

Posted in PHP

Add an external CSS Stylesheet to your page

17 of May2007

Adding an external stylesheet to your page is preferable to using inline CSS (or just pasting it into your head code). Instead use and external file name “*.css”. To link to the file, write the code below into your head code:

<link rel="stylesheet" type="text/css" href="nameofYourCSSFile.css" />

No Comments »

Posted in CSS

Making an Image look warmer and brighter

15 of May2007

Often we are presented with images that we need to use that do not look very good. This tutorial provides a way to make poor images look better.

  1. In Photoshop, open the offending image.
  2. Duplicate the current image with Layer->Duplicate Layer
  3. Change the blend mode to “overlay style”
  4. Select Image->Adjustments->Hue/Saturation
  5. Reduce the saturation down to a pleasant level
  6. Reduce the opacity on the top image layer until it looks good.
  7. Compare the 2 images by toggling the visibility of the top layer

    Enjoy

Newer Entries »