Check ‘em out at http://icons.mysitemyway.com/.

The Dilemma

Why spend money on icons when there’s such an abundance of free ones out there on the market? Why? Because it often takes an incredible amount of time scouring the net finding ones you can actually use. To complicate things, many are released under various licenses that require you to spend as incredible an amount of time reading up on.

Enter Webtreats

Webtreats is an unbelievably gracious group of web developers who have kindly provided a huge arsenal of graphic and other web design elements for free to the masses. 100% free, for commercial, personal use or otherwise! Read it for yourself in their Terms of Use.

Their icons span the gamut of utility, covering categories such as alphanumeric, arrows, tools, and even social networks! And did we mention they’ve got one fat list of icons? Yep, it’s the biggest, most fattest list of free icons we’ve yet seen.

So they’re free, are they any good?

As great as “free” sounds, free graphics are only as valuable as they are useful, right? Fortunately,  Webtreats’ icons, are designed by professionals and have all the sheen of commercial icon sets. Plus, they cover such a wide array of categories, they’re simply invaluable.

Using Webtreats graphics, you’ll have a consistent, coherent and beautiful graphic experience at your disposal. They’re so utterly cool, we use them here throughout the site.

More awesomeness from Webtreats!

Being seasoned web development professionals, Webtreats does far more than provide super-cool, free resources. In fact, they’ve got a series of professional WordPress and general website themes up for sale on the Envato network, themeforest to be specific.

Need some awesome themes, check out Webtreats on Envato!

Not to worry at all, Converticon.com is here for to save you!

The .ico file format hasn’t been the easiest format to find a converter for in the past. Most graphic editors, like Photoshop and Paintshop Pro, don’t seem to include native exporters for the format.

What to do!

Luckily, the good folks behind the incredible RocketDock software have created a quick and easy to use web app at Converticon.com that makes the conversion process a snap. Simply visit the website, select the file you want to convert, and convert it.

Why would I need this?

You likely don’t. But the .ico format is used for website favicons as well as software application icons. It includes the possibility of transparent pixels, so a proper converter will bear that in mind and fortunately, this is such a proper converter.

Have fun converting!

A bit of background

Interactive fiction has captured the hearts and minds of many a geeky soul such as ourselves and while it’s been around in the computing realm for quite some time, it has a surprisingly exciting recent history. The development of Inform 7 and its natural language system has brought the world of text-based game development into the hands of anyone with a grasp of the English language (well, sort of).

What’s this Inform 7 thingy?

Inform 7 lets you create text-based adventures, games of all textual sorts, using the English language as the programming method. Best of all, it’s totally free! More than that, it can even export a fully browser-playable game, via the amazing Parchment JavaScript.

Awesome as that is, it still takes a bit of work to integrate those exported games in a WordPress site. But we’ve just gone through the trouble of doing that for you and hereby present a plugin that lets you easily achieve it. Check out the main plugin code!

<?php

/*
Plugin Name: Inform 7 Plugin for WordPress
Plugin URI: http://thehacked.com/inform7
Description: Easily include Inform 7 games in your site. Available using the [inform7] shortcode.
Version: 1.0
Author: DavidM
Author URI: http://thehacked.com
License: GPL 2
*/

class Inform7_Shortcode {

	static $file_url;
 
	static function init() {
		add_shortcode( 'inform7', array( __CLASS__, 'handle_shortcode' ) );
 
		add_action( 'init', array( __CLASS__, 'register_scripts' ) );
		add_action( 'wp_footer', array( __CLASS__, 'print_scripts' ) );
	}
 
	static function handle_shortcode($args) {
		extract( shortcode_atts( array(
			'url' => '',
			'div' => 'inform7',
			'width' => '100%',
			'height' => '400px'
		), $args));
		// The crux of the output that will be echoed to the page
		$output = '<div id="inform7-wrapper" style="width:' . $width . ';height:' . $height . ';">';
		$output .= '<div id="gameport"><div id="parchment"></div></div></div>';
		// Add user-specified div tag if specified
		if ( $div != '') {
			$output = '<div id="' . $div . '">' . $output;
			$output .= '</div>';
		}

		self::$file_url = $url;
		return $output;
	}
 
