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' );
}

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!

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.

Updated PHP and CSS files

settings-api-tutorial.zip (updated June 5, 2011)

In my WordPress parent theme, Bolts, I’ve been using the same code from my tutorial and making various improvements along the way. These include:

• Options being saved properly
• Checkboxes being set & remembered properly
• Using checked() and selected() instead of conditional statements
• A pre-written function to easily retrieve settings from the database

Implementing the class in your own theme

Put the class in your theme folder, then put this code in your functions.php file:

if ( file_exists( STYLESHEETPATH . '/class.my-theme-options.php' ) )
	include_once( STYLESHEETPATH . '/class.my-theme-options.php' );

Of course, if you’re changing the name of the class and the filename, apply those changes to this code.

The style of the theme options page now matches the tabbed style in WordPress 3.1. Download and tweak to your heart’s desire.

Getting options from the database

Put this in your functions.php file:

function mytheme_option( $option ) {
	$options = get_option( 'mytheme_options' );
	if ( isset( $options[$option] ) )
		return $options[$option];
	else
		return false;
}

Now you can use the mytheme_option() function to reference any saved option you want. Just put the option ID in the parentheses (the ‘id’ field specified when creating an option in the theme options class). For example: mytheme_option( 'rss_url' ) would return http://example.com/feed/ (or whatever was specified on the theme options page). For checkboxes, just use a conditional statement:

if ( mytheme_option( 'footer_credit_link' ) )
	echo '<p>Powered by <a href="http://example.com/">Example.com</a> and <a href="http://wordpress.org/">WordPress</a><p>';

Thanks to everyone again for using my theme options class and leaving comments to help me improve it! In the future, you’ll be able to find the most recent version of my theme options class in the Bolts theme, which will be in its first stable release next week! (Also, if I can manage it, it will be available in the WordPress theme repository!)

Visit the Themejack Tracker

For now, if you want to submit a ticket, use the contact form on this site.

And for anyone who wants to know—the tracker site is using an older version of the Quality Control theme (back when it was available for free). That theme rocks my socks.

For the past several months, I’ve been working on developing a parent theme to use for Barrett Creative’s upcoming premium themes, as well as for client and personal projects. It’s called Bolts (as in “nuts and bolts”) and it’s meant to make theme development swift and simple. It’s got some cool extras built in, like custom widgets, shortcodes, a contact form, and more. It’s not revolutionary, but I’m excited to release a beta version of it for anyone to use. Hopefully, some people will be true beta testers and give me feedback! That is the point, after all.

Without further adieu, here it is:

[download link="http://alisothegeek.com/wp-content/uploads/2011/03/bolts-1.0b1.zip"]Download Bolts 1.0 Beta 1[/download]

If you do want to give me feedback, contact me through this site. Shortcode examples after the break.

[button]Default Button[/button] [button type="primary"]Primary Button[/button] [button type="cancel"]Cancel Button[/button] [button type="disabled"]Disabled Button[/button]

Tweet

Here it is! I finally updated my Espresso sugar for WordPress 3.1. I rewrote the functions list to include every non-deprecated function in the WordPress Function Reference. This includes:

• Multisite functions
• Theme/plugin authoring functions, such as wp_enqueue_script
• Post Format functions

I also revamped the included snippets. These are the snippets that are included in the sugar:

• Loop (now in HTML 5)
• Custom loop (now in HTML 5)
• Register custom menu
• Register custom post type
• Register sidebar
• Register custom taxonomy
• Stylesheet link
• Theme CSS header

On top of all the new stuff, I updated the snippets to conform with WordPress coding standards.

Download WordPress Sugar for Espresso v2.0