Pro Blog Design

Working With WordPress Shortcodes

Pippin — Mon, 30 Aug 2010 16:00:46 +0000

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.

function extra_style_shortcode( $atts, $content = null ) {
   return '' . $content . '';
}
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.

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));   
   return '. $color . '; text-decoration: underline;">' . $content . '';
}
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.

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
	"color" => 'blue',
        "size" => '14px',
        "padding" => '0px',
	), $atts));   
   return '. $color . '; padding: ' . $padding . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '';
}
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.

function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		
 
      . $size . ' ' .  $color . '">' . $content . '
';
 
}
add_shortcode('box', 'box_shortcode');

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

This is a message box with important information you should read.

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:

This is a message box with important information you should read.

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.

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		
 
      . $size . ' ' .  $color . '">' . $content . '
';
 
}
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:

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.

Download

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.

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));
 
	global $wpdb, $post, $table_prefix;
 
	if ($post->ID) {
		$retval = '';
 		// 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 .= '
	.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'
';
			}
		} else {
			$retval .= '
	No related posts found
';
		}
		$retval .= '
';
		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.

function dropcap($atts, $content = null) {
	return '
'.$content.'
;';
}
add_shortcode('dropcap', 'dropcap');

The CSS:

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

function news_shortcode()
{
	//The Query
	query_posts('post_type=news');
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'; echo the_permalink(); echo '">'; echo the_title(); echo '
';
		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:

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	'; echo the_permalink(); echo '">'; echo the_title(); echo '
';
		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?

How to Edit the WordPress RSS Feed

Michael Martin — Fri, 20 Aug 2010 00:00:06 +0000

Ever thought you could make some improvements to your RSS feed? Like letting it cover more (or less!) content? Or adding some extra details onto the end of your posts?

In this post, I’m going to show you how to do exactly that. Here’s what we’ll be covering:

How to include both posts and pages in your feeds.
How to add thumbnails to your feeds.
How to exclude posts with a certain tag.
Set how many posts appear in your feed (Without affecting the rest of your site).
How to show only posts from a certain category.
How to add content to the end of each post (e.g. link to your latest featured post).

All of this is going to take place in the functions.php file of your theme. If your theme doesn’t have one, just create a file in your theme’s folder with that name and let’s get to it! (Make sure all of this code goes between the opening tag in the file)

Include Pages in WordPress Feed

What we will do is add a filter to WordPress when it is searching for posts. The filter is going to check if the posts are for a feed, and if they are, it’s going to adjust the query to include both posts and pages.

function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('post_type','any');
		}
	return $query;
}
add_filter('pre_get_posts','feedFilter');

If you wanted to show only pages, then you could change the word ‘any’ to ‘page’ (or to the name of any custom post types you’ve created).

You may want to be more specific and only show top level pages. In that case, you could use this code with an extra line to show only top level pages:

function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('post_type','any');
		$query->set('post_parent','0');
		}
	return $query;
}
add_filter('pre_get_posts','feedFilter');

Add Thumbnails to RSS Feed

The process this time is slightly different. Again we’re going to add a filter to the query and test if the page is for an RSS feed. This time we won’t adjust the query though (We’ll return it exactly as it was), but we will add a filter to the_content (i.e. the content of your posts).

function feedFilter($query) {
	if ($query->is_feed) {
		add_filter('the_content', 'feedContentFilter');
		}
	return $query;
}
add_filter('pre_get_posts','feedFilter');
 
function feedContentFilter($content) {
	$thumbId = get_post_thumbnail_id();
 
	if($thumbId) {
		$img = wp_get_attachment_image_src($thumbId);
		$image = '. $img[0] .'" alt="" width="'. $img[1] .'" height="'. $img[2] .'" />';
		echo $image;
	}
 
	return $content;
}

We’re using a slightly roundabout way of getting the thumbnail image so that we can add the align="left" part. A lot of feed readers strip out inline CSS, but using the old-fashioned align property should work. And of course, if you don’t want your images aligned to the left, just take out the align="left" altogether!

You can use that code to get any size of thumbnail as well, e.g. let’s say you had added this line to your functions.php file to define a special thumbnail size just for feeds:

add_image_size('feed', 600, 100, true);

Then you could adjust the 7th line from the end to read:

$img = wp_get_attachment_image_src($thumbId, 'feed');

How to Exclude Posts With a Certain Tag

This time we’re going to do something similar to the first example. We’ll be using ‘set’ to adjust the query object. If you want to read more about what you can do with querys, check out the WP_Query codex page.

The only nuisance is that we have to first work out the ID of the tag we want to exclude. To do this, go to Posts > Post Tags, then find the tag you want to exclude and click on it. In your browser’s address bar, you’ll see that part of the URL looks like this: &tag_ID=29

So in that case, 29 is the tag ID.

function feedFilter($query) {
	if ($query->is_feed) {
		$tags = array('29');
		$query->set('tag__not_in', $tags);
	}
 
	return $query;
}
add_filter('pre_get_posts','feedFilter');

If you wanted to exclude posts from multiple tags, you could list them on the 3rd line, e.g.

$tags = array('29', '31', '124');

Control How Many Posts Appear in the Feed

In your dashboard, under Settings > Reading, you can set how many posts appear on your site pages and in your feed. However, there may be times when you want to show more posts in your feed than on your site.

e.g. your site may look best with just 3 or 4 posts per page, but you’d definitely want more than that in your feed!

To make that change, just use the code below:

function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('posts_per_page','20');
	}
 
	return $query;
}
add_filter('pre_get_posts','feedFilter');

Feel free to change the 20 to any number you like!

Show Posts from Only One Category

Normal blogs are unlikely to do this, but if you were using WordPress as a CMS, you may want to publish only posts from your “blog” category. In that case, you would do this:

function feedFilter($query) {
	if ($query->is_feed) {
		$query->set('category_name', 'blog');
	}
 
	return $query;
}
add_filter('pre_get_posts','feedFilter');

And again, you could turn that on its head to exclude posts from a certain category. In that case, the 3rd line would be:

$query->set('cat', '-45');

Where 45 is the ID of the category (The minus sign must be included as well, otherwise you’ll end up showing only posts from category 45!).

Add Content to the End of Each RSS Post

There are plenty of reason you might want to add some content to the end of your RSS posts. In this first example, we’ll add a simple line that says:

"Thanks for reading, check out Your Blog name for more WordPress news!"

function feedFilter($query) {
	if ($query->is_feed) {
		add_filter('the_content','feedContentFilter');
	}
	return $query;
}
add_filter('pre_get_posts','feedFilter');
 
function feedContentFilter($content) {
	$content .= 'Thanks for reading, check out . get_bloginfo('url') .'">'. get_bloginfo('name') .' for more WordPress news!
';
 
	return $content;
}

Now let’s do something slightly cooler. Let’s say that you have a featured content slider on your homepage, or a featured posts list in your sidebar, and you’ve set it up so that to add posts to either of these, you tag them with “featured.”

In this last example, we’ll add a byline to your feed posts that says:

"Make sure not to miss our latest featured post: Post Title"

In our feedContentFIlter function this time, we will run a query to get the latest post tagged with featured. We’ll then use the post object we get back to insert the post title and address.

function feedFilter($query) {
	if ($query->is_feed) {
		add_filter('the_content','feedContentFilter');
	}
	return $query;
}
add_filter('pre_get_posts','feedFilter');
 
function feedContentFilter($content) {
 
	$args = array(
	    'numberposts' => 1,
	    'tag' => 'featured'
	);
	$posts = get_posts($args);
 
	if($posts) {
	    foreach($posts as $post) {
	        $content .= 'Make sure not to miss our latest featured post: . get_permalink($post->ID) .'">'. $post->post_title .'!
';
	    }
	}
 
	return $content;
}

You could enhance that however you like, e.g. including some inline CSS to adjust the appearance of the line.

How Else Could You Edit Your Feed?

Those are some ideas for what you could do with your feed, but is there anything else you’d like to do with it?

Let me know in the comments and if there are any great ideas, I’ll show you how to do them!

Update (20th August): Some commenters have mentioned already that all of these changes are for the main feed. If you’d like to create a new feed and customize that, check out this post by WordPress Recipes for a good starting point! (You’ll need to adapt the code samples above slightly though)

Design Critique: B2Bbloggers.com

Michael Martin — Fri, 06 Aug 2010 16:00:02 +0000

B2Bbloggers.com is a B2B marketing site that features a lot of guest posts on B2B marketing, and highlights a lot of content from around the niche.

We’re going to take a look at the site’s design today, critique it, and work out how we could improve it. As we do hopefully you’ll learn to apply this same methodology to your own site.

We’ll be working through this design as a case study, redesigning each section along the way, so you get to see each item as we rework it, including the full before and after design.

Let’s start by loading the site in a new tab (Or if you’re reading later, check out this image of the site as it was at this time).

Issues With the Current Site

