Let me explain.

In the past month, a lot has been going on. I was fired from my job at Brave New Media, and I got a job as a software engineer at The Nerdery in Bloomington, MN. I just finished my first week as a Nerdery Nerd, and it’s even more amazing than I ever thought it would be. I won’t go into detail on the Brave New Media situation—people close to me know what happened, and anyone who is curious should feel free to ask. It wasn’t exactly amicable and I don’t want to go spouting things on my blog until I can be completely objective about it. (Even then, I might not “spout” anything about the matter. We’ll see.)

Anyway, the new job is so fantastic, awesome and wonderful that it warrants a whole other post that I’m sure I’ll write this weekend. I just wanted to give a quick hello and explain my recent lack of blog-posty goodness.

Standing Desk 1.0 Beta

I’ve read a lot lately about how sitting for prolonged periods of time every day can shorten your life. While I’m skeptical, it seems like common sense that sitting down all the time just isn’t good for you. As programmers, we know what it feels like to only get out of our chairs once every few hours (on a good day).

An idea that seems to be making the rounds right now is using a standing desk on a regular basis instead of a normal one. It’s intriguing, and I’ve thought about it for a while now… I figure it’s time to give it a shot, at least for a few days.

Since this is something I’m not entirely sure about, I’m using the “cheap-as-free” standing desk conversion kit. It consists of a plastic bin I store cables in, a black box to provide a mousing surface (it’s the box that Final Cut Studio used to come in) and a book to put under the keyboard since the lid of the bin has raised edges. My iMac does a great job of tilting up to a comfortable angle without having to set the computer on top of something.

This may not last, or it may be completely awesome and cause me to look for a more permanent (and probably non-free) solution. We’ll see what happens!

It looks simple enough, but when you take a closer look at the CSS (or just at the menu itself) you realize there are lots of different elements colors need to be applied to:

• Menu background
• Menu header borders
• Menu header link text
• Separators
• Selected background
• Selected header borders
• Selected header link text
• Selected header text shadow

And to account for minimized menus with pop-out submenus:

• Pop-out menu headers
• Pop-out menu borders
• Pop-out menu header link text
• Selected pop-out menu header
• Selected pop-out menu link text

I went through and customized all of these things with simplistic colors (#069, etc.) and ended up with a pretty sweet menu. Then I wanted to change the color scheme, and I realized there were a zillion (24 actually) places I needed to change colors to make that happen.

This is by no means impossible, but it’s kind of a pain in the ass. So I did some Googling and found a great PHP script to generate CSS color variations from one base color. I had to modify the script a little (I don’t have PEAR installed on my dev server) but I ultimately got it to work.

Here’s the beginning of the stylesheet, so you can see how it works:

<?php
header( 'Content-type: text/css' );
require_once( '_inc/csscolor.php' );

$base = new CSS_Color( '3B4C7A' );
$selected = new CSS_Color( 'BB7101' );
?>
/* @group Admin Menu Coloring
----------------------------------------------- */

/* Background color of entire menu */
#adminmenuback, #adminmenuwrap, #adminmenu .wp-submenu .wp-submenu-head {
	background: #<?php echo $base->bg['0']; ?>;
}

First I’m tricking the browser into thinking this PHP file is really a CSS file. I’m sneaky like that. Then I’m including the modified color script.

Next I define two colors: “base” for the overall menu look and “selected” for the current menu header.

From here on out, I can use those two variables to print variations of the original color. The script returns a “bg” component (the background color) and a “fg” component (the foreground color – white or black, depending on the shade of the background). You can go from -5 to +5 in range (see the original script’s website for a great visual example). This worked GREAT.

If you want to download the whole package (CSS/PHP file + CSS_Color class file), here you go:

WordPress 3.2 Admin Menu Custom Colors

To use it in your theme, put both of the files (admin-menu.css.php and csscolor.php) in your theme folder, and add this code to your functions.php file:

add_action( 'admin_print_styles', 'atg_slick_menu_style' );
function atg_slick_menu_style() {
	wp_register_style( 'slick-admin-menu', get_bloginfo( 'stylesheet_directory' ) . '/admin-menu.css.php' );
	wp_enqueue_style( 'slick-admin-menu' );
}

