First, we’ll looking at the function wp_list_categories. This function made call to get_categories to get the list of categories, which made another call to get_terms. Categories in WordPress is basically terms with category taxonomy. Finally, looking on the get_terms function, we will find some delicious filter hook that suitable for our customization.

To be able to change the order, we will have to find a way to manipulate the SQL query and add our magic. Finally, we found the filter hook to add the magic, terms_clauses. The code to call the apply filter is as below:

1
2

$pieces = array( 'fields', 'join', 'where', 'orderby', 'order', 'limits' );
$clauses = apply_filters( 'terms_clauses', compact( $pieces ), $taxonomies, $args );

As you can see, the $pieces hold a separate pieces of the SQL query. We can add our own query to this separate pieces to form a query for our need. The code we used is as follow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function filter_term_sort_by_latest_post_clauses( $pieces, $taxonomies, $args )
{
    global $wpdb;
    if ( in_array('category', $taxonomies) && $args['orderby'] == 'latest_post' )
    {
        $pieces['fields'] .= ", MAX(p.post_date) AS last_date";
        $pieces['join'] .= " JOIN $wpdb->term_relationships AS tr JOIN $wpdb->posts AS p ON p.ID=tr.object_id AND tr.term_taxonomy_id=tt.term_taxonomy_id";
        $pieces['where'] .= " GROUP BY t.term_id";
        $pieces['orderby'] = "ORDER BY last_date";
        $pieces['order'] = "DESC"; // DESC or ASC
    }
    return $pieces;
}
add_filter('terms_clauses', 'filter_term_sort_by_latest_post_clauses', 10, 3);

Add this to functions.php or on your own plugin code, or where ever you wanted, it just needed to be placed before any call of wp_list_categories. Note that we only add this filter if the taxonomy is category, and if the orderby argument is set to latest_post. So our call to wp_list_categories is now:

1

wp_list_categories(array('orderby' => 'latest_post'))

Now your wp_list_categories call will have option to sort by latest post.

Hope it’s useful for you. Comments is appreciated.

A lot of changes has been made for this version, and one that is noticeable is the new look and layout for the administration area. It looks a little better. The sidebar is changed. The color of the boxes also changed a bit, it is more light. Some fonts are also changed. Overall, I liked the new look.

There’s no yet compatibility issue so far is all that I can tell.

WordPress mail snippets

WordPress has its own improved function for sending email, it is wp_mail. We should always use this function if we wanted to send email within WordPress. With this function, we don’t need to worry much about the mail header and stuff. More over, there is plenty of filter we can use to customize it.

Set content type to HTML

We can send HTML email by set the content type of email sent by WordPress. To do this, add this function to functions.php in your theme file.

1
2
3
4
5

function set_email_html_type( $content )
{
	return 'text/html';
}
add_filter('wp_mail_content_type', 'set_email_html_type');

Set mail sender name

This function will set the mail sender name.

1
2
3
4
5

function set_mail_from_name( $name )
{
	return "Jeffri Hong";
}
add_filter('wp_mail_from_name', 'set_mail_from_name');

We could improve it by automatically set it to the first administrator name.

1
2
3
4
5
6
7
8
9
10
11
12
13

function set_mail_from_name( $name )
{
	$admins = get_users(array('role' => 'administrator'));
	if ( $admins )
	{
		$first_name = get_user_meta($admins[0]->ID, 'first_name', true);
		$last_name = get_user_meta($admins[0]->ID, 'last_name', true);
		if ( $first_name || $last_name )
			return "$first_name $last_name";
	}
	return "Jeffri Hong"; // the default value when it is failed to retrieve first/last name
}
add_filter('wp_mail_from_name', 'set_mail_from_name');

Set mail sender email

This function will set the mail sender email address.

1
2
3
4
5

function set_mail_from( $email )
{
	return "info@jeffri.net";
}
add_filter('wp_mail_from', 'set_mail_from');

As with the previous one, it is also possible to automatically set it to the first administrator email.

1
2
3
4
5
6
7
8
9
10
11

function set_mail_from( $email )
{
	$admins = get_users(array('role' => 'administrator'));
	if ( $admins )
	{
		if ( $admins[0]->user_email )
			return $admins[0]->user_email;
	}
	return "info@jeffri.net";
}
add_filter('wp_mail_from', 'set_mail_from');

Get post meta ordered by id

