It’s a relatively simple process to add some flair to your blog comments these days. I want to look at 6 of the best free tools and give you a quick overview of the benefits of each.

Let’s start with one you’ve likely heard of before…

Disqus

Disqus uses JavaScript to replace your WordPress comments with their own system. You lose the total design flexibility that vanilla WordPress comments offer, but you gain a large feature set, including:

• Real-time Comments – New comments appear on the page without needing to refresh. Not a major benefit for smaller sites, but very good if your posts tend to get a flurry of comments in the first few hours of publishing.
• Social Media Integration – Users can comment via Facebook or Twitter, and share to those sites as well if they choose.
• Global Profiles – A user’s Disqus profile shows their comments across all Disqus sites. The idea is that a Disqus user will be more likely to comment on a Disqus blog because of this, and it makes for a fast way to find out more about a commenter.
• Plenty of other features, like inline comment replies or “subscribe to updates.”

Another good thing to bear in mind with Disqus is that they are very active. Disqus has been around for several years now, and it still innovates and updates regularly. They even have a mystery Disqus 2012 project to be released soon.

And incase you’re wondering, your comments can all be imported to Disqus, and exported back to WordPress if you choose to leave Disqus. You won’t be hostage to their system.

WordPress Install Instructions for Disqus

Livefyre

Livefyre is very similar to Disqus, and as far as I can tell, they offer almost exactly the same feature set. Real-time comments, social media, user profiles, subscription etc. are all included as standard.

Livefyre is a newer contender in this market though, but personally I think they have an edge over Disqus in 2 ways:

• Simpler Installation – Disqus isn’t hard to install, but it does have JavaScript issues often enough (For anyone who has ever used it, hands up if your comment counts vanished?). I haven’t used Livefyre on as many sites yet, but it hasn’t given me any hassle.
• Sleeker Design – This is just a matter of taste, but I like the softer design of Livefyre’s comments more. It’s not a big difference, but every little helps, and even their website has a better design.

WordPress Install Instructions for Livefyre

IntenseDebate

IntenseDebate is similar again to the 2 above (The last tool in this style, I promise!). The reason I mention it is because it has one very big draw for WordPress users; it’s owned by Automattic, the creators of WordPress.

The feature-set is generally quite similar to the others (Though real-time commenting is noticeably absent), and their design is very similar as well.

Whilst there is nothing that I can say is “wrong” with IntenseDebate, it’s hard to recommend them overly either. Their site and script don’t feel as sleek as Livefyre, and their community no longer seems as vibrant as Disqus’.

Oh, and the bright green “180p” badges look awful… (Look down the sidebar of their blog to see what I mean).

Begin IntenseDebate Install Process

Facebook Comments

The Facebook Comments script is exactly what you would expect; it replaces your own comments with a Facebook wall. Users must be signed in to their Facebook accounts, and then what they see is identical to Facebook.com.

There are two big advantages to this approach:

• Publicity – Users are commenting with their Facebook profiles, so with a little luck, their friends will see the comment and look at your article as well.
• Anti-spam – Every commenter must use their Facebook account, so spammers have a much harder time bulk-spamming blogs.

The strongest feature is also the strongest drawback. Some people (like me) keep their accounts completely separate to their work or online profiles, and so, you will miss out on those people’s contributions.

There is a plugin for adding these comments to WordPress, but it seems to be broken with WordPress 3.3. For a developer though, the installation is similar to any other Facebook script. You can get the code here.

(If you have trouble with the install or can’t find a reliable guide online, let me know and I’ll put together a walkthrough).

Jetpack

Jetpack is essentially a set of WordPress plugins, which is a topic I’m about to cover in the final section. What sets Jetpack apart is its ease of use. You install one package, and cherry pick the features for you want.

In the case of commenting, that means 3 things:

• Subscriptions – Users can be emailed when follow-up comments are left after their reply. This is a great way to keep conversations going.
• Gravatar Hovercards – When you mouse over a commenter’s name, this will pull up a little bubble with their image and a quick bio with a link to their full profile on Gravatar.
• Sharing – Jetpack makes it easy to add social media sharing links anywhere on your page, including around the comments area.

Install Guide for WordPress Jetpack

Other WordPress Plugins

There are hundreds out there, but I want to focus on just 4 of them:

• AJAX Edit Comments - This allows users to edit their comments for up to 15 minutes after submitting them. It is a good way to enable users to fix typos, and avoid “double-posting” if they want to add another line. It is particularly popular on coding blogs, where awesome commenters might contribute code snippets of their own but find they get messed up when displayed.
• CommentLuv – CommentLuv gets the latest blog post from a commenter’s RSS feed, and automatically adds a link to it after their comment. This is a great way to thank visitors for taking the time to post a comment.
• GD Star Rating – Not the simplest of plugins to configure, but GD Star Rating has a wealth of options that can enable star ratings (Or thumbs) on WordPress comments (And posts).
• WordPress reCAPTCHA - Spam can be a nightmare on WordPress blogs, but this plugin makes it simple to add Google’s captcha (“Type the letters…”) tool to your blog.

Which Do You Use?

I’ve always used regular WordPress comments with some plugins here on Pro Blog Design, because I like the flexibility of creating your own comments design. The topic of this blog is another reason; it’s good for us to show something unique.

More and more though, I’m working with clients who are choosing the scripts above (Particularly Disqus and Livefyre). These scripts are very impressive, and can even be a good way to speed up the development time of a new site.

I think the Facebook widget is only a great bet if you specifically try to encourage users to interact with you via Facebook (e.g. your site takes signups via Facebook Connect, or you need as much social sharing of your app as possible etc.).

I’d love to hear what approach you’ve taken on your site, and why you went down that road!

Update (20 January 2013): There is a newer version of this script available now: Authenticate Your Twitter API Calls Before March.

Around this time last year, I showed you how to embed tweets in WordPress using the Twitter API.

Today, I want to improve on that script by adding a backup to it. Twitter is often down or unresponsive, and when it is, the previous script fails and displays nothing.

With a backup, we store an extra copy of each set of tweets that we find. When Twitter is down, we can then use this backup to display tweets as normal.

WordPress “Transients” vs “Options”

We will use both of these, so it’s best to explain quickly what they are. An “option” is a value that is stored permanently in your database. There is an option for your site title, the slogan etc.

A transient is very similar to an option, but it also has an expiry time. After this time, the transient is deleted. For more information, read using the Transients API.

The transient is perfect for caching tweets. We can store the results from Twitter, and when the transient expires, fetch new ones.

The option however is perfect for the backup, because we never want it to expire (We will just write over it each time we update it).

The Code

The majority of this code is from the previous article. For that reason, I will only explain the new additions. To understand how we process each tweet and display it, check out the original post.

And if you’d rather just skip on, you can grab the fully completed code here.

Find where in your theme you would like the tweets to appear (e.g. sidebar.php), and paste the following:

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

<?php
/*
 * JSON list of tweets using:
 *         http://dev.twitter.com/doc/get/statuses/user_timeline
 * Cached using WP transient API.
 *        http://www.problogdesign.com/wordpress/add-a-backup-to-embedded-tweets-in-wordpress/
 */
 
// Configuration.
$numTweets = 3;
$name = 'problogdesign';
$cacheTime = 5; // Time in minutes between updates.
$exclude_replies = false; // Leave out @replies?
 
$transName = 'list-tweets'; // Name of value in database.
$backupName = $transName . '-backup'; // Name of backup value in database.