To do this, you’ll need a server running PHP5. It comes with SimpleXML installed by default. I’ll be using an Atom feed as an example, but it works the same way for any XML feed.

Let’s start with the basics. What does the data look like?

<?xml version='1.0' encoding='UTF-8'?>

<feed xmlns='http://www.w3.org/2005/Atom'>
	<id>http://youtube.com/url-to-youtube-feed/</id>
	<updated>2011-06-29T15:57:42.686Z</updated>
	<title type='text'>Sweet YouTube User Feed</title>
	<author>
		<name>alisothegeek</name>
		<uri>http://gdata.youtube.com/feeds/api/users/alisothegeek</uri>
	</author>
	<entry>
		<id>http://gdata.youtube.com/feeds/api/videos/XXXXXXXXX</id>
		<published>2011-06-13T21:08:33.000Z</published>
		<title type='text'>Awesome Video Title</title>
		<author>
			<name>alisothegeek</name>
			<uri>http://gdata.youtube.com/feeds/api/users/alisothegeek</uri>
		</author>
		<media:group>
			<media:thumbnail url='http://i.ytimg.com/vi/XXXXXXXXX/0.jpg' height='240' width='320' time='00:01:36'/>
			<media:title type='plain'>Awesome Video Title</media:title>
			<yt:duration seconds='192'/>
		</media:group>
	</entry>
</feed>

That’s a super-pared-down version of a YouTube user uploads feed.

Looping through and getting separate entries (or “items” in RSS) is really easy with SimpleXML.

$youtube_feed = simplexml_load_file('http://gdata.youtube.com/feeds/api/users/alisothegeek/uploads');
foreach ( $youtube_feed->entry as $entry ) :
	echo $entry->title;
endforeach;

That would print the title of each entry in the feed. The $entry object is the important part. You can use that to access any of the tags inside the entry, like title, published, content, etc. Well, almost any tag.

Remember the media:group part of the example feed? Let’s say you want to grab that media:thumbnail. It’s not as easy as $entry->media->thumbnail or $entry->media['thumbnail'] or, really, anything with our current loop. Right now it’s inaccessable. Why? It’s in a different namespace.

Dealing With Namespaces

<media:thumbnail url='http://i.ytimg.com/vi/XXXXXXXXX/0.jpg' height='240' width='320' time='00:01:36'/>

The media: part of that tag is what the namespace is. Look at the very top of an XML feed and you will probably see something like this:

<feed xmlns='http://www.w3.org/2005/Atom' xmlns:media='http://search.yahoo.com/mrss/'
  xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:gd='http://schemas.google.com/g/2005'
  xmlns:gml='http://www.opengis.net/gml' xmlns:yt='http://gdata.youtube.com/schemas/2007'
  xmlns:georss='http://www.georss.org/georss'>

All the xmlns: attributes are defining different namespaces and where they are located. To use them and access the media namespace, we would need this code:

$media = $entry->children( 'http://search.yahoo.com/mrss/' );

After that line, you could use $media->thumbnail to access that tag. Yay! But there are a lot of other namespaces, and setting them each one by one is a pain in the ass. Luckily, SimpleXML has a function to help us out. With this we won’t need the URL because it stores all the namespace URLs in an array.

$namespaces = $entry->getNameSpaces( true );
$media = $entry->children( $namespaces['media'] );

That’s a lot nicer and more convenient, but it’s still going to require one line of code for each namespace. What to do???

Foreach loop to the rescue!

foreach ( $entry->getNameSpaces( true ) as $key => $children )
	$$key = $entry->children( $children );

With those two lines of code, you’ll now have access to all namespaces in the feed, with an appropriately-named variable for each. media:thumbnail is $media->thumbnail.

Now go build something awesome with it!

I’m working on a site that’s using Cart66 for their online store. Unfortunately, Cart66 doesn’t come with a function or shortcode for displaying a logged-in user’s purchase history. I made a somewhat comprehensive “My Account” page that does just that.