	static function register_scripts() {

	// Register parchment options and special considerations
	wp_register_script( 'thehacked-inform7', plugins_url( 'thehacked_inform7.js', __FILE__ ) );
	
	// Register other scripts
	wp_register_script( 'jquery' );
	wp_register_script( 'inform7-parchment', plugins_url( 'parchment.min.js', __FILE__ ) );
	wp_register_script( 'inform7-gnusto', plugins_url( 'gnusto.min.js', __FILE__ ) );
	wp_register_script( 'inform7-zmachine', plugins_url( 'zmachine.min.js', __FILE__ ) );
	
	// Register styles
	wp_register_style( 'inform7-css', plugins_url('style.css', __FILE__ ) );

	}
 
	static function print_scripts() {
		if ( self::$file_url == '' )
			return;
		
		// Render options on page
		$data = array( 'url' => __( self::$file_url ), 'plugin_url' => plugins_url( '/', __FILE__ ) );
		wp_localize_script( 'thehacked-inform7', 'thehacked_inform7_data', $data );
		
		// Print scripts
		wp_print_scripts( 'thehacked-inform7' );
		wp_print_scripts( 'inform7-parchment-options' );
		wp_print_scripts( 'inform7-parchment' );
		wp_print_scripts( 'inform7-gnusto' );
		wp_print_scripts( 'inform7-zmachine' );
		
		// Print styles
		wp_print_styles( 'inform7-css' );
	}
}
 
Inform7_Shortcode::init();

?>

Cool, what’s that do?

That plugin code basically asks WordPress to include all the files and code necessary to make your Inform project work. It does so only when the [inform7] shortcode is detected too.

This is achieved using the awesome Jedi method described by the equally awesome Scribu in his post, How to load JavaScript like a WordPress Master.

Of course, that’s just the main plugin code. You’ll need a bit more to complete the plugin, and here’s the JavaScript for the referenced thehacked-inform7.js file:

// Setup parchment options
parchment_options = {
default_story: [ thehacked_inform7_data.url],
lib_path: thehacked_inform7_data.plugin_url,
lock_story: 1,
page_title: 0
};

// Special hack to get #top-window into better position
jQuery(document).ready(function($) {
	setTimeout(function(){
		jQuery('div#top-window').appendTo('div#inform7-wrapper');
	}, 1000);
});

Hmm, and what’s this do?

First off, this includes a few options that Parchment needs.

Second, it adds a bit of a JavaScript hack to get the top-window portion of the game into a better position. This is only required because of our “hacked” method of integration.

Is that it?

Oh, you’ll need a few more files to make this all happen. Included in the export folder of any Inform 7 web released project, you’ll find an /interpreter/ sub-folder. In that folder, you’ll see the following files:

• gnusto.min.js
• parchment.min.js
• zmachine.min.js

There’s also the matter of css, which is available in both a style.css in the main export folder, and a parchment.css in the /interpreter/ sub-folder. These files will need a bit of adjustment to work properly in your site, thus we’ve hacked together our own adjusted style.css, as follows:

/*

Wrapper styles

*/

div#parchment div#content {
	width: 98% !important;
}

#inform7-wrapper
{
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 0px;
	position: relative;
}

/*

Gameport styles

*/

#gameport
{
	background: white;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	line-height: 1.4;
	margin: 0px;
	position: absolute;
	overflow-y: auto;
	overflow-x: hidden;
}

/*
Styles for mobile browsers: change to a one-column layout.
*/

@media screen and (max-device-width: 480px)
{
	.coverimage, .introduction, .links, .about, .playinfo, .source, .sourceintroduction, .sourcecoverimage, .notes
	{
		float: none;
		margin-left: 1em;
		text-align: left;
	}

	.play .coverimage, .play .links, .play .interpretercredit
	{
		display: none;
	}
	
	#gameport
	{
		left: 0px;
		width: auto;
	}
}

/*

Main game styles. Foreground and background styles for each of the standard z-machine colors and styles.

*/


.fg-default {
    color: #000;
}

