Themejack has launched!

It’s been in the works for a very long time. Ever since I started working on my own theme framework over a year ago, my husband Jim and I have been planning to open a premium theme shop. We love theme design and development, and I hope it shows through in the quality of our products.

I’ve been handing out coupon codes like crazy (much to the surprise of my business partner) so here’s a special Aliso the Geek offer to get you the grand opening discount: Enter the coupon code TJALISO15 and get $15 off of your purchase. All the launch coupons are good through September 18, 2011.

Also, Cody is on sale while I build another sweet feature for it, which should be done in a little over a week. It’s $20 off right now, which puts the sale price at $39. (Combine that with the coupon, and it’s over 50% off!)

The best part: Themejack Gives Back

I saved the best for last. When Themejack sells 1,000 themes, we’re donating $10,000 to three different charities: Child’s Play, The Humane Society, and The WordPress Foundation. Every theme purchase earns one vote for the charity that matters most to you. When we hit the 1,000 theme mark, the votes will be tallied up and the donation will be divided among the charities. $6,000 to the charity with the most votes, $3,000 for second place, and $1,000 for the third. Every charity gets something, no matter what.

For any of that to happen, though, we need to sell 1,000 themes. So help us out, buy a theme, and vote for a charity! (I mean, come on! Cody is only $24 with the coupon!)

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.

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!