These are your configuration options. How many tweets do you want to display? From which user? And how often should we fetch new updates? (It’s fine to go to 1 minute even, but it means one of your users will have a slow page load every minute, rather than one every 5 minutes).

The only change from before is that I’ve added the option to exclude @replies from your results, and we now have 2 names for values in the database. Let’s carry on.

The next section of code is the bulk of the script. Essentially, it fetches the data from Twitter’s API, picks out the parts we want, formats them, and saves them as an array called $tweets. The original post explains it all one step at a time.

You can also read about this specific Twitter API call here.

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

// Do we already have saved tweet data? If not, lets get it.
if(false === ($tweets = get_transient($transName) ) ) :    
 
    // Get the tweets from Twitter.
    $response = wp_remote_get("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=$name&count=$numTweets&exclude_replies=$exclude_replies");
 
    // If we didn't find tweets, use the previously stored values.
    if( !is_wp_error($response) && $response['response']['code'] == 200) :
        // Get tweets into an array.
        $tweets_json = json_decode($response['body'], true);
 
        // Now update the array to store just what we need.
        // (Done here instead of PHP doing this for every page load)
        foreach ($tweets_json as $tweet) :
            // Core info.
            $name = $tweet['user']['name'];
            $permalink = 'http://twitter.com/#!/'. $name .'/status/'. $tweet['id_str'];
 
            /* Alternative image sizes method: http://dev.twitter.com/doc/get/users/profile_image/:screen_name */
            $image = $tweet['user']['profile_image_url'];
 
            // Message. Convert links to real links.
            $pattern = '/http:(\S)+/';
            $replace = '<a href="${0}" target="_blank" rel="nofollow">${0}</a>';
            $text = preg_replace($pattern, $replace, $tweet['text']);
 
            // Need to get time in Unix format.
            $time = $tweet['created_at'];
            $time = date_parse($time);
            $uTime = mktime($time['hour'], $time['minute'], $time['second'], $time['month'], $time['day'], $time['year']);
 
            // Now make the new array.
            $tweets[] = array(
                            'text' => $text,
                            'name' => $name,
                            'permalink' => $permalink,
                            'image' => $image,
                            'time' => $uTime
                            );
        endforeach;
 
        // Save our new transient, and update the backup.
        set_transient($transName, $tweets, 60 * $cacheTime);
        update_option($backupName, $tweets);

The change to notice comes on line 8. Here, we check if an error occurred or Twitter failed to give us back our tweets. We check the latter by looking at the HTTP status code returned. You can read more about how Twitter uses status codes here, but the short of it is that anything other than 200 means something went wrong.

We only process the page returned if it passes these two checks.

The other change is on the very last line, where we save the transient as normal, but also save the permanent “option”. This updates our backup with the most recent set of results.

Moving on, all we need to do if the fetch fails is populate the $tweets array with the value from our permanent backup.

1
2
3

    else : // i.e. Fetching new tweets failed.
    	$tweets = get_option($backupName); // False if there has never been data saved.
	endif;

Now we can display the tweets as before. To check that we do have tweets to display, we check if $tweets is false (If a backup has never been made, get_option() will have returned false to it).

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

// Now display the tweets, if we can.
if($tweets) : ?>
    <ul id="tweets">
    <?php foreach($tweets as $t) : ?>
        <li>
            <img src="<?php echo $t['image']; ?>" width="48" height="48" alt="" />                
            <div class="tweet-inner">
                <p>
                     <?php echo $t['name'] . ': '. $t['text']; ?>
                     <span class="tweet-time"><?php echo human_time_diff($t['time'], current_time('timestamp')); ?> ago</span>
                </p>
            </div><!-- /tweet-inner -->
        </li>
    <?php endforeach; ?>
	</ul>
	<p><a href="http://twitter.com/#!/<?php echo $name; ?>">[ Follow us on Twitter ]</a></p>
 
<?php else : ?>
	<p>No tweets found.</p>
<?php endif; ?>

At the end, I’ve added a simple error message, rather than displaying nothing. This will only appear if fetching tweets fails, and a backup has never been made.

And that’s it done. If you used the previous script, this can be slotted in over it and all you need to do is update your details in the configuration section at the top. Now your tweet list should be that bit more reliable.

The full code can be found here.

As 2012 begins, I want to look back over the past year to see what can be learnt from it. Learning from your mistakes is less glamorous than a list of grand New Year’s Resolutions (Though I do like those too), but often more effective at ensuring the next year is even better than the last.

With that in mind, what follows are some of the lessons I have picked out from my own 2011. I would love to hear if these resonate with you.

When looking back at your own year, I’d encourage you not to look for when things went “wrong” as such, but simply to think of how things may have gone differently. That’s what I’ve done. If I were to go back, I may well do some of these things the same, but considering the alternatives is a great way to learn.

Plan For the Follow-Through

When working on a large project, launch day is the natural target. All of your work is dedicated to releasing the product.

That is obviously crucial, but equally important is planning in advance to build on the momentum from your big release. That could mean anything from analyzing its success, planning the next release, or simply capitalizing on the good PR.

I learned this lesson from the relaunch of this site in May. We had been working on it on and off for almost a year, so it had been a huge project, but in the push to launch, we built up a backlog of other work.

I worked on this and wrote a number of articles following the launch, but not enough. The backlog took priority because as far as schedules were concerned, the relaunch project was complete. The follow-through should have been a clearly defined of the project.

Short-Term is More Tempting than Long-Term

How many times have you heard a freelancer say they can’t find the time to work on their site or a personal project? Even though they really enjoy it?

All freelancers hit this issue, and I was no different. I think the reason for this is extremely simple; short term benefits have a clearer and more obvious benefit than long term ones. In my case, PliablePress has been hurt by this. Improving the framework brings me incremental benefits over time, but taking on a large client project pays off right away.

The trick here I believe is a balancing act. If you spend all of your time on short-term goals, you’ll never get past where you are right now. But similarly, if you only work on long-term plans, you may not survive that long. Don’t let one overcrowd the other.

Focus Beats Multitasking

This is a common enough productivity tip that you have likely heard before. Only work on one thing at a time. It makes sense, and it will come as no surprise to you that closing down Twitter and Skype etc. will help you work better.

The bigger lesson is to organize yourself each day so you know which projects you will be working on. You don’t need a step-by-step breakdown of the tasks (Though some people swear by that), a simple list of the top x projects that need your attention today will do.

This is something I see in my work again and again. The days in which I have a clear list of projects to work on, and I tackle them one by one, are my most productive days. Sometimes you can even spend a whole day on just one project, which is fantastic. Focus only on the next task, not all of the tasks.

Sidenote – When making your list, try to avoid adding any murky tasks that don’t have clear completion objectives, e.g. research can go on indefinitely so before you start, make sure you’re aware of how you will know when you’re done.

New Does Not Necessarily Equal Worthwhile

In the tech world, we all love the speed at which things change. The impulse is to try as many new products and services as we can, because who knows what the next game changer will be?

And therein lies the problem. It could be anything, and there are new things coming at you every day. You can’t try them all, and the attempt is a waste of your time. I think a better approach is to let the community try them out for you, and join in when a winner seems to be emerging.

A good example of this is social networks. There are a million different variations out there and new ones all the time. Most won’t catch on, and the time put into them is lost to you. I joined Quora after consistently reading good responses on it for months, but I’m not on Pinterest, Path or any of the other current “hot” networks yet. I’ll check back again in a few months.