.fg-default-reversed {
    color: #fff;
}

.fg-black {
    color: #000;
}

.fg-red {
    color: #f00;
}

.fg-green {
    color: #0f0;
}

.fg-yellow {
    color: #ff0;
}

.fg-blue {
    color: #00f;
}

.fg-magenta {
    color: #f0f;
}

.fg-cyan {
    color: #0ff;
}

.fg-white {
    color: #fff;
}

.bg-default {
    background: #fff;
}

.bg-default-reversed {
    background: #000;
}

.bg-black {
    background: #000;
}

.bg-red {
    background: #f00;
}

.bg-green {
    background: #0f0;
}

.bg-yellow {
    background: #ff0;
}

.bg-blue {
    background: #00f;
}

.bg-magenta {
    background: #f0f;
}

.bg-cyan {
    background: #0ff;
}

.bg-white {
    background: #fff;
}

.z-roman {
}

.z-bold {
    font-variant: small-caps;
}

.z-italic {
    font-style: italic;
}

.z-fixed-pitch {
    font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace;
    white-space: pre;
    font-size: 10pt;
}

.z-breaking-whitespace {
    white-space: normal;
}

.error {
    background: #f00;
    color: white;
    padding: 10px;
    margin: 10px;
}

/*
  Class for all Parchment output windows (usually just the status line and main window.).
*/

.buffered-window {
    text-align: center;
    margin: 0 auto;
    font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace;
    font-size: 10pt;
    top: 0px;
    left: 0px;
    position: relative;
    z-index: 0;
}

/* The status bar */

#top-window {
	background-color: #000;
    z-index: 1;
	left: 0px !important;
	top: 0px;
	margin: 0px !important;
	line-height: 20px !important;
	position: absolute;
}

#top-window .z-bold {
    text-decoration: underline;
    font-variant: normal;
}

/* The main story window */

#content {
    text-align: left;
}

/* General dialogs */
.dialog
{
	background: #fff;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 10px #777;
	box-shadow: 5px 5px 10px #777;
	padding: 5px;
    width:200px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;

}

/* Load indicator */
.load
{
	text-align: left;
}

/* A generic line input editor */
.LineInput
{
	display: inline;
}

.LineInput input
{
	background: none;
	border: 0;
	font: inherit;
	outline: 0;
	padding: 0;
}

.finished-input {
    opacity: 0.5;
}

/* A generic character input */
.CharInput
{
	left: -99em;
	position: absolute;
}

That’s a lot of work!

Perhaps. If it seems a bit much to get an Inform project working for you, no worries, we’ve got a bundled version right here for ya!

Plugin download: thehacked-inform7.zip

Outstanding, how can we ever thank you?

You’re very welcomed! And your appreciation, manifested through your kindly support of us by signing up with our most belovedest affiliate, WPMU DEV, is more than thanks enough!

I are noob, how I are to use this?

No worries, we’re all noobs at something. Use the following shortcode examples to help you get started with using the shortcode once the plugin’s installed.

Display absolutely nothing, zippo, nada!
[inform7]

Display a basic IF tutorial from the good folks at the awesome playfic.com!
[inform7 url="http://playfic.com/releases/7/713402b6-8685-47b6-b972-3838b2784b1d/713402b6-8685-47b6-b972-3838b2784b1d.z8"]

Display the above tutorial game only with an additional DIV id of #playfic-tutorial, which you can then use to style this particular instance.
[inform7 url="http://playfic.com/releases/7/713402b6-8685-47b6-b972-3838b2784b1d/713402b6-8685-47b6-b972-3838b2784b1d.z8" div="playfic-tutorial"]

Display the same tutorial, only constrained to 200px height and a width of 50%, so that the game window resizes based on the page it’s on.
[inform7 url="" div="my-game" height="400px" width="50%"]

Oh, you can of course, refer to your own locally hosted files as well, rather than linking to external urls. To do so, merely upload the Inform 7 exported .zblorb or .zx file (or other compatible files), to your site, get the link to that file, and include it in the url parameter!

One thing to consider with locally hosted IF files!

