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.

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.

The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

The Markup

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

<ul class="tabs tabs-1"> 
	<li> 
		<a class="tab-select" href="#tab1">1</a> 
		<div class="tab-content" id="tab1"> 
			<img src="tab-images/tab1.jpg" alt="Tab 1" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab2">2</a> 
		<div class="tab-content" id="tab2"> 
			<img src="tab-images/tab2.jpg" alt="Tab 2" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab3">3</a> 
		<div class="tab-content" id="tab3"> 
			<img src="tab-images/tab3.jpg" alt="Tab 3" /> 
		</div> 
	</li> 
	<li> 
		<a class="tab-select" href="#tab4">4</a> 
		<div class="tab-content" id="tab4"> 
			<img src="tab-images/tab4.jpg" alt="Tab 4" /> 
		</div> 
	</li> 
</ul>

The markups is as simple as it can get. It consists of an un-ordered list, with each list containing one anchor for navigation and one div for content.

The Javascripts

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
31
32
33
34
35
36
37
38
39
40
41
42

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
	jQuery(document).ready(function($){
		$('.tabs').each(function(){
			$(this).find('li:first').addClass('current'); // set the first tab to display
			repeat_slideshow($(this));
		});
		$('.tabs li .tab-select').click(function(){
			$(this).closest('.tabs').find('li').not($(this).parent()).removeClass('current'); // hide all tabs except for the current
			$(this).parent().addClass('current'); // set the current tab to display
			reset_slideshow($(this).closest('.tabs'));
			return false;
		});
		function slideshow(slide)
		{
			var index = slide.find('li.current').index();
			var total = slide.find('li').length;
			if ( index+1 >= total )
				var next = 0;
			else
				var next = index + 1;
			slide.find('li.current').removeClass('current');
			slide.find('li').eq(next).addClass('current');
		}
		function repeat_slideshow(slide)
		{
			slide.data('slideshow', setTimeout(function(){
					slideshow(slide);
					repeat_slideshow(slide);
				}, 5000));
		}
		function stop_slideshow(slide)
		{
			clearTimeout(slide.data('slideshow'));
		}
		function reset_slideshow(slide)
		{
			stop_slideshow(slide);
			repeat_slideshow(slide);
		}
	});
	</script>

This code is pretty much simple, it only toggles tab by changing class properties. It relies to the CSS to deliver the actual tabs toggling.

The CSS

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<style type="text/css"> 
	.tabs
	{
		position: relative;
		height: 430px;
		width: 640px;
		list-style-type: none;
		margin: 10px 0 40px;
		padding: 0;
		overflow: hidden;
	}
	.tabs-1
	{
		width: 380px;
		padding: 0 0 0 260px;
	}
	.tabs li
	{
		float: left;
	}
	.tabs li .tab-select
	{
		display: block;
		float: left;
		margin: 0 5px 0 0;
		padding: 0 10px;
		background: #e6e6e6;
		color: #666;
		text-decoration: none;
		cursor: pointer;
	}
	.tabs-1 li .tab-select
	{
		height: 20px;
		line-height: 20px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		font-size: 10px;
	}
	.tabs li .tab-content
	{
		position: absolute;
		top: 30px;
		left: 0;
		height: 400px;
		width: 640px;
		opacity: 0;
		-moz-transition: opacity 0.5s linear;
		-o-transition: opacity 0.5s linear;
		-webkit-transition: opacity 0.5s linear;
		transition: opacity 0.5s linear;
		z-index: 2;
	}
	.tabs li .tab-select:hover
	{
		background: #ccc;
		color: #666;
	}
	.tabs li.current .tab-select
	{
		background: #666;
		color: #fff;
		text-shadow: 1px 1px #000;
	}
	.tabs li.current .tab-content
	{
		opacity: 1;
		z-index: 4;
	}
</style>

The CSS define how the tabs will looks. It is mainly used the position properties to maintain the position of the tab content and leave the navigation to static position (either floated or none). Notice the tabs-1 class? That is to demonstrate that even with this approach, we can customize the tab to different looks with exactly same markup structure.

To further explain how it works, first the main .tabs class is considered the area which the content will be placed, we set the position to relative and make sure it had enough height to accomodate the content. Then each list is floated to left, as well as the .tab-select anchor for navigation (in later example, we can also use div).

