Isobar Create 48. Invent Something. Change Everything.

Isobar is hosting a 3 day non-stop event starting September 13th called Isobar Create 48. This is the first DevCon of its kind to explore the NFC chip inside the Google Nexus S. Essentially, it's going to be a 48 hour hackathon that everyone is invited to and encouraged to bring anyone they like with them.

Near Field Communication (NFC) technology will let us make transactions, exchange digital content, and connect electronic devices like never before. Your phone will be your credit card, boarding pass, hotel room key, coupons at the supermarket. You’ll buy only the 3 minutes you need on the parking meter.

If you're interested in checking this out, you can get all the details here. Don't worry if you don't have a team, you will be able to jump in with any team, or go here to organize with others who need a team too.

This is sure to be an event you don't want to miss!

Now For An Update

This year started out with a bang really, at least for me. It was kinda not so great the first couple weeks of the year but, then I started a job working as a Front-end Developer at Isobar, which to say the least, has been really great. My first day I was working on adidas.com, which after my third week there, was suddenly the main front-end developer working on that project. It was crazy intense and a very quick learning experience, but a really awesome one for sure.

The sites I've worked on for adidas are under the Sports Performance part of their site. Some of these I worked on more than others, and some way more than others.

• Basketball
• Football/Soccer
• Running
• Tennis
• Men's Training
• Women's Training
• Outdoors

I've been extremely busy working for some really high-profile clients and doing a ton of really cool stuff on the front-end. Also, I helped re-develop and design the Isobar Front-end Code Standards & Best Practices page making it HTML5, I wrote the web typography section as a new addition as well as some various other minor edits and additions to the page content too, and I also added in some really cool easter eggs that change the logo to a canvas animation I made and make #plaidirish all over the place which is pretty baller. :)

We put the doc up on Github and welcome everyone to come give their feedback, open issues for any edits or additions you'd like to see added, and of course, fork us!!

I've also been doing some really cool stuff with HTML5 and Canvas on Anti-code, one of my new sites, so check that out. Plus some even cooler stuff for Samsung's Olympic Genome Project using HTML5 and Canvas too. It's going to be a Facebook app that will be released in the somewhat near future, so be on the lookout for that it's going to be amazing.

You like ovals?

As you can see I haven't been doing all that much with my time. But really I have barely had the time to sleep let alone write a new post here. Apologies for disappearing like that. Maybe leaving you with this little snippet will make up for it?

// here's a helper function for drawing ovals with bezier curves in canvas
function ovalMaker(centerX, centerY, width, height) {
	con.beginPath();
	con.moveTo(centerX, centerY - height / 2);
	
	con.bezierCurveTo(
		centerX + width / 2, centerY - height / 2,
		centerX + width / 2, centerY + height / 2,
		centerX, centerY + height / 2
	);
	con.bezierCurveTo(
		centerX - width / 2, centerY + height / 2,
		centerX - width / 2, centerY - height / 2,
		centerX, centerY - height / 2
	);
	
	con.fill();
	con.closePath();
}

This function is useful in Canvas to draw oval shapes, or circles that aren't perfectly round....ovals. How do you use it? Simple.

// USAGE

// vertical skinnier oval
bezierCurve(x + 60, y + 75, 80, 130);

// vertical fatter oval
bezierCurve(x + 150, y + 75, 100, 120);

// small oval
bezierCurve(x + 125, y + 175, 20, 30);

// horizontal oval
bezierCurve(x + 105, y + 225, 200, 50);

Well, that's all I have time for today. I have to get back to working on work work, work. I work on work when not at work, until I leave for work to work on work work.

That^ pretty much sums up these past months for me right there. All I gotta say is love what you do, it's awesome.