If (excuse the pun) you’ll be hosting your games from within your WordPress site, you’ll very likely need to add the .blorb and .zx mime types to your system, otherwise you’ll get an upload error.

We’ve found the excellent and free PJW Mime Config plugin to work perfectly well for this.

Examples! We need examples!

Hmm, that’s certainly demanding! But hey, we’ve got at least one very tiny example up thus far at our very odd sister site, ThatsIF.com. Be warned though, she’s a very strange sister, quite confusing.

More incredible awesomeness!

As if Inform and a nifty WP plugin for use with it weren’t already super-cool enough, take a moment to check out the equally super-cool playfic.com.

You can play all sorts of free IF games that others post there. Plus, you can register on the site and create your own Inform games right from within your browser, no download needed!

We’re already signed up and frequenting there ourselves. Hopefully, we’ll see ya around there!

What’s this Construct 2 thing?

For those seriously uninformed and less fortunate souls who don’t keep a keen eye on this here blog, you can find out more about Construct 2 from our previous article, available here.

Basically though, it’s a drag-and-drop development platform for Windows that allows creation of games using the HTML 5 canvas.  This means the games are essentially cross-platform, able to be played on any HTML 5 enabled system/browser. Yay!

Exquisite! Now how do we get a Construct 2 project into our blog?

Easy! First off, you simply need to export your Construct 2 project to the necessary HTML format. You then follow the instructions on our lovely plugin maker page, made specifically for Construct 2.

Check it out here: http://thehacked.com/wordpress-plugin-maker-for-construct-2/

Give us examples! We demand!

So you want examples of projects using this tool eh? It so happens we’ve got quite a few, but we’ll just list a few of them here so as not to litter the place with back-links to all our stuff. That way, it’ll give the illusion that this blog isn’t all about monetization via marketing.

First off, you can check out the Ugotsta Arcade, where we’ll be using this tool on a constant basis to post new games: http://www.ugotsta.com/arcade/

You could also take a look at the beat box we’ve created and posted to the super-secret labs site: http://www.ugotsta.com/labs/ugotsta-beat-box/

Last but certainly not least, feel free to check out the downloadable WordPress version of the Nibble game we’ve created for the HBGames.org Build and Win Contest. More on that as follows:
http://www.ugotsta.com/labs/nibbles-like-clone-for-the-hbgames-build-and-win-contest/

And perhaps others might be interested in posting links to their ported projects below!

Just a quick note!

As with all of the tools available here, this one’s always a work in progress. Currently, it’s lacking an option to specify the canvas height and width. This is because there are a number of ways to handle height and width, making them fluid or static, or somehow integrating full-screen capabilities, which is a bit of an undertaking within WordPress, as it’d likely require the creation of a relatively blank page template.

We’ll post any updates and open discussion here in this post to keep the tool’s page less crowded. Meanwhile, enjoy!

So how do we do it?

On a regular HTML page, this type of thing is done very easily using the almighty jQuery with something like the following:

jQuery(document).ready(function() {
setTimeout(function(){
jQuery( 'head' ).append( 'div#upside-down {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}' );
}, 10000);
});

What that does is triggers the jQuery append function call after the timeout value of 10000 ms (10,000 ms which equates to 10 seconds) has elapsed. It will append, or add, that bit of css code to the web page’s head section, effectively turning upside down, any div tags with the id of ‘upside-down’.

So how do we do it in our mighty WordPress site?

Achieving that same effect in WordPress takes a bit more work. The route we’ve taken here in this article is to create a plugin that adds a piece of javascript to our pages, similar to above, and have the javascript include some variables posted to the page from the main plugin code.

The javascript is as follows:

jQuery(document).ready(function() {
setTimeout(function(){
jQuery( 'head' ).append( thehacked_timed_css_data.css_to_add );
}, thehacked_timed_css_data.delay_time);
});

And of course, the PHP code for the plugin is as follows:

<?php

/*
Plugin Name: Timed CSS Plugin
Plugin URI: http://thehacked.com/timed-css
Description: A simple plugin that adds css to a page after a certain time period.
Version: 1.0
Author: DavidM
Author URI: http://thehacked.com
License: GPL 2
*/