Getting a post meta, especially an array, can some time return an unexpected result. The problem is the get_post_meta function rely on the default SQL order. In few of my job, I need to use multiple post meta and keep it in order with each order, and it won’t work correctly unless we add the ORDER BY clause to the query. Unfortunately, the metadata functions didn’t have many filters we can work with. However, there is a filter we can use to override the function return value.

1
2
3
4
5
6
7
8
9
10

function filter_post_meta( $null, $object_id, $meta_key, $single )
{
	global $wpdb;
	$results = $wpdb->get_results("SELECT m.meta_value FROM $wpdb->postmeta m WHERE m.meta_key = '$meta_key' AND m.post_id = '$object_id' ORDER BY m.meta_id");
	$ret = array();
	foreach ( $results as $result )
		$ret[] = $result->meta_value;
	return $ret;
}
add_filter('get_post_metadata', 'filter_post_meta', 10, 4);

With this, every call of get_post_meta will be filtered by this function and return all post meta filtered by meta_id. The good news is, this filter run on top of get_metadata function and returned it immediately when there is a value.

Add post slug as CSS class to page lists

Often, we need to have a more definitive and unique class for page lists generated by function like wp_list_pages and other. By default, there is unique class for the page ID, but since page ID is generated automatically, this value vary on site to site – for example when you have a development version and live version of a site, you will need an alternative for unique class other than ID. Post slug is the better solution in this case, since it is defined by us and unique.

1
2
3
4
5
6

function add_page_css_class( $classes, $page )
{
	$classes[] = 'page-'.$page->post_name;
	return $classes;
}
add_filter('page_css_class', 'add_page_css_class', 10, 2);

Add this function to functions.php of your themes. Now, you will have one more class selector for your CSS.

And more to come

That’s it folks for the part 1. More will come in near future as I still have many interesting case I experienced and a nice solution that is re-usable anywhere.

Hope that useful for you.

However, many didn’t know that the custom post type already had it’s own landing page, though, you will need to pass the post type variable to the URL. This post will guide you to the step by step on customizing the post type landing page, as well as adding a new rewrite rule for a cleaner URL.

Register the Post Type