html, body { min-height: 100%; }
html {
    background: hsl(200, 100%, 28%);
    background-image:
        -webkit-gradient(linear, 0 50%, 0 100%,
            from(transparent),
            to(hsla(200, 100%, 0%, 0.8))),
        -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, hsla(200, 100%, 100%, 0.08)),
            color-stop(.25, transparent),
            color-stop(0.5, transparent),
            color-stop(0.5, hsla(200, 100%, 100%, 0.08)),
            color-stop(.75, hsla(200, 100%, 100%, 0.08)),
            color-stop(.75, transparent), to(transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, hsla(200, 100%, 100%, 0.08)),
            color-stop(.25, transparent),
            color-stop(0.5, transparent),
            color-stop(0.5, hsla(200, 100%, 100%, 0.08)),
            color-stop(.75, hsla(200, 100%, 100%, 0.08)),
            color-stop(.75, transparent), to(transparent));
    background-image:
        -moz-linear-gradient(transparent,
            hsla(200, 100%, 100%, 0.8)),
        -moz-linear-gradient(45deg,
            hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent),
        -moz-linear-gradient(-45deg,
            hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent);
    background-image:
        -o-linear-gradient(transparent,
            hsla(200, 100%, 0%, 0.8)),
        -o-linear-gradient(45deg,
            hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent),
        -o-linear-gradient(-45deg,
            hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent);
    background-image:
        linear-gradient(transparent,
            hsla(200, 100%, 0%, 0.8)),
        linear-gradient(45deg,
            hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent),
        linear-gradient(-45deg,
        hsla(200, 100%, 0%, 0.08) 25%, transparent 25%, transparent 50%,
            hsla(200, 100%, 0%, 0.08) 50%,
            hsla(200, 100%, 0%, 0.08) 75%, transparent 75%, transparent)
}

header h1 {
    text-shadow: -1px  1px 1px #16B88C, 
		-2px -1px 1px #2E0E04, 
		 1px 1px 0 #16B88C, 
		 2px 3px 1px #2E0E04, 
		 3px 3px 1px #2E0E04, 
		 4px 4px 1px #0C634C, 
		 5px 5px 0 #2E0E04, 
		 6px 6px 0 #2E0E04, 
		 7px 7px 0 #2E0E04;
    color: #00523C;
    width: 500px;
    font-size:10em;
}

Copy and paste that in the address bar and try it out on this page right now. Once you run it, try editing content in any part of the page. You could even do select All and delete everything entirely of the page. Try it!

I recently had the pleasure of being able to review some of the premium products from Dev4Press one of which was their WordPress plugin GD Press Tools, and I was blown away by it. I mean literally in total awe for the 3 hours it took for me to get through playing with all of it's features, options and tools which made my jaw drop on more than occasion. It is the single most useful plugin and most advanced one I have seen to this date. I really can't stress that enough.

How many plugins (or functions you've custom coded into your theme if you're like me) do you use for things that you consider an essential feature or enhancement to the WP dashboard? Maybe a handful or more, right? And how many plugins would you install if not for the fact you don't want 1001 plugins installed just to do one thing here, two things there, etc.? Probably more than a handful, and possibly much more. I know because I would just from the number of custom code functions I wrote or use as common include for every site I make. The dashboard is good, but it can be so much better mostly in little ways depending on your personal preferences.

Now think about how keeping these things all up to date and otherwise regularly maintained and working properly....

Let's say you have 5 plugins installed for enhancing the admin some how in some way, all created by different people. It's not guaranteed that they all will be maintained and/or updated as needed or even at all in some cases. You have to rely on the developers of each plugin to release updates. Plus, let's say even if all 5 of them DID update their plugins regularly, that still means you have 5 things to install updates for. Not to mention options for these things might be non-intuitively implemented like in a section or existing options page you wouldn't expect, or just entirely non-existent. I can think of many more things I have disliked about plugins, leading me to just start coding my own things into my themes and reducing the need to install plugins by a lot.

One Plugin + One Place + One Update = Win

"The idea is to include as many admin related features as I can, and eliminate need for many different plugins that will potentially break with WordPress updates because their authors didn't update them. So, I am adding all the things I need, and as this is premium plugin, it will be updated to be compatible with latest versions of WP minimizing problems to users when switching to new version."

- Milan Petrovic

There are far too many features available in GD Press Tools to list here, but they are organized under the following:

WOW!!! Even as I made that list I said to myself holy S***! I'm serious. And these are just the sections, which each include sub-sections. Basically, picture something like 2 dozen separate things that are like multiple common little plugins your using on your site right now, all packed into one plugin and organized nicely and with more options than those you have installed all have if they were combined into one.

Take a look at the screen shots of just a few of the options pages to see what kinds of settings and features you can customize to get a better idea what I'm talking about.

Options Front Page

Backup Panel

Database Backup

Unserializer Tool

User Management Panel

Meta Tags

Maintenance Mode

Database Table Tools

There really wasn't anything I found wrong or negative about it. I even said to Antonio how amazed I was with how optimized it was based on the performance and speed of the site. I would think such a plugin would use a lot of memory and slow down your site since I have seen tiny plugins use more memory, but surprisingly, there was no difference at all in speed that I noticed.