// Initialization function
function timed_css_init() {
	
	// Enqueue jQuery and necessary javascript
	wp_enqueue_script( 'jquery' );
	$plugin_url = plugins_url() . "/" . basename(dirname(__FILE__));
	wp_register_script( 'thehacked-timed-css', $plugin_url . '/thehacked-timed-css.js' );
	wp_enqueue_script( 'thehacked-timed-css' );

	// Add options to database if they don't already exist
	add_option( 'delay_time', '1000' );
	add_option( 'css_to_add', '.thehacked-timed-css {display:none;}' );

	// Get options
	$delay_time = get_option( 'delay_time' );
	$css_to_add = "<style>" . get_option( 'css_to_add' ) . "</style>";
	
	// Display options on page for javascript to access
	$data = array( 'delay_time' => __( $delay_time ), 'css_to_add' => __( $css_to_add ) );
	wp_localize_script( 'thehacked-timed-css', 'thehacked_timed_css_data', $data );
}

// Call initialization function
timed_css_init();

// Create settings submenu
function timed_css_settings_page_init() {
	add_submenu_page( 'options-general.php', 'Timed CSS Settings', 'Timed CSS', 'manage_options', 'timed_css_submenu', 'timed_css_submenu_callback');
}

add_action('admin_menu', 'timed_css_settings_page_init');

// Create settings section and fields
function timed_css_settings_section_init() {
 	
	// Add a settings section
	add_settings_section( 'timed_css_settings_section', 'Settings', 'timed_css_settings_section_callback', 'timed_css_submenu' );
	
	// Add the fields to the section
	add_settings_field( 'delay_time', 'Delay time', 'delay_time_callback', 'timed_css_submenu', 'timed_css_settings_section' );
	add_settings_field( 'css_to_add', 'CSS to add', 'css_to_add_callback', 'timed_css_submenu', 'timed_css_settings_section' );

	// Register options
	register_setting('timed_css_option_group','delay_time');
	register_setting('timed_css_option_group','css_to_add');
}

add_action('admin_init', 'timed_css_settings_section_init');

// Callback for submenu page
function timed_css_submenu_callback() {
	echo '<h3>TheHacked.com Timed CSS</h3>';
	echo '<p>This plugin will append the specified CSS to your page(s) after the specified delay time has passed.</p>';
	echo '<div class="thehacked-timed-css-settings">';
	echo '<form method="post" action="options.php">';
	settings_fields( 'timed_css_option_group' );
	do_settings_sections( 'timed_css_submenu' );
	echo '<br />';
	echo '<input type="submit" value="Save" />';
	echo '</form>';
	echo '</div>';
}

// Callback for timed_css_settings section
 function timed_css_settings_section_callback() {
	echo '<p>Delay time is in miliseconds (1000 = 1 second).</p>';
 }
 
// Callback functions for delay_time
function delay_time_callback() {
	echo '<input name="delay_time" id="delay_time" class="code" type="text" value="' . get_option('delay_time') . '" />';
}

// Callback functions for css_to_add
function css_to_add_callback() {
	echo '<textarea name="css_to_add" id="css_to_add" class="code">' . get_option('css_to_add') . '</textarea>';
}
		
?>

It should be said, the only reason the code is so lengthy is because we’re including a settings page in the admin area. Without that, we could just use some globally defined variables, but then to make changes, you’d have to add some define statements to your wp-config.php file.

So how do we install this thing?

To install the plugin, simply create a couple empty files and name them thehacked-timed-css.js and thehacked-timed-css.php. Copy the above Javascript and paste it into the .js file, then do likewise with the above PHP code, pasting it into the .php file.

Alternatively, you could buy yourself a copy of the plugin file from the online store here. To be sure, it’s technically free, you just need virtual cash, or $UgotsCash.

And how do we use it?

Easy. Just go to Settings > Timed CSS in your admin area, enter in a timeout delay amount, then enter the CSS code you’d like to add to your page after that delay, and that’s it!

Give me example, I are demanding!

Okay, okay. So you wanna check out an example of the code/plugin in action? First you’ll need to ensure your browser is Javascript enabled.

