A few weeks back, we put together a way of adding events to WordPress and displaying them in an easy-to-read list. It was simple to maintain and it worked well, but it didn’t take advantage of all WordPress offers.

In this 2-part tutorial, we are going to extend our events list script to set up a new post type purely for the events, and create a new taxonomy for tagging our events. We will then be able to:

• Organize our events easily (e.g. If we’re running WordPress classes, we could label them as Beginner, Intermediate, or Advanced)


• Create templates for event lists and individual events.


• Separate events out of the main post list (So they won’t automatically appear on the homepage anymore).


• Add new events more conveniently in the admin panel (Especially when we add metaboxes in a later post!)

Let’s take a look at the end result (Using the default 2010 theme).

1 – The overall Events page.

2 – Sorting by the “Beginner” tag.

3 – Viewing an individual event.

Look good? Cool, let’s build it (By the end of today’s post, you’ll have taken care of all of the WordPress backend stuff, and set up the automatic Date message on your individual events!)

Setting Up Our Post Type and Taxonomy

We’ll be working in the functions.php file. If your theme doesn’t have one, just make a file with that name and put at the bottom.

Our first step will be to give WordPress the info it needs to make our new post types. Before the closing ?> tag in your file, paste the following:

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

/**
 * Sets up our Events custom post type.
 */
function pbd_events_init() {
	// Labels.
	$labels = array(
		'name' => 'Events',
		'singular_name' => 'Event',
		'add_new' => 'Add New',
		'add_new_item' => 'Add New Event',
		'edit_item' => 'Edit Event',
		'new_item' => 'New Event',
		'view_item' => 'View Event',
		'search_items' => 'Search Events',
		'not_found' => 'No events found.',
		'not_found_in_trash' => 'No events found in Trash.'
	);
 
	// Register the post type.
	register_post_type('events', array(
		'labels' => $labels,
		'public' => true,
		'supports' => array('title', 'editor', 'custom-fields', 'comments'),
		'has_archive' => true
	));

The code above starts by creating a function called pbd_events_init(), which we will hook into place later on.

We then make an array called $labels, where we enter all of the strings that WordPress will use in the admin panel. This way, instead of it saying “Add New Post”, we get “Add New Event”.

The register_post_type() function is what tells WordPress to create our new post type, and as you can see, it’s incredibly simple to use. You can read up on all of the possible arguments it takes on the codex page), but the three (plus labels) we need are:

• public – Enables the Events admin panels in the dashboard, and allows our events to be viewable on the main site (So rather important!)


• supports – Choose which parts of the regular “Add Post” page you want to enable. We choose title and editor (i.e. event name and its description) and comments, as well as custom-fields (to enter the event date). Check out the other possible options on the codex page.


• has_archive – This is a great new addition from WordPress 3.1 meaning that WordPress will create pages that list all of our events in one place. Perfect for having a standalone Events page.

That’s all it took to set up our new post type. Now we just follow a similar process to set up our new taxonomy as well:

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

	// Event tag labels.
	$eventLabels = array(
		'name' => 'Event Tags',
		'singular_name' => 'Event Tag',
		'search_items' => 'Search Event Tags',
		'popular_items' => 'Popular Event Tags',
		'all_items' => 'All Event Tags',
		'edit_item' => 'Edit Event Tag',
		'update_item' => 'Update Event Tag',
		'add_new_item' => 'Add New Event Tag',
		'new_item_name' => 'New Event Tag Name'
	);
 
	// Event tags.
	register_taxonomy('event_tags', 'events', array(
		'label' => 'Event Tags',
		'labels' => $eventLabels
	));
}
add_action('init', 'pbd_events_init');

The $eventLabels array does for our taxonomy exactly what the $labels array did for the post type.

We then use the register_taxonomy() function to tell WordPress to set it up. The first parameter (‘event_tags’) will be the name of our taxonomy, and the second (‘events’) is the name of our post type (i.e. tell WordPress that we only want these tags to apply to events, not to regular post and pages).

And again, this function can take a lot more arguments than we have used. All we specified were the labels, but there are a lot of other options available too (e.g. if you wanted it to function like categories, rather than tags).

Lastly, we close off the pbd_events_init(); function and hook it into place (These functions won’t work if you call them any sooner. That’s why we use the add_action() line to hold back on running this all until WordPress is loaded).

And that’s the core of our work done! If you save this, you’ll now see an “Events” section in your admin panel, and if you publish events, you’ll see them displayed using your site’s archive.php and single.php templates. Of course, you still aren’t sorting events by their date yet, and you want to make use of their own templates.

Adding Dates to Events

This will work identically to before, where we use the custom fields section to add new field named “Date” with a value of the event’s date, in the form: mm/dd/yy

For example, an event on the 4th of April:

Displaying the Date on Individual Events

We want to automatically insert the date of the event on the event’s page. There are two ways that we can do this:

• 1 – Create a new template file called single-events.php . This file would then be used in place of single.php to display any of our individual events.


• 2 – Add a filter to the content of the event to automatically insert our date for us.

If you wanted your events to appear drastically different to your regular posts (e.g. new formatting, listing all events in the sidebar, adding a list of our event tags etc.), you would definitely use the first option.

In our case though, we want them to appear the same but have the date highlighted at the top. For that, we can use a filter (Meaning we don’t need to recreate a whole template, and it makes things easy to maintain in the future).

