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.

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.
.narrowcolumn .more-link, .narrowcolumn .post-comments {
float: left;
background-color: lightgrey;
border: 1px solid grey;
display: block;
height: 25px;
width: 83px;
margin-left: 235px;
margin-top: 20px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #232735;
text-align: center;
}
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.
After you have written your post, scroll down to the area titled Custom Fields. 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. 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. 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:
while (have_posts()) : the_post(); ?>


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:
List sub categories and siblings in a single category page. Displaying multiple posts list in a single page. Displaying customized front page.
Hi again everyone,
If you have been following our previous post “5 Wordpress Tips and Tricks You Must Know – Part 1” then you already know that it covered the following topics:
1)     Adding a custom “Read more” button.
2)     Displaying post thumbnail using custom fields.
We continue our coverage for the remaining three tips and tricks that could be useful for new WordPress designers to add non-standard features to their themes. Let’s begin.
3) List sub categories and siblings in a single category page.
To list sub categories and siblings in a single category page; either on the top navigation menu or the side bar; the following code can be used:

if (is_category()) {
$this_category = get_category($cat);
$this_parent = $this_category->category_parent;
if (get_category_children($this_category->cat_ID) != "") {
wp_list_categories('hide_empty=0&title_li=&child_of=' . $this_category->cat_ID);
}
else {
if ($this_parent != 0) {
wp_list_categories('hide_empty=0&title_li=&child_of=' . $this_parent);
}
}
}
?>

The code is enclosed within a

tag; since all menu items will be displayed as
• html tags.
  We use theConditional Tag is_category() to check if a Category archive page is being displayed. If so we retrieve the ID of this category and also the category parent ID. We then perform a simple check to find out if this category has any sub categories. If that is true; we display the sub categories. IF the condition returns no results; we simply us the category’s Parent ID to display the siblings of the category.
  However, before displaying the sibling categories, we have to make sure that the categories parent is not the root page; otherwise all other categories under the root page will be displayed; definitely this is not the desired outcome.
  4)     Displaying multiple posts list in a single page.
  To display multiple posts list in a single page (i.e. Front Page [see next]); we modify the “index.php” page. However, before attempting to do this; it is recommended to copy the “index.php” file and paste it as “frontpage.php” in the same directory. We don’t to modify our original index.php file; as it will still be used for displaying the blog page.
  The newly created “frontpage.php” should contain the original loop script. We are going to replace the loop code with our customized loop code to allow displaying multiple lists of posts. To do this we use the WordPress function query_posts() which Controls which posts show up inThe Loop.
  We use the query_posts() function to achieve some of the following common goals:
  Display only a single post or page on your homepage Show all posts from a particular time period Show the latest post (only) on the front page Change how posts are ordered Show posts from only one category
  Our purpose here is to display lists of posts for three different categories within the same page, the front page.
  The code illustrated below can be used to arrive to the desired effects.
  
  
  

  Recent Posts

  
  while (have_posts()) : the_post(); ?>
  

  
  
  

  
  
  

  
  

  
  
  
  
  
  
  

  Tutorials Posts

  
  while (have_posts()) : the_post(); ?>