Here’s the code for the guts of the page:

<p><?php echo do_shortcode( '[account_login]' ); ?></p>

<hr />

<?php echo do_shortcode( '[account_info]' ); ?>

<hr />

<h3>Your Orders</h3>
<table id="viewCartTable">
	<thead>
		<tr>
			<th>Order Number</th>
			<th>Date</th>
			<th>Total</th>
			<th>Order Status</th>
			<th>Receipt</th>
		</tr>
	</thead>
	<tbody>
	<?php
	global $wpdb;

	$results = $wpdb->get_results( "SELECT ouid, ordered_on, trans_id, total, status FROM " . $wpdb->prefix . "cart66_orders WHERE account_id = " . Cart66Session::get( 'Cart66AccountId' ) . ' ORDER BY ordered_on DESC' );

	foreach ( $results as $order ) {
		echo '<tr>
			<td>' . $order->trans_id . '</a></td>
			<td>' . date( 'F j, Y', strtotime( $order->ordered_on ) ) . '</td>
			<td>' . $order->total . '</td>
			<td>' . ucwords( $order->status ) . '</td>
			<td><a href="' . get_bloginfo( 'url' ) . '/store/receipt/?ouid=' . $order->ouid . '" title="Click to view receipt" target="_blank">View Receipt</a></td>
		</tr>';
	}

	?>
	</tbody>
</table>

Enjoy!

Brave New Media, the company I work for, is sending me along with our other (awesome) developer, Jerry Kramer.

I’ll definitely be tweeting throughout the event, and you can expect a post or two on my blog. I’ll also be writing on the Brave New Media blog—that stuff will be less technical, and my blog will be more developer-oriented. Follow me @alisothegeek if you want to hear all the juicy details as events unfold!

I’ve used WPMU Dev’s plugins before, and once WP_DEBUG is turned on, lots of errors usually pop up. Between that and their sleazy autoblog plugins, I wasn’t too surprised when I heard that they may have violated copyright law and copied someone else’s code. After all, WordPress SEO is by far the best SEO plugin I’ve ever used for WordPress, and I consider it a standard part of any of my WordPress sites these days. If I was going to be a dick and copy someone’s code for my own SEO plugin, I’d probably start there.

I made a fresh install of WordPress on my dev server (with WP_DEBUG on) and installed WPMU DEV SEO. As soon as I activated it, I saw this:

316 characters of unexpected output. Wonder what those were. Oh, and what’s that on the top? An error notice for an undefined array index (from wp_upload_dir(): $dir['basedir']).

Also, I get a glaring warning that I need to install their Update Notifications plugin. So I downloaded and activated that, and lo and behold:

WTF? I just wanted to get notified about updates, not plastered with a giant video advertising your paid memberships. Can’t you see I have a members-only plugin installed next to this one?

The best part of that alert was that it was on every admin page. At least it had a tiny “Dismiss” link in the bottom corner.

In case you didn’t see it, there were also two more notices generated by that plugin.

[divider]

So there were a few notices generated for sloppy code, and a giant ad covering my entire admin screen. That’s not horrible, it’s just annoying. So I finally opened up the two SEO plugins side by side and started comparing code. The only section I’ll post about here is the part that replaces the placeholder tags (i.e. replacing %%sitename%% with the name of the blog).

Let’s start with the function name:

wpseo_replace_vars() versus wds_replace_vars(). Similar, but forgivable… until you look at the rest of the function.

In the $defaults array, they removed two lines. Indentation, quote type, item order, and the variable names are all the same.

Here, they took the if-else statement and converted it to the shorthand version.

This was my favorite part. The $r variable, which holds the function arguments, was an object in Yoast’s plugin. WPMU Dev turned it into an array instead, so $r->post_title becomes $r['post_title']. Other than some slight differences, the $replacements arrays in both plugins are way too similar. Again, indentation and item order are the same. Some items got removed.

Yoast took care of six replacements before this array, but WPMU Dev lumped them all into one array. I removed those six from WPMU Dev’s code to show the comparison—I did not change the order, syntax, or appearance (or anything else) of the code in the screenshot.