With that, you can check out the uber-cool, while very strange TerminalDot.com.

Wait just about 1 minute and you’ll see some things turn upside-down. Pretty, eh? Or something like that.

Construct 2 uses a sort of modular, drag and drop canvas interface for building games, where you create objects and events with mouse clicks and drag things around as you like them. All of the coding is basically done within drag and drop event sheets which read rather like human language, making it quite easy for newcomers to programming or game development.

Check it out in action!

Coolness incarnate, eh?

Interestingly, it’s actually possible to build a simple game without even touching the event sheet, as shown in the intro video. The built-in objects come with a number of properties and actions of their own and other built-in behaviors can be added easily within the visual interface, providing unlimited possibilities. This not only makes it much easier for novice game makers to create simple games, but it also can result in rather simple event sheets that are easy to read.

While the previous version, now Construct Classic, was free software, Construct 2 costs just a bit of money, depending on the license needed. The licenses are incredibly affordable and well worth the price, especially considering the potential of the platform, as well as the noteworthy support and rapid development. The developers not only hear user requests, they do them, quickly too!

Fortunately for beginners, Scirra also provides a free version that can actually be used to develop some very complex games itself. Strangely, Construct 2 actually provides a great way to learn basic programming concepts, so it somewhat doubles as a learning platform. If you’re looking to get into game development, try out the free version. After all, it is free.

So why mention this here on a WordPress blog?

First off, we don’t really want to limit this blog to strictly WordPress related topics. However, given our love for WordPress, that will generally be the case.

More to the point though, we believe Construct’s utility extends beyond games and we’ve got some pretty cool projects we’re working on that will help integrate Construct 2 projects with our beloved WP. Look for a few posts to that effect shortly!

Go git it!

That said, check out Construct’s awesomeness for yourself, and also feel free to say hi to ourselves and everyone else in that friendly community over there!

Fortunately, StackOverflow‘s astounding community is here to save the day for those of us who would like a fully responsive experience on our sites, so that users on any browser, mobile or old 640 x 480 resolution PCs, can view the site aright.

If you’d like some responsive Facebook comments on your site, including when accessed via a plugin, such as the indispensable Ultimate Facebook plugin from WPMU DEV, check out the following Q&A:

http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins/

And to repeat the final, and most complete answer, the following code, provide by user arnonate (please feel free to send this user and the other helpful users some chocoloate) in that thread, is the key:

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {
width: 100% !important;
}

Simply add that bit of code to your site’s css stylesheet (possibly via Appearance > Editor for you WordPress fanatics) and you’ll have yourself some fluid width Facebook comments!

To begin with, did you even know that your existing, self-hosted WordPress site can be turned into a full-blown multi-site network? That’s right, you simply need to enable the network feature of WordPress and you’ll then be able to create other sites, just like your main WordPress site.

And of course, you’ll find out all about that special feature right at the online manual over at WPMU DEV.

Moreover, WPMU DEV has been specializing in Multisite development since its infancy and not only provides an abundance of resources and a massive forum full of insightful Multisite tidbits, but they’ve got plugins and themes  that are Multisite compatible and provide a bewildering array of awesome features specifically for use in Multisite scenarios.

Take for example the illustrious MarketPress, the fully featured e-Commerce plugin that stands perfectly well on its own on a regular, single WordPress site. But in a Multisite setup, it gives you the ability to provide a full-blown e-Commerce network, sort of like Etsy. You can let users create their very own shops on your network!

Now, MarketPress allows you to take a percentage of network sales automatically, using the integrated PayPal Chained Payments gateway. But what if you wanted to charge users for having a site, or shop, on your network, first off?

Enter Pro Sites, the Multisite plugin that lets you charge users for premium features. With all of its included modules, you can charge users for access to premium plugins or themes, limit the number of posts or post types (such as MarketPress products) a site can create, or even charge for having a site in the first place.

There’s also other massive plugins, like Membership Premium, which lets you build a fully-functional membership site. While it can easily be used for a very simple, free membership site, its incredibly sophisticated design even lets you create elaborate membership systems, fully integrated with PayPal and other payment providers.

