Pro Blog Design

Lessons Learned Running a Small Business in 2011

Michael Martin — Sun, 01 Jan 2012 20:23:22 +0000

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.

How to Create WordPress Posts in Themes/Plugins

Michael Martin — Mon, 08 Aug 2011 16:00:52 +0000

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:

$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:

$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.

$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:

$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.

$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”.

$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!

How to Make a Floating Share Box

Michael Martin — Tue, 12 Jul 2011 16:00:34 +0000

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:


// 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:

<div id="social-float">
	<div class="sf-twitter">
		
	</div>
 
	<div class="sf-facebook">
		
	</div>
 
	<div class="sf-plusone">
		
	</div>
</div>

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=”” data-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:
- 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=””

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.

<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="" data-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&href=&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
 
	<div class="sf-plusone">
		
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
		
		size="tall" href=""></g:plusone>
	</div>
</div>

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).

#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.

/**
 * 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	wp_enqueue_script('jquery'); ?>

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

<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!

Validate Forms in WordPress with jQuery

Michael Martin — Wed, 22 Jun 2011 16:00:35 +0000

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:


/**
 * Plugin Name: PBD Validate Comments
 * Plugin URI: http://www.problogdesign.com/
 * Description: Validate comments instantly with jQuery. Uses jQuery Form Validation 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.

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

Let’s start with loading the scripts. Still in pbd-validate-comments.php, paste the following:

/**
 * 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:

/**
 * 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.

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.

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.

			});
		});
	
 }
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:

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!

Load Next WordPress Posts With AJAX

Michael Martin — Wed, 15 Jun 2011 16:00:21 +0000

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:


/**
 * 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:

 /**
  * 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!)

// 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:

<script type='text/javascript'>
/* 
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.

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.

/**
 * 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('+ pageNum +'">
')
		.append('Load More Posts
');
 
	// 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.

/**
 * 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.

$('.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('+ pageNum +'">
')
 
		// 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:

		} 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:

#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(,  [, ]?,  [, ]? [, ]*) */
	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(,  [, ]?,  [, ]? [, ]*) */
	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!)

User Friendly Short Codes with TinyMCE

Pippin — Wed, 01 Jun 2011 16:00:43 +0000

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.