The exception is tools that really add value to your business (Webapps you use, development software etc.). Again, I wouldn’t try every single one as it comes out, but every few months, take a look around. It’s fun too, playing with new toys is hard to count as work!

Join The Communities You Value

The web is full of little communities, and you could take part in them from morning to night. On a productivity note, you might try to cut down on this when you have deadlines to meet.

It’s possible to go too far with this though. Once you’ve read a lot on a particular site, and especially after you’ve started enjoying the comment discussions, you can get a lot more out of taking part as well.

I used to post thousands of comments in forums when I was younger, and then again on blogs as I started Pro Blog Design. That’s been somewhat lessened in 2011, so I’m looking forward to starting again. In particular, I’ve massively enjoyed reading Hacker News and Stack Overflow, so it’s about time I joined up.

Planning is Both Impossible and Essential

A slight paradox, but it’s true. It’s impossible to plan for everything that may happen, even over just a short period of time. But with no plan, things inevitably fall into chaos.

I like to think I’m quite organized, and I always have a good idea of how the next 3-4 weeks will flow. I don’t think any of my “ideas” have ever gone 100% to plan though.

Things change. Something will crash, a client will take longer with their feedback, an awesome new project will come up etc.

You need to plan enough to help things run smoothly, but be flexible enough to cope with the inevitable curve balls that come at you. I’m still not sure of the exact formula for this, but it seems that the more experience you have of it, the better your plans and estimates become.

Fight to Work On What You Love

When you run a small business, you’re responsible for everything. I have the pleasure of working with a number of other people throughout the year here, but no matter what, the final responsibility is still mine.

In practice, what this means is that the tasks you can’t easily find someone else to take care of, you do yourself.

That’s fine in the short term, and often even beneficial (Knowing you have to submit your accounts yourself keeps your finances very organized throughout the year!), but it isn’t a long term solution.

You didn’t start a business to work on things you don’t enjoy. There will always be some jobs you just have to do, but when the ones you don’t enjoy are the majority, you need to fix it.

I’m quite happy with where I am in regards to this now; the trick for me was angling towards certain types of projects. Great clients with interesting projects means that more or less everything is fun!

The Truest Test of a Business is When You Leave It

Again, this is something you’ve likely read before, and it’s spot on. In September, I was away for around 3 weeks, and it likely affected every part of the business.

I planned in advance as much as I could, but every change has a knock-on effect. By prioritizing the projects that could most likely be finished before I left, I was leaving others to be done largely after I returned. I was also lining up new projects to be worked on while I was away, but I was still needed at various points to give my thoughts.

In other words, the month before and the month after the trip were crazy. There is no easy fix to this, but removing the dependency on you is definitely a big area to work on if you want your business to grow.

Conclusion

Those were the biggest new “lessons” I would take from my 2011. I’ve deliberately chosen from when things could have gone better, not from when they went great. I’d be happy to share those as well if you like, but learning from mistakes is often the more revealing analysis so they weren’t included here.

In return, I’d love to hear about your year. What have you learnt from it and what will you do differently this year?

Before I finish, I want to apologize for how quiet the past months have been. They’ve been some of the busiest months I’ve ever had, but I’ve missed blogging greatly. January will be a quiet month as well, sorry, but after the 29th, I will be back with a vengeance. I’ve learnt a lot, so there’s a lot I want to share!

If you reached this far in the post, thank you for still being a reader after all this time.

Happy New Year everyone!

Main photo by razvan.caliman.

Recently, one of our clients needed to let visitors create WordPress posts (Or custom post types of course) from the website itself.

In this post, I’m going to walk through some of the WordPress functions I used to achieve this. We’ll go over creating the post itself, adding categories/tags, and adding metadata.

(We’ll skip the stage where you build a form, validate what users enter etc. and just focus on the WordPress functions instead)

Create the Post

The method to create the core post is simple. Essentially, you build a $post object, and then insert it with wp_insert_post().

You can use our $post reference to speed this up. Let’s take a look at some examples:

1
2
3
4
5
6

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.'
);
 
$post_id = wp_insert_post($new_post);

That would create a new post, with the title “Our New Post”, and the filler text we’ve entered.

If wp_insert_post() is successful, it returns the ID of the new post it has created (Which we assign to $post_id here). If it fails, it will return 0.

By default, the status is set to “Draft”, so let’s tweak it to publish the post instantly:

1
2
3
4
5
6
7

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish'
);
 
$post_id = wp_insert_post($new_post);

You can set just about any value from the $post variable, e.g.

1
2
3
4
5
6
7
8
9
10

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'post_type' => 'page',
	'post_author' => 2,
	'post_date' => '2011-09-01 15:10:30'
);
 
$post_id = wp_insert_post($new_post);

Our post is now a page, written by user #2, and scheduled to be published on the 1st of September.

Categories, Tags and Custom Taxonomies

Let’s move on to categories and tags. You can either set these as you make the rest of the post, or add them separately later. Let’s start by seeing how it is done in wp_insert_post().

For categories, you pass in an array containing the IDs of the categories you want to add, e.g. for categories 9 and 29:

1
2
3
4
5
6
7
8

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'post_category' => array(9, 29)
);
 
$post_id = wp_insert_post($new_post);

Tags are a little easier. Instead of passing in the IDs, you can use the names of the tags themselves, e.g.

1
2
3
4
5
6
7
8

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'tags_input' => array('tag1', 'Filler Tag')	
);
 
$post_id = wp_insert_post($new_post);

You can even set the terms of a custom taxonomy. This uses the “tax_input” parameter and expect you to give it an array where each key is a custom taxonomy, and each value is an array of tags in that taxonomy.

Update (8 Aug 2011): Rarst has left a comment saying that “tax_input” will only work if initiated by a logged in user with the permission to edit that taxonomy. If this affects you, read on below for a different solution that will work anywhere!

For example, let’s say we have a taxonomy called “custom_tax”, and the two tags we want to add to the post are “Dolor” and “Ipsum”.

1
2
3
4
5
6
7
8
9
10

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'tax_input' => array(
		'custom_tax' => array('Dolor', 'Ipsum')
	)	
);
 
$post_id = wp_insert_post($new_post);

I mentioned that you could also add your tags later on. To do that, use the wp_set_object_terms() function (There are similar functions to this one, specifically for tags etc. but this covers it all for you).

The format is: wp_set_object_terms( post ID , array of tag IDs , taxonomy , append true/false ).

The last value is important. If you set true, then your new tags will be added to any existing ones. If you set false, then any existing tags will be replaced with your new ones.

Here are some examples of adding categories, tags, and a custom taxonomy this way:

1
2
3

wp_set_object_terms( $post_id, array(27, 28, 29), 'category', true);
wp_set_object_terms( $post_id, array('Example', 'Lorem Ipsum'), 'post_tag', true);
wp_set_object_terms( $post_id, array('Lorem', 'Sit'), 'custom_tax', true);

Metadata

If you’ve ever added custom meta data to a post before, you know what to do already.

Let’s say we want to add a custom field with the name “summary” and the value “Quick Summary!”:

1

add_post_meta( $post_id, 'summary', 'Quick summary!', true);

That’s quite self-explanatory. The ‘true’ at the end refers to whether this field is unique or not. If we set this to false, and a summary already exists, then another custom field also titled ‘summary’ would be added to the post.

