Hi all, in this simple tutorial we are going to explain how to tweak certain Wordpress features to add customized non-standard functionality. We will mention in this post how to customize the “Read more” button in various ways. In addition, we will cover the process of using a custom field to display a post thumbnail. [...]

Love Freedom; Aiming to be the best Web Designer/Developer; I don't mind making a million or two while in the process

Hi all, in this simple tutorial we are going to explain how to tweak certain Wordpress features to add customized non-standard functionality. We will mention in this post how to customize the “Read more” button in various ways. In addition, we will cover the process of using a custom field to display a post thumbnail. On top of that, we will go through the process of customizing categories lists, displaying multiple posts lists and replacing the standard Wordpress index page with a customized front page. Let’s begin.

1)    Adding a custom “Read more” button.

If you have set your WordPress site to display post excerpts on the front or home page, you will want visitors to click on the title or a link to encourage them to continue reading your post or article, right? Excerpts can be displayed on WordPress in two known ways.

One, by replacing the template tag the_content() with the_excerpt(). Then the explicit excerpt you have entered in the Administration > Write > Post SubPanel will be displayed, or the first 55 words of the post’s content. This way users have to click on the title to continue reading more as you have enticed them with your summary introduction.

The other way, which is most commonly used, is to keep the_content() template tag and insert a quicktag called more into your post at your desired “cut-off” point. See below example:

We are encouraged to write this post, since many of you would view the presented information as useful and perhaps usable.
<!–more–>
Such information would prove valuable if properly implemented… etc.

However, if you don’t want to use the default Wordpress functionality to display and customize the more quicktag, then the later method can be ignored.

To display a custom “Read more” button, we use the first method; which is by replacing the template tag the_content with the_excerpt() and also using the template tag the_title_attribute() . See below snippet:

Now all that we need to do is include the following code in the style.css file to target our custom “Read more” link.

The “Read more” will be displayed as a grey colored button at the right bottom corner of your summarized post.

2)    Displaying post thumbnail using custom fields.

WordPress allows post authors to assign custom fields to their posts. This additional information is known as meta-data. With some extra coding, it is possible to achieve more complex actions, such as using the metadata to store the url for a media file.

Meta-data is configured with key/value pairs. The key is the name of the meta-data element. The value is the information that will appear in the meta-data list on each individual post that the information is associated with.

The following instructions will demonstrate how to add a custom field to a post using the Custom Fields section.

1. After you have written your post, scroll down to the area titled Custom Fields.
2. To create a new Custom Field called “post-thumbnail”, enter the text “http://yourblog.com/wp-content/uploads/2009/08/image.gif” (without the quotes) in the text entry field titled Name.
3. The newly created Name should now be assigned a Value, which is in our case, the url of our uploaded thumbnail for the relevant post.
4. Click Add Custom Field button to save this custom information for that post.

Once the new custom field has been created, it can be re-used on another post, by selecting it from the drop down menu. However, the Value text entry would be empty and you will be required to enter a new image url for your other post.

To make things easier, just upload an image as your thumbnail for a specific post. I have used 200 x 200 sized images for my thumbnails. Once uploaded, copy the image url (Ctrl + C) or (Mouse Right Click and then selecting Copy), then paste it into your favorite text editor. see image below:

In your Wordpress admin module, go to Edit Post page and edit your post. Go to the Custom Fields section, then select post-thumbnail from the Name drop down list (if the custom field is already added) or create a new custom field as described earlier. Copy the url from your text editor and paste it into the Value text entry field. Now click the “Update Post” button and your image thumbnail should be linked with your post. See the following images for illustrations:

To display the Custom Field on your blog alongside the post, you will have to modify the code within your Wordpress index page loop block as follows:

The trick here is to use the function get_post_meta($post->ID, ‘post-thumbnail’, true);. This function will retrieve the image url that is set for this post, using the post’s ID and the custom field name “post-thumbnail”

I hope you guys have enjoyed this short tutorial on how to tweak Wordpress features to add customized non-standard functionality to your blogs.

Next I will be covering the following topics:

1. List sub categories and siblings in a single category page.
2. Displaying multiple posts list in a single page.
3. Displaying customized front page.

Tags: CSS, design, themes, wordpress