/*
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:

// 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 '. $size . ' friendly_button_' . $color . ' friendly_button_' . $style . ' friendly_button_' . $align . '">. $url . '">' . $text . $content . '
';
 
}
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:

// 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/.

.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:

// 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.

(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.


// this file contains the contents of the popup window
?>

<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" />

Aside from the normal HTML file stuff, such as declaring a DOCTYPE, I have also placed SCRIPT, STYLE, and LINK tags to load the necessary scripts. We need to load jQuery, the tinyMCE Pop Up file, a CSS file for tinyMCE, and lastly our custom CSS file, which will control the styling for the window contents.

Note that I have not used wp_enqueue_script() and wp_enqueue_style() to load our scripts here. This is because those will not work in this case. With a bit of tweaking, you could probably make them work, but for this tutorial we will not worry about that. Also note that the first three files are all located inside of the WordPress install and are not part of this plugin. We’re just making use of them.

Alright, we have two more parts to our button_popup.php file. One is the javascript that will take care of inserting the short code and its selected attributes into the post editor, and the second is the HTML form code for our short code attributes. Let’s do the javascript first.

<script type="text/javascript">
 
var ButtonDialog = {
	local_ed : 'ed',
	init : function(ed) {
		ButtonDialog.local_ed = ed;
		tinyMCEPopup.resizeToInnerSize();
	},
	insert : function insertButton(ed) {
 
		// Try and remove existing style / blockquote
		tinyMCEPopup.execCommand('mceRemoveNode', false, null);
 
		// set up variables to contain our input values
		var url = jQuery('#button-dialog input#button-url').val();
		var text = jQuery('#button-dialog input#button-text').val();
		var size = jQuery('#button-dialog select#button-size').val();
		var color = jQuery('#button-dialog select#button-color').val();		 
		var style = jQuery('#button-dialog select#button-style').val();		 
		var align = jQuery('#button-dialog select#button-align').val();		 
 
		var output = '';
 
		// setup the output of our shortcode
		output = '[button ';
			output += 'size=' + size + ' ';
			output += 'style=' + style + ' ';
			output += 'color=' + color + ' ';
			output += 'align=' + align;
 
			// only insert if the url field is not blank
			if(url)
				output += ' url=' + url;
		// check to see if the TEXT field is blank
		if(text) {	
			output += ']'+ text + '[/button]';
		}
		// if it is blank, use the selected text, if present
		else {
			output += ']'+ButtonDialog.local_ed.selection.getContent() + '[/button]';
		}
		tinyMCEPopup.execCommand('mceReplaceContent', false, output);
 
		// Return
		tinyMCEPopup.close();
	}
};
tinyMCEPopup.onInit.add(ButtonDialog.init, ButtonDialog);

The important things to know about this code, so that you can modify it for your own uses, are the var declarations and the output string.

Starting at line 15, we have a variable declared for each attribute of our short code: url, text, size, color, style, align. Each of these variables contain the value (using jQuery’s .val() function) of their respective form field, which we will be adding shortly.

Then, starting at line 22, we setup the output string. This variable will contain the final short code to be inserted into the editor. We start by adding [button to it. This is the beginning of our short code. Then we add each attribute so that it ends up like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN

Next, we perform two IF checks. One to check if the URL field is empty, and if it’s not, we add the url=URL attribute. The second IF statement checks to see if the TEXT field is empty, and if it’s not, we close the short code, place the TEXT value inside of it, and then place the closing short code tag after that, so that the result looks like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN url=URL]TEXT[/button]

If the TEXT field is empty, then we insert whatever text was selected (if any) when the user clicked the insert button, which would result in and output like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN url=URL]SELECTED TEXT[/button]

That’s it for the jQuery, now we need to create the HTML form for our short code attributes.

The Short Code Attributes Form

This next piece of code will contain all of the form fields for our short code attributes. One of the important things to note is that the field IDs match those of the variables we declared for each attribute in our jQuery above. Also note that we are included in the closing HEAD, BODY, and HTML tags in this next snippet.

head>
<body>
	<div id="button-dialog">
		<form action="/" method="get" accept-charset="utf-8">
			<div>
				<label for="button-url">Button URLlabel>
				<input type="text" name="button-url" value="" id="button-url" />
			div>
			<div>
				<label for="button-text">Button Textlabel>
				<input type="text" name="button-text" value="" id="button-text" />
			div>
			<div>
				<label for="button-size">Sizelabel>
				<select name="button-size" id="button-size" size="1">
					<option value="small">Smalloption>
					<option value="medium" selected="selected">Mediumoption>
					<option value="large">Largeoption>
				select>
			div>
			<div>
				<label for="button-style">Stylelabel>
				<select name="button-style" id="button-style" size="1">
					<option value="less_round">Less Roundoption>
					<option value="round" selected="selected">Roundoption>
					<option value="square">Squareoption>
				select>
			div>
			<div>
				<label for="button-color">Colorlabel>
				<select name="button-color" id="button-color" size="1">
					<option value="gray" selected="selected">Grayoption>
					<option value="blue"=>Blueoption>
					<option value="red">Redoption>
					<option value="green">Greenoption>
					<option value="black">Blackoption>
				select>
			div>
			<div>
				<label for="button-align">Alignmentlabel>
				<select name="button-align" id="button-align" size="1">
					<option value="gray" selected="selected">Noneoption>
					<option value="left"=>Leftoption>
					<option value="right">Rightoption>
				select>
			div>
			<div>	
				<a href="javascript:ButtonDialog.insert(ButtonDialog.local_ed)" id="insert" style="display: block; line-height: 24px;">Inserta>
			div>
		form>
	div>
body>
html>

There’s really nothing complex about this code, it’s just a plain HTML form with either an INPUT or SELECT field for each of our short code options. First, notice that I have set default options by defining the VALUE attribute for input fields and SELECTED attribute for select fields. This helps to ensure that blank attributes are not inserted.

The next important thing about this code is at the bottom, where I have placed an anchor link with a bit of javascript for the HREF. This is vital to the modal window’s function. Without this HREF, the short code will not be inserted into the content.

The Modal Window CSS

Recall that a few steps back we loaded a CSS file called friendly_buttons_tinymce.css. This file controls the appearance of the HTML form fields we just created. But without any CSS in that file, it’s not doing very much ;) So here is the CSS:

#button-dialog { }
#button-dialog div{ padding: 5px 0; height: 20px;}
#button-dialog label { display: block; float: left; margin: 0 8px 0 0; width: 80px; }
#button-dialog select, #button-dialog input { display: block; float: right; width: 100px; padding: 3px 5px;}
#button-dialog select { width: 112px; }
#button-dialog #insert { display: block; line-height: 24px; text-align: center; margin: 10px 0 0 0; float: right;}

This file is placed in the includes/css folder, along with the CSS file for the actual buttons.

That’s it! We’re done! Now, when you click the button in the TinyMCE button bar, you should be presented with this:

And, assuming you have done everything correctly, your short code should appear in your post editor as soon as you click the “Insert” button.

Going Further

So what’s next? It is entirely up to you. With the code provided in this tutorial, you have everything you need to add awesome, easy to use short codes to your WordPress theme or plugin. I believe I have done pretty well explaining the code, and making it easy to modify, but if you have any trouble, of course ask in the comments!

Download the Complete Plugin

If doing all the manual coding yourself isn’t quite your thing, you’re in luck! I have put the code from this tutorial into a complete plugin that you can download for free at my website: Pippin’s Plugins.com

All New Design!

Michael Martin — Mon, 23 May 2011 15:36:42 +0000

Here’s something we’ve been working on for a while now; an all new design! If you’re reading this in an RSS reader, please click through and check it out!

I’d love to hear your thoughts! Nicer than the old version?

Goals for the Redesign

We had some very clear goals in mind with this redesign:

Greater emphasis on our design services.
Better integration of PliablePress links.
Improved “sectioning” (i.e. Services area vs. Blog area).

Our design services are the bread and butter of the site, but until now, they’ve always just been one page that gets a link on different corners of the blog. We wanted to show that the two are equal in importance, rather than the services being just a subset of the blog.

The new homepage is intended to be a big part of that, with a lot of real estate given to the Services and PliablePress, not just the blog. And it gave us the chance to give a proper overview of what the site does to first time visitors with our headline:

In terms of the actual design style; we obviously wanted to make the site look nicer, but that’s a little too general to be a real goal. So our goal was to do this in a way that brought more color into the site and gave a very unique and memorable look.

This choice of style is purely because we’re a design team, so our site needs to showcase what we can do in a creative way.

Typography

Improving some of our typography was one of the main reasons for the redesign (To be more specific, getting rid of the fonts I’d used on our post titles was the main reason I was dying to redesign). In the new site, I think we’ve done that well.

Our fonts are now powered by Typekit, so we had a great selection of stunning fonts at our disposal. We’re using the lovely FF Meta Web Pro for a number of titles around the site, and Sorts Mill Goudy for various buttons (And our post titles are in good old-faithful Arial).

Aside from font selection, another thing I’m happy to have improved is our bullet points. We use them a lot in articles, but they vary from only a few words per bullet, to a few lines. That made spacing the bullets out quite awkward.

But now, at last
we have a nicer design
that can handle either.

Yay!

Advertising

The last thing to mention is the 125 by 125 ads in the blog sidebar. A little over a year ago I took all ads off this blog (Largely to make room for PliablePress banners), but now that we’ve built the PliablePress links more effectively into the design, it leaves plenty of room in the sidebar for some tasteful square ads again.

So with that in mind, if you’d like to advertise here, you can do on our BuySellAds page. The current cost is $99 for 30 days (The ads aren’t on the homepage, so it will work out around 120,000 pageviews from 80,000 uniques). And as a little bonus, I’ll tweet/Facebook the first 4 advertisers who join us (Around 10,000 combined followers).

How Did We Do?

Naturally, everything I’ve said above is just what I hoped the redesign will do. The real test is how it actually does. I’d love to hear your thoughts on it. Anything we did well? Or poorly? Better or worse than our previous?

And if you spot any bugs, please do let me know!

PS – We’re still putting on the last layer of polish, so you may notice some area not quite complete yet (e.g. the portfolio listing just one site right now! ;) )

8 Tips to Secure a WordPress Site

Michael Martin — Tue, 10 May 2011 13:52:36 +0000

Security is one of those topics that comes up time and time again. You hear the advice, you know you should do it, but somehow, you never get around to it.

The tips in this post are designed to help make your WordPress installation safer and less likely to be hacked or spammed. If you’re short on time, just start at the top and work down. I’ve (roughly) ordered them so that the most important tweaks come first.

We also have a great giveaway at the end of this post, from Sucuri.net and Appsumo. Check it out for the chance to win free site security monitoring for a year!

1 – Set up Backups

This is quite simply a requirement. If you don’t have backups, you’re putting all your eggs in one basket and if something goes wrong, you lose everything. You’d have to be mad to risk this…

There are 3 rules for a good backup:

It can’t be saved on your server (Because then if your server dies, so do your backups).
It needs to be automatic (Because you aren’t going to remember to do this yourself every day.
You need to save a number of them (e.g. if you only save the past 5 backups, and then go on holiday for a week, your backups could all be useless by the time you get home).

Thankfully, they’re easy to do. Here are 3 possible ways:

Automatic Database Backups to Email
Automatic Amazon s3 Backups (For VPS users)
VaultPress – Paid service from Automattic to make handling backups simple.

2 – Always Update WordPress

A fairly common thought used to be that “upgrading WordPress might break my plugins.” And it was true; upgrading WordPress does carry that risk.

Not upgrading is worse; it guarantees that you’re at risk. Almost every WordPress release that comes out has security fixes as part of it. If you don’t update, then by definition, you’re leaving those holes open.

At the very least, you can always do minor updates, e.g. 3.0.1 to 3.0.2. They’re usually solely for security and bugs, so always update right away when one comes out.

As an aside; it’s possible to hide the version of WordPress you’re using by adding this to your functions.php file:

remove_action(‘wp_head’, ‘wp_generator’);

That’s no substitute for not upgrading though (And if they can load your login page, quite often the design is a dead giveaway anyway).

3 – Choose a Better Password

I know you hear this all the time, but crappy passwords are still the #1 reason for sites being hacked. How do you know if your password sucks?

Easy. Does it make any sense whatsoever as a word/phrase/name? If you can pronounce it at all, it’s probably bad. Your password should be a completely random, meaningless set of letters and numbers.

And the meaningless part is important there. Turning “michael” into “m1ch@el” doesn’t make it secure, it just means the hacker will get it on their second guess instead of their first.

4 – Check Your Site Regularly

You’d be surprised how often your site can be compromised without you even knowing. For instance, a lot of unwanted scripts will hide links all over your pages that only search engines can see.

It’s crucial that you catch on fast because once Google penalizes you, getting your rankings back is a slow, painful process.

One way to check is to use tools like Google Webmaster Tools to see what links Google is finding on your pages.

Another option is to use a tool like Sucuri.net (Which we’re giving away at the end of this post!), which will automatically scan your site regularly and alert you to any issues.

5 – Prevent Directory Indexing

Directory indexing means that if someone loads a folder on your site (e.g. wp-content/plugins/), they will get a list of all the files in it. This is bad because then a hacker can see everything on your server.

The fix is easy, open up your .htaccess file in a text editor and add the following to it:

#Prevent directory indexing
Options -Indexes

6 – Don’t use FTP

FTP is the most common way to add files to your server, but it isn’t secure. Someone can intercept your transmissions and even your access details. If your host allows you to access your server with SSH, then you can use SFTP instead.

Behind the scenes the two work completely differently, but using them is exactly the same. Odds are you can even continue to use your current FTP program with SFTP instead.

There is no reason not to make this swap, so contact your host and ask them if you can use SFTP (Most should allow it).

7 – Move and Update Your WP-Config.php File

Your wp-config.php file doesn’t have to be in your site’s root folder (Where it is by default). You can move it up a folder (So it is no longer in your public web folders at all).

And it’s as easy as it sounds. Just move the file up one folder, and WordPress will know to find it there.

Also, if you’ve had WordPress for a while now, you may not have all the security keys that you should in your wp-config.php file. These keys help encrypt your passwords and other details. All you need to do is go to https://api.wordpress.org/secret-key/1.1/salt/, copy the code it generates, and then paste it into the relevant section of your wp-config.php file.

8 – Take Care Downloading Plugins/Themes

There are a lot of places to find these items, but not all of them are trustworthy. Many sites get caught out because they installed a script with malicious code hidden in it.

Before downloading a theme or plugin, Google the site to see what people say about it. Lots of good reviews and links? Then go for it. Hard to find any? Then best leave it alone.

For plugins; there is usually little reason for a free plugin not to be hosted on WordPress.org, so always go there first (There are still exceptions though, e.g. cforms). Or alternatively, you can buy premium plugins from sites you trust (Again though, check the site first!).

Themes are trickier. The WordPress.org theme directory is great, but a lot of talented theme developers do choose to host their themes on their own sites (The auto-update feature of the plugin directory isn’t so necessary with themes).

If you do take a theme from a 3rd party website, I’d recommend scanning it right away (Spammy paid links in the footer of a theme are a very common find that Google may penalize you for).

And of course, you always have the option of paying for premium themes (Though do be careful of sites selling themes they did not make. You have no guarantee that they haven’t tampered with the theme first).

Win a Year’s Free Security Scanning

Appsumo and Sucuri.net have kindly offered us 2 one-year licenses to their WordPress scanning tools to give away. Sucuri will automatically scan your website and notify you if you if it spots any issues. Better than that, they can help resolve them too.

To enter the competition, just tweet the following:

Update (18th May) – The competition is now over and the winners have been chosen (@ezyblogger and @wpmodder). We’ll more again soon!

I’d like to win a year of Sucuri website monitoring & malware protection on @problogdesign via @appsumo http://bit.ly/j95q8Z

Until midnight tonight only, you can also buy Sucuri’s Business plan for only $85 for the year on Appsumo (Down from $289!). AppSumo gives you a guaranteed refund, no questions asked, so if you buy it and end up winning here, you can get your money back anyway!

Winner will be chosen and emailed this weekend, so good luck!

How to Get Facebook, Twitter, and RSS Counts {WP}

Michael Martin — Tue, 26 Apr 2011 22:51:22 +0000

You will have seen blogs showcase their Twitter, Facebook, and RSS counts with typography. With these numbers in plain text, you can style them into your website far more effectively than if you were to use the old-fashioned “chicklets.”

Twitter and Facebook make this easy, but you’ll need to take an extra step with FeedBurner first. Log in, then click Publicize > Awareness API, and click activate.

All set? Then let’s get started!

(And yes, I know we’re still using the chicklets here, but they’ll be gone for good in a few more days so just ignore that for now!)

Planning Our Script

When we get a number from one of these services, we will need to save it to our server.

This is so we can retrieve it from there without having to go out to the service again (Otherwise, the service might cut us off for requesting it too often, and it’s faster this way too).

Regular readers will know where this is heading; the transients API. Transients are WordPress’ way of letting you store information for a limited time (And refreshing it later when you need).

In previous posts where we have used transients though, we have merged the transient code with the code to get our information. This time, we are going to split the two up (So we don’t end up re-writing the transient code each time).

We will have one function that stores/retrieves a transient, and then a function for each service to get the number we need.

1 – Our Transient Function

For a full introduction to transients, you can read our Transients API tutorial. I’ll summarize what the following code is doing afterwards though, so don’t worry if you don’t follow it right away.

Open up your theme’s functions.php file, and paste the following between the opening and closing tags:

/**
 * Retrieve transient value.
 *
 * Returns a transient value, or updates that transient if it has expired.
 *
 * @param $name String. Name of the service, e.g. twitter
 * @return String. New transient value.
 */
