Lately, every time I manually flagged a comment as spam, I started to have the impression that they all were posted on the same post, namely an old announcement for my plugin "Absolute Comments".

An SQL query later, my impression was confirmed: this blog post *is* a spam magnet:

I suspect that some particular keywords in page titles act like pheromones to spammers. These keywords probably include "comments", "guestbook", "feedback" and anything that will make them think there's a form they can spam.

The SQL query I used to list blog posts sorted by the number of spam they get is:

If you want to play with it, I made a quick standalone script that will run the query and output a pretty interactive pie chart. Download spam-magnet.txt, rename as .php and put it in your blog root (where wp-load.php is)

If you run it and notice a pattern on your blogs too, share your analysis! I've always enjoyed useless fun stats :)

Share This

(cc) Ozh for planetOzh, 2010. | Permalink | No comment | Add to del.icio.us | splogmenotplz
Read more posts tagged with: Code, Comments, Spam, Stats, WordPress

Related posts

• Spam statistics (2)
• WordPress Plugin : Auto Moderate Comments (50)
• Testing Some New Anti Spam Code (1)
• New plugin under way (0)
• How To Style Editor (Or Any Role) Comments in WordPress (14)

Feed enhanced by Better Feed from Ozh

You have always (well for as long as I can remember) been able to select the number of search results shown by Google.

The default is 10
Then they add in various other things like news, video, images, local results etc.

Those additions are generally known as universal search

Then you might have results included from your social circle I have quite a large social circle because I follow lots of people on different social networks, so I almost always see them in the search results.

Google 20 Results Per Page

This isn't unusual in itself, you could select 20 results before, but now even if I go into advanced search and select 10 results, or manually add &num=10 Google is still giving me 20 search results.

Pseudo Site Search 20 Search Results

A couple of weeks ago Google rolled out what I coined pseudo site search. I spent so long trying to gather data, work out exactly why it was happening and come up with a name for it that Malcolm got the drop on me writing about it.

I should point out pseudo site search isn't brand there are more prerequisites there has to be a very specific indication in the search query that the intent might have been to perform a search query for a specific domain, but either the searcher was unaware of syntax or just lazy.

Commercial Reason For Google To Make Change

A week or so back Dan Taylor of Destination 360 mentioned in a comment on the travel technology blog Tnooz that for the search query [bellagio las vegas] he was seeing 7 out of 10 results from Bellagio.com travel is a competitive even for hotels as a specific destination and Dan happens to have a page that might rank even higher for Bellagio Las Vegas now (thanks for the great example search result)

I was an idiot and didn't grab a screenshot then sigh.

So here is a current 20 page result of which bits were being pushed around. It isn't now showing a pseudo site search.

Everything below the current #5 result for Trip Advisor was being pushed onto the 2nd page of results, and trip advisor itself was at #10 with Vegas.com 8 & 9

Now imagine that everyone was forced to have 20 search results like I currently am for US searches I still get 10 in the UK & Poland.
Whilst those results for hotel review sites would be pushed down, they would still be on the page, and a reader might be more tempted to scroll down a 20 result page.

Significance

For some search queries I think this would be useful, though it might cost Google revenue as there are no ads at the bottom half of the search results if people did start scrolling.
It may also result in the 2nd page of results being totally worthless, rather than just very low traffic, for all search queries.

This doesn't mean you should ever be happy with a page #1 search result the fold line the part of the page immediately visible when opened gets most clicks, thus unless someone is using a very high resolution monitor anything below result #3 is frequently severely hampered.

Also with personalization and region there are significant variations in what is seen in the results.

You will also tend to have a lot more double search results in Google.

I would assume this is just a test for now, though Google did roll out the pseudo site search to everyone at once.

Related posts

• Google Pagerank updates are weird (4)
• Darren Rouse on Yahoo Tags Tags Tags (2)
• WordPress SEO Masterclass For Competitive Niches (130)
• WordPress Plugin: Nofollow Those Dupes (WordPress SEO Masterclass Continued) (13)
• WordPress Plugin Custom Query String UTW Edition (31)
• Wikipedia NoFollow Plugin? WikiDigg? (28)
• Wide Circles = Blog Comment Spam (28)
• Video Roundup | SMX Seattle | Duplicate Content | Jason Calacanis (3)
• Ultimate Tag Warrior SEO Tricks (pt 1) (18)
• Toolbar Pagerank | Ball Linking (4)