Add the following to your code:

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

/**
 * Add Event Date before the description on single post pages.
 */
function pbd_add_event_info($content) {
	if ( 'events' == get_post_type() ) :
 
		// Get the date of the event in a nicer-to-read format.
		global $post;
		$date = get_post_meta($post->ID, 'Date', true);
		$date = date_create($date);
		$date = date_format($date, 'jS F, Y');
 
		// Add the message before the post.
		$content = '<p class="events-info"><strong>Event Date</strong>: '. $date .'</p>' . $content;
	endif;
 
	return $content;
}
add_filter('the_content', 'pbd_add_event_info');

Now let’s take a look at what this does. A filter in WordPress is a way of taking some content that WordPress is going to use, adapting it, and then giving it back for WordPress to carry on.

In our case, we’re letting WordPress prepare the content of the post (i.e. ‘the_content’, line 19), but before it prints it out, our pbd_add_event_info() filter pokes its head in.

In that function, we first check if this content is for an event post (If it’s for a regular post/page, we don’t want to do anything).

Assuming it is an event, we then want to get the event’s date. With lines 8 and 9, we can get the content of the Date custom field. Instead of printing out 04/04/11 though, it would be nicer to say 4th April 2011.

Line 10, date_create(), turns 04/04/11 into a DateTime object that PHP can use, and date_format() then turns that into a readable version for us.

Line 14 is where we adapt the content we were given. We create a new paragraph (With the class “events-info” so that we can style it later), insert the date inside of it, and then append the original content from WordPress (If we didn’t add that back on, the final result wouldn’t have the event’s actual content).

Lastly, we use return $content; to send the result back.

The final thing do is add some new styles to your style.css file to make this appear differently, e.g. (To steal WordPress’ “Updated” message styles!)

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

.events-info {
	background: #FFFFE0;
	border: 1px solid #E6DB55;
	padding: 8px;
}
 