function pbd_get_transient($name = 'twitter') {
	$transName = "pbd-transient-$name"; // Name of value in database.
	$cacheTime = 8; // Time in hours between updates.
 
	// Do we already have saved tweet data? If not, lets get it.
	if(false === ($trans = get_transient($transName) ) ) :
 
		// Make the name of the function that gets our transient value.
		$func = "pbd_get_$name";
		if(function_exists($func) ) {
			$trans = $func();
		} else {
			$trans = 'Function not found.';
		}
 
		// Did we get a positive number? If not, use the old value.
		if(!absint($trans) > 0)
			$trans = get_transient($transName . '-old');
 
		// Save our new transient, plus save it in the longer "backup" transient.
		set_transient($transName, $trans, 60 * 60 * $cacheTime);
		set_transient($transName.'-old', $trans, 3 * 60 * 60 * $cacheTime);
	endif;
 
	return $trans;
}

Now let’s break down what this is doing:

The pbd_get_transient() expects 1 parameter, the name which makes our transient and “get” function names (In our case, ‘twitter’, ‘facebook’, or ‘rss’, though you could use it for anything else as well).
We set a cache time (8 hours), and on line 14, we check if a value is already saved. If it is, we just return it.
Line 17 is where it gets interesting. We take the name that was passed to the function, and build a function name from it, e.g. ‘twitter’ becomes ‘pbd_get_twitter’. If the function pbd_get_twitter() exists, we will then call it and save the value it gives (Lines 18 and 19).
On line 25, we check the value we have. It should be a positive number. If it isn’t, odds are that the service didn’t respond to us, so we will use the value we saved the last time.
On line 29, we save the new transient value, and save it again on line 30 with a longer time limit (So we can use it as a backup if we need to).