First of all, let’s create our custom post type. In this example, we will register a book post type.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function theme_init()
{
	$labels = array(
		'name' => __('Books'),
		'singular_name' => __('Book'),
		'add_new' => __('Add Book'),
		'add_new_item' => __('Add New Book Item'),
		'edit_item' => __('Edit Book Item'),
		'new_item' => __('New Book Item'),
		'view_item' => __('View Book Item'),
		'search_items' => __('Search Books'),
		'not_found' =>  __('Nothing found'),
		'not_found_in_trash' => __('Nothing found in Trash'), 
		'parent_item_colon' => ''
	);
	$args = array(
    	'labels' => $labels,
    	'public' => true,
    	'publicly_queryable' => true,
    	'show_ui' => true, 
    	'query_var' => true,
    	'rewrite' => true,
    	'capability_type' => 'post',
    	'hierarchical' => false,
    	'menu_position' => null,
    	'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  	); 
  	register_post_type('book', $args);
}
add_action('init', 'theme_init');

Add this code to the theme functions.php. We hook the function to the init action. In case you didn’t know the WordPress hook, you can take a good read on codex.

The post type is now ready to use, it appeared on the back-end, you can add, edit and remove the book. The single post is accessible now. The landing page is accessible by appending ?post_type=book to your website URL.

Clean the URL

Now, we want to make the URL cleaner. Instead of accessing the landing page with yourwebsite.com/?post_type=book, we want to make it yourwebsite.com/book instead. We can do this by adding a new rewrite rule.

1
2
3
4
5
6
7

function theme_rewrite()
{
	add_rewrite_rule('book/?$', 'index.php?post_type=book', 'top');
	add_rewrite_rule('book/page/(\d+)/?$', 'index.php?post_type=book&paged=$matches[1]', 'top');
	//flush_rewrite_rules(); // run one time only
}
add_action('init', 'theme_rewrite');

Again, add this to the theme functions.php file. We add a new rewrite rule and redirect it to index.php?post_type=book, don’t forget to use ‘top’ in the third parameter, this is to make sure this rule must be run before any other WordPress rule. We also add another rule to work with pagination.

Notice the commented line above? After we add a new rewrite rule, we must flush the rewrite rules. This must be done one time when it is changed. So when you have it run once, comment or remove that line as it is not needed anymore. The rules will also flushed when you go to Settings -> Permalinks in back-end.

However, the add rewrite rule line must be keep though, as if you remove it, the next time it flushed, you will lost the rule.

Customizing the Landing Page

The current landing page used the same template as the home page, which in most case is either front-page.php, home.php or index.php. This isn’t good as they are shared with any other post type. So, we must create a new filter, to look for home-book.php before falling to another template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function theme_home_template( $template )
{
	if ( get_query_var('post_type') )
	{
		$new_template = 'home-'.get_query_var('post_type').'.php';
		$templates = array(
			$new_template,
			$template
		);
		return locate_template($templates);
	}
	return $template;
}
add_filter('home_template', 'theme_home_template');

Add this code again to theme’s functions.php. Then, create the home-book.php and customize it to the way you need.

Conclusion

That’s it. So to conclude it, we first register the post type as usual, then adding a rewrite rule for the sake of cleaner URL. Finally, we create a new home-{post_type}.php file to serve as the template of the landing page. Now that we have the template, we can customize it to every way we wanted.

A different approach can be done though, such as creating a page and a custom template that query to the post type. I have used this on some of my clients. The downside is we will create a blank page, not that it’s bad, but it’s always good to not leave any junk in the administration back-end – so user can’t remove it accidentally and break the site.

This approach, although a little tricky, is a good way to make everything work seamlessly without any configuration needed.

So how to do that? The answer is by using WordPress filter. This piece of code below will solve the problem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function get_terms_filter( $terms, $taxonomies, $args )
{
	global $wpdb;
	$taxonomy = $taxonomies[0];
	if ( ! is_array($terms) && count($terms) < 1 )
		return $terms;
	$filtered_terms = array();
	foreach ( $terms as $term )
	{
		$result = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts p JOIN $wpdb->term_relationships rl ON p.ID = rl.object_id WHERE rl.term_taxonomy_id = $term->term_id AND p.post_status = 'publish' LIMIT 1");
		if ( intval($result) > 0 )
			$filtered_terms[] = $term;
	}
	return $filtered_terms;
}
add_filter('get_terms', 'get_terms_filter', 10, 3);

The code work like this. We add a filter to the get_terms hook. This hook is called before the terms is returned, so it is perfect to place the filter here. Next, we check each returned terms and see if they have any published post, by using our own query. Why didn’t I use the WordPress WP_Query instead? The answer is I can’t get it to work, beside, it builds a pretty complicated query that might increase your WordPress site load time if it is used too much. Using our own query, we make sure it only use the query that we need. If our query returned that the term has a published post, we add this term to our new array which we use to store the filtered terms. Finally, we return the filtered terms.

Now, when you are using get_terms, you will filter out all terms that doesn’t have any published post.

Hope that helps. I have a hard time to explain the situation, so let me know if it doesn’t clear.

Thank you.

While this two combined to be a wonderful addition for your WordPress blog, there is still a lot of things that is not yet documented. Here is a few useful tips I collected when working with custom post type and taxonomy.

Add taxonomy to more than one post type

There is few ways to doing this, depend to your code. If you register the post type first, then when register taxonomy, you’ll be able to include it to any post types you want.

Example (taken from codex).

1
2
3
4
5
6
7

  register_taxonomy('genre',array('book','magazine','post'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'genre' ),
  ));

See the line 1 above, the second parameter for register_taxonomy function is the list of post types you can include. It accept both string and array, as you can expect, we use array when we want to include many post type, and use string when you only need one. The same thing is applied if you register the taxonomy first, you can assign any taxonomy you like when register the post type.

