Fast forward to today.

I no longer use/love Spotify (it is just not as pretty and reliable as Rdio); however, I have found the perfect pair of bluetooth headphones to use while exercising: Plantronics Backbeat Go. These headphones are perfect for the exercise junky, professional runner, amateur swimmer, leisure weight lifter and… well… you get the idea.

Features I like:

• Light weight
• Premium Sound
• Long-lasting battery
• Volume Control
• Able to Accept Calls (although I don’t take calls while exercising

There is no doubt that I have found the perfect pair for exercise and music. I highly recommend these headphones and hope you enjoy them as much as I!

Check it out here:

Download ↓.

Let’s face it. Navigating on mobile devices can sometimes be such a hassle. Small buttons and big fingers simply do not mix.

Thankfully the HTML select tag is widely used as an easy way to provide a navigation for mobile devices, specifically the iPhone. While this is beneficial, how are we supposed to use this tag while still using the default WordPress menu system?

Quite easily actually, but be warned that this tutorial is quire lengthy and descriptive.

Register the Menu Location

This part is the most important. Before we can even begin, we need a menu to work with and this function will allow us to register this menu. For more information about this function, read this.

Get started by opening up your functions.php file and adding the this code:

register_nav_menus(
	array(
		'select-menu' => 'Select Menu',
	)
);

You can change key (select-menu) and description (Select Menu) to what ever you choose. I choose this key and description merely for demonstration purposes.

Create a New Menu Output Function

After we register our menu, we need to create a new output function that allows us to call the menu within a template file. This function can also be placed in the functions.php file.

Here is a sample function:

function wp_nav_menu_select( $args = array() ) {

	$defaults = array(
		'theme_location' => '',
		'menu_class' => 'select-menu',
	);

	$args = wp_parse_args( $args, $defaults );

	if ( ( $menu_locations = get_nav_menu_locations() ) && isset( $menu_locations[ $args['theme_location'] ] ) ) {
		$menu = wp_get_nav_menu_object( $menu_locations[ $args['theme_location'] ] );

		$menu_items = wp_get_nav_menu_items( $menu->term_id );
		?>
			<select id="menu-<?php echo $args['theme_location'] ?>" class="<?php echo $args['menu_class'] ?>">
				<option value=""><?php _e( 'Navigation' ); ?></option>
				<?php foreach( (array) $menu_items as $key => $menu_item ) : ?>
					<option value="<?php echo $menu_item->url ?>"><?php echo $menu_item->title ?></option>
				<?php endforeach; ?>
			</select>
		<?php
	}

	else {
		?>
			<select class="menu-not-found">
				<option value=""><?php _e( 'Menu Not Found' ); ?></option>
			</option>
		<?php
	}

}

I would like to note that the name of the function here can be anything you liked and is not to be confused with the WordPress core function wp_nav_menu. I merely used this function name because many people are already familiar with that function and how to use it.

Function Explained

The first part of the function (below) sets up some $defaults and merges those with the $args. When calling the function later, we will use these variables to define which menu and what class name we will use (the class name select-menu is used by default).

$defaults = array(
	'theme_location' => '',
	'menu_class' => 'select-menu',
);

$args = wp_parse_args( $args, $defaults );

The second part of the function is the actual output. It first finds out if the a menu is in the correct theme location and (if so) grabs that specific menu’s items and outputs them as a select with it’s various options. If it does not exist, the output will merely be a select with one option: Menu Not Found.

if ( ( $menu_locations = get_nav_menu_locations() ) && isset( $menu_locations[ $args['theme_location'] ] ) ) {
	$menu = wp_get_nav_menu_object( $menu_locations[ $args['theme_location'] ] );

	$menu_items = wp_get_nav_menu_items( $menu->term_id );
	?>
		<select id="menu-<?php echo $args['theme_location'] ?>" class="<?php echo $args['menu_class'] ?>">
			<option value=""><?php _e( 'Navigation' ); ?></option>
			<?php foreach( (array) $menu_items as $key => $menu_item ) : ?>
				<option value="<?php echo $menu_item->url ?>"><?php echo $menu_item->title ?></option>
			<?php endforeach; ?>
		</select>
	<?php
}

else {
	?>
		<select class="menu-not-found">
			<option value=""><?php _e( 'Menu Not Found' ); ?></option>
		</option>
	<?php
}

Call the New Menu

Finally we will need to call the new menu within our theme. Remember the select-menu key we used to register our menu? We will use that to define which menu to use.

Open up a template file (header.php, footer.php, whatever.php) and call the menu like so:

wp_nav_menu_select(
	array(
		'theme_location' => 'select-menu'
	)
);

Alternatively you could also change the class name of the menu, but if you do you will need to alter the jQuery (explained below) to work with the new class. Here’s how you would change the class:

wp_nav_menu_select(
	array(
		'theme_location' => 'select-menu',
		'menu_class' => 'custom-class'
	)
);

Making it Work with jQuery

Out of the box this select tag will do nothing at all. We will need some jQuery (and the jQuery library) to make it work.

First we will need to create a file within our template (I prefer to keep all my javascript files in a js folder). For now we will call this file select-menu.js.

Open that file and put the following code:

jQuery(document).ready(
	function() {
		jQuery( ".select-menu" ).change(
			function() {
				window.location = jQuery(this).find("option:selected").val();
			}
		);
	}
);

Remember that ability to change the class that I mentioned when calling at the new navigation menu? If you choose to change the menu, you will need to change the class that jQuery looks for above. Note that there is no need to change the class (even if you have multiple menus on one page).

Next we need to correctly enqueue our scripts within our theme. All of this can be accomplished by the following code placed within our functions.php (right under out wp_nav_menu_select function if you prefer).

function wp_nav_menu_select_scripts() {
	wp_enqueue_script( 'select-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/select-menu.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'wp_nav_menu_select_scripts' );

Don’t know what this function is doing? That’s okay, you can learn about it here.

Wrapping it Up

So, now we should have a new menu within our theme that uses the select HTML tag instead of the default list-items. You can use the WordPress menu system to control all the items that are displayed within your menu for mobile devices.

You may noticed that this menu always displays, but you can control that with some fancy CSS @media queries, or create an entirely different theme for mobile devices with PluginBuddy’s fancy plugin: Mobile.

If you want to check out the entire icon set, you can find it on Icon Finder here.

Otherwise, download the iContainer and enjoy!

Download ↓

Introducing Reader

Actually, Reader was introduced with Safari 5 (way before Clearly), but with the introduction of the Reading List and iCloud, Reader has gained much more attention. You can learn more about Reader and Reading list here.

In addition to the ability to use Reader to view articles on the Safari web browser for Mac, Reader also exists for iOS devices as well. Simply awesome.

Anyway, go check out Reader and Reading List and I assure you that you will see Clearly is not needed for true Apple power users.

Sounds like I don’t like Sparrow for iPhone doesn’t it. I am afraid that is not the case. It is quite awesome. It blows Mail out of the water. Sparrow really brings all of the useful features of Gmail to the power of your hands. Quite amazing.

Sure, Sparrow for iPhone (version 1.0) does not have push notifications, but its not their fault. I am grateful that they are not like other companies and care about my secure information enough to admit they do not have the resources (at this time) to “secure your data on our servers (Push – Sparrow).”

I won’t go into the useful features here, you can read about the on the Sparrow for iPhone sales page.

The One Thing I Don’t Like

Although Sparrow offers some awesome features, there are a few things I do not like at all. For example, the face that I have to press a ‘button’ to press a ‘button’ does not make sense at all. What do I mean you ask? When you are reading an email there is a ‘button’ (see image to the left) that you must press before you can archive, star, reply, et cetera. To me this seem a little redundant, but that’s just my opinion.

The Thing I Like the Most

Aliases. Aliases are a feature of Google that allow you to send an email from an alternate account without having to manage many different accounts. For me this is useful because I filter all my emails into one account. These aliases allow me to reply from that alternate account without trying to manage six different account. Simply awesome!

Anyway, I would recommend you give Sparrow a try. Despite it’s one drawback (still an opinion of mine), it is the best mail app for iPhone and Mac.

Just as the title states, all of these apps are for Mac.

TextMate

How could any dev without a good text editor? In my opinion, Textmate is the best editor for Mac. What makes it the best? The ability to add bundles. These bundles allow me to create snippets of code to use when developing. In addition to my own code, there are load of bundles created by users for WordPress, Bootstrap and other various libraries. In addition to bundles, Textmate also offers projects. These projects allow devs to work with multiple files on separate tabs in one window. Awesome right?! Without a doubt, Textmate is a must have for developers.

If that’s not enough, you’ll be happy to know that Textmate 2 is in development. I’ve had a chance to play around with version 2 and I am super excited about its release. Some of the new features include split views, full screen mode and much more. Let’s hope for a initial release soon!

Transmit

Transmit a wonderful FTP for mac. Not only is connecting to an FTP or SFTP a cinch, it also allows secure connection to Amazon S3 and WebDAV. But wait… there’s more. Transmit allows you to no only connect via FTP, but also mount your locations as Disk Images! This is very useful when working with Textmate. The days of “downloading a file via FTP, editing the file, saving the file and waiting for the upload, closing the file, downloading another file, rinse and repeat” are long gone (and have been for years).

xScope

xScope is made by the Iconfactory and is a very useful measurement tool for finding dimensions, using rulers and much more. Here’s what the factory has to say about it:

xScope is eight tools in one that will help any designer or developer do their job faster and produce more accurate results.

There is no doubt that xScope is a useful development app for mac users.

Snippet

Snippet is a useful development tool if you need to keep a handy set of code or commands at your fingertips. With just a few taps on the keyboard, I can copy a terminal command and execute it. If you are looking for a way to save your snippets of code, then Snippet is the way to go.

I would like to note that Snippet may no longer be in development. However, until something better comes along, it will remain as my leading development code snippet tool.

Pochade

Pochade is another app by Fuel Collective. It allows you to not only select any color off your screen, but also save these colors as a collection. Very useful when working with the design side of development. Here are some of its main features:

• Easily select any color from your screen
• Save your collection of colors
• Several ways to pick the color you want
• Get the color value the way you want

Gradient

Gradient is the best app for creating CSS3 gradients. No longer do you need to test CSS over and over, hoping that your code is correct. Don’t know what I am talking about? Here is an example of what you would have to code in order to achieve a gradient:

background-color: #ff231a;
background-image: -webkit-gradient(linear, left bottom, right top, from(#ff231a), to(#0046fd));
background-image: -webkit-linear-gradient(left bottom, #ff231a, #0046fd);
background-image: -moz-linear-gradient(left bottom, #ff231a, #0046fd);
background-image: -o-linear-gradient(left bottom, #ff231a, #0046fd);
background-image: -ms-linear-gradient(left bottom, #ff231a, #0046fd);
background-image: linear-gradient(left bottom, #ff231a, #0046fd);

Could you imagine having to type that over and over? What if you need to change a color? Jeez…

Gradient is the perfect solution for creating CSS3 gradients during development. All don’t with a few taps of the trackpad.

Break Timer

Let’s face it, sitting in a chair for hours is not good for your health. If decreases blood flow to your legs and increases the chance that you will have back and muscle problems in the future. However, (if you are anything like me) when digging deep into code, it’s easy to lose track of time. Break Timer helps you avoid that sedentary day… oops.. mine is going off now. I’ll be back in ten minutes. Okay, I’m back. Anyway, as I was saying, we all need a break during the day and this app helps you do so while during development cycles.

I hope you find these apps useful.

Use some apps not listed here? Share them with me.

Accounts Page Problems

After spending a little time admiring the clean design of Namecheap, I was completely put off when visiting the accounts page. The page where customers will spend most of their time. It looks as if this page has been boxed up, placed in the basement and forgotten. This gives me the impression that NamCheap spends more time trying to get new customers and less time developing relationships with the customers they have.

Is this the site they want me to stare at when I am managing my domains? Really!? I’m sorry, but that 11px Tahoma font is not going to cut it. They should have stuck with the 13px Lucida Grande you used for the rest of your site.

In addition, the advertisements Namecheap places on the accounts page is quite annoying. They already have my money, why do they keep trying to up-sell me? Seems like Namecheap has been taking advice from GoDaddy. Probably not a good idea.

Here is a conversation we had about the ads.

Dear @Namecheap, don't go down the @GoDaddy road. Remove the advertisements from your accounts pages. You already have our money.

— Justin Kopepasah (@Kopepasah) February 27, 2012

@Namecheap this one. twitter.com/Kopepasah/stat…

— Justin Kopepasah (@Kopepasah) February 27, 2012

I have yet to receive any further communication from @Namecheap.

If this is how Namecheap feels about its current customers, then it is not a relationship I want to be a part of. Who is in charge of customer relationship management (if anyone) anyway!?

Here is their twitter bio:

Great Fusion Foods! Best Bulgogi Gyro in the world!! We dare anyone to try our Suicide Jumbo Wings!!Don’t miss out on one of life’s great pleasures.

Since the bio said they had the “Best Bulgogi Gyro” and then they dared us to try the suicide wings, we did just that.

The Bulgogi Gyro

This gyro was simply delicious. It looked so good that we forgot to take a picture, but thanks to Brian we have one here to share.

The Suicide Wings

These wings are not for the faint of heart. If you cannot handle hot (and I mean HOT), do NOT order these wings. To me, they are delicious. I cannot wait to have them again.

The suicide wings are on the left and spicy garlic on the right.

Spicy Pad Thai

In addition to the other items, we also had the Spicy Pad Thai. Unlike other places, Foodies actually makes food spicy (which I love).

Foodies does not have a website yet, but you can find out more about this place on UrbanSpoon. I highly recommend this place and I hope you enjoy!

Have you ever created a parent page simply to organize data? I am sure most of us have. For those of you that have not, here is an example. You manage a baseball team and you have a parent page named ‘Team Members’ with positions as the child pages. You then go a step further and organize the players by position; thus, creating grand-child pages. This is obviously an effective method of organizing players.

Remember that parent page? What information goes on it? Why not a list of all the team members? As a good idea as this sounds, most individuals would simply hardcode the team members onto the page. This poses an obvious problem. Each time the player list or position changes, you have to update the page.

A much better solution is to have the pages populate when changes are made. This can easily be achieved with php, but requires either a modification of a template file or a shortcode. As hard as it is for me to say this, the latter is the better choice.

The Shortcode

Now that the decision is made, let’s create the shortcode.

//Add a shortcode for listing child pages of a parent page
function list_pages_shortcode( $atts ) {
	// Basic shortcode markup
	extract( shortcode_atts( array(
		'post_parent' => false,
		'title' => '',
	), $atts ) );

	//If the post parent attribute isn't specified, use the current post's ID
	if ( ! $post_parent ) {
	global $post;
		if ( is_object( $post ) ) {
			$post_parent = $post->ID;
		} else {
			return false;
		}
	}

	//Build the arguments - we want the child of the post_parent
	$args = array(
		'depth'		   => 3,
		'child_of'     => $post_parent,
		'title_li'     => $title,
		'echo'         => 0,
		'sort_column'  => 'menu_order, post_title'
		);

	// if there is no title lets barf up the wordpress pages instead
	if ( empty( $title ) ) {
		return "<ul>" . wp_list_pages( $args ) . "</ul>";
	} else {
		return wp_list_pages( $args );
	}
}
add_shortcode( 'list_subpages', 'list_pages_shortcode' );

Once you have added this to your theme, simply add the following shortcode to the page where you want to list its subpages.

[list_subpages]

Code Explained

Well actually, I am not going to get into detail over the actual code; however, there is a parameter you can pass within the shortcode itself.

Let’s say you want to list subpages of a particular page that is not the parent page. You can do this like so by adding that page’s ID to the shortcode. Here is an example.

[list_subpages post_parent="3"]

This allows you to list a page and its subpages on any page or post.

I hope you find this shortcode useful. Fell free to expand as needed.

This will only work with post-types with a hierarchal structure