Then there’s Ultimate Facebook, which provides the most complete Facebook integration you’ll find, from Like/Send button functionality to full integration with Facebook registration and login, commenting system and all the Facebook widgets you’ll ever need.

Much more can be said about all the outstanding wares at WPMU DEV, but one of the things that truly sets them apart from similar development companies is their unbelievable service model, wherein you buy a Full subscription (for example, a single month subscription), and you get ALL their plugins and themes!

Better yet, you not only get all their wares, you get to use them in as many projects as you like, for as long as you like after you download them! That’s right, they stick with the WordPress GPL 2.0 open source license requirements, allowing you to use their plugins and themes the same way you use WordPress, even letting you mod them to suit your needs!

Plus, you get full support for the duration of the subscription you purchase (longer duration subscriptions provide dramatic discounts). That gets you access to the most awesomest forums on the planet, where you can get pointers on how to modify these plugins and themes, glean insight on WordPress development from professionals in the field, or just get basic WordPress assistance if you’re still learning about WordPress.

It’s very difficult to explain all the benefits of membership at WPMU DEV here in a single article, as they’ve got an incredible history of WordPress development, and thus have an equally incredible arsenal of plugins, themes and resources.

It would be best to check it out for yourself, which you can do right from here!

Easy, we’ve got a neat little shortcode for you here, to display the logged in user’s avatar wherever you want it on your site, even in your ads!

How cool is that!

One of the coolest things about working with one of the coolest web development sites out there is that you come across a lot of cool ideas for code projects. Cool, eh?

So, this request came up on the WPMU DEV forums the other day,  in this thread where a member was asking for an avatar shortcode. Lo and behold, in searching for something simple like that, one could not be found!

Oh noes! What to do!

Well, you can use the snippet provided in that thread!

But going further, we’ve taken the code provided there and altered it a bit to display the logged in user’s avatar anywhere on your site using the [avatar-shortcode]. And we’ve extended it to include additional parameters as detailed in the WordPress function reference for the get_avatar() function.

But we didn’t just stop there, nope! Well, we did, at first. But now we’ve even included the option to provide a user id or email as well, so you can display any user’s avatar based on their id!

And here’s that fancy snippet:

<?php

function avatar_shortcode( $atts ) {
	extract( shortcode_atts( array(
	'userid' => 'logged-in-user',
	'size' => '96',
	'default' => '',
	'alt' => ''
	), $atts));
	return 'My name is' . $size;
	if ( $userid == 'logged-in-user' ) {
		if ( is_user_logged_in() ) {
			global $current_user;
			get_currentuserinfo();
			return get_avatar( $current_user->ID, $size, $default, $alt );
		}
	}
	else {
		return get_avatar( $userid, $size, $default, $alt );
	}
}
add_shortcode( 'avatar-shortcode', 'avatar_shortcode' );

?>

Pretty eh?

What do I do with this?

Besides the obvious, tatooing it on your back, you can include that somewhere in your WordPress theme’s functions.php file, or better yet, use our very own WordPress Simple Plugin Maker to bake up your own plugin with it!

Help me! I are noob!

No problem, we got ya covered! Here’s how you make use of the shortcode in your content, a bunch of examples to help you get started using them.

Display the logged in user’s avatar with the default height and width of 64px:
[avatar-shortcode]

Display the logged in user’s avatar with a height and width of 512px:
[avatar-shortcode size="512"]

Display the user steinjr’s avatar with the default height and width of 64px:
[avatar-shortcode userid="steinjr"]

Display the avatar of the user with the email ‘me@youbigstupidhead.com’ with an avatar size of 256px and the text “You big stupid head!”
[avatar-shortcode userid="me@youbigstupidhead.com" size="256" alt="You big stupid head!"]

That’s it! Have fun with your new ugly mug rendering powers!

We got ya covered. Now, you can prove to all your friend that you have regular expression super powers, using this simple form that makes the otherwise very complex task of working with regular expressions 0.000001% easier!

Behold, the RegExp search tool!

It’s a javascript-based search tool that lets you search your pasted content using a regular expression that you provide. Just fill in the form and let it do its magick!