.events-info a:link, .events-info a:visited {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
 
.events-info a:hover, .events-info a:active {
	text-decoration: underline;
}

Now go check out your events. You’ll see the date clearly highlighted in yellow right at the top of the post. And that will happen automatically on every one of your events, without any extra work from you.

In the next post, we will look at the overall Events page. We’ll adapt the query from our original post to list events in order, and we’ll use our event_tags taxonomy to let users sort events into the ones they’re most interested in.

Stay tuned!

I love reading the comments on each article I post. If you leave one, you’re near guaranteed I’ll reply to you directly and keep the conversation going.

The trouble is that after a day or two of an article being live, the spammers descend and the lovely, informative comment thread descends into “great article, agree with your points, visit my site”. It’s just not cool…

We’re working on a full redesign to Pro Blog Design, and one of the things I’m most interested in is this comments issue. How can I make sure the comment threads stay in that awesome-to-read stage from the first few days when an article is written?

In this post, I want to share some ideas, along with a quick look at their pros/cons, and I’d love to hear your thoughts. What do you think would work best? Would it put you off commenting?

Remove DoFollow

DoFollow means that after your 3rd comment here, the rel=”nofollow” will be removed from all of your comments, allowing Google to follow the links back to your site (Back in the day, showing off a badge like the one on the right designed by Randa was quite a source of pride for bloggers!)

Originally, I set this up as a way of saying thank you for commenting. Now though, it just attracts a lot of spam (Mostly with names like “Web Design Boston”). And it’s not just automated spam. The fact that people actively hunt down DoFollow blogs shows that they aren’t interested in the comment, just in the number of them they can leave.

I’m not saying that a lot of legit commenters don’t appreciate DoFollow, just that this seems to do more harm than good now.

Update (19/3/11): Steven Snell left a great comment about why removing this plugin may be too late. The damage is done by having it in the first place. Check it out.

Asking for Cooler Comments

This is an approach I’ve seen taken on some larger blogs like Tim Ferriss’. If you check out his comment form, you see this:

It’s simple, and in no way guaranteed, but it probably works. At the very least, when I see that as a commenter, it’s good to know that the blogger is at least trying to tackle the problem.

The downside is of course the added clutter on the page. Though if it’s useful, then maybe it isn’t clutter?

(Random aside: Tim’s interviews with people who started up their own profitable online “muses”, as he calls them, are some of the best reads you’ll find.)

CAPTCHAs

CAPTCHAs are those rather annoying scripts that ask you to enter the words in a scrambled image.

Akismet does well against the majority of automated spam, but a CAPTCHA may help prevent the rest of it. That said, when implementing Google’s own reCaptcha on a forum lately, it took less than 30 minutes for the first spammer to sign up anyway.

The real downside for me is the annoyance to valid users though. Sticking with my farming line; I don’t want to throw away the wheat as well as the chaff.

Prevent Certain Words in Names

The worst offenders (The ones who leave a dozen useless comments all over the site) usually use a name made up of keywords. You know the type; ‘mortgage loan’, ‘web design texas’, ‘pharmacy supplies’ etc.

Yesterday, someone actually left messages with the name “wart removal”. I sincerely hope that is not your real name.

By targeting a few common words (mortgage, design etc.) that shouldn’t be in any valid name, you could stop a lot of these comments being posted (No idea why Akismet doesn’t do this already?).

The simplest implementation would be with some jQuery. Not full-proof, but it would work on most real users (They won’t bother disabling JS for this. Speed is the main thing for them). Or we could look into doing the validation via WordPress itself (Knowing WordPress, it’s probably a matter of a few lines!).

(Let me know if you’d like me to look into this properly and put together a tutorial!)

Closing Comments after a While

The idea here is that after an article has been online a certain amount of time, the comments on it are closed automatically. It’s quite a popular technique on larger sites.

This makes a lot of sense if you stop checking the comments on your older posts (Like I usually do, it’s just unmanageable). People aren’t likely to get a reply, so you don’t want them wasting their time.

The downside for a technical blog like this is that tutorials can go out of date. It often takes a good comment from someone to point this out, or even to remind me that that tutorial exists and I ought to update it (Case in point, I really need to show you guys the not-so-new-anymore way to separate comments from trackbacks).

The question is, what time limit would you set this at?

Use a Reputation System (Disqus?)

Forums have been doing this for years to reward the best members (How many forums have you seen where you can “Thank” a post for being helpful?). Sites like Stack Overflow have improved this further, but the idea is the same. When your contributions add to your reputation, you put more effort into them.

One easy way of doing this would be to use Disqus. Comments are then added to a user’s Disqus profile, along with any +/- ratings it gets. As so many sites use Disqus now, you may be careful with boosting your rating.

The downside is that it’s not the easiest to style, and besides the rating being displayed next to your name, it doesn’t actually do anything.

An alternative would be a plugin like Comments Vote, that allow people to rate good or bad on comments, and comments with a negative rating are then collapsed.

Marking the Best Comments

The idea here would be that when I see a great comment, I’d mark it as being great. This could then allow a few things to happen:

• The comment’s design changes (Highlighted to stand out, similar to how an author’s comments are)


• The comment is displayed at the top of the list (So instead of just showing the first comment first, you’d show the best comment first).


• NoFollow could be removed again for these particular comments.


• Some sort of list of all “best comments” from across the site could be setup in your sidebar/footer.

I’m not aware of anything that works like this at the minute, though let me know if you are! If the idea seemed like it would work though, I’d be happy to code it (And release it to you too).

Would it encourage you to leave a comment?

Only Comment Via FB Connect and Twitter

Quora is ia Q&A site with extremely high quality answers to the questions. It’s not known for its easy sign-up though. Sometimes requiring an invite, but even when it didn’t, it very strongly encouraged you to sign up with Twitter or Facebook.

Your Facebook and Twitter profiles are something that you put a lot of time into and want to look good on. Are you less likely to write spammy one-liner comments when it’s all tied back to your Facebook Profile? Perhaps?

But then, is that asking too much of a casual commenter who does have something interesting to say, but isn’t sure about giving yet another site access to their personal profiles?

One interesting I only discovered while writing this post is that Techcrunch has jumped from Disqus to the Facebook Comments plugin. Obviously though, they’re dealing with this same issue but on a far bigger scale, so they can afford to turn away more casual commenters?

What Would You Do?

I’m very undecided on the best route to take. The ideas above range from being very restrictive (Limiting to Facebook only), to quite possibly worthless (Removing the DoFollow plugin).

So where is the balance in the middle? As someone who takes the time to leave comments here, what would you be happiest with (Or most put off by)? (And I promise I’ll reply to you before the spammers do…)

WordPress 3.1 introduced the admin bar, which adds admin options to the top of your pages as you browse your site (Assuming you’re logged in of course).

It’s easy to extend the bar to add new links of your own, or to remove links you don’t want (e.g. if the “Appearance” menu isn’t something you often need instant access to). You can see the end result in the image above.

In this tutorial, we’ll be building a simple plugin that will let us add some handy links (e.g. a Twitter search for the current post, analytics, and ad sales), as well as remove the links we don’t want.

If you’d rather just skip to the finished file though, you can download the plugin here, and follow the instructions in the file to set your options (NB – It’s a simple script, not a full fledged plugin with options panels).

1 – Create the Plugin File

The first stage is setting up our plugin for WordPress. To do this, create a new folder in your wp-content > plugins folder, and give it a unique name, e.g.

pbd-admin-bar-links

Now, create a PHP file inside with the same name, e.g.

pbd-admin-bar-links.php

Lastly, enter some details about the plugin at the top of the file, e.g.

1
2
3
4
5
6
7
8
9
10

<?php
/*
Plugin Name: PBD Admin Bar Links
Plugin URI: http://www.problogdesign.com/
Description: Add/Remove links in the WordPress admin bar.
Version: 0.1
Author: Michael Martin
Author URI: http://www.problogdesign.com/
License: GPL2
*/

And now we can start writing some real code.

2 – Hook into the Menu

The first thing we’re going to do is write a simple function that checks to see if we need to do anything at all. If the current user isn’t an admin, or if they’re an admin who has disabled the admin bar (You can turn it off in your profile options), then we won’t be doing anything else.

Insert this code into your plugin:

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

/**
 * Checks if we should add links to the bar.
 */
function pbd_admin_bar_init() {
	// Is the user sufficiently leveled, or has the bar been disabled?
	if (!is_super_admin() || !is_admin_bar_showing() )
		return;
 
	// Good to go, lets do this!
	add_action('admin_bar_menu', 'pbd_admin_bar_links', 500);
	add_action('admin_bar_menu', 'pbd_remove_default_links', 500);
}

Line 6 will take care of our permissions checks. If they pass, then the two add_action() lines will call the functions we’re going to write next to adjust the menu.

But of course, we need to actually call this function as well. Add this line below it to have our function called when the admin bar is created:

1
2

// Get things running!
add_action('admin_bar_init', 'pbd_admin_bar_init');

3 – Add Our Links

Now, for the meat of the tutorial, we’re going to write the function that adds our links. And it’s very simple to do.

We’ll start off by creating the function (With the same name we used in the first add_action() line in the previous block!), and then entering the links. Here goes:

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

/**
 * Adds links to the bar.
 */
function pbd_admin_bar_links() {
	global $wp_admin_bar;
 
	// Build Twitter Reactions link.
	$url = 'http://'. $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	$twitter = 'http://search.twitter.com/search?q='. urlencode($url);
 
	// Links to add, in the form: 'Label' => 'URL'
	$links = array(
		'BuySellAds' => 'http://buysellads.com/',
		'Twitter Reactions' => $twitter,
		'Google Analytics' => 'http://www.google.com/analytics/',
		'Klout' => 'http://klout.com/problogdesign',
		'Webmaster Tools' => 'https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://problogdesign.com/'
	);

The global $wp_admin_bar; line gives us access to the menu object, which we’ll use in the next line.

The Twitter URL needs to be made dynamically. We use the $url = … line (Line 8) to get the address of the current page (You’ll need to adapt it if you’re using https://), and then in the $twitter = … line, we build the link.

The $link = … part is where you start tweaking. Here, we make an array of our links, in the format: ‘Label’ => ‘URL’. You can see I’ve put in a few of mine, but you can add anything you like here (And the order they are entered here is the order they will show up in).

Update (15/3/2011) - Blake Imeson had a nice idea in the comments. If you’ve set up a redirect to a client’s email (e.g. mail.site.com to take them to Google Apps), you could add that as well, similarly to how we added Twitter, using a line like this: $mailurl = ‘http://mail.’ . SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

Now, we use the add_menu method of the $wp_admin_bar object we called in to add our links. It works in the format:

$wp_admin_bar->add_menu($args);

Where $args is an array which can have the following settings:

• title – The text for the link.


• href – The URL for the link.


• parent – (Optional) To add the link to a submenu, enter the ID of the parent link (Defaults to FALSE, i.e. a top-level link).


• id – (Optional) ID to refer to this link. Defaults to a sanitized version of the title.


• meta – (Optional) Array to specify extra info about the link, from array( ‘html’ => ”, ‘class’ => ”, ‘onclick’ => ”, target => ”, title => ” );

Armed with this info, let’s go back to our unfinished links function and paste the following:

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

	// Add the Parent link.
	$wp_admin_bar->add_menu( array(
		'title' => 'Stats',
		'href' => false,
		'id' => 'pbd_links',
		'href' => false
	));
 
	/**
	 * Add the submenu links.
	 */
	foreach ($links as $label => $url) {
		$wp_admin_bar->add_menu( array(
			'title' => $label,
			'href' => $url,
			'parent' => 'pbd_links',
			'meta' => array('target' => '_blank')
		));
	}
}

The first line follows the format we discussed. All we do is add a new top-level link to the menu bar. I’ve chosen to call it “Stats”, though you could call it whatever you chose.

You’ll notice the ‘href’ attribute has been set to false, meaning that this “link” doesn’t link anywhere.

To add the submenu links, we use a loop to cycle through our array and call the add_menu() method on each of our links.

We specify the parent as “pbd_links” because that was the ID we gave the parent link, and as these links are all off-site, I’ve used the ‘meta’ section to make them open in a new window.

And that’s all we need to put the links in place. If you were to close up your PHP file now and activate the plugin, you’d see your new additions in the admin bar.

But before we do that, let’s look at how we can delete some of the default links as well.

4 – Remove Default Links

To remove a menu, we call the remove_menu() method, and pass in the ID of the menu we want to remove.

Paste the following into your plugin:

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

/**
 * Remove default admin links.
 */
function pbd_remove_default_links() {
	global $wp_admin_bar;
 
	/* Array of links to remove. Choose from:
	'my-account-with-avatar', 'my-account', 'my-blogs', 'edit', 'new-content', 'comments', 'appearance', 'updates', 'get-shortlink'
	 */
	$remove = array('appearance');
 
	if(empty($remove) )
		return;
 
	foreach($remove as $item) {
		$wp_admin_bar->remove_menu($item);	
	}
}

This is very similar to our add-links function. We pull in the admin bar object again, and then create another array of options. This time, the array will just hold the IDs of menus to remove (I’ve entered all of the possible options in a comment on line 8).

Provided the array isn’t empty, we’ll loop through each item and remove each of the corresponding menus.

And that’s that done. Now all that remains is to close your PHP file and activate the plugin!

1

?>

Let me know if you find this tutorial useful, or if you’ve seen any other cool tricks for the new admin bar!

A few weeks back, we put together a way of adding events to WordPress and displaying them in an easy-to-read list. It was simple to maintain and it worked well, but it didn’t take advantage of all WordPress offers.

In this 2-part tutorial, we are going to extend our events list script to set up a new post type purely for the events, and create a new taxonomy for tagging our events. We will then be able to:

• Organize our events easily (e.g. If we’re running WordPress classes, we could label them as Beginner, Intermediate, or Advanced)


• Create templates for event lists and individual events.


• Separate events out of the main post list (So they won’t automatically appear on the homepage anymore).


• Add new events more conveniently in the admin panel (Especially when we add metaboxes in a later post!)

Let’s take a look at the end result (Using the default 2010 theme).

1 – The overall Events page.

2 – Sorting by the “Beginner” tag.

3 – Viewing an individual event.

Look good? Cool, let’s build it (By the end of today’s post, you’ll have taken care of all of the WordPress backend stuff, and set up the automatic Date message on your individual events!)

Setting Up Our Post Type and Taxonomy

We’ll be working in the functions.php file. If your theme doesn’t have one, just make a file with that name and put at the bottom.

Our first step will be to give WordPress the info it needs to make our new post types. Before the closing ?> tag in your file, paste the following:

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

/**
 * Sets up our Events custom post type.
 */
function pbd_events_init() {
	// Labels.
	$labels = array(
		'name' => 'Events',
		'singular_name' => 'Event',
		'add_new' => 'Add New',
		'add_new_item' => 'Add New Event',
		'edit_item' => 'Edit Event',
		'new_item' => 'New Event',
		'view_item' => 'View Event',
		'search_items' => 'Search Events',
		'not_found' => 'No events found.',
		'not_found_in_trash' => 'No events found in Trash.'
	);
 
	// Register the post type.
	register_post_type('events', array(
		'labels' => $labels,
		'public' => true,
		'supports' => array('title', 'editor', 'custom-fields', 'comments'),
		'has_archive' => true
	));

The code above starts by creating a function called pbd_events_init(), which we will hook into place later on.

We then make an array called $labels, where we enter all of the strings that WordPress will use in the admin panel. This way, instead of it saying “Add New Post”, we get “Add New Event”.

The register_post_type() function is what tells WordPress to create our new post type, and as you can see, it’s incredibly simple to use. You can read up on all of the possible arguments it takes on the codex page), but the three (plus labels) we need are:

• public – Enables the Events admin panels in the dashboard, and allows our events to be viewable on the main site (So rather important!)


• supports – Choose which parts of the regular “Add Post” page you want to enable. We choose title and editor (i.e. event name and its description) and comments, as well as custom-fields (to enter the event date). Check out the other possible options on the codex page.


• has_archive – This is a great new addition from WordPress 3.1 meaning that WordPress will create pages that list all of our events in one place. Perfect for having a standalone Events page.

That’s all it took to set up our new post type. Now we just follow a similar process to set up our new taxonomy as well:

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

	// Event tag labels.
	$eventLabels = array(
		'name' => 'Event Tags',
		'singular_name' => 'Event Tag',
		'search_items' => 'Search Event Tags',
		'popular_items' => 'Popular Event Tags',
		'all_items' => 'All Event Tags',
		'edit_item' => 'Edit Event Tag',
		'update_item' => 'Update Event Tag',
		'add_new_item' => 'Add New Event Tag',
		'new_item_name' => 'New Event Tag Name'
	);
 
	// Event tags.
	register_taxonomy('event_tags', 'events', array(
		'label' => 'Event Tags',
		'labels' => $eventLabels
	));
}
add_action('init', 'pbd_events_init');

The $eventLabels array does for our taxonomy exactly what the $labels array did for the post type.

We then use the register_taxonomy() function to tell WordPress to set it up. The first parameter (‘event_tags’) will be the name of our taxonomy, and the second (‘events’) is the name of our post type (i.e. tell WordPress that we only want these tags to apply to events, not to regular post and pages).

And again, this function can take a lot more arguments than we have used. All we specified were the labels, but there are a lot of other options available too (e.g. if you wanted it to function like categories, rather than tags).

Lastly, we close off the pbd_events_init(); function and hook it into place (These functions won’t work if you call them any sooner. That’s why we use the add_action() line to hold back on running this all until WordPress is loaded).

And that’s the core of our work done! If you save this, you’ll now see an “Events” section in your admin panel, and if you publish events, you’ll see them displayed using your site’s archive.php and single.php templates. Of course, you still aren’t sorting events by their date yet, and you want to make use of their own templates.

Adding Dates to Events

This will work identically to before, where we use the custom fields section to add new field named “Date” with a value of the event’s date, in the form: mm/dd/yy

For example, an event on the 4th of April:

Displaying the Date on Individual Events

We want to automatically insert the date of the event on the event’s page. There are two ways that we can do this:

• 1 – Create a new template file called single-events.php . This file would then be used in place of single.php to display any of our individual events.


• 2 – Add a filter to the content of the event to automatically insert our date for us.

If you wanted your events to appear drastically different to your regular posts (e.g. new formatting, listing all events in the sidebar, adding a list of our event tags etc.), you would definitely use the first option.

In our case though, we want them to appear the same but have the date highlighted at the top. For that, we can use a filter (Meaning we don’t need to recreate a whole template, and it makes things easy to maintain in the future).

Add the following to your code:

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

/**
 * Add Event Date before the description on single post pages.
 */
function pbd_add_event_info($content) {
	if ( 'events' == get_post_type() ) :
 
		// Get the date of the event in a nicer-to-read format.
		global $post;
		$date = get_post_meta($post->ID, 'Date', true);
		$date = date_create($date);
		$date = date_format($date, 'jS F, Y');
 
		// Add the message before the post.
		$content = '<p class="events-info"><strong>Event Date</strong>: '. $date .'</p>' . $content;
	endif;
 
	return $content;
}
add_filter('the_content', 'pbd_add_event_info');

Now let’s take a look at what this does. A filter in WordPress is a way of taking some content that WordPress is going to use, adapting it, and then giving it back for WordPress to carry on.

In our case, we’re letting WordPress prepare the content of the post (i.e. ‘the_content’, line 19), but before it prints it out, our pbd_add_event_info() filter pokes its head in.

In that function, we first check if this content is for an event post (If it’s for a regular post/page, we don’t want to do anything).

Assuming it is an event, we then want to get the event’s date. With lines 8 and 9, we can get the content of the Date custom field. Instead of printing out 04/04/11 though, it would be nicer to say 4th April 2011.

Line 10, date_create(), turns 04/04/11 into a DateTime object that PHP can use, and date_format() then turns that into a readable version for us.

Line 14 is where we adapt the content we were given. We create a new paragraph (With the class “events-info” so that we can style it later), insert the date inside of it, and then append the original content from WordPress (If we didn’t add that back on, the final result wouldn’t have the event’s actual content).

Lastly, we use return $content; to send the result back.

The final thing do is add some new styles to your style.css file to make this appear differently, e.g. (To steal WordPress’ “Updated” message styles!)

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

.events-info {
	background: #FFFFE0;
	border: 1px solid #E6DB55;
	padding: 8px;
}
 
.events-info a:link, .events-info a:visited {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
 
.events-info a:hover, .events-info a:active {
	text-decoration: underline;
}

Now go check out your events. You’ll see the date clearly highlighted in yellow right at the top of the post. And that will happen automatically on every one of your events, without any extra work from you.

In the next post, we will look at the overall Events page. We’ll adapt the query from our original post to list events in order, and we’ll use our event_tags taxonomy to let users sort events into the ones they’re most interested in.

Stay tuned!

I love reading the comments on each article I post. If you leave one, you’re near guaranteed I’ll reply to you directly and keep the conversation going.

The trouble is that after a day or two of an article being live, the spammers descend and the lovely, informative comment thread descends into “great article, agree with your points, visit my site”. It’s just not cool…

We’re working on a full redesign to Pro Blog Design, and one of the things I’m most interested in is this comments issue. How can I make sure the comment threads stay in that awesome-to-read stage from the first few days when an article is written?

In this post, I want to share some ideas, along with a quick look at their pros/cons, and I’d love to hear your thoughts. What do you think would work best? Would it put you off commenting?

Remove DoFollow

DoFollow means that after your 3rd comment here, the rel=”nofollow” will be removed from all of your comments, allowing Google to follow the links back to your site (Back in the day, showing off a badge like the one on the right designed by Randa was quite a source of pride for bloggers!)

Originally, I set this up as a way of saying thank you for commenting. Now though, it just attracts a lot of spam (Mostly with names like “Web Design Boston”). And it’s not just automated spam. The fact that people actively hunt down DoFollow blogs shows that they aren’t interested in the comment, just in the number of them they can leave.

I’m not saying that a lot of legit commenters don’t appreciate DoFollow, just that this seems to do more harm than good now.

Update (19/3/11): Steven Snell left a great comment about why removing this plugin may be too late. The damage is done by having it in the first place. Check it out.

Asking for Cooler Comments

This is an approach I’ve seen taken on some larger blogs like Tim Ferriss’. If you check out his comment form, you see this:

It’s simple, and in no way guaranteed, but it probably works. At the very least, when I see that as a commenter, it’s good to know that the blogger is at least trying to tackle the problem.

The downside is of course the added clutter on the page. Though if it’s useful, then maybe it isn’t clutter?

(Random aside: Tim’s interviews with people who started up their own profitable online “muses”, as he calls them, are some of the best reads you’ll find.)

CAPTCHAs

CAPTCHAs are those rather annoying scripts that ask you to enter the words in a scrambled image.

Akismet does well against the majority of automated spam, but a CAPTCHA may help prevent the rest of it. That said, when implementing Google’s own reCaptcha on a forum lately, it took less than 30 minutes for the first spammer to sign up anyway.

The real downside for me is the annoyance to valid users though. Sticking with my farming line; I don’t want to throw away the wheat as well as the chaff.

Prevent Certain Words in Names

The worst offenders (The ones who leave a dozen useless comments all over the site) usually use a name made up of keywords. You know the type; ‘mortgage loan’, ‘web design texas’, ‘pharmacy supplies’ etc.

Yesterday, someone actually left messages with the name “wart removal”. I sincerely hope that is not your real name.

By targeting a few common words (mortgage, design etc.) that shouldn’t be in any valid name, you could stop a lot of these comments being posted (No idea why Akismet doesn’t do this already?).

The simplest implementation would be with some jQuery. Not full-proof, but it would work on most real users (They won’t bother disabling JS for this. Speed is the main thing for them). Or we could look into doing the validation via WordPress itself (Knowing WordPress, it’s probably a matter of a few lines!).

(Let me know if you’d like me to look into this properly and put together a tutorial!)

Closing Comments after a While

The idea here is that after an article has been online a certain amount of time, the comments on it are closed automatically. It’s quite a popular technique on larger sites.

This makes a lot of sense if you stop checking the comments on your older posts (Like I usually do, it’s just unmanageable). People aren’t likely to get a reply, so you don’t want them wasting their time.

The downside for a technical blog like this is that tutorials can go out of date. It often takes a good comment from someone to point this out, or even to remind me that that tutorial exists and I ought to update it (Case in point, I really need to show you guys the not-so-new-anymore way to separate comments from trackbacks).

The question is, what time limit would you set this at?

Use a Reputation System (Disqus?)

Forums have been doing this for years to reward the best members (How many forums have you seen where you can “Thank” a post for being helpful?). Sites like Stack Overflow have improved this further, but the idea is the same. When your contributions add to your reputation, you put more effort into them.

One easy way of doing this would be to use Disqus. Comments are then added to a user’s Disqus profile, along with any +/- ratings it gets. As so many sites use Disqus now, you may be careful with boosting your rating.

The downside is that it’s not the easiest to style, and besides the rating being displayed next to your name, it doesn’t actually do anything.

An alternative would be a plugin like Comments Vote, that allow people to rate good or bad on comments, and comments with a negative rating are then collapsed.

Marking the Best Comments

The idea here would be that when I see a great comment, I’d mark it as being great. This could then allow a few things to happen:

• The comment’s design changes (Highlighted to stand out, similar to how an author’s comments are)


• The comment is displayed at the top of the list (So instead of just showing the first comment first, you’d show the best comment first).


• NoFollow could be removed again for these particular comments.


• Some sort of list of all “best comments” from across the site could be setup in your sidebar/footer.

I’m not aware of anything that works like this at the minute, though let me know if you are! If the idea seemed like it would work though, I’d be happy to code it (And release it to you too).

Would it encourage you to leave a comment?

Only Comment Via FB Connect and Twitter

Quora is ia Q&A site with extremely high quality answers to the questions. It’s not known for its easy sign-up though. Sometimes requiring an invite, but even when it didn’t, it very strongly encouraged you to sign up with Twitter or Facebook.

Your Facebook and Twitter profiles are something that you put a lot of time into and want to look good on. Are you less likely to write spammy one-liner comments when it’s all tied back to your Facebook Profile? Perhaps?

But then, is that asking too much of a casual commenter who does have something interesting to say, but isn’t sure about giving yet another site access to their personal profiles?

One interesting I only discovered while writing this post is that Techcrunch has jumped from Disqus to the Facebook Comments plugin. Obviously though, they’re dealing with this same issue but on a far bigger scale, so they can afford to turn away more casual commenters?

What Would You Do?

I’m very undecided on the best route to take. The ideas above range from being very restrictive (Limiting to Facebook only), to quite possibly worthless (Removing the DoFollow plugin).

So where is the balance in the middle? As someone who takes the time to leave comments here, what would you be happiest with (Or most put off by)? (And I promise I’ll reply to you before the spammers do…)

WordPress 3.1 introduced the admin bar, which adds admin options to the top of your pages as you browse your site (Assuming you’re logged in of course).

It’s easy to extend the bar to add new links of your own, or to remove links you don’t want (e.g. if the “Appearance” menu isn’t something you often need instant access to). You can see the end result in the image above.

In this tutorial, we’ll be building a simple plugin that will let us add some handy links (e.g. a Twitter search for the current post, analytics, and ad sales), as well as remove the links we don’t want.

If you’d rather just skip to the finished file though, you can download the plugin here, and follow the instructions in the file to set your options (NB – It’s a simple script, not a full fledged plugin with options panels).

1 – Create the Plugin File

The first stage is setting up our plugin for WordPress. To do this, create a new folder in your wp-content > plugins folder, and give it a unique name, e.g.

pbd-admin-bar-links

Now, create a PHP file inside with the same name, e.g.

pbd-admin-bar-links.php

Lastly, enter some details about the plugin at the top of the file, e.g.

1
2
3
4
5
6
7
8
9
10

<?php
/*
Plugin Name: PBD Admin Bar Links
Plugin URI: http://www.problogdesign.com/
Description: Add/Remove links in the WordPress admin bar.
Version: 0.1
Author: Michael Martin
Author URI: http://www.problogdesign.com/
License: GPL2
*/

And now we can start writing some real code.

2 – Hook into the Menu

The first thing we’re going to do is write a simple function that checks to see if we need to do anything at all. If the current user isn’t an admin, or if they’re an admin who has disabled the admin bar (You can turn it off in your profile options), then we won’t be doing anything else.

Insert this code into your plugin:

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

/**
 * Checks if we should add links to the bar.
 */
function pbd_admin_bar_init() {
	// Is the user sufficiently leveled, or has the bar been disabled?
	if (!is_super_admin() || !is_admin_bar_showing() )
		return;
 
	// Good to go, lets do this!
	add_action('admin_bar_menu', 'pbd_admin_bar_links', 500);
	add_action('admin_bar_menu', 'pbd_remove_default_links', 500);
}

Line 6 will take care of our permissions checks. If they pass, then the two add_action() lines will call the functions we’re going to write next to adjust the menu.

But of course, we need to actually call this function as well. Add this line below it to have our function called when the admin bar is created:

1
2

// Get things running!
add_action('admin_bar_init', 'pbd_admin_bar_init');

3 – Add Our Links

Now, for the meat of the tutorial, we’re going to write the function that adds our links. And it’s very simple to do.

We’ll start off by creating the function (With the same name we used in the first add_action() line in the previous block!), and then entering the links. Here goes:

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

/**
 * Adds links to the bar.
 */
function pbd_admin_bar_links() {
	global $wp_admin_bar;
 
	// Build Twitter Reactions link.
	$url = 'http://'. $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	$twitter = 'http://search.twitter.com/search?q='. urlencode($url);
 
	// Links to add, in the form: 'Label' => 'URL'
	$links = array(
		'BuySellAds' => 'http://buysellads.com/',
		'Twitter Reactions' => $twitter,
		'Google Analytics' => 'http://www.google.com/analytics/',
		'Klout' => 'http://klout.com/problogdesign',
		'Webmaster Tools' => 'https://www.google.com/webmasters/tools/dashboard?hl=en&siteUrl=http://problogdesign.com/'
	);

The global $wp_admin_bar; line gives us access to the menu object, which we’ll use in the next line.

The Twitter URL needs to be made dynamically. We use the $url = … line (Line 8) to get the address of the current page (You’ll need to adapt it if you’re using https://), and then in the $twitter = … line, we build the link.

The $link = … part is where you start tweaking. Here, we make an array of our links, in the format: ‘Label’ => ‘URL’. You can see I’ve put in a few of mine, but you can add anything you like here (And the order they are entered here is the order they will show up in).

Update (15/3/2011) - Blake Imeson had a nice idea in the comments. If you’ve set up a redirect to a client’s email (e.g. mail.site.com to take them to Google Apps), you could add that as well, similarly to how we added Twitter, using a line like this: $mailurl = ‘http://mail.’ . SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

Now, we use the add_menu method of the $wp_admin_bar object we called in to add our links. It works in the format:

$wp_admin_bar->add_menu($args);

Where $args is an array which can have the following settings:

• title – The text for the link.


• href – The URL for the link.


• parent – (Optional) To add the link to a submenu, enter the ID of the parent link (Defaults to FALSE, i.e. a top-level link).


• id – (Optional) ID to refer to this link. Defaults to a sanitized version of the title.


• meta – (Optional) Array to specify extra info about the link, from array( ‘html’ => ”, ‘class’ => ”, ‘onclick’ => ”, target => ”, title => ” );

Armed with this info, let’s go back to our unfinished links function and paste the following:

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

	// Add the Parent link.
	$wp_admin_bar->add_menu( array(
		'title' => 'Stats',
		'href' => false,
		'id' => 'pbd_links',
		'href' => false
	));
 
	/**
	 * Add the submenu links.
	 */
	foreach ($links as $label => $url) {
		$wp_admin_bar->add_menu( array(
			'title' => $label,
			'href' => $url,
			'parent' => 'pbd_links',
			'meta' => array('target' => '_blank')
		));
	}
}

The first line follows the format we discussed. All we do is add a new top-level link to the menu bar. I’ve chosen to call it “Stats”, though you could call it whatever you chose.

You’ll notice the ‘href’ attribute has been set to false, meaning that this “link” doesn’t link anywhere.

To add the submenu links, we use a loop to cycle through our array and call the add_menu() method on each of our links.

We specify the parent as “pbd_links” because that was the ID we gave the parent link, and as these links are all off-site, I’ve used the ‘meta’ section to make them open in a new window.

And that’s all we need to put the links in place. If you were to close up your PHP file now and activate the plugin, you’d see your new additions in the admin bar.

But before we do that, let’s look at how we can delete some of the default links as well.

4 – Remove Default Links

To remove a menu, we call the remove_menu() method, and pass in the ID of the menu we want to remove.

Paste the following into your plugin:

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

/**
 * Remove default admin links.
 */
function pbd_remove_default_links() {
	global $wp_admin_bar;
 
	/* Array of links to remove. Choose from:
	'my-account-with-avatar', 'my-account', 'my-blogs', 'edit', 'new-content', 'comments', 'appearance', 'updates', 'get-shortlink'
	 */
	$remove = array('appearance');
 
	if(empty($remove) )
		return;
 
	foreach($remove as $item) {
		$wp_admin_bar->remove_menu($item);	
	}
}

This is very similar to our add-links function. We pull in the admin bar object again, and then create another array of options. This time, the array will just hold the IDs of menus to remove (I’ve entered all of the possible options in a comment on line 8).

Provided the array isn’t empty, we’ll loop through each item and remove each of the corresponding menus.

And that’s that done. Now all that remains is to close your PHP file and activate the plugin!

1

?>

Let me know if you find this tutorial useful, or if you’ve seen any other cool tricks for the new admin bar!

Predicting the evolution of web design is like trying to milk a male goat. Despite ever-changing design trends and techniques, purists and idealists maintain that the principles of great design are timeless. This is true to an extent, but the recent rapid and consistent development of the Internet across many dimensions and in diverse ways has to be taken into account.

The Internet has provided us with such a huge platform to innovate and break design barriers; it allows the designer to apply variations and to slightly modify existing trends in order to make their mark. Global access to every kind of tool and technique is at the heart of this creative revolution, allowing designers from all over the world to explore new possibilities.

You may be interested in the following related articles as well.

• Factors Influencing Your Overall Website Design


• 90+ Clean and Minimal Web Designs for Design Inspiration


• Super-Clean and Minimal Web Designs


• How to Create “Touchable” Web Designs


• Grid Style In Modern Web Design: Showcase and Resources


• Why Inspiration Playing a Critical Role in Web Design

Please feel free to join us and you are always welcome to share your thoughts that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.