Nothing to see here my SEO brethren

(Guest post from Marc Bitanga)

As anyone NOT living under a rock would know, there has been all sorts of hype around Twitter, and rightly so. Recently Danny Sullivan reported from Twitter's Chirp conference that Twitter has reached 19 billion searches per month. Wow. Not bad! That's a big number for a 3 year old company. Here are some staggering stats:

• Twitter is processing over 50 million tweets/day
• The 3 year old social network has over 100 million users
• There are over 70,000 registered apps that use Twitter's API
• In 3 short years, they've reached over 10 billion tweets

So the figures are there to back up that Twitter is a game changer. But is it a Google killer?

As this information was published, there was quite a bit of oooh's and ahh's over this very large figure. With some suggesting that Twitter search could support a profitable pay per click advertising platform.

But we've got to ask. How good is Twitter as a search engine? Does it rival Google for information retrieval? Would a Twitter pay per click platform rival Google Adwords?

The Twitter Search Engine Test

19 billion searches per month is undoubtedly quite impressive. Especially when considering that figure outpaces both Yahoo & Bing combined. Since Twitter search is being compared to Google, I was curious to find out whether Twitter can rival Google as a search engine. And whether pay per click advertising is a viable way to monetize Twitter search.

I ran a few quick test queries to study Twitter's search engine prowess.

A popular and profitable sector for Google is the travel & accommodation category. I used this as the basis for the test. Let's Look for a Hotel in Seattle.

Search Query: Seattle Hotels

The 10 most recent results seemed to have some useful resources. However, the results lacked credibility. Here are some observations:

• Twitter search retrieves results from anyone tweeting about the subject whether or not you are following the user profiles. Therefore the results haven't been curated by your network of friends. The network that you follow is probably Twitter's biggest strength and resource for personalization, but it isn't being utilized in their search engine.
• There's no real algorithm to see here other than the most recent timeline. This can be easily gamed by spam accounts.
• Another issue with Twitter's search results is that if a tweet contains a link they are usually cloaked by shortened URLs. Viewing shortened URLs from your network of friends is fine. But viewing a list of shortened URLs from a list of unknown users can be iffy.

Search Query: Seattle Marriott Hotel

No search results for the search query. If Twitter is serious about attracting advertisers to a search based pay per click advertising platform they'll have to be a reliable source for information. If the search engine doesn't retrieve any results for the most basic of search queries, then it isn't much of a resource.

Search Query: Seattle Marriott

The results were a grab bag of different types of tweets.

• There were some foursquare results from people checking into a Marriott location.
• Some results were for job postings for the local hotel.

But let's break it down further:

• Twitter contains quite a bit of noise. Such as foursquare tweets that aren't really helpful to a random person searching.
• Twitter search doesn't attempt to decipher the user's search intent. From a logical perspective, a person searching for Seattle Marriott is likely looking for accommodations, not a job.

Search Query: Seattle

I tried a much broader search query more out of curiosity than anything else. Again, not the most helpful search results.

Overall Findings

And the result? Google doesn't have anything to worry about for the time being. Twitter is not a search engine.

I ran a several more search queries with the mindset of a traveler, both from a national and local perspective. I found the experience to be hit or miss. If you try to use Twitter in the same manner as you use Google, Bing or Yahoo you will likely be disappointed.

Here is why:

• Twitter search doesn't have an infinite index. You are limited to the messages that people broadcast and the links they share. As a result there are gaping holes when performing some basic search queries.

• It's not reliable. Since the twitter index contains gaps, it's not a reliable source of information. This makes you think twice before using it for practical purposes.

• It doesn't have a very sophisticated algorithm, which leaves it open to spam. Here is what we know about Twitter's search algorithm:
  • Search queries will typically yield a set of results based on the most recent timelines.
  • Twitter will promote the most popular tweets (messages that have been retweeted several times), even if it is a few days old.

• The search engine doesn't analyze the intent of the person searching. This results in a broad spectrum of search results for certain queries.

• Twitter search has a duplicate content problem. If you happen to search for a phrase that's contained in several retweets, Twitter will show those messages in the search results.

• The search results lack credibility. Two factors add to this credibility issue.
  • Spam accounts Accounts with no avatar or with names that look suspicious.
  • Cloaked URLs URL shorteners hide the real URL. This isn't an issue if you trust the person sending the message, but when presented with a link from an unknown user you might think twice before clicking it.