The following 4 are the issues mentioned by Jeremy (the owner of B2Bbloggers) when he asked for the review:

Increase subscribers.
Insert categories/archives.
Insert popular posts.
Better use of footer.

We’ll bear those in mind as we go to work on the site later, but let’s see what other possible issues we can find ourselves. The core areas that I’d like to improve on are:

Heavyset Appearance -The current colors, lack of spacing, large blocks of text give the site quite a heavy appearance. No single individual element is to blame, but we’ll see what we can do to air things up a little.
Confusion - The site attempts to do quite a lot (A lot of its own blog posts, but also feeds from other websites, two separate Twitter streams, and a Google Custom Search Engine for a number of B2B sites). It makes for a great set of resources for visitors, but a more unified appearance and clearer sectioning may make it easier to follow.
Clutter – Certain areas of the site feel cluttered (Like the avatar/votes downside the posts), and others just need a little work (Like the pixelated social icons). We’ll sort these out as we go along.

With those 7 items in mind, let’s get to work!

The Header

We’ll start at the top. The header is relatively clean and the navigation bar works well.

(Click to see full size)

It’s a little bland though. You could hire a graphic designer to create something much more memorable, but a few simple tweaks could go a long way in the meantime.

We’ll start by changing from the slightly faded blues, to stronger variants. After that, we’ll do a little cleanup.

The “CrowdsourcedFRD” link is a bit of a mystery. The trouble is that with no further information than that, very few people are going to click through to it. In essence, the link is asking for feedback on the site. Online, the clearer things are, the better. So let’s rename that.

To help declutter the header slightly more, we’re going to give your logo some extra room to breathe. We’ll start by moving the navigation links above, over to the right (Where they’ll work every bit as well). We’ll also stretch out the header slightly to give the same padding above and below it.

Last of all, we’ll fix up the borders on the search form, bring some of the logo’s orange into it (It’s been used so rarely in the site) and move the text inside the search bar (Where some simple JavaScript can make it disappear when a user clicks).

Nothing complex there, and let’s see how it looks now? (click to see in full)

The Content

We’ll move down to the core content now. On the homepage, there are three main sections:

Latest blog posts.
Links from other blogs.
Embedded tweets from B2B marketers.

We’ll start at the top, with the latest blog posts. Currently, the posts are displayed one after the other with no images (Except the featured post). The only visual content comes from the author avatars, though they have to fight against the large Twitter and Facebook buttons.

We want to break up the flow of text/gaps/posts into something more catchy to look at, to encourage people to scan more of your posts and hopefully click on one. Using images in your content is the ideal way to do this, but it can be difficult (Especially if you have a lot of guest authors like this!).

What we can do instead is make the layout of the post itself into your visually grabbing element. Instead of having just paragraphs of text and headers on plain, empty backgrounds, we will try setting each post into its own box. With some simple design touches, we can make that plain text much more appealing.

Now it doesn’t matter that there is a lack of images, we’ve worked around it.

Next we want to include the pagination. There is no need to do anything fancy; just simple, clean numbers that blend in well with the rest of the page.

Below the latest blog posts section, the author has included a list of blogs from his niche, with links to their latest posts. The layout to use for each blog’s section is clear; our box designs from earlier are perfect for this (We can replace the avatars with the site favicon, and everything else remains the same).

We do need to create a separator between the blog posts and this section though, along with some explanation of what these feeds are. A title/subtitle is the obvious solution for that, but if we think back to our client’s original goal, to increase RSS subscribers, there is an opportunity for us here.

The homepage has been sliced into two clear sections so far. We need a clear separation between the two anyway, so why not insert an ad for your RSS feed? (This sort of location works great for actual adverts, so there’s no reason not to try it out for an ad of our own!).

Beneath that, we can then insert a simple title, and the blog posts below. Let’s see how it looks (Click for full-size):

One thing to point out is that I have been consistently using 20px of spacing between sections in this design. That is to give the design much more whitespace, relieving the heavyset issue I mentioned at the top. The exception is the spacing between the RSS ad and the header, which is 40px. When I set it at 20, the ad dominated the title, but setting it at 40 set it apart. There’s no reason not to bend rules like this when it’s warranted.

The final section of the current homepage is a list of 10 tweets from a Twitter list. The idea is great, but they look somewhat poor on the homepage I find. For example, they currently show a list of 10 FollowFriday tweets (So basically, just dozens of @names!), and most of them are from the one person so the avatar is just repeated.

The idea of promoting others is a great one, but given that we’re going to be enhancing the footer later, we can experiment with moving the tweets to there. If the client has a good reason for having them on the homepage, there’s no reason we can’t move them back later.

Sidebar

The current sidebar is quite cluttered, and lacks any real unity between the different sections. In particular, there is a section where ads and colored widgets are mixed together. I want to break this up to make it less likely for users to simply block out that whole section.

If we start at the top, we’ll being with the social connection box. The current one has a fair amount of writing, small signup forms, and even pixelated icons. We will take out the fluff, leaving only the calls to action for visitors.

In terms of the design; because the rest of the sidebar will be in boxes, we can highlight this section by having it sit right on the background. As for the email subscription form, we will use the search form design from right above it verbatim.

In the image below, you can see the original on the left, and the newer version on the right.

Working down the sidebar, we will add content as we need it. We’ll start by listing the categories (One of the client’s wishes), followed by an advert (In the same location it currently is), with popular posts beneath that (Another of the client’s wishes, and lastly, their Twitter ad and stream (The least important of the modules, so it comes at the end).

Design-wise, the ads are untouched of course. The category lists and popular posts section will both use our box design from the homepage. The big change with the Twitter widget is that we will embed the tweets ourselves, allowing us to use a clean box design as well, rather than the intrusive Twitter widget currently used.

Using our boxes for our footer content makes it easy to add more widgets in the future. Just re-use what’s already there.

Footer

We’re nearing the end now, the final section to work on is the footer.

When I listed the sidebar widgets, I left out two of the sections of the current sidebar; the “About” box, and the links to various parts of the site. By doing that, we cut down on the clutter of the sidebar by taking out content that will fit every bit as well in the footer.

We will use an expanded footer, split into three sections (Lining up with the 3 columns of content above). We can group the site links into one “Get Involved!” section, and because those links are important, we’ll put that first.

We will add the “About” section to the end, as that is somewhat of a standard location for that content.

And that leaves the central section for the marketing tweets I left out of the homepage.

In terms of the design, we will tie in with the rest of the site’s design of course. In the header, I used a slight gradient for the dark navy section. We can re-use that same gradient (The one I’ve also been using on the box links, and the RSS advert) for our background. This makes it clearly stand out as separated from the content and sidebar.

The rest of the footer design is then kept minimal. We will use a simple separating line between each one, white text with orange links (The same colors we’ve used across the site, all taken from the logo), and because both the Twitter and About sections have an image, we’ll add the site’s Twitter logo to the “Get Involved!” section as well.

Here goes! (Click the image to see it in full)

And that completes our design! We’ve taken the current site, kept all of its content and its “feel”, but remade the layout to remove the clutter, add some extra visual appeal, and play to the site’s strengths (e.g. highlighting the social connection options, and working with text not images).

To finish off, click below to see the completed design, side-by-side with the original!

Now it’s your turn! If B2Bbloggers were your site, what would you do with it? Where would you put those tweets? Would you have kept more elements of the current design that I did?

MyBiz Theme for WordPress Discount Code

Michael Martin — Tue, 03 Aug 2010 16:00:14 +0000

Over on PliablePress, we’ve released our newest WordPress theme. MyBiz is designed for modern businesses who don’t want the “faceless-company” approach that customers are used to receiving.

It’s vibrant, colorful (You even get 5 color schemes to choose from!) and yet still professional and well organized. Most of all, we’ve put an extreme amount of care into the homepage, giving you 3 different ways to ensure your best content is highlighted and that your visitors go to the pages you want them to see.

Check out the walkthrough video below showing you some of the features of MyBiz that you may not notice at first, as well as how easy it is to control all of your homepage content with our beginner-friendly control panel. Or better yet, check out the live demo site.

If you buy MyBiz before this Saturday, you can save an extra $15. Just use this coupon code on the signup page (For either MyBiz, or the Plus+ membership!): MYBIZ15

To see more (Or get the theme for yourself!), check out the MyBiz page on PliablePress.

Let me know what you think of the theme in the comments, I’d love to hear your thoughts!

BundleHunt Released!

BundleHunt, the latest project by the awesome Noura Yehia (Noupe and DevSnippets) and friends went live yesterday.

They’ve collected together 12 great design-related products and bundled them together for a single, very-cheap price of $49.

Make sure you have a look to see if it catches your eye (I’ve been eyeing Billings up for a while now, so I’ll definitely be getting it!). And at the very least, it’s worth loading just to see the stunning web design.

Anything there appeal to you too?

How To Write a Restricted Content Plugin

Pippin — Mon, 26 Jul 2010 16:00:44 +0000

There are a lot of sites out there, particularly digital education sites, such as Net Tuts and Blender Cookie, that push out a lot of “premium” content that is only accessible to registered users.

In this tutorial, I’m going to show you some of the basics of writing a WordPress plugin from scratch that will allow you to restrict content on your site to registered users. You will be able to restrict complete pages / posts by clicking a check box or just sections of content using WordPress shortcodes.

Note: I will not be showing how to create a paid membership system, or how to integrate this plugin into a paid membership system, such as aMember. This plugin will deal with choosing which content is restricted, but not how users register. It will use the default WordPress user roles: Administrator, Editor, Author, Subscriber, and None.

1 – Getting Started – The Plugin Basics

WordPress plugin development is very similar to theme development and can employ many of the same tricks to achieve the end goal.

If you are not at all familiar with WordPress plugin development, I recommend you read Writing a WordPress Plugin from the WordPress codex.

2 – The Plugin Header

The first thing to do, once we’re ready to start writing our plugin, is to create a new file called restrict_content.php and to enter all of the plugin’s necessary meta data, such as name, author, description, url, etc.


/*
Plugin Name: Restrict Content
Plugin URI: http://pippinspages.com/freebies/restricted-content-plugin-free/
Description: Restrict Content to registered users only.
Version: 1.0
Author: Pippin Williamson
Author URL: http://pippinspages.com
*/
 
?>

If you upload this file to your wp-content/plugins directory and click Activate from the WordPress plugins menu, the plugin will activate fine, though it won’t actually do anything at this time.

3 – Create the Shortcode

Now it’s time to begin really writing the plugin.

First we are going to create a function that will allow us to use WordPress shortcodes to restrict sections of content like this:

[restrict] . . . this is restricted to logged in users . . . [/restrict]

Paste this below the plugin meta info we entered earlier:

function restrict_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'userlevel' => 'none',
      ), $atts ) );
      if ($userlevel == 'admin' && current_user_can('switch_themes'))
      {
      	return do_shortcode($content);
      }
      if ($userlevel == 'editor' && current_user_can('moderate_comments'))
      {
      	return do_shortcode($content);
      }
      if ($userlevel == 'author' && current_user_can('upload_files'))
      {
      	return do_shortcode($content);
      }
      if ($userlevel == 'subscriber' && current_user_can('read'))
      {
	      	return do_shortcode($content);
	  }
	  if ($userlevel == 'none' && is_user_logged_in)
      {
	      	return do_shortcode($content);
	  }
      else return 'Some content is only viewable by ' . $userlevel . 's';
}
add_shortcode('restrict', 'restrict_shortcode');