The plugin is constantly in development with many new options added with every major update. GD Press Tools 4.0 Pro Beta 1 is coming out on Tuesday, which includes many rewritten or massively improved plugin parts, plus tons of newly added features!! After I heard this, I couldn't even think what else there could even be left to add so I can't wait to see what's new. The official version of 4.0 is set to be released at the end of this month.

On top of regular improvements and additional features it is always kept up to date with latest WordPress core development. It's tested with WordPress 2.8 and newer, including WordPress 3.0 even in multi site mode with additional global settings for the site administrator. Yes there are options pages and settings which allow you to control the multi site features in 3.0 which is wicked awesome.

There are 3 editions of GD Press Tools available. The Free Edition is the Lite version, which has less options and features and doesn't include other really good things like documentation, support, and tutorials. The Standard Membership is the Pro version, and includes everything. The Developer Membership is the same as Standard but with email support, SVN and TRAC access included as well.

Special Offer For Our Readers

As an added bonus to readers of this site, use the coupon code NEW2WP when purchasing this plugin and you will receive a 20% discount (on initial product purchase payment). This promo coupon is good for the next year.

I did the math for you too (I really hate math just so you know):
Using Coupon: NEW2WP
You pay only: €48 or $65 first year (€24 or $32.50 after that)

That's a pretty good deal, and even more worth it, as if the number of plugins this one plugin could replace, and/or improve or add on your site wasn't enough already.

Go check out the huge list of features.

I personally think it should've won the 2010 WPHonors Commercial Plugins if only more people had an idea of what it is capable of.

If anyone has used this plugin before, what did you think about it? Post a comment with your experience of it, and let us know.

Recently this topic was suggested as a new post idea for me to write about, so here I am writing about it. You can let me know of other ideas or topics you'd like to see a tutorial on here whenever you want, and if I am able to do it and have time I will surely do it.

So say you have a custom post type on your site, and as part of that post type, you want to allow for a way to enter in a URL and maybe a description or text of some sort for something related to the URL. This is not hard to do, it simply requires a couple of functions to do.

What Functions Are Needed

1. We will need a function for displaying the metabox form fields, which will be used to save and update the data we enter into it.
2. Then a function for processing the metabox form elements, in order to perform the actions of saving and updating the information.
3. A function for adding the custom metabox function to WordPress via the 'init' action hook.
4. Finally, we need a function to get and return the values of the fields for use within the theme on the frontend.

1. Displaying The Custom Metabox

First thing we need to do is create the metabox form fields. In doing that, we want to also check if there is any data saved in the post meta for the custom fields we are making, so we can output that into the input fields of the form.

Since we are making a URL input field, we should check to see if the URL entered is a valid URL using a regular expression. For this example I am just using a simple regex which will check to make sure the URL at least has the 'http://' at the beginning. If it does not, I output the message saying it's invalid, and add it to the input field.

/**
 * Display the metabox
 */
function url_custom_metabox() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );
	
	if ( !preg_match( "/http(s?):\/\//", $urllink )) {
		$errors = 'Url not valid';
		$urllink = 'http://';
	} 
	
	// output invlid url message and add the http:// to the input field
	if( $errors ) { echo $errors; } ?>
	
	<p><label for="siteurl">Url:<br />
		<input id="siteurl" size="37" name="siteurl" value="<?php if( $urllink ) { echo $urllink; } ?>" /></label></p>
	<p><label for="urldesc">Description:<br />
		<textarea id="urldesc" name="urldesc" cols="45" rows="4"><?php if( $urldesc ) { echo $urldesc; } ?></textarea></label></p>
<?php
}

Notice how I am checking if the meta fields have a value and if they do, then echo it out within the input and textarea fields.

2. Processing the Metabox Form Fields

Next, we need to process this information when the form is submitted to save as a draft or publish the post. There are a number of ways to do this, but the simplest way to do it is just simply pass the $post_id to the function, and make $post global.

Then check if the $_POST variable is set, meaning has the form been submitted, and if so then update our post meta options using update_post_meta().

/**
 * Process the custom metabox fields
 */
function save_custom_url( $post_id ) {
	global $post;	
	
	if( $_POST ) {
		update_post_meta( $post->ID, 'urllink', $_POST['siteurl'] );
		update_post_meta( $post->ID, 'urldesc', $_POST['urldesc'] );
	}
}

That is obviously the most basic of ways to do it, but it works for what we want to do.

3. Adding The Metabox to your Custom Post Type

In order to make this all work, we of course need to add the functions to WordPress so it knows to do something with it. The hooks are required otherwise your metabox won't show or save when you submit it.

To add the metabox, we create a function which uses the add_meta_box() function, and pass it the information necessary for our metabox. You can read more about add_meta_box() here.