• The Twitter index contains too much noise. Conversational tweets between users also occasionally appear in search results.

Twitter's search function doesn't fit the mold of a search engine. It's quite simply a site search feature for an extremely popular social network. Does this mean that the search engine doesn't have any value? Twitter search does serve a purpose. It's an excellent source for finding information for real-time trending topics such as:

• The latest celebrity or pop culture news The death of Michael Jackson
• Commentary related to current events 2009 Iranian protesters
• Natural disasters Recent California earth quakes

Twitter has mentioned it has no plans to have a comprehensive index. They will likely focus on improving the relevancy of real-time tweets.

As for whether Twitter can monetize the use of their search engine, without access to keyword research data it's difficult to tell user behavior and user expectations from Twitter search. However based on these findings, Twitter has a bit of work to do to improve the relevance of their search engine before it can be considered a Google killer.

About the Autor; Marc Bitanga is the SEO Manager for EA Sports. Marc has managed SEO and PPC campaigns for agencies as well as in-house teams. His passion for search began over 10 years ago when Google Search Appliance was first released. Although search marketing is his main focus, he's also active in web analytics, conversion optimization & social media. Read more from Marc on his online marketing blog.

Information Sources:

• Twitter; 50 million tweets a day! - Techcrunch
• Twitter snags over 100 million users - Economic Times
• Twitter registered created - New Statesman

Three years ago I wrote How To: Bulletproof Server Backups with Amazon S3, a post where I showed off a basic cron job'd script I used to backup my entire server to S3 nightly. I have been using some form of that script since then to backup my blog. Fortunately, I have never had a situation where I needed to completely restore my blog, though it was handy for the few times I accidentally nuked my root .htaccess file or something. Ideally, I would keep everything under git version control and possibly have a nice WordPress Capistrano setup on my server for keeping WordPress and related non-media files safe and easily accessible (versus having to download then decompress a huge archive just to get to one file). In addition, I would have an rsync to S3 backup for media files and the database. But like many of you, I don't have the time to figure that out right now. That's why I became intrigued when I first caught wind of Automattic's turnkey WordPress backup service called VaultPress. Pay a monthly fee, set it and forget it.

My backup situation looked like this (and a terminal) before VaultPress.

VaultPress is a complete WordPress blog backup solution. Everything related to your WordPress installation from theme files and uploaded media all the way to the database will be backed up. Want to know the best part about it? Real-time backup. The second anything changes on your WordPress setup, be it a new post revision is saved, a new comment is created, a tag is added to a post, a new user registers, a plugin is added, an image uploaded anything, VaultPress gets pinged and that particular change is updated in your backup.

The VaultPress plugin uses WordPress hooks to receive alerts when any information has changed on your site and syncs those changes with our servers. Live ticker messages are displayed to show the status of exactly what's going on backing up a comment, adding a new post, changing an option, etc

There are some edge cases where VaultPress won't know if you changed something, such as manual file uploading/editing via FTP, so it does an entire site scan every evening to detect any such changes and sync the backup as necessary. Depending on the plan you are signed up for, VaultPress will be able to scan for potential security threats as well.

I don't think I need to explain the benefits of real-time backup. Having backups initiate the moment something changes is much better than having to wait hours for my old cron job script to kick in.

Setup

First things first: VaultPress is currently in a private beta and many of its features have not yet been baked in. The information in this review will very likely be outdated in a few months, so please keep that in mind.

Setting up VaultPress is as simple as installing their plugin. It's not just any plugin, but rather a custom plugin just for your domain and blog. You need to have a WordPress.com account to be able to log into VaultPress to get the plugin but it will work on any self-hosted WordPress blog. After the plugin is uploaded and activated it will begin the lengthy first backup. I did not experience any issues with my first backup. It took a few hours to backup 5 years of blog posts, images, et cetera. I was able to monitor the progress within the WordPress admin panel as well as see general backup information.

Access basic VaultPress info within the WP Admin Panel

Backup

After the plugin is setup there's nothing else to it. VaultPress will continuously backup your blog as necessary. Logging into the VaultPress Dashboard provides more backup details and is where you'll go when it comes time to initiate a restore or download backed up files:

This page provides a complete snapshot of each backup. Along with the date and time of each and every backup, you can review how many users, comments, attachments, pages, posts, revisions, safecss, authors, categories, link categories, post tags, uploads, images, themes, and plugins (whew!) are included in each of the backups.