What does this code do?

It first creates a place for us to store options (in the variable $atts), and a place to store the content contained within the shortcode (in the variable $content).

Next, an option is created called userlevel and it is given a default value of none. This option allows us to define which users will be able to see the content inside of the shortcode.

When loading the content, every visitor’s user status must be checked, and only to those whom have sufficient privileges will the content be displayed. This check is done like this:

if ($userlevel == 'admin' && current_user_can('switch_themes'))
{
  return do_shortcode($content);
}

This will check whether the user level is set to admin and if the current user has the ability to switch themes. If both of these are true, the content contained in the shortcode will be displayed. If one of the above checks is not true, then this happens:

1	else return 'Some content is only viewable by ' . $userlevel . 's';

Which will display the message: Some content is only viewable by admins

These two checks are done for every user level.

Lastly, we need to make the shortcode available for use by doing this:

1	add_shortcode('restrict', 'restrict_shortcode');

Now we are able to use something like this in our posts / pages:

[restrict userlevel="editor"] . . . this is restricted to logged in users . . . [/restrict]

The available options are:

admin
editor
author
subscriber
none (this is the same as using just [restrict] . . . [/restrict] )

4 – Creating the Meta Box

The next step is to add an option to all posts / pages that will allow us to restrict the entire post / page. This is much better than simply wrapping shortcodes around our entire post / page, even though it would accomplish the same thing.

We will do this by adding a custom meta box to our editor screen. This will be done with multiple functions, all pasted just below the code we already have in our restrict_content.php plugin file.

The first function defines all of the options for our meta box:

//custom meta boxes
$prefix = 'rc';
 
$meta_box = array(
    'id' => 'rcMetaBox',
    'title' => 'Restrict this content',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
        array(
            'name' => 'User Level',
            'id' => $prefix . 'UserLevel',
            'type' => 'select',
            'desc' => 'Choose the user level that can see this page / post',
            'options' => array('None', 'Administrator', 'Editor', 'Author', 'Subscriber'),
            'std' => 'None'
        ),
        array(
        	'name' => 'Hide from Feed?',
        	'id' => $prefix . 'FeedHide',
        	'type' => 'checkbox',
        	'desc' => 'HIde the excerpt of this post / page from the Feed?',
        	'std' => ''
     	)
    )
);

We have now created an option for choosing the user level to which we’d like to restrict the content, and an option to hide the content from being displayed (even as an excerpt) in the feed.

Now let’s actually make the meta box display on the editor screen:

// Add meta box
function rcAddMetaBoxes() {
    global $meta_box;
	foreach (array('post','page') as $type)     
    add_meta_box($meta_box['id'], $meta_box['title'], 'rcShowMetaBox', $type, $meta_box['context'], $meta_box['priority']);
}
add_action('admin_menu', 'rcAddMetaBoxes');

Inside of the add_meta_box command, we are calling all of the options we defined above.

The next step is to make a function that controls how the meta options are displayed. This next function is called by the third variable (rcShowMetaBox) in the above function.

// Callback function to show fields in meta box
function rcShowMetaBox() {
    global $meta_box, $post;
 
    // Use nonce for verification
    echo ', wp_create_nonce(basename(__FILE__)), '" />';
 
    echo '';
 
    foreach($meta_box['fields']as$field){// get current post meta data$meta= get_post_meta($post->ID,$field['id'],true);
 
        echo'','','';}
 
    echo'    
        
            
                , $field['id'], '">', $field['name'], '
                ';
        switch ($field['type']) {
            case 'select':
                echo '';
                break;
            case 'checkbox':
                echo ', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
                break;
        }
        echo     ' ', $field['desc'], ' ',
            '
     
';
}

This will now provide us with a nice layout for our “restrict content” options. At the top of this function we have included a hidden input for the nonce verification. This makes sure that no one edits these options who does not have permission.

Finally, we need to have a function to save our data we have inputed. Once again, copy this into restrict_content.php beneath all of the code you have already entered.

 // Save data from meta box
function rcSaveData($post_id) {
    global $meta_box;
 
    // verify nonce
    if (!wp_verify_nonce($_POST['rcMetaNonce'], basename(__FILE__))) {
        return $post_id;
    }
 
    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
    }
 
    // check permissions
    if ('page' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
            return $post_id;
        }
    } elseif (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }
 
    foreach ($meta_box['fields'] as $field) {
        $old = get_post_meta($post_id, $field['id'], true);
        $new = $_POST[$field['id']];
 
        if ($new && $new != $old) {
            update_post_meta($post_id, $field['id'], $new);
        } elseif ('' == $new && $old) {
            delete_post_meta($post_id, $field['id'], $old);
        }
    }
}
add_action('save_post', 'rcSaveData');

I’m not going to go into detail about what exactly this code does as it is rather detailed, but essentially it first checks to make sure the updates were made by a person with permission to do so, then checks to make sure that we’ve made changes. If both of these checks come out okay, the data is saved to the database.

That’s it for the meta box.

5 – User Check #1

It is now time to create a series of functions that will each check for whether or not there is a restriction level set and then display the appropriate content (or lack thereof).

These functions are the first of two user checks we will perform.

Let’s first take a look at what one of these functions look like, then we will put them all together.

function rcMetaDisplaySubscriber($error = ' ')
{
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
 
	if ($rcUserLevel == 'Administrator' || $rcUserLevel == 'Editor' || $rcUserLevel == 'Author')
	{
		echo 'This content is restricted to ' . $rcUserLevel;
	}
	else
	{
		$error .= "";
		return $error;
	}
}

This function first gets the user level info from the custom meta box we created above and then displays an error message if the user level is set to a value that is above the current user.

Note: the user level of the current user will be determined later.

We need a function like this for each user level, so all together it looks like this:

