Pheromonic

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

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

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

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

Organize Your Files

Download the bassistance.de form validation plugin for jQuery.

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

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

The end result is like this:

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

1
2
3
4
5
6
7
8
9
10

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

Load Your Scripts

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

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

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

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

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

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

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

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

Activate the Script

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

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

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

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

1
2
3
4
5
6
7
8
9

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

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

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

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

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

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

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

These rules translate to:

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

How simple was that?

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6
7

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

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

Last of All, Some Styles

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

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

1
2
3
4
5

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

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

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

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

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

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

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

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

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

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

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

Plugin Structure

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

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

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

1
2
3
4
5
6
7
8
9
10

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

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

Loading Files and Passing Values

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9

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

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

1
2
3

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

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

jQuery – The Heart of our Plugin

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

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

1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

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

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

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

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

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

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

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

Now, we just need to round things off:

1
2
3
4
5
6
7

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

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

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

Style It

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

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

Add this to your css/style.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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

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

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

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

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

This collection of common iPhone elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens. (via Teehan Lax)

iPad Sketch Elements AI

This collection of common iPad elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens. (via teehanlax)

Страница описания товара (by podluzny)

Интерактивные элементы главной страницы (by podluzny)

We all saw that how Osama’s death video malware was spreading on Facebook recently and created lot of trouble for the social network users. It’s sad to see that how anti-social elements are trying to socialize in their own manner! Anyway, I’m fully aware of such nasty tricks, so thankfully I didn’t become a victim, moreover, I keep myself safe with the help of fantastic software utilities by some fantastic individuals & companies! Let me share that how I keep myself safe from malicious websites and then I’ll share that how as a blogger/webmaster you should take the responsibility to keep your visitors safe.

Tools to keep yourself safe from malicious websites

1. Internet security softwares – There are some amazing internet security software both paid & free that are doing a fantastic job in keeping the users safe. I personally use Comodo’s free internet security software – even though it’s free – it’s got much more features and has better detection rate than even most popular paid internet security softwares! It’s got antivirus, antimalware, firewall, sandbox technology and what not, I recommend it to everyone.

2. Secure DNS solutions – OpenDNS, Comodo’s secure DNS are some of those services that deserve all the respect in the world! By just making small changes in your internet connection’s DNS settings, you can do tons of good to yourself! These services have a database of malicious and phishing websites and will automatically block them even if you happen to click on a dangerous link. I prefer Comodo’s secure DNS.

3. Web of Trust – Web of Trust is another such service that alerts you about the site’s reputation and the dangers associated with it. Facebook partnered with them, to alert it’s users for bad & dangerous links after it was raided by “social anti-social elements”. They have a plugin for major browsers which alerts users for bad links. It’s a must have for everyone!

4. McAfee SiteAdvisor – I’d be honest, I used to love Siteadvisor like anything, I still love it as it saves me from going to unreliable links and even shows the website’s reputation in search engine and thus allowing me to avoid possibly dangerous websites (It’s very much similar to Web Of Trust). However, now McAfee also install it’s toolbar and changes the search engine – that’s something it didn’t do earlier and I loved that way. Anyway, you can disable those things – so it still has my respect. It integrates well with major browsers and can be a great savior as you can see that which link can be dangerous even before you click it.

5. Sandboxie – Even though Comodo offers sandbox technology, I prefer to use Sandboxie. It’s a free tool that runs your programs in an isolated space which prevents them from making permanent changes to other programs and data in your computer. Check out the Sandboxie’s website to know more about this fantastic concept! Again, it’s a must have!

These tools keep my pretty much safe from most of the threats and I’m thankful to the wonderful developers who’ve made them.

Be a responsible blogger and secure your WordPress now!

As a user, I was safe however as a webmaster, the incident got me thinking that how blogs and websites can also be targeted by malware & virus makers, not that they haven’t done in the past, however – this is where I see it growing even more and a much faster rate! There is a flurry of automated comment submitting softwares in the market, any malware maker can host the malware on a website and then submit the comments with that malicious link on thousands of blogs in a matter of minutes and an ignorant blogger/webmaster can approve the comment which may result in the following -

• Infect website/blog readers’ computers.
• Reduce site’s ranking in Google – Google doesn’t like site that promote malware!
• Bad reputation of website amongst visitors.

These are some points that no blogger would like to see happening to them. I certainly wouldn’t want this happening to me either. So, I decided to find a tool that would alert me of a malicious link before I approve any comment or which scans the links in the comments & posts and gives a report so that I can take corrective measures against those links. Unfortunately, I couldn’t find one!

Then it hit me that why are security companies not making such a tool? Tools like Web of Trust, Siteadvisor, OpenDNS, Comodo’s secure DNS depend a lot on community’s feedback, they certainly are useful and keep people safe, however it takes some time before the community gets to know of a newly created malicious website, what if you visit those sites before they are marked as unsafe? Wouldn’t it be cool if the security companies made a tool, that integrates with famous content management systems like WordPress & Drupal and shows the reputation of outgoing links to the visitor before hand? Not only this will be a win-win situation for bloggers, webmasters & readers; it’ll be a win-win situation for the antivirus company as well -