You can also retrieve your data here by checking the box next to plugins, uploads, database, themes or all of the above and hitting that download button.

Restoring Downloading then Manually Uploading

What happens when something happens to your site and you need to fix something or revert to the most recent backup? Unfortunately, there is no automated restore feature built into VaultPress yet. At the moment you will have to download the backup archive to your local machine, decompress it, then use an FTP client to manually upload it to your server. Obviously a painful and very slow, manual ordeal.

VaultPress archives my uploads and then offers me a .tar.gz download.

Yeah, definitely not ideal. I went poking around the VaultPress blog for upcoming plans:

We have two things on the roadmap to address this. The first, and most important, is server-to-server restores. That means instead of you being in the middle, you give us a SFTP login and destination for your account and our high-speed servers talk directly to your high-speed servers and do in minutes what would take you hours or days. This is a high priority for us.

The second, to get around the archival problem, is allowing people to subscribe to get their backups on physical media, like a Blu-ray disk shipped to their office, or a USB stick.

A server-to-server restore that appears to be in the works would be ideal and I can image the Automattic folks will do a great job implementing this. Until then, I downloaded a complete blog backup from WordPress, complete with some 194,000 items. It took VaultPress 31 minutes to build the archive, then 2 minutes for me to download the 453MB archive and a minute to decompress it to 550MB. Inside the archive there were 5 folders: plugins, root, sql, themes, uploads.

Files & Folders in a complete VaultPress backup

The plugins, themes and uploads folders were a straight copy of their respective equivalents within wp-content. However, the backup lacked any .svn metadata folders that were in those folders on my blog server. The root folder contained 3 files: my favicon.ico, robots.txt and wp-config.php. I was disappointed to see it did not include my heavily modified .htaccess file. And finally, the sql folder contained individual *.sql files for each table in my WordPress database. I like how they were separated by table instead of one file. That makes it easier to selectively restore parts of the database. For example if only your options got hosed you can just import wp_options.sql into phpMyAdmin.

Verdict

Official VaultPress pricing is still in the works.

Okay so what do we have thus far? An automated backup solution for your blog. Assuming that VaultPress will soon provide an easy backup restore solution, I still have a few nitpicks. Most important: I would like the ability to tell VaultPress to backup other files and folders on my server that are not part of WordPress. For example, I have various folders in the root of my site that while not directly related to WordPress, are still relied upon by my blog and would need to be backed up as well. Perhaps this issue is a known shortcoming of VaultPress's offering that it is a blog backup solution, not an entire server backup solution?

VaultPress can't do real-time continuous backups for things that don't run through the plugin and set off one of its event handlers to initiate a backup/sync. At the very least VaultPress needs to backup the root .htaccess file and perhaps ask me what other files to backup on a regular basis. I hate when I do an automated WordPress update and it replaces my .htaccess file with a vanilla WordPress .htaccess.

That being said, VaultPress alone will not provide enough coverage for most advanced bloggers; bloggers that run self-hosted third party analytics suites, image galleries, host their own files for things like TinyGrab and more.

As for pricing, that is still up in the air but I have seen numbers between $15-40 per month online. Beta customers such as myself are currently on a discounted $15/month plan for the basic tier of service. A premium plan is also being offered and provides security scans as well. Personally, real-time database backup alone is worth at least $30 per month for me (I already pay $40/month for Amazon S3 for my various online backups and CloudFront usage). If VaultPress saves me only one lost/corrupted/PEBKAC/what-have-you blog post per year, it will still pay for itself. However it is rather unsettling that I will need to have multiple paid backup solutions in place to ensure I have all of my server data backed up. At this rate, I do not think I will be retiring my S3 backup script anytime soon.

At the moment VaultPress is clearly in the early stages of product development and it would not be fair to rate their current offering. A backup service without an automated restoration feature is rather half-baked. When this automated restoration feature goes live, however, I would not hesitate to rate VaultPress 8.5 out of 10 Stammys.

VaultPress provides a sleek backup solution centered around the ease of setup you've come to expect with everything created by the Automattic/WordPress folks. You'll just have to decide if its shortcomings are worth it to you based on how much you blog and what it means to you.

Thoughts? What is your current server backup plan like? Would you consider using VaultPress? If so, how much would you pay?

