Ubuntu 11.04 – WordPress updates and plugins through web interface

If you have found this page, you likely know it is a bit of a pain to get updates and plugin installs to work within WordPress and a vanilla Ubuntu install. So this post a quickie to tell about what setup I am using to get it work.

First, the ftp server I am using. I tried vsftpd, but got lots of permissions problems when I tried to apply the updates or install patches. I played around with permissions and owners for a bit, but gave up.

Instead I tried proftpd, but it was also a pain to get working at first. It turns out, it worked fine once I changed the server type from “inet” to “standalone” in the /etc/proftpd/proftpd.conf file!

For permissions, I added my own user to the www-data group and then just give my login information to the wordpress interface to install the updates.

WordPress Tutorial: Recent Posts Block with Images

This post follows up on the last WordPress tutorial which shows how to start using featured images. In this post, I show how you can display a block of recent posts along with the featured image, in the same way as my website. (See the bottom of the home page, or the bottom of individual posts).

You will likely need to play around with the styling (margins, padding, etc.) a bit to fit with your own templates, but this should give you a good start. This assumes that you have setup thumbnails for “mini-thumbnail” (see previous tutorial on how to do that). You can play around with how many posts you want to display using posts_per_page below.

What the recent posts block will look something like

The first thing to pay attention to is the shorten_content function. This ensures that the content is not too long to display within the limited area we have. You can put this directly in the template file you are editing if you like, but I put mine in the functions.php file for the particular template.

)/", " ", $content);
$content = strip_tags($content);
if(strlen($content) < $size) return $content; $content = substr($content, 0, $size); $spaceloc = strrpos($content, " "); if($spaceloc) { $content = substr($content, 0, $spaceloc); $content.= "..."; } return $content; } ?>

Next we reset the query so that we can make a new query with the number of posts we would like and how we want to order them. For recent posts, we order by date and in this case we are showing 6 posts. Also one spot to pay attention to is the $count checking. You will notice when $count = 3, a clearing div is displayed. This controls how many recent posts to show per line. You can change this number to get more or less on one line.

Recent Articles

"date", "order" => "DESC", "offset" => 1, "posts_per_page" => 6));
$count = 0;
$postthumbnail = get_the_post_thumbnail($post->ID, 'mini-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = ''. get_the_title() .'';


The last thing we need is the css to style things. This is likely where you will need to change things to suit your own site.

.recent-entry { float:left; width: 30%; //change this width depending on how many entries you want on one line.}
.recent-entry h2 { font-size: 14px; }
.recent-entry img { padding-right: 2px; }
.recent-entry date { font-size: 9px; color: #333333; }
.recent-entry content { font-size: 10px; }

WordPress Tutorial: Featured Images

This is a quick tutorial on how to get out featured images, which I use extensively on this blog (jasonernst.com). The featured image is what shows on the home page for the site, and on the individual entries. In the event that there is no featured image set for a given post, a default image is displayed instead.

An example of a featured image

For reference, I know this has worked since at least WordPress 3.0, but it may work with some earlier versions as well (I think earliest may be WP 2.9). This tutorial assumes you have some knowledge of how to work with php files, and have a basic idea of how WP templates work.

Step 1: Thumbnail Sizes
You may wish to have some different thumbnail sizes from the usual ones which WordPress generates automatically. You can change this in Settings->Media and adjust the sizes to your liking. This will allow you to control the large, medium and thumbnail sizes.

Since WordPress 2.9, you can actually create your own image sizes and names using the add_image_size function. You can just add this into your functions.php file within your template. For example, my featured post thumbnail size is 240×150 and I want the image to be cropped from the original (rather than stretched weirdly).


This is what I added to my functions.php (note the check for the function, so that we don’t break older WP versions):

if (function_exists('add_theme_support')) {
add_image_size('featured-thumbnail', 240, 150, true);

Step 2: Customize the template
Here we check if there are any thumbnails generated, and if not display the default image. You could also do other things, such as display nothing, or ignore the post altogether if there is no thumbnail image. This is an example of the main thumbnail I use for my featured article on my home page (in my home.php template file). If there is no featured image set for the post, it displays a default image found in the template’s “img” folder. Note: this is done within “the loop”.

$postthumbnail = get_the_post_thumbnail($post->ID, 'single-post-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = ''. get_the_title() .'';

Step 3: Add the thumbnail images to the posts

Click the featured image link to set an image as the featured image

This is the easy part, all you have to do is upload some images to the library. After the image you want is in the library you can select is using the “show” link and then use the link to select “set as featured image”. You should now see it show up in your template.

One last note, a useful plugin…especially when you are still working out the sizes of your images is the WordPress Regenerate Thumbnails plugin. It will regenerate all of the images to the new size you have specified.

Update: I have now added another related tutorial on how you can use featured images to display a block of recent articles alongside the image for each article.

Sharethis WordPress Plugin – Invalid XHTML

Building on my previous post regarding invalid XHTML (Version 1.0 Strict), I have been trying to find out why my site has not been validating. It turns out, the last bit of the problem is the “Sharethis” plugin for WordPress. In this plugin, the authors decided to define some custom parameter fields within the ‘span’ tag causing the validation problems. A post here indicates it is for “simplicity” for their less technically inclined users. So, this post is to show you how to modify the plugin to get valid XHTML out of it instead.

In the sharethis.php file, the offending lines are here:


And here are the updated lines:


In this case, disabling the extra fields means that the “sharethis” text and some minor styling disappear from the sharethis button. It seems the easiest way to have compliant XHTML and still a decent looking sharethis button is to use the a custom button style (see this page).

So the result is this:


The ‘ShareThis’ text is enclosed in an “a” tag so that we get the mouseover behaviour and link styling that it had previously. Additionally, the css file for your template must be changed. This is what I added to mine to make it work:

.st_sharethis_custom { background: url("img/sharethis.png") no-repeat scroll left top transparent; padding-left: 18px; padding-top:3px;}

You will want to change the url to wherever you have located the sharethis icon, and the padding and margins may need to be adjusted for your own template.

Twitter Tools – Plugin update for Valid XHTML

Today I noticed my site was not generating valid XHTML (for the 1.0 Strict Standard). I isolated some of the problems to the “Twitter Tools” plugin for WordPress. The problem is that a couple of parameters are not passed using the correct encoding (The & character is not properly encoded). The changes should be made to the “twitter-tools.php” file. Here is the original source for a couple of the offending lines:

And here it is with the changes made (notice the ‘&’ is replaced with ‘&amp;’):

Hope this helps someone 😛