And that’s our caching taken care of. We can now re-use this same function for each of our services. Much better, isn’t it?

2 – Get the Numbers

The next step is to go to each service and get the value we want. Thankfully, they’ve all made it very easy with their APIs.

Let’s start with Facebook, add the following to your functions.php file:

/**
 * Get Facebook Page Fan Count.
 */
function pbd_get_facebook() {
	$json = wp_remote_get("http://graph.facebook.com/problogdesign");
 
	if(is_wp_error($json))
		return false;
 
	$fbData = json_decode($json['body'], true);
 
	return intval($fbData['likes']);
}

On line 5, you would replace ‘problogdesign’ with your Facebook Page’s name of course (You can load the URL directly in your browser to make sure you have it right, e.g. click here).

With line 5, WordPress will grab the file. We check that it did this successfully on line 7 (If it didn’t, then our previous function will know to use its backup value).

With line 10, we convert the JSON document we downloaded into a regular PHP array, and last of all, we pick out just the fan count and return it (Making sure it’s an integer).

Twitter is almost identical:

/**
 * Get Twitter follower count.
 *
 * @return Int. Twitter follower number.
 */
function pbd_get_twitter() {
 
	$json = wp_remote_get("http://api.twitter.com/1/users/show.json?screen_name=problogdesign");
 
	if(is_wp_error($json))
		return false;
 
	$twitterData = json_decode($json['body'], true);
 
	return intval($twitterData['followers_count']);
}