Disclosure: As of the time of this posting, Automattic currently advertises on this blog.

RSS ads (for the student loans, I promise!): PaulStamatiou.com runs the Thesis theme. View my usenet downloading how to then checkout my usenet host Giganews.

First Impressions: VaultPress (WordPress Backup)

Paul Stamatiou 2005-2010

Related posts:

1. WordPress 2.0.5 Released
2. WordPress Releases Stats Plugin
3. Bandwagon Launches Online iTunes Backup
4. WordPress How To: Change Your Blog's Permalinks
5. Sociable: WordPress Plugin for Social Bookmarking
6. WordPress Quickie: Custom Query String Plugin

Google has quietly launched a new feature: search for blogs on any topic. The company announced the new type of search in a weekly round-up of search updates last week, and respected SEO blogger Bill Slawski argues that the launch may be related to a new Google patent.

This has the potential to be a wildly useful service. How many of you have had professional or personal reasons to seek a list of the top blogs on a new topic? I know I, and many people I talk to, find themselves in such need frequently. How do you access the new search? How well does it work? Read on.

Sponsor

How to Search Google for Blogs by Topic

The Google Blogsearch service has for a long time surfaced a small number of blogs related to any search query, above the list of results from a search of blog posts, or entries. This new search is different, though, and surfaces different results.

Do a search on the general web search interface, google.com. Then, click on the "more" link in the left-hand sidebar if "blogs" doesn't already appear as an option. Once you're looking at blogs from this perspective, then a new option will appear in the sidebar: search for posts or blog home pages related to your query.

I searched for ceramics blogs, semantic web blogs, cloud blogs, social media blogs and more. All those searches brought up pages and pages of clearly topical sources. I imagine that different searches may have different degrees of success, but this is Google - so it ought to work well.

How Good Are the Search Results?

The search results in this new search by blog feature look pretty good to me. The ranking of those results, however, seems questionable. The more closely tied the title of the blog is to your search query, the higher the blog shows up in search results. That's not the best indicator of quality or authority.

That said, in as much as I know about the topics I searched for, the top blogs in those fields definitely peppered the search results, to greater or lesser degrees.

What would I do with these search results? To be honest, I'd ask our fabulous staff developer (whom you may not steal from us) to whip up some scripts that pulled down the first 300 search results (or more) from any query I searched for, grab the RSS feeds from those sites using another script and autodiscovery, turn the feeds into an OPML file, upload them to Postrank, sort them by degrees of reader engagement, then chop off the top number from that list as suits your needs. Your mileage may vary, of course. I'd likely then use some other processes to make sure I wasn't missing too many obvious sites or including too many false positives. (And then I'd do some other stuff with it too.)

Now that the sun has set of the Technorati blog directory, and no one has done as good a job in its place as it once did, it's great to see a new option at all. The fact that full-text search is the method employed here, along with some patented analysis of the sites, is great. The patent that Slawski points to, (Indexing and retrieval of blogs, filed September 2005), "describes how it may create a 'hybrid document' about a blog out of information from both XML feeds, blog posts, and pages linked to from those feeds and posts such as profile pages," he writes.

That great. Add some ranking, some OPML export, and then we're really talking.

Long live blog search!

We've been opening new Stack Exchanges left and right on a variety of topics. In almost every case, the Stack Exchange appears to duplicate the content of an existing community. For example, our WordPress answers site (now in beta) covers the exact same material as WordPress.org's existing forums.

This is nothing new to us at Stack Overflow, which purported to cover the exact same material as hundreds (if not thousands) of other programming sites. There's no rule that says that there needs to be exactly one Q&A website per topic.

There is, however, a compelling case for the Stack Exchange technology. WordPress.org's forums don't have voting, so you have to read through every answer and decide for yourself which one might solve your problem. They don't have reputation, so there's no way to see whether you're getting an answer from someone who knows what they're talking about. They don't have wiki-style editing, so collaboration is impossible. You have to log on to ask or answer a question, so the burden of participation is higher. Stack Overflow is simply better than traditional forums, which is why it largely replaced proprietary forums. I remember hours of discussion with John Resig and the folks at jQuery who couldn't decide whether to replace the jQuery Google Group with a forum or with a Stack Exchange. Ultimately it didn't matter that much, because most of the jQuery Q&A activity happens on Stack Overflow anyway.

One day, the features that are standard on Stack Exchange will be copied everywhere. Until then, we'll keep churning out new sites.