By setting it to true, this won’t happen. WordPress checks for the ‘summary’ field first, and if it exists, it does nothing (You would then need to use update_post_meta() instead).

One special note to make is that if you want to set a page template, you do this with the meta functions as well. WordPress stores the name of the template file to use in a custom field titled ‘_wp_page_template’

1

update_post_meta( $post_id, '_wp_page_template',  'onecolumn-page.php');

Between those functions, you should be able to set up any post data you need. Feel free to post in the comments if you have any questions, or I’d love to hear how you’ve allowed users to add content to a WordPress site!

This is one of the most common questions I get asked; how do you make a floating box with share links?

Today, we’re going to see just how simple it can be. We will:

• Set up the current trinity of search (Facebook, Twitter, +1).
• See how to make sure they share the right URL.
• Align the box to the bottom left of the user’s browser.
• Hide the box if the user’s browser is too small (So it never overlaps our content).

You can see the demo site here (Try resizing your browser smaller).

1 – The URL and Text to Share

The first step involves a little WordPress code. In footer.php in your theme, scroll down to the tag, and just before it, paste the following:

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

<?php
// URL to share
if( is_singular() ) {
	$url = get_permalink();
	$text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
	if(is_category() ) {
		$cat = get_query_var('cat');
		$url = get_category_link($cat);
	} else {
		$tag = get_query_var('tag_id');
		$url = get_tag_link($tag);
	}
	$text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
	$url = get_bloginfo('url');
	$text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}	
?>

The point of this code is to work out the right URL and title text to share, and save them in 2 PHP variables ($url and $text).

The way it works is to run through a “what page are we on?” check:

• Single Post/Page – Then use the post’s URL and title.
• Category/Tag – Then use the category/tag’s URL, and “Category on Site Name” as the text.
• Default – Share the homepage URL, site title and description on any other page.

The reason we go to the trouble of making sure we have the right URL and text here is to ensure that the right details are shared, e.g. we don’t need any utm_source= etc. tracking tags after the address.

Get the Share Codes

The next step is to get the share code for each button, and put it in HTML that we can style.

You can either follow through the steps manually as I show you, or skip to the next block of code after this one, and copy it (But read the paragraph before it too).

Manual way:

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

<div id="social-float">
	<div class="sf-twitter">
		<!-- Twitter Code Goes Here -->
	</div>
 
	<div class="sf-facebook">
		<!-- Facebook Code Goes Here -->
	</div>
 
	<div class="sf-plusone">
		<!-- Google +1 Code Goes Here -->
	</div>
</div><!-- /social-float -->

You can see HTML comments for where each share code will go. Now, let’s get those codes (And tweak them as needed)

• Twitter
  • Click here.
  • Choose “Vertical Count”, and enter your Twitter handle below.
  • Copy and paste the code.
  • Find the part that looks like: data-count=”vertical” data-via=”problogdesign”. Take a space after that and paste: data-url=”<?php echo $url; ?>” data-text=”<?php echo $text; ?>”
• Facebook
  • Click here.
  • Enter http://google.com for “Address to Share”.
  • Deselect the “Send Button” option, choose “box_count” for layout, and set the width to 50.
  • Hit “Get Code” and copy and paste the iframe code (Or XFBML if you already use the FB JavaScript SDK. If you aren’t sure, just take the iframe code).
  • In the iframe code, search for http%3A%2F%2Fgoogle.com, and replace it with: <?php echo urlencode($url); ?>
  • Search for 80 in the code, and replace it with 62 (There are 2 places to change it, both to do with the height).
• Google +1
  • Click here.
  • Select the “Tall” button, and then copy and paste the code.
  • Find where it says size=”tall” in the code, then take a space and paste: href=”<?php echo $url; ?>”

And that’s you done! Your code should look similar to what’s below.

Automatic Way:

Copy and paste the following, but on line 3, make sure you change the data-via=”problogdesign” part to use your Twitter username instead.

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

<div id="social-float">
	<div class="sf-twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="problogdesign" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
 
	<div class="sf-facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
 
	<div class="sf-plusone">
		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div><!-- /social-float -->

CSS Time

The majority of our effect is done with just a simple piece of CSS. By using fixed positioning, we can anchor our box to the corner of the screen (It won’t work in IE6, but that’s okay).

The following will put the box 10px from the bottom and left edges of their browser (Don’t copy this just yet).

1
2
3
4
5

#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
}

If you try that, it works, but of course, we want to style it too. One of the annoyances of these share buttons is that each vendor has decided to vary their button’s size by 1 or 2 pixels.

The following CSS makes a good template to work from. I’ve measured the sizes so each button is 10px from the next, with a 10px padding around the whole thing.

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

/**
 * Floating Social Buttons
 */
 
#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
 
	width: 55px;
	padding: 10px 5px;
	text-align: center;
 
	background-color: #fff;
 
	border: 5px solid rgba(180, 180, 180, .7);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 
	display: none;
}
 
.sf-twitter {
	height: 62px;
	margin-bottom: 10px;
}
 
.sf-facebook {
	height: 60px;
	margin-bottom: 10px;
}
 
.sf-plusone {
	height: 60px;
}

To tweak the style, change the background-color and border parts of #social-float (Right now, I’ve just used some CSS3 to quickly make a rounded, semi-transparent border).

Important: Don’t worry that it’s not showing up for you. The display: none; in there is hiding it. Read on!

Hide on Smaller Browsers

We don’t want to show the box on smaller browsers because it will obstruct the post content. To solve that, let’s use jQuery to check the browser size, and show the box only if it is wide enough.

First up, make sure you’ve loaded jQuery by adding the following to your functions.php file, or to header.php (Before the wp_head(); tag).

1

<?php wp_enqueue_script('jquery'); ?>

Now, go back to footer.php and after our button HTML, paste the following:

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

<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Show social voter only if the browser is wide enough.
		if( $(window).width() >= 1030 )
			$('#social-float').show();
 
		// Update when user resizes browser.
		$(window).resize(function() {
			if( $(window).width() < 1030 ) {
				$('#social-float').hide();
			} else {
				$('#social-float').show();
			}
		});
	});
</script>

Lines 4 and 5 run when the page is first loaded. They check the width, and show the box if it is wide enough.

Lines 8 is an event handler that runs when the user resizes their browser. When they do, we run the exact same check as above, and either hide/show the box as appropriate.

I’ve set the width to 1030px, which is 980px (A common page width), plus 150px (The width of our box) times 2 (The page is centered, so 150px on either side). Feel free to change this however you like, but make sure you update it in both locations.

Now save your code and check it out on site. With everything in place now, feel free to tweak the style and you’re good to go.

If you hit any issues, let me know in the comments! Good luck!

This article will teach you how to add validation to your WordPress comment forms, using jQuery.

With validation, users can submit their comment and instantly see if they’ve hit an issue. There is no need to submit the page and get WordPress’ default “There is a problem…” page. Instead, errors are displayed inline instantly.

In our example, we will build a plugin which you can drop into any theme and will work instantly.

Just like last week, you can see the finished product in action on the demo site. And you can download the completed files here.

Organize Your Files

Download the bassistance.de form validation plugin for jQuery.

This plugin contains the file jquery.validate.min.js, which will be taking care of all our validation worries for us. All we have to do is tell it how and when to work.

I’ve called the plugin “pbd-validate-comments”, though you’re welcome to name it however you like. You should have a .php file with the same name, and then a “css” and “js” folder. Create a style.css file in the css folder, and place the jquery.validate.min.js file from above in the js folder.