As you can see, all we have done is changed some of the names. The method is identical, just replace the problogdesign part with your Twitter username.

Now, let’s do FeedBurner. The method here is similar, but instead of JSON, FeedBurner only offers an XML format:

/**
 * Get RSS subscriber count from FeedBurner.
 *
 * @return Int. RSS follower number.
 */
function pbd_get_rss() {
	$xml = wp_remote_get('http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=problogdesign');
 
	if(is_wp_error($xml))
		return false;
 
	$sxe = new SimpleXMLElement($xml['body']);
 
	return intval($sxe->feed->entry['circulation']);
}

We start out the same, by grabbing a file from the service (And again, replace the problogdesign part with the name of your feed).

The difference is on line 10, where we use PHP’s SimpleXML extension to get the data we need. And once again, we pick out only the subscriber number to return, and make sure it’s an integer.

3 – Display the Numbers

You’ve now written the 4 functions to get each number and save it. All that’s left to do is print it out on your site.

Browse to wherever you want to list your numbers (e.g. sidebar.php), and insert the following:

 echo number_format(pbd_get_transient('rss') ); ?>

We call pbd_get_transient(‘rss’) to return the value, and I’ve wrapped it in number_format() so that commas will be added if the number is in the thousands.

Similarly, for Facebook:

 echo number_format(pbd_get_transient('facebook') ); ?>