Need to hire a really great programmer? Want a job that doesn't drive you crazy? Visit the Joel on Software Job Board: Great software jobs, great people.

The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.

The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code named Owlephant:

You've heard of Elephants, you've heard of Owls put them together and you get the fearsome Owlephant. If you encounter one, be sure it will be the last thing you ever, um, encounter. Hoot. stomp!

With this release SVG Web now scores 55.45% on the SVG compatibility charts, almost at the same level as IE 9 (58%).

Major aspects of this new release includes overhauls and fixes for gradients, clipping, events, text placement, and more. It also includes a huge step forward in SMIL animation support, including being able to animate path segments and interpolate their values, scripting SMIL with JavaScript, and more.

This release has been built by the community, with major contributions from Bruce Duncan from VisualMining.com; Ken Stacey from SVGMaker.com; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!

Everything fixed in this release:

• Issue 471 : Radial gradient different between Flash and Native renders
• Issue 349 : gradients with bounding box cooordinates are positioned wrongly on circles
• Issue 475 : this' not getting set correctly in SVG element event callback
• Issue 477 : The change in the size of the ClipPath area is not reflected by Flash Renderer.
• Issue 483 : Changing gradient stop does not trigger redraw of referencing elements
• Issue 484 : Dynamic clip-path attribute changes are not reflected.
• Issue 476 : set Element Problems and numerous SMIL issues
• Issue 489 : Support beginElement() for animation elements
• Issue 494 : SVGTextNode.onDrawGlyph not removing glyph clones
• Issue 495 : Support units-per-em on SVG fonts
• Issue 492 : button' property missing in mouse event object
• Issue 472 : get svg.js even more compressed with Google's closure compiler (30K reduction)
• Issue 499 : Object loaded svg with scripts not firing window load or SVGLoad event
• Issue 488 : Updating styles via Javascript does not visibly update child nodes in IE/Flash
• Issue 496 : Support exponents in path values
• Issue 502 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly
• Issue 503 : Radial Gradient focalLen not used for stroke
• Issue 504 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly for SVGCircle and SVGEllipse nodes
• Issue 497 : bad target' when click on text node
• Issue 342 : Event handler fires only after second mouse click.
• Issue 507 : Namespaced elements not allowed until svg element added to page
• Issue 158: Rotated text not rendering for native fonts (Mostly Fixed)
• Issue 467 : Namespace exception loading video example in IE8
• Issue 510 : Font Family not used when surrounded by single quotes in Flash 10.1
• Issue 57 : SVG default fill-rule nonzero' not supported by flash 9
• Issue 123 : Nested svg elements don't show up in the DOM correctly
• Issue 145: dynamically creating SMIL elements and attributes
• Issue 356 : Show SVG Web Release Name and Revision in Right Click Menu
• Issue 513 : getElementsByTagNameNS returning text nodes
• Issue 515 : Call handleEvent on EventListener objects passed to addEventListener
• Issue 517 : Elements with fill set to none' should produce mouse events but do not
• Issue 518 : Avoid redraw on change to pointer-events attribute
• Issue 523 : Event listener from object element may be applied to svg element erroneously
• Issue 522 : Need way to create element with self declared namespace
• Issue 525 : Image element not respecting display='none'
• Issue 524 : Jquery $(window).scroll event will not fire
• Issue 527 : Excessive messages for detached event listeners
• Issue 528 : Exception if remove event listener from detached element, then add to document
• Issue 321 : Support for animating path d' attribute (and interpolate between values)
• Issue 514 : clip-path not used when part of style attribute value
• Issue 526 : Object using clip path cannot have its opacity animated
• Issue 535 : Nested svg disappears when animated
• Issue 536 : Problems tracking whether elements attached to document or not
• Issue 537 : Animation added in onload listener does not initialize
• Issue 538 : Node removed while invalid causes endless frame listening
• Issue 539 : Animation with invalid or forward href causes exception
• Issue 540 : script stack space quota is exhausted by large svg file
• Issue 511 : Keyboard events are not supported properly

Download the release now and get started!

Please note that there are some breaking changes in this release that will affect code that uses older versions of SVG Web; more details here. Also note that SVG Web does not yet support the native SVG functionality in IE 9 preview releases.