• Tons of free data about links. This will only strengthen their commercial offerings! They can directly block dangerous links for their software users.
• Free marketing – If not for the data, they can at least get the free marketing about their company! If they’ll show reputation of the link then they can always show the following message below it – “Link’s safety checked by XYZ Security Tool“. As a webmaster, I wouldn’t mind such a message, as it’ll strengthen my reputation amongst my readers that I care for them!

I’d given up looking for the tool and had started hoping that some security company will come up with such a tool that’ll show me link security report and will also show the reputation of out going links to my readers. And well, then I came across BitDefender’s Antispam! It’s almost the tool that I was expecting and that too from a popular and reputed security company!

Why Bitdefender Antispam when I’ve got Akismet?

That’s the first question that came in mind when I read the plugin’s name, however I was super happy to find out that it’s almost doing the same thing that I was thinking about, it’s just that it doesn’t take the advantage of free marketing & doesn’t scan the links in the posts. Bitdefender has made this essentially an anti-spam plugin, however I think it’ll gain the edge over Akismet as it will also check if the links are malicious or are phishing sites. The plugin is in beta and doesn’t appeal in terms of usability at all, however I’m still running it for few weeks to see how well it performs in terms of detecting the spam! Of course, I’ll be sharing my experience in the next blog post. Installation instructions for Bitdefender Antispam. Will I suggest the plugin now? Like other security tools that I’ve recommended, I won’t recommend this for now – it certainly needs a face-lift! However, I’m sure by the time it’ll be out of Beta, it should be one of your anti-spam solutions.

Secure WordPress to avoid stupid hacks & avoid becoming owner of a malicious website!

There have been lot of posts written about as to how one can secure WordPress, I’ve covered this topic as much as I could. The guides that we’ve included will not be the ultimate solution for making the site un-hackable, however by following them you’ll save yourself from automated attacks and newbie hackers who try and hack websites for fun. Please follow these links to make your WordPress secure -

• WordPress Security for free
• Hardening WordPress
• WordPress Security Whitepaper
• “Security check” series on Blog Design Studio.

I hope that other security companies take inspiration from Bitdefender and well my marketing tip and come up with such powerful tools for webmasters. This way together we’ll be able to make internet a bit safe! After all, we’ll be able to block them at source itself! And I hope that if you’ve not taken steps to secure your WordPress installation, then you would do them right after you share this post on social networks ;)

© mayank for Blog Design Studio, 2011. | Permalink

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

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

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

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

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

Prerequisites

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

Getting Started

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

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

Beginning the Plugin

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

1
2
3
4
5
6
7
8
9
10
11

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

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

Setting Up the Short Code

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

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

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

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

The Button CSS

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

1
2
3
4
5
6
7
8

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

Remember the GLOBAL variable we defined earlier with the path to the root plugin folder? We’re using that here to obtain the correct path to our CSS file, which we will create now. As indicated in the file structure diagram above, the CSS file is called friendly_buttons.css as is located inside of includes/css/.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

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

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

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

Setting Up the TinyMCE Button

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

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

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

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

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

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

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

Our TinyMCE Button’s Javascript

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

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

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

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

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

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

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

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

The Modal Popup

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

1
2
3
4
5
6
7
8
9
10
11

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<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);
 
</script>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

</head>
<body>
	<div id="button-dialog">
		<form action="/" method="get" accept-charset="utf-8">
			<div>
				<label for="button-url">Button URL</label>
				<input type="text" name="button-url" value="" id="button-url" />
			</div>
			<div>
				<label for="button-text">Button Text</label>
				<input type="text" name="button-text" value="" id="button-text" />
			</div>
			<div>
				<label for="button-size">Size</label>
				<select name="button-size" id="button-size" size="1">
					<option value="small">Small</option>
					<option value="medium" selected="selected">Medium</option>
					<option value="large">Large</option>
				</select>
			</div>
			<div>
				<label for="button-style">Style</label>
				<select name="button-style" id="button-style" size="1">
					<option value="less_round">Less Round</option>
					<option value="round" selected="selected">Round</option>
					<option value="square">Square</option>
				</select>
			</div>
			<div>
				<label for="button-color">Color</label>
				<select name="button-color" id="button-color" size="1">
					<option value="gray" selected="selected">Gray</option>
					<option value="blue"=>Blue</option>
					<option value="red">Red</option>
					<option value="green">Green</option>
					<option value="black">Black</option>
				</select>
			</div>
			<div>
				<label for="button-align">Alignment</label>
				<select name="button-align" id="button-align" size="1">
					<option value="gray" selected="selected">None</option>
					<option value="left"=>Left</option>
					<option value="right">Right</option>
				</select>
			</div>
			<div>	
				<a href="javascript:ButtonDialog.insert(ButtonDialog.local_ed)" id="insert" style="display: block; line-height: 24px;">Insert</a>
			</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:

1
2
3
4
5
6

#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