Example (taken from codex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true, 
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => null,
    'taxonomies' => array('genre','grade','category'),
    'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  ); 
  register_post_type('book',$args);

As you can see, the taxonomies parameter can be used to assign any taxonomy you like to the post type you just registered. Again, it accept both array and string.

But what if you want to add taxonomy to certain post type later, after they are defined? WordPress have a function to do this, it is register_taxonomy_for_object_type. Take a look on the example below.

Example

1

register_taxonomy_for_object_type('genre', 'book');

Handy, huh?

Querying more than one post type

Let’s say, for example, you have defined post type for book, comic and magazine. Then, somewhere in your web page, you want to show the latest list of all of these post types together. As you might know already, custom post type is not included in normal WordPress loop, so you’ll need to add your own query and loop, whether by using query_posts, get_posts or by creating a new instance of WP_Query object.

Example

1
2
3
4
5
6
7
8

$args = array(
    'post_type' => array('book', 'comic', 'magazine'),
    'posts_per_page' => 5
);
query_posts($args);
while ( have_posts() ): the_post;
    // and so on
endwhile;

See the line 2. You can add any post type you need in the post_type parameter. As always, it also accept both array and string.

Querying the custom taxonomy

You know how to querying multiple post type now, but how if you want to filter it by taxonomy? While post category and tags offer many ways to filter it, the custom taxonomy is still limited. The only way I can find right now is to filter the taxonomy by the slug.

Example

1
2
3
4
5
6
7
8
9
10

$args = array(
    'post_type' => array('book', 'comic', 'magazine'),
    'taxonomy' => 'genre',
    'term' => array('science', 'fiction'),
    'posts_per_page' => 5
);
query_posts($args);
while ( have_posts() ): the_post;
    // and so on
endwhile;

From the example above, I filtered the result by including only science and fiction genre from all three post types we defined. Unfortunately, I haven’t find any way to filter it by multiple taxonomies at once.

The custom post type feed

Custom post type also have its own feed. Depend to your permalink structure, you can find it by either

http://www.yourwordpresswebsite.com/?feed=rss2&post_type=book

or

http://www.yourwordpresswebsite.com/feed/?post_type=book

Unfortunately, again, I can’t find any way to get the feed for multiple post type.

So that’s it for now. If you find any good tips, you can share it in comment.

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account.

With CSS 3 coming, I won’t forget to add some CSS 3 elements. I add a little transition, on the sidebar links and the social network icon above. You won’t see it if you don’t use webkit browser though, so if you use Google Chrome 5 and Safari 5, then you are in. This transition have no importance at all, the purpose is just to enrich the user experience, but won’t lose any functionality without it. Another CSS 3 property I used is the border-radius. I used this on some input fields you can find. There is also some jQuery here, although I’m only using it on input fields now, it might become handy in future.

While I haven’t check this on all browser yet, but I’m sure it will work fine on all major browser, includes Internet Explorer 8, Mozilla Firefox 3.6, Opera 10, Google Chrome 5 and Safari 5. While I’m not supporting older Internet Explorer version, it still, on some basic level, works fine. I even can confirm that the IE 7 load almost everything fine, but it just not perfect yet. I have some issues on the logo and button, same as IE 6. This might get fixed soon.

I wish I could write the process on making this design. I might be able write it, but I won’t promise that. In short, there is 2 steps at least. First is design it in PSD, the second is convert it to WordPress. I’m skipping the step to convert it to XHTML/CSS first though, well, that’s just how I work.

I hope you will have one or two minute to type down a comment to share your opinion, so I can get better. Thanks!

In the recent problem I got, it requires me to check the current post type, something like is_single for post and is_page for page. Luckily enough, the is_singular is now changed to accept a parameter, and that is post type.

In current codex page, it still not updated. However, now we can use this to check whether we are on our post type page or not.

if ( is_singular(“my-post-type”) )
// whatever you want to do here

Great!

In previous version of WordPress, when we are on single/page, this worked fine. Some themes didn’t go into the WordPress loop on single/page template, since WordPress already know which page/post to show. This also make sense, single/page only have 1 post to be displayed, so we shouldn’t need to get into the WordPress loop. However, in the recent version, the_content failed to display anything if you don’t call the_post beforehand.

I’m not sure which one should be the correct behavior. In codex, it’s pretty clear that we still need to get into WordPress loop, even though we are in single/page template. However, in theory, calling the_post before calling any other function that supposed to be in the loop should fix it.

Just a quick note, I don’t want to forgot this trivial stuff when I got this problem again in future.

Have you ever got this error? While this happens, you must make sure you have configured your wp-config.php. Check for these line:

define(‘DB_NAME’, ‘putyourdbnamehere’);

/** MySQL database username */
define(‘DB_USER’, ‘usernamehere’);

/** MySQL database password */
define(‘DB_PASSWORD’, ‘yourpasswordhere’);

/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);

Above is taken from wp-config-sample.php file. As long as you have configured the DB_NAME, DB_USER and DB_PASSWORD correctly, you should be fine. Some host might use a different DB_HOST, but mostly worked fine with localhost.

Well, if it does configured correctly and there still the same error happen, you might need to check the wp_options table.

Open the wp_options table using PHPMyAdmin or other similar software. Find the value siteurl in column option_name, if you see the option_value get a blank value like below:

Then you are probably on right track. Edit this row and insert your domain full URL in the option_value. Save.

Hopefully the error will go away. I don’t know why this could happen, but it did happen in one of my client website… It’s indeed frustating to look for this error, since WordPress didn’t give any specific information about it.

If you found another cause of this error, please share.