[Disclosure: I'm a member of the SVG Web team]

WordPress shortcodes are used frequently in plugins and themes as a way to achieve extra functionality, without the need to modify template files. You just type the shortcode word right into your post. Some plugins and themes use them to add event calendars, some for making announcements, while others use them for inserting contact forms.

Simply, WP shortcodes are awesome.

However, what if you're a theme / plugin developer wishing to use them for your next great product, but you have no idea where to start? We're going to fix that in this tutorial.

1 Overview Exactly Where We are Going

We will start out by looking at the basic ways that we can use WP shortcodes, then we will move onto some more advanced tricks. After the usage sections, I'm going to show you some examples of real-world shortcodes, followed by even more ideas / references of what you could do with them.

2 Getting Into the Basics

The first you thing you should always do when working with something WordPress, is check the WordPress Codex. It's a great reference and starting point.

Shortcodes, like just about everything else in WordPress, can be created in the functions.php file, or from within your plugin file if you're developing a plugin.

Let's start simple by making a shortcode that we can use to add additional styles to some text.

1
2
3
4

function extra_style_shortcode( $atts, $content = null ) {
   return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

This is a very simple example that serves almost no purpose, but easily illustrates the basics of shortcode creation. It allows us to do something like this in our WP posts/pages:

[extra-style]Hello World![/extra-style]

and have it outputted like this:

Hello World!

So what's happening? It's simple, we're simply telling WordPress to put all of the text inside of the [ ] . . . [/ ] into a variable called $content, then outputting $content inside of a span tag that has some simple inline styling applied to it.

Okay, that was easy, now let's get into something a little more complex. This time we'll give the ability to define the color of the text using attributes.

1
2
3
4
5
6
7

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));   
   return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Now we can do this:

[extra-style color=red]Hello World![/extra-style]

and we'll see: Hello World!

or:

[extra-style color=orange]Hello World![/extra-style]

and we'll see: Hello World!.

This example uses this bit of code

    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));

to extract the information inputted by the user for the variable color. We have also defined a default color of blue in case no color is defined.

Again, this example is pretty much useless, but its simplicity makes it very easy to understand.

Let's get just a little bit more complex before moving on.

1
2
3
4
5
6
7
8
9

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
	"color" => 'blue',
        "size" => '14px',
        "padding" => '0px',
	), $atts));   
   return '<span style="color: ' . $color . '; padding: ' . $padding . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

By using a shortcode like this within a block of text:

[extra-style color=purple size=18px padding=5px]Hello World![/extra-style]

we could see something like this:

Elementum odio? Sed, Hello World! proin pulvinar eros nascetur, massa urna aliquam turpis elit, adipiscing mauris montes ac, vel lacus placerat in adipiscing ridiculus rhoncus.

Well that's enough of the pointless examples; let's look at some real shortcode examples.

3 Making an Information Box

This shortcode example will let you include a nice little message box at the top of your post to help catch readers' eyes.

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

function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		<style type="text/css">
		.shortcode_box {
			padding: 2px 4px;
			border: 1px solid #ccc;
		}
		.yellow {
			background: #ffd149;
			color: #666;
		}
		.blue {
			background: #a0c5ef;
			color: #333;
		}
		.gray {
			background: #f0f0f0;
			color: #333;
		}
		</style>
 
      <div class="shortcode_box ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('box', 'box_shortcode');

Now we can use our box shortcode to produce something like this

by using this shortcode:

[box color=yellow]This is a message box with important information you should read.[/box]

By changing the color variable, we can have different colors of boxes:

With a little more CSS, we could also control the size of the box, but I'll leave that to you.

4 Create a Download Button