The end result is like this:

With your files in place, open up the pbd-validate-comments.php file and start with the essential plugin info:

1
2
3
4
5
6
7
8
9
10

<?php
/**
 * Plugin Name: PBD Validate Comments
 * Plugin URI: http://www.problogdesign.com/
 * Description: Validate comments instantly with jQuery. Uses <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Form Validation</a> plugin by Jörn Zaefferer.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * License: GPLv2
 */

Load Your Scripts

Now, let’s begin. The process today is quite simple, and will have 3 steps.

1. Load all of our scripts.
2. Initialize the validation on our form, and tell it the rules to use.
3. Style the error messages.

Let’s start with loading the scripts. Still in pbd-validate-comments.php, 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

/**
 * Add jQuery Validation script on posts.
 */
function pbd_vc_scripts() {
	if(is_single() ) {
		wp_enqueue_script(
			'jquery-validate',
			plugin_dir_url( __FILE__ ) . '/js/jquery.validate.min.js',
			array('jquery'),
			'1.8.1',
			true
		);
 
		wp_enqueue_style(
			'jquery-validate',
			plugin_dir_url( __FILE__ ) . '/css/style.css',
			array(),
			'1.0'
		);
	}
}
add_action('template_redirect', 'pbd_vc_scripts');

The important thing here is the wp_enqueue_script() section. This is what tells WordPress to load in our validation script. Similarly, wp_enqueue_style() is used to load our stylesheet.

We have then wrapped that up in an is_single() condition, so that our script is only loaded on post pages. And in order for that to work, we have put the whole thing in a hook (Attached to ‘template_redirect’).

The end result is that our script is now loaded on every post page, but not on the homepage/categories etc.

Activate the Script

Congrats, you’ve loaded in the scripts now. The next step is to initialize the validator and give it our rules.

One way to give the rules is to use CSS classes, e.g. class=”required” would mean the field is required.

However, with new themes using the comment_form() function, that gets more complicated. So instead, we will pass all of the rules via JavaScript.

Carry on in the PHP file, and paste the following:

1
2
3
4
5
6
7
8
9

/**
 * Initiate the script.
 * Calls the validation options on the comment form.
 */
function pbd_vc_init() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
 
			$('#commentform').validate({

Here, we open a new function (Which we will hook into place on the page in a minute), and start writing some JavaScript.

The ‘#commentform‘ needs to be a jQuery selector for your form. In most cases, you can leave this as it is because 99% of WordPress themes will be using that ID on their comment forms.

We are now going to pass in an array of options. The first will be an array of rules. You can see the full list of validation rules available here.

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

rules: {
	author: {
		required: true,
		minlength: 2
	},
 
	email: {
		required: true,
		email: true
	},
 
	url: {
		url: true
	},
 
	comment: {
		required: true,
		minlength: 20
	}
},

We have simply taken rules from the available list, and applied them to the various fields (author, email etc. are the “name” values for the comment form fields, and will be in every WordPress theme).

These rules translate to:

• Author Field – Must be filled in, with a minimum of 2 characters.
• Email Field – Must be filled in, with a valid email address.
• URL Field – Not required, but if something is entered, it must be a valid URL.
• Comment Field – Required, and must be at least 20 characters long.

How simple was that?

We could leave it there, but let’s pass in one more option; a custom error message for each field.

1
2
3
4
5
6

messages: {
	author: "Please enter a valid name.",
	email: "Please enter a valid email address.",
	url: "Please use a valid website address.",
	comment: "Message must be at least 20 characters."
}

Again, this is quite self-explanatory. The messages entered will appear when there is an error in the corresponding field.

Now, just close up the JavaScript functions and the script tag, and then hook the PHP function into place.

1
2
3
4
5
6
7

			});
		});
	</script>
<?php }
add_action('wp_footer', 'pbd_vc_init', 999);
 
?>

And that’s the end of our work, so we’ve closed up the PHP file!

Last of All, Some Styles

If you save and activate the plugin now, it all works perfectly well. However, a little CSS for the error messages won’t hurt.

Open the style.css file, and paste the following:

1
2
3
4
5

label.error {
	display: block;
	background: #ffd2d2;
	padding: 0 10px;
}

And that’s it! Save your plugin, activate it in the dashboard and go try posting some phony comments. You should see instant errors pointing out any issues.

The jQuery validation script is hugely powerful and suitable for just about any type of form. Once you know how to use it in WordPress as we have done here, you’ll find you can use it anywhere!

And don’t forget, if you don’t want to put the files together yourself, you can grab the completed download here.

Please let me know if you enjoyed this post! If you’d like to see more jQuery guides on the site, leave a comment!

The idea behind this post was a collaboration between myself, Michael Martin, and Seth Bryant, thanks Seth!

Today, we’re going to replace the standard “Older Posts” links on your blog. Our plugin will create a button to instantly load the next page of posts, without reloading the page (Similar to what Twitter used to do at the bottom of profiles)

Click here to load the demo site and see the final project in action.

You can also download the completed files as a plugin here (Just upload and activate it).

Now, let’s get started. Our plugin is going to have several features:

• Multiple clicks – First clicks will load page 2′s posts, second will load page 3 etc.)
• Check for posts first – If there are no more posts that can be loaded, we’ll tell the user.
• Degrade gracefully – If a visitor doesn’t use JavaScript, we won’t change the site at all.

Plugin Structure

There will be 3 files in this plugin (One PHP, one CSS, one JS). For good practice, we’ll keep the CSS and JavaScript in their own folders.

And I’ve called the plugin “pbd-ajax-load-posts”.

Now let’s start by putting the necessities at the top of our pbd-ajax-load-posts.php file:

1
2
3
4
5
6
7
8
9
10

<?php
/**
 * Plugin Name: PBD AJAX Load Posts
 * Plugin URI: http://www.problogdesign.com/
 * Description: Load the next page of posts with AJAX.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * License: GPLv2
 */

All good so far? Cool, time to get started for real.

Loading Files and Passing Values