And Twitter:

 echo number_format(pbd_get_transient('twitter') ); ?>

4 – Display a Combined Total

We could have applied number_format() earlier on, before we saved the values. The reason to store the plain integers instead is so you can add the 3 numbers together and display a combined total, if you like.


$sum = pbd_get_transient('rss') + pbd_get_transient('twitter') + pbd_get_transient('facebook');
echo $sum;
?>

And that’s us all done! Now you (and I) have no more excuses for using the buttons they give us. Instead, just well designed typography.

Update (29th July ’11) – Thanks to Bryan Hadaway for pointing out ‘>’s in the code!

Add a jQuery DatePicker to Event Posts {WP}

Michael Martin — Mon, 11 Apr 2011 16:00:58 +0000

In previous posts, we set up an events system for WordPress. Users could enter the date of an event, and we had great archives for displaying and categorizing them.

Today, we want to improve the admin end of things. Instead of using custom fields, we’ll make a box for the event’s date, and use jQuery to let users pick the date from a calendar.

This tutorial is a self-contained post, which is useful on its own whether or not you’ve read the previous posts. But if you haven’t and would like to, you can here: (Or there’s a shortcut afterwards)

Setup an Events List (Using Custom Post Types and Taxonomies)
Making the Template (for our Post Types & Taxonomies)

If you want to skip on though, grab this file, rename it to events.php, and upload it to your theme folder. Then add this line to your theme’s functions.php:

// Events
include('events.php');

Everything we do in this tutorial will be added to that file, so you’re good to go now!

Demo / Download

So what does the end result look like? Well, the meta box itself will appear right below your post editor on Events, like this:

And when you click in the box, you’ll see this datepicker calendar:

The completed file can be found here: events-datepicker.phps (Rename it to events.php, and add the same include() line from this post’s intro to your functions.php file).