The process for creating a download button is very similar to creating a message box: we simplu wrap the content of the button inside of a div with some special CSS3 styles applied to it.

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

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		<style type="text/css">
		.shortcode_button {
			padding: 2px 8px;
			border: 1px solid #ccc;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
		.black {
			background: #ffd149;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
			background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
			color: #f0f0f0;
			border-top-color: #1c1c1c;
			border-left-color: #1c1c1c;
			border-right-color: #525252;
			border-bottom-color: #525252;
		}
		.blue {
			background: #a0c5ef;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
			background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
			color: #f0f0f0;
			border-top-color: #023778;
			border-left-color: #023778;
			border-right-color: #26609e;
			border-bottom-color: #26609e;
		}
 
		.large	{
			width: 200px;
		}
		.medium	{
			width: 120px;
		}
		.small	{
			width: 80px;
		}
		</style>
 
      <div class="shortcode_button ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('button', 'button_shortcode');

We can display our button by using:

[button color=black size=medium]<a href="#">Download</a>[/button]

which will give us:

In order to control the size or color of the button, all we have to do is create a CSS class with the same name as the value we input for our size / color variables. For example, if we do size=large in our shortcode, we need a CSS class called large in our stylesheet. You can see I have included extra styles in my above example to illustrate some possible options.

5 Buttons and Boxes Together

Shortcodes are great because they also let us combine them to a result like:

by using a shortcode like:

[box color=blue]Porta ultricies. Amet odio amet, pellentesque elementum adipiscing sagittis enim, eu, proin placerat sed pid cum? Dictumst turpis integer. Adipiscing, porttitor scelerisque! Lorem turpis porttitor.
 
Integer in, odio mattis ac! Nascetur augue odio in risus, arcu nunc, phasellus ultrices lectus velit, et tincidunt tristique. Integer vel pulvinar purus magnis.
 
[button color=black size=small]<a href="#">Download[/button][/box]

There is one small hitch, though. By default, WordPress does not allow you to embed shortcodes within other shortcodes. In order to get around that, we have to add a line to our functions.php or main plugin file:

add_filter('the_content', 'do_shortcode');

This will make WordPress process both sets of shortcodes.

6 Show Related Posts

This is a really handy shortcode we can use to display a list of posts related to the current post by comparing tags.

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

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));
 
	global $wpdb, $post, $table_prefix;
 
	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);
 
		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";
 
		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '
	<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>
';
		}
		$retval .= '</ul>
';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

We can show the related posts by using:

[related_posts]

Credit goes to Blue Anvil for this shortcode.

7 Drop Caps With a Shortcode

Drop caps are pretty and make your articles look really nice. They can really add some nice detail to post and make your site stand out above the rest.

1
2
3
4
5
6

function dropcap($atts, $content = null) {
	return '
<div class="dropcap">'.$content.'</div>
;';
}
add_shortcode('dropcap', 'dropcap');

The CSS:

1
2
3
4
5
6
7

.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 5px 0 0;
}

Use it with:

[dropcap]M[/dropcap]auris ut lectus erat. In ...

Credit for this shortcode goes to TutToaster.

8 Custom Post Type Query

Let's say that you have set up a custom post type called News and you wish to display all posts inside that custom post type on a page called Articles. You could do it with the code below:

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

function news_shortcode()
{
	//The Query
	query_posts('post_type=news');
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;
 
	//Reset Query
	wp_reset_query();
}
add_shortcode('news', 'news_shortcode');

Then display the news posts on your Articles page by using this shortcode:

[news]

9 Display Posts from Category on Page

Very similar to the shortcode example above, we can also display limited number of posts from within a particular category using a shortcode like this:

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

function category_shortcode( $atts )
{
extract(shortcode_atts(array(
	    'limit' => '5',
            'category' => '',
	), $atts));
	//The Query
	query_posts('category=' . $id . 'posts_per_page=' . $limit);
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;
 
	//Reset Query
	wp_reset_query();
}
add_shortcode('category', 'category_shortcode');

You can list the posts using:

[category id=# limit=5]

Just replace # with the ID of the category you wish to display.

10 Great Examples of Other Possible Shortcodes

I've shown you a few examples, both of my own and other's creation, now let me give you even more examples of awesome things you could do.

Joen Asmussen of NoScope.com created a really nifty little shortcode to make a Google PDF Viewer.

Check it out here

Jean Baptiste, of WP-Recipes created a shortcode to display a ReTweet or TweetMeme buttons in your posts. Find it here.

Justin Tadlock made a great plugin that turns all (or most) WordPress template tags into shortcodes so that they can be used within the post editor. Download the Plugin.

A few weeks ago I wrote a shortcode plugin of my own (sorry, couldn't leave myself out!). It's a shortcode utility plugin that allows you to insert a variety of message boxes and web buttons via shortcodes (similar to some of the examples I've used above). Check out WP Utility Shortcodes.

11 Some More Ideas

• Use shortcodes for displaying contact forms
• use shortcodes for displaying a Google map
• Shortcodes to display author bios
• A shortcode that outputs all of your social network info
• Shortcodes for image galleries
• Shortcodes for jQuery image sliders

Have you seen any other interesting uses of shortcodes? Do you make use of them in your site already?