The first thing we need to do is ensure that our JavaScript and CSS files are loaded on the right pages. Stay in the pbd-ajax-load-posts.php file and paste this:

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

 /**
  * Initialization. Add our script if needed on this page.
  */
 function pbd_alp_init() {
 	global $wp_query;
 
 	// Add code to index pages.
 	if( !is_singular() ) {	
 		// Queue JS and CSS
 		wp_enqueue_script(
 			'pbd-alp-load-posts',
 			plugin_dir_url( __FILE__ ) . 'js/load-posts.js',
 			array('jquery'),
 			'1.0',
 			true
 		);
 
 		wp_enqueue_style(
 			'pbd-alp-style',
 			plugin_dir_url( __FILE__ ) . 'css/style.css',
 			false,
 			'1.0',
 			'all'
 		);

The code above begins by creating a new function, pbd_alp_init() (alp = AJAX Load Posts), which we will then hook into place later on.

You’ll notice that we also call the global $wp_query variable, which we’ll use in the next step.

The important parts begin on line 8. The first statement is a conditional statement. It means that on any page that isn’t an individual post or Page, we are going to run this code.

This is a broad brush to make sure our code runs on the homepage, tag pages, search pages etc. You can adapt it to be more specific, e.g. if you don’t want the code included on your homepage.

We then use wp_enqueue_script() and wp_enqueue_style() to tell WordPress about our two files (As well as the fact that we will be using jQuery).

Now, we need to pass some values to our script, namely:

• The page number we’re on right now (Going to page 1 99% of the time, but let’s be sure).
• The total number of pages (So we know when we’ve hit the limit).
• The link to the next page (e.g. site.com/tag/example/page/2/)

We will use the wp_localize_script() function to calculate each of these values in PHP, and then print them into the webpage so that our script can access them later (Hat tip to Professional WordPress Plugin Development for introducing me to this great function!)

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

// What page are we on? And what is the pages limit?
$max = $wp_query->max_num_pages;
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
 
// Add some parameters for the JS.
wp_localize_script(
	'pbd-alp-load-posts',
	'pbd_alp',
	array(
		'startPage' => $paged,
		'maxPages' => $max,
		'nextLink' => next_posts($max, false)
	)
);

We begin by working out the first 2 values. $max is the maximum number of pages the current query can return (e.g. if each page shows 5 posts and there are 12 posts in the current category, then max will be 3).

The $paged variable will store the page we are currently on (The whole point of our plugin is to ensure people never load a second page, but it doesn’t hurt to make sure).

If you skip down to line 12, you’ll see where I’ve worked out the 3rd value (The link to the next page). next_posts() is a built-in WordPress function that will return the URL we need.

The wp_localize_script() function is great because it makes it easy to pass values from PHP to JavaScript. The first value, ‘pbd-alp-load-posts’ must match the first value in the wp_enqueue_script() call.

The second value, ‘pbd_alp’, is the name we will use in our JavaScript later on.

Finally, we send over an array of the data. If you view the HTML source of your webpage later, you’ll see something like this right before your JavaScript file is loaded:

1
2
3
4
5
6
7
8
9

<script type='text/javascript'>
/* <![CDATA[ */
var pbd_alp = {
	startPage: "1",
	maxPages: "6",
	nextLink: "http://www.problogdesign.com/demo/ajax-load-posts/page/2/"
};
/* ]]> */
</script>

Now, we just need to close up our if statement, our pbd_alp_init() function, and then hook it all into place.

1
2
3

 	}
 }
 add_action('template_redirect', 'pbd_alp_init');

We use the template_redirect hook because with the init hook, the $wp_query variable won’t be set yet.

jQuery – The Heart of our Plugin

We have now loaded our scripts and passed the values we need. It’s time to get to the real meat of our tutorial.

Open the load-posts.js file. The first thing we do is access the 3 variables we passed in with our PHP function.

1
2
3
4
5
6
7
8
9
10

jQuery(document).ready(function($) {
 
	// The number of the next page to load (/page/x/).
	var pageNum = parseInt(pbd_alp.startPage) + 1;
 
	// The maximum number of pages the current query can return.
	var max = parseInt(pbd_alp.maxPages);
 
	// The link of the next page of posts.
	var nextLink = pbd_alp.nextLink;

The way to access our values is to use the format: pbd_alp.valueName (pbd_alp was the second value we entered in wp_localize_script(), remember?).

The important thing to remember is that our numbers have been sent over as strings, so we use JavaScript’s parseInt() function to convert them back to numbers.

With pageNum, we add one to the number because it is going to store the number of the next page to load (Not the current page).

Most themes already have navigation to move between pages, in the form of Older Posts/Newer Posts links. We want to replace that with our AJAX button, so our first step will be to remove those navigation links, and insert our button instead.

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

/**
 * Replace the traditional navigation with our own,
 * but only if there is at least one page of new posts to load.
 */
if(pageNum <= max) {
	// Insert the "More Posts" link.
	$('#content')
		.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
		.append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');
 
	// Remove the traditional navigation.
	$('.navigation').remove();
}

We start out with a conditional check. Remember that pageNum is the number of the next page, so if it is greater than max, there are no more pages to load. In that case, we don’t want to add the button.

If there is new content to load though, then we look for the #content div, and add two things to the end of it. The first is an empty div, which we will later use to insert our posts into.

The second is the button itself (A regular HTML link), wrapped up in a paragraph.

Finally, we look for the .navigation div and remove it. If your theme uses a different class for the navigation buttons, you will need to change that (.navigation is the default that the 2010 theme uses). The same thing applies to the #content div too!

The result of the code above is that our button is now in place, though it won’t do anything yet.

And because we did it all with JavaScript, we know our plugin degrades gracefully (Because if the JavaScript isn’t loaded, no changes will be made to the page).

Now, let’s take care of what happens when the user actually clicks the button.

1
2
3
4
5
6
7
8
9
10

/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {
 
	// Are there more posts to load?
	if(pageNum <= max) {
 
		// Show that we're working.
		$(this).text('Loading posts...');

The first line of code is a jQuery event handler, which runs when a user clicks the button.

On line 7, we run the same check as before. This is important because our script would load in a 404 error message if there were no more posts. Definitely not what we want!

Line 10 updates the text on our button to read “Loading posts…” This is good practice because users will get an instant reaction when they click the button.

The next step is to make the AJAX call. Quite a lot happens here, so copy and paste the following into your script and I’ll walk through it all afterwards.

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

$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
	function() {
		// Update page number and nextLink.
		pageNum++;
		nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
 
		// Add a new placeholder, for when user clicks again.
		$('#pbd-alp-load-posts')
			.before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
 
		// Update the button message.
		if(pageNum <= max) {
			$('#pbd-alp-load-posts a').text('Load More Posts');
		} else {
			$('#pbd-alp-load-posts a').text('No more posts to load.');
		}
	}
);

The first line is the most important. We use a jQuery selector to select our placeholder div. The reason we have added the pageNum number to the end of the class name is so that if the user clicks the button again, we’ll add the new posts to a new placeholder (Not overwrite the old one).

The .load() function loads the URL we pass (Remember that nextLink is the URL for the next page), and because we have added .post to the end, it will only copy over the .post divs that it finds (Not the whole page!)

On line 2, we start a new function which will run when the AJAX call completes. The first thing it does is update our values for the next time the button is clicked.

pageNum is increased by one (To point to the new next page), and nextLink is updated using a regular expression. This searches the URL for /page/2/ (Or any number), and replaces the number portion with the new next page number.

On line 8, we add a new placeholder div. This will be used the next time the button is clicked.

Finally, on line 12, we update the text on the button again. If there are more posts that can be loaded, we revert back to the original text. If there aren’t, then we’ll update with a message saying so.

Now, we just need to round things off:

1
2
3
4
5
6
7

		} else {
			$('#pbd-alp-load-posts a').append('.');
		}	
 
		return false;
	});
});

This code begins by closing off the first if-statement (Are there more pages to load?). If there aren’t, it adds a ‘.’ to the button’s message. This is simply to give some sort of visual response to the user when the button is clicked (Look at the screenshot below to see what happens).

And last of all, we use return false; to prevent the link from the button itself loading.

Style It

Your button is now fully working! The only thing remaining is to style it. You can do this however you like with CSS. I’ve used CSS3 to round off the corners, and add a gradient and drop shadow.

You can look these up more online (Or post in the comments if you’d like to see some CSS3 tuts here), but a big thanks is due to CSS Tricks for making the cross-browser gradient code easy.

Add this to your css/style.css file:

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