The content part of each list is set to absolute position. That means, they will overlap each other and make them in always same position. We then used opacity to hide and displaying the content with addition of the CSS3 transform to provide fading animation. Finally, we bring the selected content to the front by applying a bigger z-index value.

Note that, for fading animation, we used the opacity property. If you wanted to use another animation, you need to change it. For no animation, just use display: none and display: block.

Why this approach?

What make this approach better than any others tabs and slideshow?

Well, it might not better. It just that, it is simple and clean enough, at least for me.

Only one unordered list markup needed

Often, I find that a tab are made from two group of lists (when I said lists it can be a group of div, li, or anything). One is for the tab navigation and the other is for the content. Nothing is wrong either way, but I find it easier to create if it is only made on one list. This also apply when we create the markup on the fly using server script such as PHP. If we have two group of lists, this means we need to loop the variable twice, while using one list will only need one loop.

Using one list will also make the HTML cleaner and for those who browsing with text browser, it will degrade gracefully.

Lighter, no Javascript effect

I don’t know if this will be considered a good thing or not, but I don’t use any animation using Javascript nor jQuery effect. Instead, I rely on CSS 3 transition for the fade in effect. This, obviously, is not yet a good practice. It is safe to use CSS 3 feature right now, but the lack of browser support make it not yet practical. By far, only new Webkit browser (Safari and Chrome), Opera 10.6+ and Firefox 4 support CSS transition.

Again, why CSS 3? Well, we know that the animation and transition in CSS 3 is not yet matured and experimental for now. It even lagged when we are doing some heavy animation. But when it is matured enough and become a standard, it will be better than any Javascript animation as it will build natively to the browser.

Support multiple slideshow tabs

Well, it make use of two jQuery features that was there but seems to rarely used. They are jQuery.index and jQuery.data. We used jQuery.index to see the current index from the list group to find the next tab to slide. It is more simple than storing a variable and keep it updated when the slide change. Then, the jQuery.data is used to store the setTimeout variable. Why using a jQuery.data and not a variable? jQuery.data allow us to attach data to a DOM element, this way, we can attach each setTimeout variable to the parent group and make it separated to any other slideshow in the same page. So, it support multiple slideshow in the same page without interrupting each other in just a few lines of code. Nice!

The Downside

After all this goodness, obviously, there is still a downside to be considered that it might not suit your need. First of all, the content height is fixed. This is because the use of absolute position for the content. Second, well, the lack CSS3 support on some web browser.

The Demo

Finally, a demo to show you how it actually works.

Check out the demo here.

There is three styles of the slideshow tabs in the demo, so you can see that it is possible to style it in many way to suit your design.

The code is released under GNU General Public License. So feel free to use and modify it in any way you need.

Browser support?

Well, not much browser support this yet. It degrade nicely though. If you open it in older browser that didn’t have CSS 3, it still working all fine except the CSS 3 goodies. So we can say that the CSS 3 goodies is an extra for dude who love using updated browser.

How about Internet Explorer 6? Well, it is not working right as far as I can see. But I think there will be a workaround to solve the IE 6 problem though, but I just don’t have a time to spend on this stupid outdated browser.

Final?

Thank you and hope that useful for you.

This article will give you walkthrough on the basics of creating a secured PHP application. I will give some step by step to filtering input, keep your code up to date and standard. I’ll also give you some good practice I always do.

Filtering Input

A web application is operated by retrieving inputs from user and then decide what to do based of the inputs. Filtering your input is a must to prevent any unwanted code to get executed.

Making sure the input data type

This is the most basic you should take care of for filtering. For example if you are retrieving integer type, you will need to make sure you always get an integer. Here is some example of how to make sure you get an integer.

1
2

if ( ! is_numeric($_POST['number']) )
    die("You must input a number");

1
2

if ( $_POST['number'] != intval($_POST['number']) )
    die("You must input a number");

Mostly, input retrieved will be always have a string data type, so sometime, you will need to convert it to make sure you get a correct data type.

Validate the string

If you have a list of string you will be accepting, you will need to make sure you only retrieve this value. Here is some example you can do.

1
2