function rcMetaDisplayEditor($error = ' ')
{
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
 
	if ($rcUserLevel == 'Administrator')
	{
		echo 'This content is restricted to ' . $rcUserLevel;
	}
	else
	{
		$error .= "";
		return $error;
	}
}
function rcMetaDisplayAuthor($error = ' ')
{
 
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
 
	if ($rcUserLevel == 'Administrator' || $rcUserLevel == 'Editor')
	{
		echo 'This content is restricted to ' . $rcUserLevel;
	}
	else
	{
		$error .= "";
		return $error;
	}
}
function rcMetaDisplaySubscriber($error = ' ')
{
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
 
	if ($rcUserLevel == 'Administrator' || $rcUserLevel == 'Editor' || $rcUserLevel == 'Author')
	{
		echo 'This content is restricted to ' . $rcUserLevel;
	}
	else
	{
		$error .= "";
		return $error;
	}
}
function rcMetaDisplayNone($error = ' ')
{
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
 
	if (!current_user_can('read') && $rcUserLevel == 'Administrator' || $rcUserLevel == 'Editor' || $rcUserLevel == 'Author' || $rcUserLevel == 'Subscriber')
	{
		echo 'This content is restricted to ' . $rcUserLevel;
	}
	else
	{
		$error .= "";
		return $error;
	}
}

6 – User Check #2

The second user check is the one that is going to run inside of the WordPress loop. Even though I’ve label it User Check #2, it’s actually the first check that is performed. It is run from within the WordPress loop.

Let’s take a look at it, then we will dissect it. Copy the code below into the bottom of your plugin file.

function checkUser()
{
 
	if (current_user_can('read'))
	{		
		if (current_user_can('upload_files'))
		{
			if (current_user_can('moderate_comments'))
			{
				if (current_user_can('switch_themes'))
				{
					//do nothing here for admin
				}
				else
				{
					add_filter('the_content', 'rcMetaDisplayEditor');
				}
			}
			else
			{
				add_filter('the_content', 'rcMetaDisplayAuthor');
			}
		}
		else
		{
			add_filter('the_content', 'rcMetaDisplaySubscriber');
		}
 
	}
	else
	{
		add_filter('the_content', 'rcMetaDisplayNone');
	}
 
}
add_action('loop_start', 'checkUser');

This is a linear capability check that first tests to see if the logged-in user has the minimum permission level, and if they do, it proceeds onto the second permission level check. At each stage the user either passes or fails.

One of the important things to notice with this user check is that all users, except for administrators, end up having a filter applied to the the_content() function. These filters tie directly into the functions we wrote in the above step with User Check #1.

User Check #2 allows us to determine the permission level of the current user and pass them to the correct function in User Check #1, which will filter the content accordingly.

Now that we have performed both of the user checks, we only have two more functions.

7 – Add Filter to Feed Header

This next function will add a small content filter to the top of all the WordPress feeds that will allow us to hide content from the feed if a post/page is restricted.

At the bottom of your file, put:

function rcCheckFeed()
{
	add_filter('the_content', 'rcIsFeed');
}
add_action('rss_head', 'rcCheckFeed');

8 – Check for “Hide from Feed”

The last thing we need to do to finish up our plugin is to add a small function that will check whether the “Hide from Feed” option is turned on. If it is turned on, we then need to display a message like “This content is restricted to Editors“. If it is not turned on, we do nothing but display the regular content.

function rcIsFeed($error = ' ')
{
	$custom_meta = get_post_custom($post->ID);
	$rcUserLevel = $custom_meta['rcUserLevel'][0];
	$rcFeedHide = $custom_meta['rcFeedHide'][0];
	if (is_feed && $rcFeedHide == 'on')
	{
		echo 'This content is restricted to ' . $rcUserLevel . 's';
	}
	else
	{
		$error .= "";
		return $error;
	}
 
}

That’s it! Your Restricted Content plugin is complete!

9 – Going Further

The first thing to do, of course, is to give your new plugin a thorough test run. Next is to extend it to have further capabilities, such as restricted categories.

The complete version of this plugin is available as a free download from my site.

Enjoy!

Custom Font Uploader for WordPress Themes

Pippin — Mon, 21 Jun 2010 16:00:46 +0000

Update (10th July 2010): Pippin has now converted this into a premium plugin which can be purchased from Code Canyon. If you’re not afraid to mess with your code a little though, read on for the DIY method!

WordPress theme option panels were a tremendous stride in the world of theme development; they gave site owner’s the ability to modify various aspects of their site, without ever having to touch the code. Every great theme either has or should have an extensive options panel.

In this tutorial, I’m going to demonstrate how to add a custom font uploader to your options panel. This will allow site owners to upload any number of font files and apply them to different sections of the site.

As a designer, I cringe a little at the thought of clients possibly screwing up my carefully selected fonts with their own haphazard selection, but, in the end, it’s what the client wants.

Before Starting

To begin, you first need to create your options panel. For this task, I recommend you follow Rohan Mehta‘s tutorial over on Net Tuts. It’s the best tutorial I’ve found on this topic and will provide you with almost everything you need for this tutorial.

#1 – The Essentials

The first thing we need to do is create a folder called fonts in our theme directory. Your Structure should look like this:

wp-content

themes

your_theme_folder

fonts

For security reasons, set the permissions of this folder to 774. This will allow the server to read, execute and write, while disallowing any public write / execute privileges.

You will also need to ensure you have a functions.php file, which, of course, you do because you’ve already followed the Net Tuts tutorial, or created an options page of your own

#2 – The Upload Script

In order to actually upload files, such as custom fonts, we need to create a php upload script.

Save this as upload.php in your theme folder (the same place we created the uploads folder):


//include internal wordpress functions
require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
 
//define a maxim size for the uploaded files
define ("MAX_SIZE","20000000"); 
 
//This function reads the extension of the file. It is used to determine if the file  is an font by checking the extension.
function getExtension($str)
{
   $parts = explode('.', $str);
   return end($parts);
}
 
//This variable is used as a flag. The value is initialized with 0 (meaning no error  found)  
//and it will be changed to 1 if an errro occures.  
//If the error occures the file will not be uploaded.
 $errors=0;
//checks if the form has been submitted
 if(isset($_POST['Submit'])) 
 {
 	//reads the name of the file the user submitted for uploading
 	$font=$_FILES['font']['name'];
 	//if it is not empty
 	if ($font) 
 	{
	 	//get the original name of the file from the clients machine
	 		$filename = stripslashes($_FILES['font']['name']);
	 	//get the extension of the file in a lower case format
	  		$extension = getExtension($filename);
	 		$extension = strtolower($extension);
	 	//if it is not a known extension, we will suppose it is an error and will not upload the file,
	 	//we will only allow .ttf and .otf file extensions  
		//otherwise we will do more tests
		if (($extension != "ttf") && ($extension != "otf")) 
	 	{
			//print error message
	 		echo 'Unknown extension!
';
	 		$errors=1;
	 	}
	 	else
	 	{ 		
			//check the mimetypes against an allowed list
			$mime = array ("application/x-font-ttf", "application/vnd.oasis.opendocument.forumla-template", "application/octet-stream");
 
			if (!in_array($_FILES['font']['type'],$mime))
			{
		 		echo 'Unknown mimetype!
';
				$errors=1;
			}
			//get the size of the file in bytes
			//$_FILES['image']['tmp_name'] is the temporary filename of the file
			//in which the uploaded file was stored on the server
			$size=filesize($_FILES['font']['tmp_name']);
			//compare the size with the maxim size we defined and print error if bigger
			if ($size > MAX_SIZE)
			{
				echo 'You have exceeded the size limit!
';
				$errors=1;
			}
			//keep the original file name
			$font_name=$filename;
 
			if (!$errors)
			{
				//the new name will be containing the full path where fonts will be stored (fonts folder)
				$newname="fonts/".$font_name;
				//we verify if the image has been uploaded, and print error instead
				$copied = copy($_FILES['font']['tmp_name'], $newname);
				if (!$copied) 
				{
					echo 'Copy unsuccessfull!
';
					$errors=1;
				}
			}
		}
	}		
	//If no errors registred, redirect back to the theme options panel
	if(isset($_POST['Submit']) && !$errors) 
	{
	$url = get_bloginfo('url') . '/wp-admin/admin.php?page=functions.php';
 
	header ("Location: $url");
	}
 }
 ?>

For explanations of how this script works, read the embedded comments.

#3 – Embed the Upload Script

We now need to create the upload form in our options panel that will allow us to actually upload font files to the server.

Place this in your functions.php:

	Upload Fonts
	Filetypes accepted: .ttf and .otf
	Uploaded fonts will appear in the FONTS menu below
	 bloginfo('template_directory');?>/upload.php">

This code provides an interface to the upload.php that we created earlier, and it looks like this:

Important! In the Net Tuts tutorial, you created a section in functions.php that displays the theme options in a table based layout. The above code should be placed like this:


     echo $themename; ?> Settings
    
 
        //upload form begins here
 
	Upload Fonts
	Filetypes accepted: .ttf and .otf
	Uploaded fonts will appear in the FONTS menu below
	 bloginfo('template_directory');?>/upload.php">
	 
	 	
	 		
	 		
	 	
	 	
	
 
       //upload form ends here
 
 
 
 
                foreach ($options as $value):
                    switch ( $value['type'] ):
                        case "open":
                            break;
 
                        case "close":
?>
. . .

If you do not place the upload form in the correct area, it will not show up in your theme options panel.