#pbd-alp-load-posts a:link, #pbd-alp-load-posts a:visited {
	display: block;
	text-align: center;
	padding: 4px 0;
	color: #444;
	text-decoration: none;
 
	/** Rounded Corners **/
	-moz-border-radius: 8px;
	border-radius: 8px;
 
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #999;
	-webkit-box-shadow: 1px 1px 1px #999;
	box-shadow: 1px 1px 1px #999;
 
	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f1f1f1;
 
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #e4e3e3, #f1f1f1);
 
	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e4e3e3));
 
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #e4e3e3);
 
	/* Opera 11.10+ */ background: -o-linear-gradient(#f1f1f1, #e4e3e3);
}
 
#pbd-alp-load-posts a:hover, #pbd-alp-load-posts a:active {
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #bbb;
	-webkit-box-shadow: 1px 1px 1px #bbb;
	box-shadow: 1px 1px 1px #bbb;
 
	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f5f5f5;
 
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f5f5f5);
 
	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eaeaea));
 
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #eaeaea);
 
	/* Opera 11.10+ */ background: -o-linear-gradient(#f5f5f5, #eaeaea);
}

And that’s you done! Just save your work and activate the plugin.

If you have any issues, check that your theme uses the #content and .navigation divs in the way that we assumed. Most themes will, but not all. If yours is different, update those values in the JavaScript file.

Let me know what you thought of the effect! And don’t forget you can grab the completed plugin here.

And if you have any feedback on the tutorial, I’d love to hear it! Too long? Or more explanation needed? (The demo site exists now purely because some of you asked for it in previous tutorials, so thank you!)

WordPress short codes are everywhere: in practically every theme and many, many plugins. They are extremely useful and provide huge amounts of extra functionality. With all of their greatness, however, there is one major problem with them: they are not very user friendly, particularly for users who are not familiar with programming, especially when a short code accepts more than one parameter. So, in order to help the non-programmer users, we need a new solution.

The ideal solution is one that provides an interface for the user to input all of their short code options without having to enter any “code”. This is a pretty common technique used by a lot of developers, but until now, there has never been a good tutorial on it, so we are going to fix that.

In this tutorial I’m going to show you how to add short code buttons to the tinyMCE editor that, when clicked, bring up a modal window with all of the options for your short code.

Through the steps in this tutorial, we will be writing a complete WordPress plugin that will provide a small collection of CSS 3 buttons available for use through short codes. All of the options for the buttons, size, color, style, url, text, etc, will be available through the modal window.

If you look at the image at the top of this post, you can see exactly how that modal window will look (Much easier than remembering all of the short code’s option names yourself!)

Prerequisites

In order to follow this tutorial, one of the first things you will need to know is how to create short codes. If you are not yet familiar with the process, please follow my tutorial Working with WordPress Short Codes.

Getting Started

The first thing we need to do is setup our plugin structure. Please use the following file structure as a reference.

To make things easier, I would recommend that you go ahead and create each of the files according to the image. I will reference the filename we’re using in each step.

Beginning the Plugin

Just like every other WordPress plugin, we need to setup our plugin header in order to tell WordPress about our plugin. Place the following code into friendly-shortcode-buttons.php.

1
2
3
4
5
6
7
8
9
10
11

/*
Plugin Name: Friendly Short Code Buttons
Plugin URI: http://pippinsplugins.com/user-friendly-short-codes-plugin-example/
Description: Adds user-friendly short code buttons to your  WordPress site. This plugin is more of an example than anything, but does provide a few nice looking buttons
Version: 1.0
Author: Pippin Williamson
Author URI: http://pippinsplugins.com
*/
 
// plugin root folder
$fscb_base_dir = WP_PLUGIN_URL . '/' . str_replace(basename( __FILE__), "" ,plugin_basename(__FILE__));

Our plugin will now be available to WordPress. Note that I have also placed a variable called $fscb_base_dir. This is a variable that contains the file path to the root folder of our plugin. We will use this later to load CSS and JS scripts.

Setting Up the Short Code

Now that we have our plugin registered with WordPress, we need to setup our short code and its options. This is a very simple function that registers our short code with WordPress and sets up the HTML structure of our buttons. Place this code in friendly-shortcode-buttons.php:

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

// setup the shortcode for use
function friendly_button_shortcode( $atts, $content = null )
{
      extract( shortcode_atts( array(
        'color' => 'blue',
        'size' => 'medium',
        'style' => 'round',
        'align' => 'none',
        'text' => '',
        'url' => '',
      ), $atts ) );
 
      return '<div class="friendly_button friendly_button_' . $size . ' friendly_button_' . $color . ' friendly_button_' . $style . ' friendly_button_' . $align . '"><a href="' . $url . '">' . $text . $content . '</a></div>';
 
}
add_shortcode('button', 'friendly_button_shortcode');

The return statement of this function may look a little complex, but all I have done is make it so that a DIV with a class name for each option is displayed. So there is a class for the size, the color, the style, etc. This will allow us to style each kind of button with CSS later on.

The Button CSS

Our button short code is now available in WordPress, so let’s go ahead and add all of the necessary CSS. We will use wp_enqueue_style() to load our CSS into the site header. Again, place this in friendly-shortcode-buttons.php:

1
2
3
4
5
6
7
8

// load button css
function friendly_buttons_css() 
{
        // the path to our root plugin folder
	global $fscb_base_dir;
	wp_enqueue_style('friendly-buttons', $fscb_base_dir . 'includes/css/friendly_buttons.css');
}
add_action('wp_print_styles', 'friendly_buttons_css');

Remember the GLOBAL variable we defined earlier with the path to the root plugin folder? We’re using that here to obtain the correct path to our CSS file, which we will create now. As indicated in the file structure diagram above, the CSS file is called friendly_buttons.css as is located inside of includes/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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

.friendly_button a{
	border:1px solid #000; 
	color:#fff; 
	font-family:arial; 
	font-weight:bold; 
	padding:8px 24px; 
	text-decoration:none; 
	text-shadow:1px 1px 0px #000;
	display:block; 
	-moz-border-radius:6px; 
	-webkit-border-radius:6px; 
	border-radius:6px;
	margin: 0 10px 10px 0; 
}
.friendly_button a:active{position:relative; top:1px}
 
/******************************************************
* sizes
******************************************************/
 
.friendly_button_large a{font-size:16px !important;}
.friendly_button_small a{font-size: 11px !important; padding: 6px 16px;}
.friendly_button_medium a{font-size: 12px; padding: 8px 22px; }
 
/******************************************************
* sizes
******************************************************/
 
.friendly_button_left {float: left;}
.friendly_button_left a{margin: 0 10px 10px 0;}
.friendly_button_right {float: right;}
.friendly_button_right a{margin: 0 0 10px 10px;}
.friendly_button_none {float: none; display: inline-block; zoom: 1; *display: inline; }
 
/******************************************************
* styles
******************************************************/
 
.friendly_button_round a {
	-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px
}
.friendly_button_less_round a {
	-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px
}
.friendly_button_square a {
	-moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px
}
 
/******************************************************
* colors
******************************************************/
 
/*black button*/
.friendly_button_gray a{
	-moz-box-shadow:inset 0px 1px 0px 0px #fff; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff; 
	box-shadow:inset 0px 1px 0px 0px #fff; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) ); 
	background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf'); 
	background-color:#ededed; 
	border:1px solid #dcdcdc; 
	color: #777;
	text-shadow:1px 1px 0px #fff;
}
 
.friendly_button_gray a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) ); 
	background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed'); 
	background-color:#dfdfdf
}
 