if ( $_POST['command'] != "edit" && $_POST['command'] != "add" )
    die("Unknown command");

1
2
3
4
5
6
7
8
9
10

switch ( $_POST['command'] )
{
    case "add":
    case "edit":
        // some code you will run
        break;
    default:
        die("Unknown command");
        break;
}

1
2

if ( ! preg_match('/^(edit|add)$/', $_POST['command']) )
    die("Unknown command");

I personally like the Regular Expression (regex) solution, since it is simple and need less work when you decide to accept a bunch of other strings. Also when you are accepting a pattern of string, it’s always good to use regex. Here is some example of basic email and URL filtering.

1
2

if ( ! preg_match('/^[A-Za-z0-9_.-]@[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $_POST['email']) )
    die("You entered invalid email");

1
2

if ( ! preg_match('/^(http|https):\/\/[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $_POST['url']) )
    die("You entered invalid url");

Remember that while PHP have two function to execute regex, POSIX Extended and PCRE, you must always use the PCRE solution as the other one has deprecated since PHP 5.3.0.

Escape your string

You should always escape your string before you insert it to your database. If your server have magic quotes turned on by default, you might be safe from this. But your code shouldn’t rely on server capabilities, your code should escape the string if the magic quotes is turned off. You also must check the magic quotes configuration to prevent you to escape your string twice.

1
2

if ( ! get_magic_quotes_gpc() )
    $name = addslashes($_POST['name']);

If you are using MySQL database, use mysql_real_escape_string instead.

1
2

if ( ! get_magic_quotes_gpc() )
    $name = mysql_real_escape_string($_POST['name']);

Finally, if you don’t want to accept html string, you can strip it or convert it to html entities.

1

$no_html = strip_tags($_POST['no_html']); // this will strip all html tags

1

$no_html = htmlentities($_POST['no_html']); // this will convert all html tags to entities

Wrap it out in a function

Making your code easier to maintain is one way to secure your application. Wrap it out in a function is a good solution. All you need to do is making sure the retrieved input has filtered in this function. So if you find any vulnerabilities, the first you will look is the function. This should save your time looking for the security holes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function input_filter( $input, $type = '' )
{
    $filtered_input = $input;
    if ( get_magic_quotes_gpc() )
        $filtered_input = stripslashes($filtered_input);
    switch ( $type )
    {
        case 'numeric':
            $filtered_input = intval($filtered_input);
            break;
        case 'email':
            $filtered_input = ( preg_match('/^[A-Za-z0-9_.-]@[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $filtered_input) ) ? $filtered_input : '';
            break;
        case 'url':
            $filtered_input = ( preg_match('/^(http|https):\/\/[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $filtered_input) ) ? $filtered_input : '';
            break;
        case 'html':
            $filtered_input = htmlentities($filtered_input);
            break;
    }
    return mysql_real_escape_string($filtered_input);
}

And the example to use this function.

1
2
3
4
5

$number = input_filter($_POST['number'], 'numeric'); // it will return 0 if it is not numeric
$email = input_filter($_POST['email'], 'email'); // it will return empty string if invalid
$url = input_filter($_POST['url'], 'url'); // it will return empty string if invalid
$no_html = input_filter($_POST['no_html'], 'html'); // it will return all html converted to entities
$string = input_filter($_POST['string']); // it will simply escape the string

Depends to your preference, you can wrap it to a numbers of separated functions or to a class. But I think wrap it in a function is not bad either if you are creating a simple application and only need a small numbers of filtering.

Keeping Your Code Up To Date and Standards

PHP keep growing. If you are writing your application in PHP 4, most likely, it will still working in PHP 5. However, some of them might not work anymore in PHP 6. Some example is the use of deprecated function. The function that deprecated in PHP 5 will still working for backward compability, but using this function is not safe anymore as they can be removed anytime in future.

Make sure you are up to date to the new PHP version. Always look the PHP manual for each function you use. Some time you can find a notice of how to correctly use the function. The user contributed notes is also helpful if you are looking for a solution related to that function.

Do not rely on register globals

Register globals has been turned off by default and deprecated since PHP 5.3.0. Incorrect use of register globals will make your code vulnerable. Always use superglobal variable instead.

However, it’s also a good practice to not use $_REQUEST variable if you don’t need to. This variable contains the content of $_GET, $_POST and $_COOKIE. Using this variable will prevent you to know where the variable came from, it’s always good to know where your variable came from. For example you would like some inputs came from post or cookie, but using $_REQUEST, the user can use get and it still get executed.

Always define a variable before use it

You must always define your variable before you use it. In some server, register globals might be turned on, and failing to do so might result in vulnerable codes.

1
2
3
4

if ( validate_user() )
    $safe = true;
if ( $safe )
    // some sensitive code

The above code is vulnerable if register globals is turned on. If user run the script by calling user.php?safe=1, the user will always get validated. You can do this instead.

1
2
3
4
5

$safe = false;
if ( validate_user() )
    $safe = true;
if ( $safe )
    // some sensitive code

Use strict error reporting in development

Checking each function you use to find a deprecated function is not fun. So in development environment you must show all PHP errors. You can do this by calling this function on top of your application.

1

error_reporting(E_ALL);

This way, you will know if you are using deprecated function. You will also know if there is any undefined variable. This also includes the array in superglobals variable. Making sure to check undefined variable with isset before you use it is also a good practice.

Turn off all error reporting in production

If your website is ready now, you will need to turn off all error reporting. Showing your error to everyone will not be a good thing, one thing is you will reveal something to your visitor, such as file structure. For example, your main code might not be vulnerable, but some of included codes might be vulnerable if requested directly. Keeping your file structure a secret might give you a better security.

One thing to note, you also shouldn’t show mysql_error value to your visitor. If somehow you don’t filter the inputs properly and you have a code like this.

1

$query = mysql_query("SELECT * FROM some_table WHERE some_field='$field_value'") or die(mysql_error());

The code above might look familiar as new programmer tends to use it to check for query error. However, if the $field_value variable is not filtered properly and vulnerable to injection, you will show the visitor the error and at the same time, you will reveal that your code is vulnerable. So instead of showing the error, you must log the error instead, this way only you can see the error.

Conclusion

So this is the basic you can use to secure your web application properly. Meeting this standard will make your application less vulnerable. Again, it will not guarantee that your application will be perfectly safe, as there is many other factors such as using an outdated web server or using some vulnerable library.

Hopefully, this will be useful for you. Do you also have a technique to write a secure web application? Please share in comment.

Final words, thank you to read this.

1

<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<input type="text" id="example-field2" name="example-field2" value="Your name" />
 
<script type="text/javascript">
jQuery(document).ready(function($){
	$('#example-field2').focus(example_clean_field).blur(example_reset_field).each(example_populate_field);
	function example_populate_field()
	{
		if ( ! $.data(this, 'default') )
			$.data(this, 'default', $(this).val());	
	}
	function example_clean_field()
	{
		if ( ! $(this).hasClass('hasfocus') )
			$(this).addClass('hasfocus').val('');
	}
	function example_reset_field()
	{
		if ( $(this).val() == '' )
			$(this).removeClass('hasfocus').val($.data(this, 'default'));
	}
});
</script>

You can see that we define three functions here, one for focus event, one for blur event and the other one to populate the default value. I’ll briefly explain how they work in short.

We add a callback to each fields with function example_populate_field, this function will make use of jQuery.data, which allow us to attach any data to DOM element. We will iterate to each fields, and store the data in “default” key.

Next, we have a focus callback, example_clean_field, this function check whether the field has “hasfocus” class, if it doesn’t then we add the class and clear the field. Note that we use the “hasfocus” class to determine the state of the field, whether it has been cleared or not.

Lastly, we have example_reset_field that we use for blur event. This function will check the current value, when it’s empty, we remove the “hasfocus” class and set the value back to the default.

The usage as shown above is very simple, you just need to select any input or textarea element, and it will work. For example, using this selector below will make this work to all text input and textarea element.

1

$('input[type=text], textarea') .focus(example_clean_field) .blur(example_reset_field) .each(example_populate_field);

That’s all. It’s simple, clean and it looks like the most elegant solution I can find.

Hope that will be useful for you as well. Enjoy.

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.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot.

Still, no support for IE browser at all.

Change log 0.2b:
- Automatically randomize inline style
- Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.

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!