#4 – List the Available Fonts

We have created the ability to upload fonts and store them in a folder called fonts. Now we are going to create a function to list all of the available fonts inside our theme options panel.

Place this code in your functions.php:

$fontsList = array();
$fontDirectoryURL = $_SERVER['DOCUMENT_ROOT'] . get_bloginfo('template_directory') . '/fonts';
$removeSiteURL = get_bloginfo('url');
$fontDirectoryPath = str_replace($removeSiteURL, "", $fontDirectoryURL);
$fontURL = get_bloginfo('template_directory') . '/fonts';
$fontDir = opendir($fontDirectoryPath);
while(($font = readdir($fontDir)) !== false)
	{
		if($font != '.' && $font != '..' && !is_file($font) && $font != '.htaccess' && $font != 'resource.frk' && !eregi('^Icon',$font))
			{
				$fontList[] = $fontURL."/".$font;
			}
	}
closedir($fontDir);
array_unshift($fontList, "Choose a font");

just after

1 2	$themename = "Theme-Name"; $shortname = "sn";

These two lines are created in the Net Tuts article.

This is a function that works like this:

create a url that will be used to access the font files in the CSS
open the font directory
read all files contained in the directory
exclude certain file names and directories
place all fonts found inside a list

#5 – Create the Font Options

Anywhere among the rest of your theme options created in the Net Tuts article, place this:

    array( "name" => "Fonts",
        "type" => "section"),
    array( "type" => "open"),
 
	 array( "name" => "Headers",
		"desc" => "Choose a font",
		"id" => $shortname."_header_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Navigation",
		"desc" => "Choose a font",
		"id" => $shortname."_nav_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Main Body",
		"desc" => "Choose a font",
		"id" => $shortname."_body_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Footer",
		"desc" => "Choose a font",
		"id" => $shortname."_footer_font",
		"type" => "select",
		"options" => $fontList),
 
    array( "type" => "close"),

#6 – The CSS Part One

We’re going to include the fonts in our header.php file so that we can apply them to the web elements.

<style type="text/css" media="screen">
@font-face {
  font-family: "header-font";
  src: url("('sn_header_font'); ?>");
}
@font-face {
  font-family: "nav-font";
  src: url("('sn_nav_font'); ?>");
}
@font-face {
  font-family: "body-font";
  src: url("('sn_body_font'); ?>");
}
@font-face {
  font-family: "footer-font";
  src: url("('sn_footer_font'); ?>");
}
</style>

Important! Do not forget to replace sn with your own theme’s short name.

#6 – The CSS Part Two

In your style.css file:

h1,h2,h3,h4,h5,h6,h7  {
  font-family: "header-font";
}
p  {
  font-family: "body-font";
}
.navigation  {
  font-family: "nav-font";
}
#footer p  {
  font-family: "footer-font";
}

That’s it! Your final outcome should look similar to this (unless you used your own theme options page rather than following Net Tuts’):

#7 – Going Further

The system we’ve created works very well and is significantly better than any wordpress font plugin I’ve been able to find. Here are some suggestions for going a little further and making it even better:

Add jQuery and or Ajax to the upload form to prevent reloading of the page and to create cleaner error / success messages
Create options for more specific site elements, such as p tags with a class of “antique”, rather than just generic elements as I’ve done above.
Allow more font file types by adding their mime types and extensions to upload.php

30 Pro jQuery Tips, Tricks and Strategies

Nick Parsons — Tue, 01 Jun 2010 16:00:16 +0000

Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional.

Getting Started

These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. It’s gonna be fun.

We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. Of course, you should be familiar with the basics of jQuery first. If you haven’t used jQuery before, I highly recommend browsing the documentation and watching jQuery for Absolute Beginners Video Series. Otherwise, you’re ready to dig in!

#1 – Delay with Animate()

This is a very quick, easy way to cause delayed actions in jQuery without using setTimeout. The way we make it work is to add an animate function into your chain and animate the element to 100% opacity (which it’s already at), so it looks like nothing is happening.

For instance, let’s say that you wanted to open a dialog and then fade it away after 5 seconds. Using animate, you can do it like this:

1
2
3

