WordPress tips and the functions file

I think it’s time I focus a bit on WordPress, a terrific blogging platform. It’s what I use for all of my clients’ sites because of it’s compatibility, flexibility, and nice admin. I have a lot of experience creating custom themes for WordPress. This is actually pretty easy. When I recently designed 5ones.com , one thing we really wanted was to show recent posts from each category. In the industries 5ones covers, media-rich content is very important. So, we wanted to take these excerpts one step further however, and extract the first image of a post, and convert it to a cropped thumbnail to keep things uniform. I am very pleased with the result.

A word on WordPress Themes:
One very important file when creating a WordPress theme, is the “functions.php” file. This works like the plugin section in WordPress. Basically, when your template is loaded, so are these functions. It’s a great way to create specific functions you can use in your template files, without having to create a plugin for each one. And sense the “functions.php” file is only connected to that specific template, you can choose a different template, and those functions will no longer be loaded.

Ok, so how did you do it?
The first step was to show the post title as a link, the author, and then a small except WITHOUT an image. If the author put an image at the top of their post, I didn’t want this to show up. So, in my index.php file, which acts as the home page, I put in this code:


<?php
//get the latest 3 posts for surfing
query_posts('category_name=Surfing&showposts=3');
while (have_posts()) :
the_post();
//execute the output function
show_post($post);
endwhile;
?>

WordPress has a lot of functions built in. So I used their “query_posts” function to get the latest 3 posts in the category “Surfing” (I repeated this later on for Skating and Snow). Then, in the famous WordPress “while loop”, I execute the function “show_post($post)”. The “$post” variable comes again from wordpress, which is actually a post object, containing all the post info (ie content, author, date, permalink, etc…). So, then in my “functions.php” file, I have my “show_post()” function:


//show the post
function show_post($post) {
echo "<div class=\"post\">\n";
echo "<div class=\"img\">\n";
//checks for image
getImage($post->post_content);
echo "</div>\n";
echo "<div class=\"body\">\n";
echo "\t<h3><a href=\"".$post->guid."\">".$post->post_title."</a> - <small>By ".author($post->post_author)."</small></h3>\n";
echo "\t<p>".summary($post->post_content)."<a href=\"".$post->guid."\">Read Full</a></p>";
echo "</div>\n";
echo "<div class=\"date\">".dateFormat($post->post_date)."<br /><br />";
echo "<br /><a href=\"".$post->guid."#respond\">(".$post->comment_count.") Comments</a></div>\n";
echo "</div>\n";
}


For the most part, I didn’t have to do anything new here. I basically used WordPress’s $post object to access specific information I wanted, and put then put it exactly where I wanted it in my XHTML. There are only 4 functions being called that I had to create.

The being called is “getImage()”. This is the function I use to display the small thumbnail next to the post. Here is the function:


//checks to see if there is an image in the post
// if yes, it displays the image in a box
function getImage ($hay) {
$path = explode("<img",$hay);
if(sizeof($path) > 1) {
$src = explode("alt",$path[1]);
$file = explode("src=",$src[0]);
$url = str_replace('"','',$file[1]);
$url = str_replace("'",' ',$url);
$link = explode("/uploads/",$url);
echo "<img src=\"http://5ones.com/dev/wp-content/themes/5ones-v2/gen_thumb.php?x=62&y=39&src=".$link[1]."\" />\n";
}
}

I am not saying this is the easiest, nor best way to do this part. However, it works great for my purposes. Anyways, here is what is going on. I use the variable $hay to hold the actual post content (which I passed in my show_post() function. I then used the explode function to separate any possible image tags in a post. Then, I am able to check the size of the array created, and if it’s large than zero, I know an image exists and continue on with the function. All I am trying to do, is get the path for the image in the post. So, I do a series of explodes and string replaces to isolate the path. Then, I pass the image path I finally get to my image resizing script (maybe I will share later), that crops the image and outputs it. Beauty.

The next function I use is “summary()” which takes the content, strips out html tags and image tags, truncates the length, and then returns the result. It looks like this:


//returns a summary of the content and strips html tags
function summary($copy) {
$new = strip_tags($copy);
ereg_replace("<img[^>]*>", "", $new);
$new = substr($new,0,200);
$new .= "...";
return $new;
}


The last function I use returns the name of the author. Since the post only gives the id of the author, I do a simple DB query to get the authors’ name:

//returns the name of the author based on id
function author($id) {
$sql = "SELECT display_name FROM wp_users
WHERE ID = '$id'";
$q = mysql_query($sql);
$r = mysql_fetch_array($q);
return $r["display_name"];
}

These are the functions I use to create the home page you see on 5ones. Hopefully these functions can be beneficial to someone trying to create the same thing.