// Add action hooks. Without these we are lost
add_action( 'admin_init', 'add_custom_metabox' );
add_action( 'save_post', 'save_custom_url' );

/**
 * Add meta box
 */
function add_custom_metabox() {
	add_meta_box( 'custom-metabox', __( 'URL & Description' ), 'url_custom_metabox', 'post', 'normal', 'high' );
}

This is adding our metabox function with the callback 'url_custom_metabox'. You can change the post type this will be added to by changing 'post' to whatever your post type you want to use it for.

4. Getting and Returning the Saved Data For Each Post

Finally, we need to have a way of displaying the information entered into the metabox fields on the frontend of the site, so we can make use of it right!

To do that, I like to just create a function that gets the post meta for me, and return the variables for each field I want as an array using get_post_meta() like this.

/**
 * Get and return the values for the URL and description
 */
function get_url_desc_box() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	return array( $urllink, $urldesc );
}

The way you would use this in your theme is within whatever page template file, you create a variable and set it to this function. Then echo out the variable key you want to use. For example:

// get the array of data
$urlbox = get_url_desc_box();

echo $urlbox[0]; // echo out the url of a post
echo $urlbox[1]; // echo out the url description of a post

The $urlbox[0] will display the URL which can be used in the href of an anchor tag.

Here's The Entire Custom Metabox Code

You can either paste this into your functions.php file, or create a separate file within your theme directory, and use get_template_part( 'FILENAME' ); to include it in your functions file.

<?php

// Hook into WordPress
add_action( 'admin_init', 'add_custom_metabox' );
add_action( 'save_post', 'save_custom_url' );

/**
 * Add meta box
 */
function add_custom_metabox() {
	add_meta_box( 'custom-metabox', __( 'URL &amp; Description' ), 'url_custom_metabox', 'product', 'side', 'high' );
}

/**
 * Display the metabox
 */
function url_custom_metabox() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );
	
	if ( !preg_match( "/http(s?):\/\//", $urllink )) {
		$errors = 'Url not valid';
		$urllink = 'http://';
	} 
	
	// output invlid url message and add the http:// to the input field
	if( $errors ) { echo $errors; } ?>
	
	<p><label for="siteurl">Url:<br />
		<input id="siteurl" size="37" name="siteurl" value="<?php if( $urllink ) { echo $urllink; } ?>" /></label></p>
	<p><label for="urldesc">Description:<br />
		<textarea id="urldesc" name="urldesc" cols="45" rows="4"><?php if( $urldesc ) { echo $urldesc; } ?></textarea></label></p>
<?php
}

/**
 * Process the custom metabox fields
 */
function save_custom_url( $post_id ) {
	global $post;	
	
	if( $_POST ) {
		update_post_meta( $post->ID, 'urllink', $_POST['siteurl'] );
		update_post_meta( $post->ID, 'urldesc', $_POST['urldesc'] );
	}
}

/**
 * Get and return the values for the URL and description
 */
function get_url_desc_box() {
	global $post;
	$urllink = get_post_meta( $post->ID, 'urllink', true );
	$urldesc = get_post_meta( $post->ID, 'urldesc', true );

	return array( $urllink, $urldesc );
}
?>

I've been making some pretty crazy metabox lately, and with WordPress 3.0, I think we're going to see a lot more need for people to be able to create them. My metaboxes are becoming more and more complex and customizable each time I make one. It's really cool, and worth taking the time to learn.

Hope this has helped you learn somethings about doing this. Let me know if you have any questions in the comments.

$(function() {
    /* Slide to Top */
    var t = $('<div class="gp"></div>'),
	d = $(document);
    $('body').append(t);
    t.css({ opacity: 0, position: 'absolute', top: 100, right: '2%' });
    t.click(function() { $('html,body').animate({ scrollTop: 0 }, 1000); });
    $(window).scroll(function() {
        var sv = d.scrollTop();
        if (sv < 10) { t.clearQueue().fadeOut(200).css('display','none'); return; }
        t.css('display', '').clearQueue().animate({ top: sv, opacity: 0.8 }, 500);
    });
});

The CSS

/* Scroll to top class */
.gp{ background:#cdcdcd url(http://cdn.iconfinder.net/data/icons/minicons/Png/Upload.png) center center no-repeat; width:6px; height:32px; color:#fff; font-family:verdana;
    border-radius:5px; -moz-border-radius:5px;
    -webkit-border-radius:5px; -o-border-radius:5px;
    cursor:pointer; padding:15px; margin:5px; z-index:1000;
}