$(function(){
	$("body").append("
").<em>animate({ opacity : 1.0 }, 5000)em>.fadeOut();
});

Don’t you just love jQuery chaining? You’re welcome to read more about this technique from Karl Swedberg.

UPDATE: jQuery 1.4 has eliminated the need for this hack with a method called delay(). It is just what is sounds like – a function specifically made to delay an animation effect. Way to go, jQuery!

#2 – Loop through Elements Backwards

One of my personal favorites is being able to loop backwards through a set of elements. We all know each() lets us easily loop through elements, but what if we need to go backwards? Here’s the trick:

$(function(){
	var reversedSet = $("li").get().reverse();
	//Use get() to return an array of elements, and then reverse it
 
	$(reversedSet).each(function(){
		//Now we can plug our reversed set right into the each function. Could it be easier?
	});
});

#3 – Is There Anything in the jQuery Object?

Another very elementary but regularly useful trick is checking if there are any elements in the jQuery object. For example, let’s say we need to find out if there are any elements with a class of ‘active’ in the DOM. You can do that with a quick check of the jQuery object’s length property like this:

$(function(){
	if( $(".active").length ){
		//Now the code here will only be executed if there is at least one active element
	}
});

This works because 0 evaluates false, so the expression only evaluates true if there is at least one element in the jQuery object. You can also use size() to do the same thing.

#4 – Access iFrame Elements

Iframes aren’t the best solution to most problems, but when you do need to use one it’s very handy to know how to access the elements inside it with Javascript. jQuery’s contents() method makes this a breeze, enabling us to load the iframe’s DOM in one line like this:

$(function(){
	var iFrameDOM = $("iframe#someID").contents();
	//Now you can use find() to access any element in the iframe:
 
	iFrameDOM.find(".message").slideUp();
	//Slides up all elements classed 'message' in the iframe
});

#5 – Equal Height Columns

This was one of CSS Newbie’s most popular posts of 2009, and it is a good, solid trick to have in your toolbox. The function works by accepting a group of columns, measuring each one to see which is largest, and then resizing them all to match the biggest one. Here’s the code (slighly modified):

$(function(){
	jQuery.fn.equalHeight = function () {
		var tallest = 0;
		this.each(function() {
			tallest = ($(this).height() > tallest)? $(this).height() : tallest;
		});
		return this.height(tallest);	
	}
 
	//Now you can call equalHeight
	$(".content-column").equalHeight();
});

An interesting and similar concept is the awesome jQuery masonry plugin, if you’re interested in checking it out.

#6 – Find a Selected Phrase and Manipulate It

Whether you’re looking to perform find and replace, highlight search terms, or something else, jQuery again makes it easy with html():

$(function(){
	//First define your search string, replacement and context:
	var phrase = "your search string";
	var replacement = "new string";
	var context = $(body);
 
	//
	context.html(
		context.html().replace('/'+phrase+'/gi', replacement);
	);
 
});

#7 – Hack Your Titles to Prevent Widows

Nobody likes to see widows – but thankfully with some jQuery and a little help from we can stop that from happening:

$(function(){
	//Loop through each title
	$("h3").each(function(){
		var content = $(this).text().split(" ");
		var widow = "&nbsp;"+content.pop();
		$(this).html(content.join(" ")+widow);
	});
});

This technique was suggested in a comment by Bill Brown on Css-Tricks.

#8 – Add Pseudo-Selector Support in IE

Whether or not to support IE (especially 6) is a hotly debated issue, but if you are of the “let’s-make-the-best-of-this” camp, it’s nice to know that you can add pseudo-selector support with jQuery. And we aren’t just limited to :hover, although that’s the most common:

$(function(){
	<strong>//ADD HOVER SUPPORT:
	function hoverOn(){
		var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
		$(this).addClass(currentClass + '-hover');
	}
	function hoverOff(){
		var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
		$(this).removeClass(currentClass + '-hover');
	}
	$(".nav-item").hover(hoverOn,hoverOff);
 
	<strong>//ADD FIRST-CHILD SUPPORT:
	jQuery.fn.firstChild = function(){
		return this.each(function(){
			var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name
			$(this).children(":first").addClass(currentClass + '-first-child');
		});
	}
	$(".searchform").firstChild();
});

The great thing about setting it up that way firstChild(), hoverOn() and hoverOff() are very reusable. Now, in the CSS we can simply add the ‘nav-item-hover’ or ‘searchform-first-child’ classes as additional selectors:

.nav-item:hover, >.nav-item-hover>{
	background:#FFFFFF;
	border: solid 3px #888;
}
.searchform:first-child, >.searchform-first-child>{
	background:#FFFFFF;
	border: solid 3px #888;
}

It’s not pretty, but it is valid and it works. I’ve got to say, though, that I sure am looking forward to the day we won’t have to bother with this stuff!

#9 – Manage Search Box Values

A popular effect is to fill a site’s search box with a value (like ‘search…’) and then use jQuery to clear the default value when the field receives focus, reverting if the field is empty when blurred. That is easily accomplished with a couple lines of jQuery:

$(function(){
	//set default value:
	$("#searchbox")
	  .val('search?');
	  .focus(function(){this.val('')})
	  .blur(function(){
		(this.val() === '')? this.val('search?') : null;
	  });
});

#10 – Create a Disappearing ‘Back-to-Top’ Link

The disappearing back-to-top link was inspired by Brian Cray. All you have to do is add a back-to-top link at the bottom of your content like normal, and then jQuery performs the magic:

$(function(){
/* set variables locally for increased performance */
	var scroll_timer, 
		displayed = false,
		$message = $('#message a'),
		$window = $(window),
		top = $(document.body).children(0).position().top;
 
	/* react to scroll event on window */
	$window.scroll(function () {
		window.clearTimeout(scroll_timer);
		scroll_timer = window.setTimeout(function () { // use a timer for performance
			if($window.scrollTop() <= top) // hide if at the top of the page
			{
				displayed = false;
				$message.fadeOut(500);
			}
			else if(displayed == false) // show if scrolling down
			{
				displayed = true;
				$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
			}
		}, 100);
	});
});

Brian also added some nice-looking CSS, which you could add as a css file or define in an object literal and apply it using jQuery.css(). Feel free to go check out his in-depth explanation if you want to learn more.

#11 – Easily Respond to Event Data

One of my favorite things about jQuery is its convenient remapping of event data, virtually eliminating cross-browser inconsitencies and making events much easier to respond to. jQuery passes an event parameter into all bound/triggered functions, which is commonly called e:

$(function() {
	//We can get X/Y coordinates on click events:
	$("a").click(function(<em>eem>){
		var clickX = e.pageX;
		var clickY = e.pageX;
	});
 
	//Or detect which key was pressed:
	$("window").keypress(function(<em>eem>){
		var keyPressed = e.which;
	});
});

You can check out the jQuery docs on this one to see all the possibilites, or view this keycode reference if you’d like to look up a certain key’s character code.

#12 – Encode HTML Entities

The first place I saw this mentioned was over at Debuggable, and I have to say they really came up with something good here. The idea is to produce a jQuery result similar to PHP’s htmlentities(). Check this out:

$(function(){
	var text = $("#someElement").text();
	var text2 = "Some  & such to encode";
	//you can define a string or get the text of an element or field
 
	var html = $(text).html();
	var html2 = $(text2).html();
	//Done - html and html2 now hold the encoded values!
});

#13 – Friendly Text Resizing

Originally mentioned at ShopDev, this is an excellent way to include some user-centricity in your code (allowing them to control the font-size):

$(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

As I said, this is nice trick to know and adds some of that dynamic friendliness that people enjoy so much.

#14 – Open External Links in a New Window

This external links hack has been mentioned before at Cats Who Code, and although imperfect it’s a good way to open external links in new windows without causing validation errors in XHTML 1.0 Strict.

$(function(){
	$('a[rel$='external']').click(function(){
		this.target = "_blank";
	});
});

This works by grabbing all links with an external rel and adding a blank target. Same result, it’s just not hardcoded into the site.

#15 – Gracefully Degrading AJAX Navigation

AJAX navigation is great – but not for users and bots who can’t use it. The good news is, it’s possible to offer direct links to your content while still presenting AJAX functionality (to users who have that capability) by catching links before they go anywhere, returning false on them and loading the AJAX content instead. It could look like this:

$(function(){
	$("a").bind("click",function(){
		//Put your AJAX request code here
		return false;
	});
});

Of course, this is very basic, but it’s an essential facet to any AJAX navigation. You can also check out SpeckyBoy’s post on Easy-to-Use Free Ajax Navigation Solutions.

#16 – Create an Array of GET variables

Although this is not specifically a jQuery trick, it’s useful enough to be included here. Using GET variables in Javascript code doesn’t happen everyday, but when it does you’ll want to know a quick and efficient way to read them. All we have to do is get document.location.search and do some parsing on it:

 
var searchArray = document.location.search.substring(1).split("&");
//Take off the '?' and split into separate queries
 
//Now we'll loop through searchArray and create an associative array (object literal) called GET
var GET = []; 
for (searchTerm in searchArray){
	searchTerm.split("="); //Divide the searchTerm into property and value
	GET[searchTerm[0]] = searchTerm[1]; //Add property and value to the GET array
}

#17 – Partial Page Refresh Using load()

This excellent technique found at the Mediasoft Blog is way cool and very handy for creating a regularly updating dashboard/widget/etc. It works by using jQuery.load() to perform a AJAX request:

$(document).ready(function() {
	setInterval(function() {
		$("#content").load(location.href+" #content>*","");
	}, 5000);
});

Voila! It works – no iframes, meta refreshes or other such nonsense.

#18 – Skin with jQuery UI

If you’re going to write any jQuery plugins (I hope you have already!), you should know that a great way to add flexibility and elegance is to incorporate jQueryUI theming classes into any widgets/visible elements your plugin produces. The great thing about doing this is that it cuts or eliminates the css you have to provide with the plugin, and it adds a lot of customizability, too (which is one of the key factors in a successful plugin).

And the actual implementation is as simple as learning how the classes work and attaching them to plugin elements. I can see this would be especially great with plugins like form beautifiers and photo sliders, making it easy to keep a consistent look throughout a website or app. You can check out the Theming Reference here.

#19 – Include Other Scripts

Stylesheet switchers are nothing new, but adding other scripts with jQuery is something that is often overlooked. The advantage is twofold:

It makes it easy to have lazy script loading.
It also allows us to add scripts at runtime, which could be useful in a whole host of situations.

It’s as easy as using append() to add a new script to the head of the document:

$(function(){
	$("head").append("");
 
	//Or, loading only when the slow stuff is ready:
	$("img,form").load(function(){
		$("head").append("");
	});
});

#20 – Use Body Classes for Easy Styling

Do you want to save on code and keep your styling in the css file where it should be? Body classes (another great ideas suggested by Karl Swedberg) allow you to do that. In short, you can use jQuery to add a ‘JS’ class to the body element, which will enable you to set styles in your css that will only be applied if Javascript is enabled. For example:

1
2
3

$(document).ready(function() {
	$("body").addClass("JS");
});

For Javascript users the body now has a JS class, so in our CSS we can add styles like this:

ul.navigation{
	display:block;
}
.JS ul.navigation{
	display:none;
}

This gives us a great way to change styles based on whether or not Javascript is supported/enabled, and we can still keep the styling in the CSS file. Another interesting related use of this technique is to add browser classes to the body, enabling easy browser-specific styling. You can read more about that here.

#21 – Optimize Your Performance

Experienced coders don’t make clients wait – they write code that runs fast! There are several ways you can make your code run faster like:

Reference id’s rather than classes (id selection is native and therefore quicker)
Use for instead of each()
Limit DOM manipulation by adding elements in one big chunk rather than one at a time
Take advantage of event delegation
Link to Google’s jQuery copy rather than hosting your own – it’s faster and always up to date

Basically, it all boils down to not making jQuery do any more work than it has to (and using native abilites whenever possible). Giulio Bai wrote an excellent post on jQuery perfomance, if you’d like to dig in deeper.

#22 – Adapt Your Scripts to Work Cross-Browser – The Right Way

Thankfully, jQuery’s cross-browser compatibility really cuts down the need for browser hacks. Sometimes, though, it is good to be able to get information about the client, and we can do that cleanly and unobtrusively with jQuery.support:

//Does this client follow the W3C box model?
var boxModel = $.support.boxModel;
 
//Does this client support 'opacity'?
var opacity = $.support.opacity;

It’s definitely better practice to use feature-detection rather than browser sniffing, and this is a very efficient way to do it. Read more about jQuery.support’s properties here.

#23 – Configure jQuery to be Compatible with Other Libraries

We all find ourselves in situations where multiple libraries are needed, and because jQuery isn’t the only library that uses the $ alias, compatiblity issues sometimes pop up. Thankfully, this is easy to fix using jQuery’s noConflict(). You can even define a custom alias to replace the $:

var $j = jQuery.noConflict();
 
//Now you can use '$j' just like '$'
$j("div").hide();

An alternate technique is to wrap jQuery calls in an anonymous function and pass jQuery in as a parameter. Then you can use whatever alias you want, including the ‘$’. This is especially useful for plugin authoring:

(function($){
	$(document).ready(function(){
		//You can use normal jQuery syntax here
	});
})(jQuery);

#24 – Efficiently Store Element-Specific Information with data()

data() is probably one of the lesser used jQuery methods, although it certainly shouldn’t be. It allows us to attach/retrieve as much data as we want to DOM elements without misusing attributes, and is especially useful for more complex scripts. For example, Stefan Petre’s Colorpicker plugin uses data a lot because it’s tracking lots of fields and colors, converting rgb to hex, etc. Here’s are some examples of how data() works:

$(document).ready(function() {
	//Set status to 'unsaved'
    $("button:first").data("status", "unsaved");
 
	//Retrieve status
	var buttonStatus = $("button:first").data("status");
 
	//Change status, this time defining an object literal
	$("button:first").data("status", {saved : true, index : 1});
 
	//Retrieve status of index property
	var buttonStatusIndex = $("button:first").data("status").index;
 
	//Remove status data
	$("button:first").removeData("status");
});

I’m sure you can imagine the huge extent of possibilities this presents. Again, it’s worth reading the documentation if you haven’t used data() before.

#25 – Extend/Modify Existing jQuery Functions

Nobody says you can’t use the existing jQuery platform as a springboard for new ideas – and many have done just that using extend(), another wonderful jQuery method. The popular Easing plugin, for example, adds some animation variety by extending the easing object, an already existing object that is passed to animate() and others:

jQuery.extend({
	easing: {
		easein: function(x, t, b, c, d) {
			return c*(t/=d)*t + b; // in
		},
		easeinout: function(x, t, b, c, d) {
			if (t < d/2) return 2*c*t*t/(d*d) + b;
			var ts = t - d/2;
			return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;		
		},
		easeout: function(x, t, b, c, d) {
			return -c*t*t/(d*d) + 2*c*t/d + b;
		}...

By extending and improving jQuery’s default functionality, you can open up a whole new world of cool possibilities.

#26 – Reverse Engineer before() and after()

I always appreciated how jQuery provided append()/prepend() and appendTo()/prependTo(), enabling us to easily perform an append in either direction. I’ve wished, though, that a similar ability was provided with before() and after(). To change that, we can easily add two functions called putBefore() and putAfter() that will fulfill that purpose. Here’s how:

$(function(){
	jQuery.fn.putBefore = function(dest){
		return this.each(function(){
			$(dest).before($(this));
		});
	}
	jQuery.fn.putAfter = function(dest){
		return this.each(function(){
			$(dest).after($(this));
		});
	}
});

#27 – Add an isChildOf() Test

I’m sure we all have found ourselves in this situation – needing to know if an element is a descendant of another element. The good news is, with one line of code we can extend jQuery to allow this:

$(function(){
	jQuery.fn.isChildOf = function(b){return (this.parents(b).length > 0);};
 
	//Now we can evaluate like this:
	if ( $("li").isChildOf("ul") ){
		//Obviously, the li is a child of the ul so this code is executed
	}
});

Thanks to Dan Switzer II for this contribution!

#28 – Add Custom Selectors

This is another one that has been talked about a lot in the development community, so you may have this already figured out. If not, get ready because this will open some whole new windows for jQuery efficiency. The short story is, jQuery allows us to extend its expression object, which means we can add whatever custom selectors we want. For example, say we wanted to add a selector version of the isChildOf() method we wrote earlier:

$(function(){
	jQuery.extend(jQuery.expr[':'], {   
		'child-of' : function(a,b,c) {
			return (jQuery(a).parents(c[3]).length > 0);
		}   
	});
 
	//'child-of' is now a valid selector:
	$("li:child-of(ul.test)").css("background","#000");  
});

Debuggable has a great post on this one as well, if you’d like to read more about how the parameters work, etc.

#29 – Smooth Scrolling Without Plugin

Karl Swedberg posted this one a while back on the Learning jQuery site, and it is definitely worth a look. Of course, there are a couple of plugins to accomplish this (and they have more features), but I think the real value in this is the excercise of doing it yourself. Plus, look at how tiny it is:

$(document).ready(function() {
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
      && location.hostname == this.hostname) {
       var $target = $(this.hash);
       $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
       if ($target.length) {
           $target.ScrollTo(400);
           return false;
       }
    };
  });
});

#30 – Add Tabs without a Plugin

jQuery tabs are often covered but also often used, and like the scrolling trick above it’s important to know how to do these without a plugin. The first thing to do is write our markup, which should be perfectly presentable in the absence of Javascript:

<div class="widget">
	<h3>Popular</h3>
	<ul>
		<li>Item #1</li>
		<li>Item #2</li>
		<li>Item #3</li>
	</ul>
</div>
<div class="widget">
	<h3>Recent</h3>
	<ul>
		<li>Item #1</li>
		<li>Item #2</li>
		<li>Item #3</li>
	</ul>
</div>

With a bit of styling, this would look just fine, so we know our jQuery is going to degrade gracefully. Now we can write the code:

$(document).ready(function() {
	$("div.widget").hide().filter(":first").before("
").add("div.widget").each(function(){
		$(this).find("ul").appendTo(".tab-content");
		$("ul.tabs").append("" +$(this).find(":header:first").text()+ "
");
	});
	$("ul.tabs li").click(function(){
		$(this).addClass("active");
		$(".tab-content ul").slideUp().eq($("ul.tabs li").index(this)).slideDown();
	});
	$("ul.tabs li:first").click();
});

Of course, that’s just one way to do it. If you’d like to see some other approaches, see Extra Tuts’ jQuery Tabs Tutorials collection.

Wrapping Up

Thanks for reading, I hope you’ve enjoyed it! In case you’re all fired up on jQuery now, here are some links to more great tips n’ tricks collections:

As you can see, there are infinite opportunities for amazing innovation with jQuery. So keep experimenting, keep trying things, keep thinking, “What if?” You could be the next jQuery supergeek!

I Just Dont Care About the GPL/Licenses

Michael Martin — Fri, 21 May 2010 00:56:35 +0000

Update 15 July 2010: PliablePress is now 100% GPL compliant! Read more here. I still stand by most of what I said here about product quality being more important than a license, but I was wrong to underestimate how important the GPL is to a lot of people. Thanks to everyone for the enlightened discussions we had here, the change is because of you all!

There has been another GPL storm going on in the WordPress world in the past few days. Yep, again.

I don’t normally make a comment on them, but given that I’m directly involved with it now through PliablePress themes (All of our themes have to come with some sort of license, right?), it seems time to finally step in.

An Ultra-Fast Backstory

WordPress is licensed under the GPL, which means anyone can copy, edit, sell or redistribute it. Obviously if you’re going to sell themes (or plugins) though, that license poses a bit of an issue because it literally means people can buy it once and sell it for less (or for nothing!) elsewhere.

Matt Mullenweg (Founder of WordPress) wants all themes to be GPL. He’s said he will never take this to court, but he is using his resources as founder to do his best to promote GPL themes (e.g. GPL themes are promoted on the WordPress.org site, whilst non-GPL themes aren’t allowed to be mentioned anywhere on it).

The latest fuss is because Jane Wells has taken over as the central point for WordCamp info and now says that anyone who sells non-GPL products is forbidden from speaking at a WordCamp, or advertising.

What Exactly Is the PliablePress License?

I’ll answer this quickly before I get into the main point; PliablePress doesn’t have a real license. It has 5 lines that I wrote about 3 hours before we went live. It basically says that you can do anything you want with your theme, so long as you don’t sell it on or give it to someone else.

So you can edit, customize and expand on it as much as you want, for every single site you have. But if your friend wants to use it, they have to buy their own copy (Though you can totally get them to buy it through your affiliate link and earn yourself 33% back!)

Now here is the interesting part; I don’t actually mention the license anywhere on the site until you’re in the checkout. And in the 11 days since we launched, I’ve been asked hundreds of questions from different people all about PliablePress and our themes.

Want to know how many asked about the license? None (Okay, one person, but he’s a special case and you’ll be hearing much more about him on the PliablePress blog soon!)

That’s the important thing to realize here, just how few people really care. At PliablePress, we’re going to do whatever it takes to make your site the absolute best it can be. And that’s all our customers seem to want so far. One license or another doesn’t help them with that.

So Why Not Go GPL?

Because it’s a very big decision!

Once you GPL a product, you can’t undo that. That’s kind of the point. If we go GPL, it’s permanent. That kind of decision needs some serious thought, and you know what? I have better things to do.

Chameleon packs in an absolute boat-load of functionality, and we had 5 full themes on launch. I don’t think we have a single customer who would have preferred that I’d spent the time looking into this GPL issue and left out some of our features. And that’s what it’s all about, doing what is best for you, our customers.

Since we’ve launched, I’ve replied to questions about any kind of issue our users have met. I’ve built new features into the themes because people wanted them already, and I’ve written entire chunks of code for individual people just so they can adapt their theme the way they want it.

In short, I’m making sure you can take one of our themes and make it exactly the way you like. And we’re yet to have one dissatisfied customer, so I think we’re doing a pretty good job!

If you can show me how the “license” I mentioned above stops me from doing that, well, maybe I’ll go GPL after all then! It’s like I said; whatever it takes to make your site rock.

Will You Ever Go GPL?

Maybe. But to be honest, it’s not likely to happen in the near future.

There are too many things happening (Like the number of “bundle” theme sites opening lately), and sometimes the whole thing just feels like a farce. It’s a great marketing trick for some companies (That much is clear when you realize that only their WordPress products are GPL. If they believe in the GPL, why not their other products too?), and it provides a lot of discussion for others (Including me now, it seems!)

The best route seems to be to sit on the sideline and work away at making our products the best they can be. When the storms all die out and the dust settles, we’ll check back in and see how things stand then.

What About the WordCamps?

I’ve spent the past 3 years writing hundreds of tips and tricks for getting the most out of WordPress here. I’ve brought dozens of clients to WordPress through our services, I’ve written around 1500 comments on this site talking to you all about it, and I don’t even want to think about just how many WordPress questions I’ve answered in emails.

And I’ve loved every minute of it. It feels great helping someone out and hearing them say they appreciated it. And with near 11,000 daily subscribers here, your guess is as good as mine at just how many people have made use of these tips!

And with the exception of the design services (obviously!), I’ve done all of that for free.

But now that I’m taking what I’ve learnt further and building awesome themes that let you do half the things I talk about here just by clicking a button, I’m not welcome in Jane Wells’ community?

Oh well.

It’s not going to change how I do things. You’re still going to get loads of great tutorials on improving your site, I’m still going to be talking to every single one of you in the comments, on Twitter, or anywhere else. And PliablePress is still going to create themes that make your site rock.

Don’t get me wrong though, I’m not totally aloof to it all. I do think it’s a shame I’m no longer wanted at a WordCamp, and it’s disheartening to see this weight-throwing by the WordCamp trademark owners (especially when WordCamp began as a way for WordPress fans to simply get together and learn from each other. Now count how many times Jane has used the word official in that short post. It was a lot simpler than that before).

But that’s just the way of it. If you don’t want to be part of that, then don’t be. Just get on with what you’re doing and make sure you’re taking care of the people who really matter, your readers and your customers. That’s what I do.

Get Your WordPress Themes from PliablePress!

Michael Martin — Tue, 11 May 2010 16:09:38 +0000

Anyone following me on Twitter will already know this by now, but our big project, PliablePress, went live around 24 hours ago!

And it’s been great! It’s been crazy and I’ve been chasing things around everywhere and I meant to have this post published, well, 24 hours ago, but all of that aside, it’s been great.

We’ve had loads of great reactions to the designs, and even our first happy customers!

In this post I want to show you what we’ve done so far, share some videos of the framework in action, and offer you a discount if you want to become a customer!

Want to See Our Designs?

Click on any image to see its full page (including a live demo link!) on PliablePress.

With any purchase, you will get Chameleon for free (Chameleon is our framework, which all of the themes need to run on. They’re all child themes of Chameleon)

The Framework in Action

I’ve used Screenr to record some videos of the framework in use. It limits you to 5 minutes a video though so I’ve split it up into 3 videos. Check out this post to see all 3 in a row!

(Or if you want to be really quick; the first gives you a general idea of the framework, and the second shows you some of the cooler features of it!)

Click here for the Chameleon demo videos.

Get a $30 Discount & A Free Theme!

Originally I promised everyone a $25 discount, but I upped that at the last minute to $30, and there’s a special offer surrounding our next theme.

The $30 coupon expires in about 30 hours now, so you’ll need to act quick!

When you sign up, just enter this coupon: LAUNCHDAY

If the $30 expires though, don’t worry, I’m still offering $25 off until the end of next week so you can still make a big saving!

In that case, just enter this coupon on the signup page: LAUNCH2010

How Can You Get Our Next Theme For Free?

Our next theme is called MyBiz, and it’s a very modern website and blog theme (You’ll see what I mean when you see the homepage below!).

Anyone who buys any theme from us in the next 2 weeks will get a free copy of MyBiz (And all its color variations!) when we launch it!

And now, here’s a new preview of MyBiz that I haven’t shared anywhere yet!

Quite different to the blue preview you may have seen in the newsletter yesterday, isn’t it? And there are more variations on their way, so stay tuned!

That’s us live though! It’s been a rollercoaster ride getting here, but I’m delighted to finally be able to share this all with you, and I’d love to hear what you think of it all! (or better yet, buy a theme and try it out on your site! And make sure you share the link with me if you do!)

And last of all, if you’d like to take part in our affiliate program, just sign up for an account here! We’re offering a huge 33% for any sales referred through one of your links, so it could be well worth your while!

3 Years On, Time To Show You Who I am?

Michael Martin — Mon, 03 May 2010 16:00:00 +0000

(This is more of a personal post than normal. If that’s not your thing, sorry, but at least I warned you!)

My name’s Michael Martin, and I’m the person behind Pro Blog Design. If you’ve ever emailed in, tweeted, or left a Facebook message (or most likely, even if you’ve just left a comment here!) then you’ve talked to me before.

And if you’ve been here at all before, you’ve definitely read articles I’ve written (and naturally if you’ve worked with us, you’ve probably had more emails from me than you actually wanted!)

But you’ve never seen a photo of me.

In one week from today, I launch the biggest project of my life, and it just doesn’t seem fair to ask you to purchase something from me without knowing who I am.

So you’ll have to forgive this being a bit of dull post. It’s for those of you who really want to get involved with PliablePress and take part in shaping what it becomes. The first step towards that is introductions.

So Who Am I?

Well, that’s me over there on the right!

The reason you’ve never seen a photo before is that I was fairly young when I started Pro Blog Design.

I’m 20 now, and have the reputation of 3 years writing and designing at Pro Blog Design to back me up.

When I started out though, I was 17 and wondered if I’d have trouble with people taking me seriously or not. I never lied about my age, I just avoided bringing it up.

The awesome thing about the internet though is that the very best people (ie. the ones you actually want to work with, and the ones you want to be your customers) really couldn’t care less what age you are (Or where you’re from, or anything else for that matter). They just want you to know your stuff.

It took me a while to realize that, and I probably could (and should!) have put photos online before now. Maybe a few people would have been put off, but not the important ones (A few especially perceptive clients even worked it out because of the times I sent most of my emails at, and none were bothered).

Kind of nice to have done that now, I think I was the only person in the world to have Facebook and not have a single photo on it!

What All Do You Do?

I’m a full time student at Queen’s University, Belfast, studying Computer Science (It’s good most of the time, but if you were having concerns about Flash now, have you ever even heard of Adobe Director? Yawn…).

Pro Blog Design is where the real fun happens though. When I started out, and for quite a while afterwards, this was all a one man show. I wrote all the posts, handled all the communications, and did all the design and code work.

Now I still write a lot of posts and do all the communications, but instead of writing every post, I often hire other writers and then work as an editor. And instead of doing all of the design work by myself, I now oversee it and guide the project (Though I do most of the coding myself, and all of the coding in Chameleon of course).

Why change to a team effort? Well for one thing, I needed to. Productivity is one thing, but there’s a point where even the most colorful of to-do lists and focus tricks aren’t going to take you any further…

The best reason though is that I get to work with people who are better than me. If you hire us to design your website now, you’re going to get a much better site than if you’d hired just me 3 years ago.

Why? Because I work with designers who are better than me. I’ve done enough design work myself to know a fantastic designer when I see them, and that’s why at Pro Blog Design, you only get the best.

Sorry if that seems like a copout as a freelancer, but anyone who thinks they’re the very best at everything they do just isn’t being honest with themselves. Everyone has strengths, and the only way to build something awesome is to find people who rock at the areas you’re just “good” in.

For me, that meant graphic design in particular (Ever notice how I don’t write Photoshop tutorials? I can make your site as user-friendly and functional as you like, but for really eye-grabbing graphics, I knew I needed to pair up with an awesome designer)

The Exciting Part

So now you know who I am and what I do, I have some news to share with you. Up until now, I’ve always had something full time to work on aside from Pro Blog Design (i.e. university), but that’s about to change.

The next year in my course is supposed to be spent working in industry for a year. For me, it means that come June I’ll be working full time on the web for (at least!) the next 16 months. And I can’t wait!

So if you thought everything up until now was good, just wait until I’m able to go at it full throttle! And naturally, PliablePress is going to be a massive part of that.

If you made it this far down the post, thanks for taking the time to read it all. Now that you know me, I’d love to know you.

With PliablePress, we really are going to involve you in everything. We’ve done enough work on the web to have a good idea of what you will like, but it’s not possible to know that better than you do.

If you want to get involved and help shape PliablePress, I’d be delighted. A big part of that will be in discussions on the user forum when we launch, and on the blog, but the first step is just joining the newsletter. We’re going to have some big questions on it soon and I’d love to hear your opinions.

And if you’ve been following along in the background in all this or we haven’t spoken much before, please do introduce yourself in the comments (let me know who you are and how I can help you!). I’m not joking in the slightest about wanting to get to know you.

It’s just 7 days to the launch. I hope this post took you a little further along the road to trusting me to make your site rock!