Also, grab this folder, unzip it, and upload it to your theme folder as well. This holds the jQuery elements we need, which you can download from jQuery UI itself here (For convenience though, I’ve just picked out the files we need and zipped them up here).

1 – Create a Meta Box

Right, let’s start the actual tutorial!

The first thing I want to talk about is meta boxes. On your “Add Post”, “Add Page” etc. screens, you see a series of boxes. There’s one for the post itself, one for choosing a category, one for custom fields etc.

A meta box is just another box like these. Specifically, it’s for custom fields. Instead of always having to type in a name and a value, which isn’t very user-friendly, you can add a meta box of your own to make it much simpler. Behind the scenes though, the end result is the same, you’re still just saving some metadata about the post.

In previous posts in this series, we used a “Date” custom field to save the date of the event. We’re now going to improve it so that the user gets a nice box to enter their Date custom field in (Like you saw in the screenshots above).

So now that you know what a meta box is, how do you add one? There are 3 stages to it:

Tell WordPress about your box.
Write the HTML for the box.
Save the date.

WordPress makes this all very easy to do. Here goes!

1 – Tell WordPress About Your Box

Open your events.php file (Downloadable at the start of this post, or just pick up right where we left off in the last post!), and before the closing ?> tag, paste the following:

/**
 * Register meta box
 *
 * Adds a metabox to Event post types, allowing users to easily enter the date of an event.
 */
function pbd_events_meta_box() {
	add_meta_box('pbd-events-meta-box', 'Event Date', 'pbd_events_create_meta_box', 'events', 'normal', 'high');
}
add_action('add_meta_boxes', 'pbd_events_meta_box');

We use the add_meta_box() function to tell WordPress about the box. The first parameter is just a CSS class, and the last 2 are to do with where to position the box. The important ones are the 2nd, 3rd, and 4th:

‘Event Date’ – The title shown on the box.
‘pbd_events_create_meta_box’ – The function that creates the HTML. We’re going to create this next.
‘events’ – The type of post that this box should appear on. We don’t need it on posts/pages, just on our ‘events’ post type.

That line is wrapped in a function, which hooks into the ‘add_meta_boxes’ action, so WordPress knows to add our box when its needed.

2 – Write the HTML for the Box

WordPress takes care of most of the HTML for us. The divs etc. for the box and the title are taken care of. All we need to do is add the text input:

/**
 * Creates the HTML for the meta box.
 */
function pbd_events_create_meta_box($post) {
	// Get already-entered date.
	$date = get_post_meta($post->ID, 'Date', true);
 
	// Nonce for verification.
	wp_nonce_field( plugin_basename(__FILE__), 'pbd_events_nonce');
	?>
 
Date (mm/dd/yy):
 echo $date; ?>" />
 
 }

As you can see, we’ve given this function the name we specified in add_meta_box(). WordPress also sends it the current $post object, which we use next.

On line 6, we get the previously saved Date value (if there was one) to show in our text field. On line 9, we use the wp_nonce_field() function to add some verification fields that we will use to secure our save function later.

And lastly, on line 12, we add the simple text input in a paragraph.

3 – Save the Date

The main issue with saving, as you might expect, is security. So the bulk of our work here is making sure that we actually should save it.

/**
 * Saves the meta box value when the post is saved.
 */
function pbd_events_save_meta_box($post_id) {
 
	// Verification check.
	if ( !wp_verify_nonce( $_POST['pbd_events_nonce'], plugin_basename(__FILE__) ) )
	      return;
 
	// And they're of the right level?
	if(!current_user_can('edit_posts') )
		return;
 
	// Has the field been used?
	$date = trim( $_POST['pbd-event-date'] );
	if( empty($date) )
		return;
 
	// Validate that what was entered is of the form: 00/00/00
	if(preg_match('(^\d{1,2}\/\d{1,2}\/\d{2}$)', $date) ) {
		update_post_meta($post_id, 'Date', $date);
	}
}
add_action('save_post', 'pbd_events_save_meta_box');

As always, the format here is to create a function, and then hook it into place. In this case, the ‘save_post’ hook, which runs each time WordPress saves a post.

We start by using the nonce fields we added in step 2. In a nutshell, a nonce makes sure that the user performing this action actually meant to do it (And wasn’t tricked into it). You can read more about them on Mark Jaquith’s blog.

Next, on line 11, we make sure they have the right capabilities. And the last check is on lines 15-16, where we check if a Date has actually been entered (So we don’t do anything on regular posts/pages). This has the slight downside that to delete the date info altogether, users will need to use the “Custom Fields” metabox again, but given the purpose of our script, that’s not likely to be an issue!