This was just a tiny part of the code that makes up the plugins. Browsing through the rest of it, there are equally obvious similarities. Bad form, WPMU Dev.

Bolts 1.0

It’s not perfect, but nothing ever is. Please enjoy using it, and I welcome any and all feedback!

The fact that Bolts is launch-able means that Themejack is that much closer to being a reality. Keep an eye on themejack.net, because Bolts will ultimately live there. Once Themejack is launched, I’ll probably submit this to the WordPress theme repository!

Most people know about the “Kitchen Sink” button in the WordPress visual editor—the one that toggles the second row of buttons. On that second row, there’s the familiar Format dropdown menu. Well, there’s another dropdown menu available that isn’t on the toolbar by default: the Styles dropdown. This makes it easy to add custom classes to the visual editor in WordPress (which is particularly great for client websites, when clients need a foolproof way to add HTML to the post).

The power of the TinyMCE Styles dropdown menu.

Method 1: Comma-separated string of styles

I learned about the Styles dropdown a couple of years ago, and through a few Google searches I found out how to make it show up and list my custom classes. This is what I learned then, and it’s still prevalent in Google search results:

add_filter( 'tiny_mce_before_init', 'my_custom_tinymce' );

function my_custom_tinymce( $init ) {
	$init['theme_advanced_buttons2_add_before'] = 'styleselect';
	$init['theme_advanced_styles'] = 'Button=button,Callout Box=callout';
	return $init;
}

(That code would go in your theme’s functions.php file.)

This is pretty straightforward. We’re adding the Styles dropdown ('styleselect') to the second row of buttons (theme_advanced_buttons2_add) at the beginning of the row (_before). Then we’re adding our own styles to the list.

In the list of styles, the title comes before the equals sign and the CSS class comes afterward. Separate multiple styles with a comma. Violà!

So what’s wrong with that?

This method is 100% okay to use. It’s short and sweet, requires very little code, and gets the job done. However, it’s a little restricting. This will take whatever text is highlighted in the editor and wrap a <span> element around it, applying the CSS class to the span. Here’s what it won’t do:

• Apply a class to an existing block element
• Limit a style to a specific HTML tag
• Wrap multiple block elements in another block element with a custom class
• Apply inline styles to an element

I definitely want to be able to do all of those things. Don’t you? (Well, maybe not inline styles, but the point is that you can.)

Method 2: Arrays using TinyMCE parameters

Step 1: Add the Styles dropdown to the toolbar

Add this code to functions.php:

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

A slightly different way of adding the dropdown. This filter applies only to the buttons, so it feels a little more right.

Step 2: Add KICK-ASS custom styles

After that, add this code:

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
    	array(
    		'title' => 'Button',
    		'selector' => 'a',
    		'classes' => 'button'
    	),
        array(
        	'title' => 'Callout Box',
        	'block' => 'div',
        	'classes' => 'callout',
        	'wrapper' => true
        ),
        array(
        	'title' => 'Bold Red Text',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

This is also fairly simple once you know the syntax. All we’re doing is defining the formats, then encoding them as JSON so they’re TinyMCE-friendly, then assigning them to the TinyMCE settings.

Let’s break apart the array and look at the different options.

Note that while classes and styles are both optional, one of the two should be present in each array. (Otherwise, why are you adding this to the dropdown anyway?)

Step 3: Add your stylesheet to the visual editor

WordPress made this one easy in version 3.1. Just add this to functions.php:

add_editor_style();

Then put a file in your theme folder named editor-style.css. Any styles in there are applied to the visual editor.

Update 6/11/11: I’ve made a plugin version of this so your customizations will be preserved when updating your theme (especially important if you’re using a regularly updated theme like Twenty Ten). Download it below.

Download the Custom Styles Dropdown plugin

To use it, just unzip the download and put the PHP file in your wp-content/plugins folder, then activate it!

That’s it! For more TinyMCE parameter examples, check out this post at WordPress Answers and this documentation for TinyMCE.