/*black button*/
.friendly_button_blue a{
	-moz-box-shadow:inset 0px 1px 0px 0px #bdddff; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #bdddff; 
	box-shadow:inset 0px 1px 0px 0px #bdddff; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#7db8ff),color-stop(1,#2c80e8) ); 
	background:-moz-linear-gradient( center top,#7db8ff 5%,#2c80e8 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db8ff',endColorstr='#2c80e8'); 
	background-color:#7db8ff; 
	border:1px solid #047fd1; 
	color:#fff; 
}
 
.friendly_button_blue a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#2c80e8),color-stop(1,#7db8ff) ); 
	background:-moz-linear-gradient( center top,#2c80e8 5%,#7db8ff 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c80e8',endColorstr='#7db8ff'); 
	background-color:#2c80e8
}
 
/*black button*/
.friendly_button_red a{
	-moz-box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f55858),color-stop(1,#ba1c1c) ); 
	background:-moz-linear-gradient( center top,#f55858 5%,#ba1c1c 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f55858',endColorstr='#ba1c1c'); 
	background-color:#f55858; 
	border:1px solid #8a0a0a; 
}
 
.friendly_button_red a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ba1c1c),color-stop(1,#f55858) ); 
	background:-moz-linear-gradient( center top,#ba1c1c 5%,#f55858 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba1c1c',endColorstr='#f55858'); 
	background-color:#ba1c1c
}
 
/*black button*/
.friendly_button_green a{
	-moz-box-shadow:inset 0px 1px 0px 0px #39de10; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #39de10; 
	box-shadow:inset 0px 1px 0px 0px #39de10; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#13c20a),color-stop(1,#05ad19) ); 
	background:-moz-linear-gradient( center top,#13c20a 5%,#05ad19 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#13c20a',endColorstr='#05ad19'); 
	background-color:#13c20a; 
	border:1px solid #169124; 
}
 
.friendly_button_green a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#05ad19),color-stop(1,#13c20a) ); 
	background:-moz-linear-gradient( center top,#05ad19 5%,#13c20a 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#05ad19',endColorstr='#13c20a'); 
	background-color:#05ad19
}
 
/*black button*/
.friendly_button_black a{
	-moz-box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#525252),color-stop(1,#000) ); 
	background:-moz-linear-gradient( center top,#525252 5%,#000 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#525252',endColorstr='#000'); 
	background-color:#525252; 
}
.friendly_button_black a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#000),color-stop(1,#525252) ); 
	background:-moz-linear-gradient( center top,#000 5%,#525252 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#525252'); 
	background-color:#000
}

Note, I am not going to explain which parts of the CSS do what. That is not the purpose of this tutorial. Suffice it to say that there are separate CSS styles for each color, size and type of button, as well as a couple other items, such as alignment. The code is well laid out and commented, so it should not be difficult to follow.

Excellent. Now that we have our button short code created and our CSS loaded, we will now be able to create buttons that look like this:

Setting Up the TinyMCE Button

It is now time to begin the really fun part of this tutorial: adding a button to our tinyMCE editor that allows us to enter the short code into our post content. We are first going to register a “plugin” with tinyMCE (this is our button), and then we will connect that button to a modal popup window. So to begin, we need to place three functions into friendly-shortcode-buttons.php:

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

// registers the buttons for use
function register_friendly_buttons($buttons) {
	// inserts a separator between existing buttons and our new one
	// "friendly_button" is the ID of our button
	array_push($buttons, "|", "friendly_button");
	return $buttons;
}
 
// filters the tinyMCE buttons and adds our custom buttons
function friendly_shortcode_buttons() {
	// Don't bother doing this stuff if the current user lacks permissions
	if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
		return;
 
	// Add only in Rich Editor mode
	if ( get_user_option('rich_editing') == 'true') {
		// filter the tinyMCE buttons and add our own
		add_filter("mce_external_plugins", "add_friendly_tinymce_plugin");
		add_filter('mce_buttons', 'register_friendly_buttons');
	}
}
// init process for button control
add_action('init', 'friendly_shortcode_buttons');
 
// add the button to the tinyMCE bar
function add_friendly_tinymce_plugin($plugin_array) {
	global $fscb_base_dir;
	$plugin_array['friendly_button'] = $fscb_base_dir . 'friendly-shortcode-buttons.js';
	return $plugin_array;
}

The first of these functions registers our button with tinyMCE. It places a separator at the end of the current buttons, then our custom button following that.

The second function uses an add_filter hook to make our custom button actually display. It places the button created in the first function in the tinyMCE buttons.

And the third function connects our button to a javascript file. This is the file that controls the behavior of our button.

Important! In both the first and third function I have used friendly_button as an ID for the button. It’s very important that this never changes. I will use friendly_button a couple more times in this tutorial and it must be the same throughout.

Our TinyMCE Button’s Javascript

It is now time to create the javascript file that will control the behavior of the tinyMCE button that we added above.

Place this code into friendly-shortcode-buttons.js, which, remember the diagram, resides in the root plugin folder.

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

(function() {
	tinymce.create('tinymce.plugins.buttonPlugin', {
		init : function(ed, url) {
			// Register commands
			ed.addCommand('mcebutton', function() {
				ed.windowManager.open({
					file : url + '/button_popup.php', // file that contains HTML for our modal window
					width : 220 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
					height : 240 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
					inline : 1
				}, {
					plugin_url : url
				});
			});
 
			// Register buttons
			ed.addButton('friendly_button', {title : 'Insert Button', cmd : 'mcebutton', image: url + '/includes/images/icon.gif' });
		},
 
		getInfo : function() {
			return {
				longname : 'Insert Button',
				author : 'Pippin Williamson',
				authorurl : 'http://pippinsplugins.com',
				infourl : 'http://pippinsplugins.com',
				version : tinymce.majorVersion + "." + tinymce.minorVersion
			};
		}
	});
 
	// Register plugin
	// first parameter is the button ID and must match ID elsewhere
	// second parameter must match the first parameter of the tinymce.create() function above
	tinymce.PluginManager.add('friendly_button', tinymce.plugins.buttonPlugin);
 
})();

This code does a couple of things: first, it registers a command that runs when our button is clicked. This command opens a modal window that contains the contents of the button_popup.php file. We have also set the dimensions of our window to be 220×240 px. The second thing this code does is apply an image to our button, for aesthetics. And thirdly, this code sets up the meta data of our tinyMCE plugin button. Not overly important, but nice to have.

Recall above how I mentioned the ID of the button being friendly_button? Line 17 and 34 both use that same ID. It MUST not change, otherwise your button will not work.

Okay, we now have our button and it should look like this (though your image may be different):

If you click the button now, a window will pop up, but it will display an “Object not found!” error. So we need to create the window contents now.

The Modal Popup

The contents of the modal window are nothing more than a PHP (or HTML) file. The file will have all of the necessary components of any other HTML page: HTML, HEAD, TITLE, and BODY tags. So let’s begin our file. The first part is the HEAD section. Place the following code into button_popup.php, which should be located in the root of your plugin folder.

1
2
3
4
5
6
7
8
9
10
11

<?php
// this file contains the contents of the popup window
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert Button</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../wp-includes/js/tinymce/tiny_mce_popup.js"></script>
<style type="text/css" src="../../wp-includes/js/tinymce/themes/advanced/skins/wp_theme/dialog.css"></style>
<link rel="stylesheet" href="includes/css/friendly_buttons_tinymce.css" />