We’ve now verified that the user saving the data is allowed to. The next step is checking that what they entered is valid.

On line 20, we use regular expressions to do this. Our events list requires the date to be in the format: mm/dd/yy, so we verify the Date entered by checking that it’s in the format 00/00/00. If it’s not, then it won’t be saved.

Finally, on line 21, after all of our checks, we can use the update_post_meta() function to save the new Date.

2 – The jQuery DatePicker

Your box is now fully functional and working. Next, we just want to enhance it with an easy-to-use DatePicker, to make the admin’s life easier.

Thankfully, the jQuery UI project has an awesome datepicker script that we can use. Check out its demo page here.

To download the files from jQuery UI itself, you can go here, tick all of the “Core” boxes, and the “DatePicker” widget. Then in the right-hand column, choose the “Smoothness” theme, then hit download.

The resulting package contains quite a few files though, so for simplicity sake, I’ve picked out the ones you need and uploaded them in a zip file here. Download that, unzip it, and save the whole folder (“jquery-ui-datepicker”) into your theme.

The setup is then quite simple. We need to add the JavaScript and CSS files to the admin page, and initiate it on our form field. We’ll start with this last step.

If you downloaded the zip folder I put together, this simple JavaScript file has already been made for you. If not, simply save the 3 lines below into a file called pbd-datepicker.js in the datepicker folder.

jQuery(function($) {
	$( "#pbd-event-date" ).datepicker({ dateFormat: 'mm/dd/y' });
});

We wait for the page to be fully loaded, then call the .datepicker() constructor on our “pbd-event-date” text input (We added that ID to it back in step 2 of the first section).

DatePicker takes a number of options, but the one we need, dateFormat:, allows us to set how it should enter the date in our text box. This way, it matches our mm/dd/yy pattern exactly.

Now, all that’s left to do is load our JS and CSS files. Let’s start with the JavaScript. Add the following to your events.php file:

/**
 * Adds a jQuery datepicker script to Event pages.
 * http://jqueryui.com/demos/datepicker/
 */
function pbd_events_jquery_datepicker() {
	wp_enqueue_script(
		'jquery-ui-datepicker',
		get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery-ui-1.8.11.custom.min.js',
		array('jquery')
	);
 
	wp_enqueue_script(
		'pbd-datepicker',
		get_bloginfo('template_directory') . '/jquery-ui-datepicker/pbd-datepicker.js',
		array('jquery', 'jquery-ui-datepicker')
	);
}
add_action('admin_print_scripts-post-new.php', 'pbd_events_jquery_datepicker');
add_action('admin_print_scripts-post.php', 'pbd_events_jquery_datepicker');

The wp_enqueue_script() function is a safe way to add JavaScript files to WordPress. Here, we call it twice to add our 2 JavaScript files (Using get_bloginfo(‘template_directory’) to get the link to our theme folder).

The important part in this script is the 2 hooks at the end. Rather than adding these files to every admin page, we only want them when we’re adding a new event (i.e. we’re on the post.php or post-new.php pages in the dashboard). One of WordPress’ admin hooks is of the format:

admin_print_scripts-filename.php

You can use that to add scripts to any particular page in the dashboard, just by replacing the filename.php part with the page you need (as we have done in our example).

Adding the CSS is almost identical, with just a slight change in the function and hook names:

/**
 * Adds CSS for the jQuery datepicker script to Event pages.
 * http://jqueryui.com/demos/datepicker/
 */
function pbd_events_jquery_datepicker_css() {
	wp_enqueue_style(
		'jquery-ui-datepicker',
		get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/smoothness/jquery-ui-1.8.11.custom.css'
	);
}
add_action('admin_print_styles-post-new.php', 'pbd_events_jquery_datepicker_css');
add_action('admin_print_styles-post.php', 'pbd_events_jquery_datepicker_css');

And that’s us done! Now save your file and go add a new event with your snazzy datepicker in all its convenient glory!

If you’ve made it this far through the 3-4 posts in this series, well done! You should now have a very customizable and easy-to-use events list for your blog. If there’s anything else you’d like to know about tweaking it, just let me know in the comments!

And just before we end; I’d love to get your feedback on tutorials of this length. I know they can be quite a long read to sift through. I’m not sure I could make them any shorter (To me, all the explanations are the valuable part), but I could try out screencasts. Would you be interested in seeing that, or are you cool with written guides?