We’ve had an incredible response to the Agency theme in its first 24 hours of being live, so we thought we’d sweeten the deal a bit. We’re giving away 5 copies of the Agency theme, a rad UpThemes t-shirt (pictured above), and a one-year Developer Club Membership.

All you have to do to enter is follow the instructions below. The more ways you enter, the more likely you are to win, so enjoy:

a Rafflecopter giveaway

Microblogging in a Nutshell

Microblogging is the perfect medium for sharing photos, videos, and short snippets of text. The emphasis is on small and frequent updates, rather than great big chunks of writing. It’s a stream-of-consciousness style of publishing that lets you share your thoughts as they occur, rather than saving them all up for that huge blog post that you never get around to writing.

Tweets and Facebook status updates could be considered forms of microblogging, but it was Tumblr that really got the concept off the ground. The service has become insanely popular, with over 46 million ‘tumblelogs’ created since 2007. Even President Obama is on Tumblr on these days.

People love Tumblr because it offers the path of least resistance to publishing content. The user interface is ultra-simple, and with a few clicks you can create an account and start microblogging your heart out.

Yet for all its sexy minimalism, Tumblr is a fairly restrictive service with limited scope for customization. Serious web publishers have begun looking for a Tumblr-style experience on a more advanced platform. WordPress to the rescue!

Why You Should Microblog on WordPress

WordPress is older than the concept of microblogging, and the software was originally designed for longer-form publishing. These days, of course, you can use WordPress for whatever you damn well please, including creating an awesome microblog. These are a few reasons to use WordPress instead of Tumblr:

• Tumblr is known for downtime issues, which you have no control over. With WordPress you can choose any web host you like.
• If Tumblr disappears from the face of the Earth one day, your content goes with it. A self-hosted WordPress blog gives you that extra peace of mind.
• Using WordPress, you don’t have to worry about your content violating some weird Tumblr policy. When you own the blog, you make the rules.

WordPress Post Formats

Microblogging with WordPress has become far more practical since the introduction of Post Formats in version 3.1. Post formats are a theme feature that allow you to apply a defined style to different types of content, much like the posting options in Tumblr.

WordPress currently supports nine post formats:

• aside (a note-style post, without a title)
• gallery
• link
• image
• quote
• status
• video
• audio
• chat (a transcript of an instant messenger chat session)

WordPress themes can support all of these post formats, or only some of them. The theme designer will activate the ones that he or she wants to include in the theme. But the overall list is fixed and it’s not possible to create your own custom formats at this stage. You can check out the Post Formats page on the WordPress Codex for more information, including help with adding post format support to your themes.

Choosing a Good Microblogging Theme for WordPress

There are no hard-and-fast rules to microblog design; you really just want a theme that gets out of the way and lets your content shine. These are some features to look out for:

• Clean and minimalist layout; you don’t want a lot of distracting clutter on a microblog.
• Support for WordPress post formats, preferably all nine of them.
• Responsive design, because a lot of microblogging is done on mobile devices.

If you’re setting up a WordPress microblog for the first time, the popular Micro Theme Framework is a good starting point. Micro is a powerful parent theme that you can customize to your heart’s content, but also looks sexy straight out-of-the-box.

Migrating from Tumblr to WordPress

It’s a common scenario; you start your microblogging career on Tumblr, love it at first but eventually grow weary of its limitations, and finally decide to shift over to WordPress.

Naturally, you’ll want to bring all your content with you. You can do this using the WordPress Import function, which you’ll find at Tools > Export.

You’ll need to install the Tumblr importer plugin if you haven’t already. With the plugin activated, all you need to do is enter your Tumblr login details, and select the blogs that you wish to import.

This process runs in the background, and can take a while, depending on how much Tumblr content you have.

And that’s it, you’re ready to rock! Welcome to the brave new world of WordPress microblogging.

The long-anticipated Agency theme has finally been unleashed upon the world. Agency is a theme for design companies and freelance designers to showcase their portfolio and team members quickly and easily.

Features

• CSS files generated with SASS & Compass (all .scss files are included in the theme)
• Custom Portfolio Section for easily displaying your projects with sorting and previews
• Team Member section to showcase the members of your company or design team
• Integration with the new WordPress Theme Customizer
• Custom lightbox with View.js (a $10 value)
• Includes Nivo Slider (a $19 value)
• Beautiful blog styles with support for WordPress post formats
• Custom contact form to integrate seamlessly into your site
• Custom homepage slideshow carousel
• Custom widgets to feature a portfolio item or team member
• Sticky breadcrumbs for easy navigation
• Customizable gradient colors for breadcrumb bar and other parts of the site

View Theme Details

However, contextual help was improved considerably in WordPress 3.3, with an all-new Screen API, and UI enhancements such as tabs and a sidebar. These enhancements are perfect for organizing contextual help, especially for Themes with complex Theme options, and/or tabbed UIs for Theme settings pages – in other words, these enhancements are perfect for UpThemes!

So, I’ve been experimenting with incorporating the new hotness in our Themes. Especially compared to the previous iteration, the WP 3.3 contextual help is actually quite simple to integrate. Otto Wood wrote a detailed tutorial here.

All contextual help-related functionality is handled through the WP_Screen() class, so the first step is identifying the Theme’s specific admin screen. WordPress simplifies this identification, by defining a hook for every admin screen, based on the add_*_page() function used to instantiate the page. Accessing this hook is as simple as defining a global variable when calling add_*_page(). If our original code is as follows:

function micro_add_settings_page() {
	// Add Micro Theme settings page
	add_theme_page( $args );
}
add_action( 'admin_menu', 'micro_add_settings_page' );

…then we modify it like so:

function micro_add_settings_page() {
	// Global variable for Micro's settings page hook
	global $micro_settings_page;
	// Add Micro Theme settings page
	$micro_settings_page = add_theme_page( $args );
}
add_action( 'admin_menu', 'micro_add_settings_page' );

The next step, then, is to invoke contextual help for our Theme’s settings page. Again, WordPress provides a specific hook for this purpose: load-$pagehook. Since we’ve defined a global to hold the name of our Theme’s specific page hook, we can use it here:

function micro_add_settings_page() {
	// Global variable for Micro's settings page hook
	global $micro_settings_page;
	// Add Micro Theme settings page
	$micro_settings_page = add_theme_page( $args );
	// Add contextual help
	add_action( 'load-' . $micro_settings_page, 'micro_add_contextual_help' );
}
add_action( 'admin_menu', 'micro_settings_page_contextual_help' );

Next, as you might imagine, we define the micro_settings_page_contextual_help() callback:

function micro_settings_page_contextual_help() {
}

The first step is to invoke the screen object. The WP_Screen() class provides a useful function that we’ll use for this step, but will also make use of later: get_current_screen(). This function “returns an object that includes the screen’s ID, base, post type, and taxonomy, among other data points.”

function micro_settings_page_contextual_help() {
	// Globalize settings page
	global $micro_settings_page;
	// Get the current screen object
	$screen = get_current_screen();
}

The next step is redundant (since we already use a page-specific hook to execute our callback), but is a standard failsafe: ensure we’re on our own Theme’s settings page. Here, we use the $screen->id parameter:

function micro_settings_page_contextual_help() {
	// Globalize settings page
	global $micro_settings_page;
	// Get the current screen object
	$screen = get_current_screen();

	// Ensure current page is Micro settings page
	if ( $screen->id != $micro_settings_page ) {
		return;
	}
}

Having assured that we are on our own Theme’s settings page, we now begin to add content to the contextual help, using the add_help_tab() member function of the WP_Screen() class. We’ll use a “README” tab for example:

function micro_settings_page_contextual_help() {
	// Globalize settings page
	global $micro_settings_page;
	// Get the current screen object
	$screen = get_current_screen();

	// Ensure current page is Micro settings page
	if ( $screen->id != $micro_settings_page ) {
		return;
	}

	// Add README Reference help screen tab
	$screen->add_help_tab( array(
		// HTML ID attribute
		'id'      => 'micro-readme',
		// Tab title
		'title'   => __( 'README', 'micro' ),
		// Tab content
		'content' => file_get_contents( get_template_directory() . '/help/readme.html' ),
	) );
}

The 'content' parameter expects a string, but this parameter can be replaced with 'function' in order to pass a callback instead. Since our Themes already ship with a “readme.html” file, we can simply pass it here as a string, via file_get_contents().

For every contextual help tab needed, simply add another $screen->add_help_tab() call. Here are some proof-of-concept screenshots:

Here, you can see the contextual help panel, with several tabs. The "Theme Documentation" tab includes the (HTML) content of the Theme's existing readme.html file.

And here you can see the several tabs in the contextual help panel - one tab for each of the UpThemes settings pages.

Notice, in the tab list, a “Support” tab at the bottom. This tab is something else that I’m working on integrating into our Themes.

Here at UpThemes, we use private GitHub repositories for collaborative development, and for bug tracking. I also use GitHub for my personal projects, including my Oenology Theme, which also integrates the new WordPress 3.3 contextual help. Also included in the contextual help, however, is a fairly full-featured support tab, including links to submit support issues, an RSS feed for support forum posts, and, thanks to the awesome GitHub API, real-time reports of commits and issues (i.e. bugs), both opened and closed. Here’s how it looks in Oenology:

Here's how the contextual help support tab looks in Oenology. The data are all pulled in dynamically, from the wordpress.org support forum, and via the GitHub API.

I think this is great, because it helps Theme users get a better idea of ongoing development and bugfixes. While useful for a free Theme, it can potentially be a great premium feature for a commercial Theme. So, I’ve roughed in the same features into Micro. Since the UpThemes GitHub repositories are private, I need to add in an oAuth token in order to use the API to read commit and issue data, which is why the API is returning 404s:

This will be essentially the same, once I implement the oAuth tokens to be able to read GitHub API data for private repositories.

Look for these features to be rolled out into our Themes in the very near future! For current and future UpThemes customers: how would you like to see these features implemented? What would you find the most useful?

I want to give big props to Otto for providing a thorough explanation of the implementation details for developers (which is currently subject to change, since it is beta code, after all). It’s a helpful post so I’d recommend reading that first and coming back here to dive a little deeper into the code. I’m going to walk you through a quick overview of what the Theme Customizer code is actually doing and how it can be extended in your own themes to provide custom controls.

We’re currently working on implementing controls that already exist in the UpThemes Framework as a part of the new Theme Customizer so all UpThemes customers can have access to these features shortly after WordPress 3.4 is released. We just recently implemented support for the Settings API and now, with the new Theme Customizer, we’re a few short steps away from being able to quickly add support for that.

The PHP Stuffs

The new Theme Customizer code actually lives in a few files inside your wp-includes folder that we’re going to look at today:

• class-wp-customize.php
• class-wp-customize-setting.php
• class-wp-customize-section.php
• class-wp-customize-control.php

First, we’re going to take a look at class-wp-customize.php. This is where the Theme Customizer class is defined and does the bulk of the work. One area I want to point out is where the Theme Customizer checks to see that it is active:

public function setup_theme() {
	if ( ! isset( $_REQUEST['customize'] ) || 'on' != $_REQUEST['customize'] )
		return;

	$this->start_previewing_theme();
	show_admin_bar( false );
}

This function essentially tells the customizer to load on the front-end by checking for a query string variable of “customize” that is currently set to “on” and then the magic happens.

The next part to take note of is the start_previewing_theme() function. This function sits right below the setup_theme() function:

public function start_previewing_theme() {
	if ( $this->is_preview() || false === $this->theme || ( $this->theme && ! $this->theme->exists() ) )
		return;

	// Initialize $theme and $original_stylesheet if they do not yet exist.
	if ( ! isset( $this->theme ) ) {
		$this->theme = wp_get_theme( $_REQUEST['theme'] );
		if ( ! $this->theme->exists() ) {
			$this->theme = false;
			return;
		}
	}

	$this->original_stylesheet = get_stylesheet();

	$this->previewing = true;

	add_filter( 'template', array( $this, 'get_template' ) );
	add_filter( 'stylesheet', array( $this, 'get_stylesheet' ) );
	add_filter( 'pre_option_current_theme', array( $this, 'current_theme' ) );

	// @link: http://core.trac.wordpress.org/ticket/20027
	add_filter( 'pre_option_stylesheet', array( $this, 'get_stylesheet' ) );
	add_filter( 'pre_option_template', array( $this, 'get_template' ) );

	// Handle custom theme roots.
	add_filter( 'pre_option_stylesheet_root', array( $this, 'get_stylesheet_root' ) );
	add_filter( 'pre_option_template_root', array( $this, 'get_template_root' ) );

	do_action( 'start_previewing_theme', $this );
}

As you can see inside this function, there are a number of filters added as well as an action that is fired to officially start previewing the theme.

There are a few functions here that are important to note for adding settings, sections, and controls. I’ve dropped them in below for reference, just so you can see exactly how WordPress is building out the theme customization panel. This is very similar to how the Settings API works.

public function add_setting( $id, $args = array() ) {
	if ( is_a( $id, 'WP_Customize_Setting' ) )
		$setting = $id;
	else
		$setting = new WP_Customize_Setting( $this, $id, $args );

	$this->settings[ $setting->id ] = $setting;
}

public function add_section( $id, $args = array() ) {
	if ( is_a( $id, 'WP_Customize_Section' ) )
		$section = $id;
	else
		$section = new WP_Customize_Section( $this, $id, $args );

	$this->sections[ $section->id ] = $section;
}

public function add_control( $id, $args = array() ) {
	if ( is_a( $id, 'WP_Customize_Control' ) )
		$control = $id;
	else
		$control = new WP_Customize_Control( $this, $id, $args );

	$this->controls[ $control->id ] = $control;
}

Putting it all together

Now, I realize that what I’ve shared above isn’t all that helpful until you see some code that you can actually use as an example for registering your own settings. One of the largest functions in the entire file is the one that registers your default settings, like so:

public function register_controls() {

	/* Custom Header */

	$this->add_section( 'header', array(
		'title'          => __( 'Header' ),
		'theme_supports' => 'custom-header',
		'priority'       => 20,
	) );

	$this->add_setting( 'header_textcolor', array(
		// @todo: replace with a new accept() setting method
		// 'sanitize_callback' => 'sanitize_hexcolor',
		'theme_supports' => array( 'custom-header', 'header-text' ),
		'default'        => get_theme_support( 'custom-header', 'default-text-color' ),
	) );

	$this->add_control( 'display_header_text', array(
		'settings' => 'header_textcolor',
		'label'    => __( 'Display Header Text' ),
		'section'  => 'header',
		'type'     => 'checkbox',
	) );

	$this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
		'label'   => __( 'Text Color' ),
		'section' => 'header',
	) ) );

	// Input type: checkbox
	// With custom value
	$this->add_setting( 'header_image', array(
		'default'        => get_theme_support( 'custom-header', 'default-image' ),
		'theme_supports' => 'custom-header',
	) );

	$this->add_control( new WP_Customize_Header_Image_Control( $this ) );

	/* Custom Background */

	$this->add_section( 'background', array(
		'title'          => __( 'Background' ),
		'theme_supports' => 'custom-background',
		'priority'       => 30,
	) );

	// Input type: Color
	// With sanitize_callback
	$this->add_setting( 'background_color', array(
		'default'           => get_theme_support( 'custom-background', 'default-color' ),
		'sanitize_callback' => 'sanitize_hexcolor',
		'theme_supports'    => 'custom-background',
		'transport'         => 'postMessage',
	) );

	$this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array(
		'label'   => __( 'Background Color' ),
		'section' => 'background',
	) ) );

	$this->add_setting( 'background_image', array(
		'default'        => get_theme_support( 'custom-background', 'default-image' ),
		'theme_supports' => 'custom-background',
	) );

	$this->add_control( new WP_Customize_Image_Control( $this, 'background_image', array(
		'label'          => __( 'Background Image' ),
		'section'        => 'background',
		'context'        => 'custom-background',
	) ) );

	$this->add_setting( 'background_repeat', array(
		'default'        => 'repeat',
		'theme_supports' => 'custom-background',
	) );

	$this->add_control( 'background_repeat', array(
		'label'      => __( 'Background Repeat' ),
		'section'    => 'background',
		'type'       => 'radio',
		'choices'    => array(
			'no-repeat'  => __('No Repeat'),
			'repeat'     => __('Tile'),
			'repeat-x'   => __('Tile Horizontally'),
			'repeat-y'   => __('Tile Vertically'),
		),
	) );

	$this->add_setting( 'background_position_x', array(
		'default'        => 'left',
		'theme_supports' => 'custom-background',
	) );

	$this->add_control( 'background_position_x', array(
		'label'      => __( 'Background Position' ),
		'section'    => 'background',
		'type'       => 'radio',
		'choices'    => array(
			'left'       => __('Left'),
			'center'     => __('Center'),
			'right'      => __('Right'),
		),
	) );

	$this->add_setting( 'background_attachment', array(
		'default'        => 'fixed',
		'theme_supports' => 'custom-background',
	) );

	$this->add_control( 'background_attachment', array(
		'label'      => __( 'Background Attachment' ),
		'section'    => 'background',
		'type'       => 'radio',
		'choices'    => array(
			'fixed'      => __('Fixed'),
			'scroll'     => __('Scroll'),
		),
	) );

	/* Nav Menus */

	$locations      = get_registered_nav_menus();
	$menus          = wp_get_nav_menus();
	$menu_locations = get_nav_menu_locations();
	$num_locations  = count( array_keys( $locations ) );

	$this->add_section( 'nav', array(
		'title'          => __( 'Navigation' ),
		'theme_supports' => 'menus',
		'priority'       => 40,
		'description'    => sprintf( _n('Your theme supports %s menu. Select which menu you would like to use.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . "\n\n" . __('You can edit your menu content on the Menus screen in the Appearance section.'),
	) );

	if ( $menus ) {
		$choices = array( 0 => __( '— Select —' ) );
		foreach ( $menus as $menu ) {
			$truncated_name = wp_html_excerpt( $menu->name, 40 );
			$truncated_name = ( $truncated_name == $menu->name ) ? $menu->name : trim( $truncated_name ) . '…';
			$choices[ $menu->term_id ] = $truncated_name;
		}

		foreach ( $locations as $location => $description ) {
			$menu_setting_id = "nav_menu_locations[{$location}]";

			$this->add_setting( $menu_setting_id, array(
				'sanitize_callback' => 'absint',
				'theme_supports'    => 'menus',
			) );

			$this->add_control( $menu_setting_id, array(
				'label'   => $description,
				'section' => 'nav',
				'type'    => 'select',
				'choices' => $choices,
			) );
		}
	}

	/* Static Front Page */
	// #WP19627

	$this->add_section( 'static_front_page', array(
		'title'          => __( 'Static Front Page' ),
	//	'theme_supports' => 'static-front-page',
		'priority'       => 50,
		'description'    => __( 'Your theme supports a static front page.' ),
	) );

	$this->add_setting( 'show_on_front', array(
		'default'        => get_option( 'show_on_front' ),
		'capability'     => 'manage_options',
		'type'           => 'option',
	//	'theme_supports' => 'static-front-page',
	) );

	$this->add_control( 'show_on_front', array(
		'label'   => __( 'Front page displays' ),
		'section' => 'static_front_page',
		'type'    => 'radio',
		'choices' => array(
			'posts' => __( 'Your latest posts' ),
			'page'  => __( 'A static page' ),
		),
	) );

	$this->add_setting( 'page_on_front', array(
		'type'       => 'option',
		'capability' => 'manage_options',
	//	'theme_supports' => 'static-front-page',
	) );

	$this->add_control( 'page_on_front', array(
		'label'      => __( 'Front page' ),
		'section'    => 'static_front_page',
		'type'       => 'dropdown-pages',
	) );

	$this->add_setting( 'page_for_posts', array(
		'type'           => 'option',
		'capability'     => 'manage_options',
	//	'theme_supports' => 'static-front-page',
	) );

	$this->add_control( 'page_for_posts', array(
		'label'      => __( 'Posts page' ),
		'section'    => 'static_front_page',
		'type'       => 'dropdown-pages',
	) );

	/* Site Title & Tagline */

	$this->add_section( 'strings', array(
		'title'    => __( 'Site Title & Tagline' ),
		'priority' => 5,
	) );

	$this->add_setting( 'blogname', array(
		'default'    => get_option( 'blogname' ),
		'type'       => 'option',
		'capability' => 'manage_options',
	) );

	$this->add_control( 'blogname', array(
		'label'      => __( 'Site Title' ),
		'section'    => 'strings',
	) );

	$this->add_setting( 'blogdescription', array(
		'default'    => get_option( 'blogdescription' ),
		'type'       => 'option',
		'capability' => 'manage_options',
	) );

	$this->add_control( 'blogdescription', array(
		'label'      => __( 'Tagline' ),
		'section'    => 'strings',
	) );
}

If you pay close attention to this section, you can see how each and every default preview setting is registered. Each “option” is actually defined by a pair of definitions, with an add_setting and add_control function being fired for each one:

$this->add_setting( 'blogdescription', array(
		'default'    => get_option( 'blogdescription' ),
		'type'       => 'option',
		'capability' => 'manage_options',
	) );

	$this->add_control( 'blogdescription', array(
		'label'      => __( 'Tagline' ),
		'section'    => 'strings',
	) );

The important pieces of these settings to note are the ‘type’ and the ‘capability’ bits. These pieces allow you to define what control type it is and which users can access it.

This is where we can jump over to the class-wp-customize-control.php file and take a peek at the different types of default controls we have access to:

• text
• checkbox
• radio
• select
• dropdown-pages

protected function render_content() {
	switch( $this->type ) {
		case 'text':
			?>
			<label>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
				<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
			</label>
			<?php
			break;
		case 'checkbox':
			?>
			<label>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
				<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
			</label>
			<?php
			break;
		case 'radio':
			if ( empty( $this->choices ) )
				return;

			$name = '_customize-radio-' . $this->id;

			?>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<?php
			foreach ( $this->choices as $value => $label ) :
				?>
				<label>
					<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
					<?php echo esc_html( $label ); ?><br/>
				</label>
				<?php
			endforeach;
			break;
		case 'select':
			if ( empty( $this->choices ) )
				return;

			?>
			<label>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
				<select <?php $this->link(); ?>>
					<?php
					foreach ( $this->choices as $value => $label )
						echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
					?>
				</select>
			</label>
			<?php
			break;
		case 'dropdown-pages':
			$dropdown = wp_dropdown_pages(
				array(
					'name'              => '_customize-dropdown-pages-' . $this->id,
					'echo'              => 0,
					'show_option_none'  => __( '&mdash; Select &mdash;' ),
					'option_none_value' => '0',
					'selected'          => $this->value(),
				)
			);

			// Hackily add in the data link parameter.
			$dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );

			printf(
				'<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
				$this->label,
				$dropdown
			);
			break;
	}
}

And of course, you can add your own controls, as shown by the custom ‘color,’ ‘upload,’ and ‘header-image’ types, defined below the function I just shared with you:

class WP_Customize_Upload_Control extends WP_Customize_Control {
	public $type    = 'upload';
	public $removed = '';
	public $context;

	public function enqueue() {
		wp_enqueue_script( 'wp-plupload' );
	}

	public function to_json() {
		parent::to_json();

		$this->json['removed'] = $this->removed;

		if ( $this->context )
			$this->json['context'] = $this->context;
	}

	public function render_content() {
		?>
		<label>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<div>
				<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
				<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
			</div>
		</label>
		<?php
	}
}

class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
	public $type = 'image';
	public $get_url;
	public $statuses;

	protected $tabs = array();

	public function __construct( $manager, $id, $args ) {
		$this->statuses = array( '' => __('No Image') );

		parent::__construct( $manager, $id, $args );

		$this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
		$this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
	}

	public function to_json() {
		parent::to_json();
		$this->json['statuses'] = $this->statuses;
	}

	public function render_content() {
		$src = $this->value();
		if ( isset( $this->get_url ) )
			$src = call_user_func( $this->get_url, $src );

		?>
		<label class="customize-image-picker">
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>

			<div class="customize-control-content">
				<div class="dropdown preview-thumbnail">
					<div class="dropdown-content">
						<?php if ( empty( $src ) ): ?>
							<img style="display:none;" />
						<?php else: ?>
							<img src="<?php echo esc_url( $src ); ?>" />
						<?php endif; ?>
						<div class="dropdown-status"></div>
					</div>
					<div class="dropdown-arrow"></div>
				</div>
			</div>

			<div class="library">
				<ul>
					<?php foreach ( $this->tabs as $id => $tab ): ?>
						<li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
							<?php echo esc_html( $tab['label'] ); ?>
						</li>
					<?php endforeach; ?>
				</ul>
				<?php foreach ( $this->tabs as $id => $tab ): ?>
					<div class="library-content" data-customize-tab='<?php echo esc_attr( $id ); ?>'>
						<?php call_user_func( $tab['callback'] ); ?>
					</div>
				<?php endforeach; ?>
			</div>

			<div class="actions">
				<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
			</div>
		</label>
		<?php
	}

	public function add_tab( $id, $label, $callback ) {
		$this->tabs[ $id ] = array(
			'label'    => $label,
			'callback' => $callback,
		);
	}

	public function remove_tab( $id ) {
		unset( $this->tabs[ $id ] );
	}

	public function tab_upload_new() {
		?>
		<div class="upload-dropzone">
			<?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
		</div>
		<?php
	}

	public function tab_uploaded() {
		?>
		<div class="uploaded-target"></div>
		<?php
	}
}

class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
	public function __construct( $manager ) {
		parent::__construct( $manager, 'header_image', array(
			'label'    => __( 'Header Image' ),
			'section'  => 'header',
			'context'  => 'custom-header',
			'removed'  => 'remove-header',
			'get_url'  => 'get_header_image',
			'statuses' => array(
				''                      => __('Default'),
				'remove-header'         => __('No Image'),
				'random-default-image'  => __('Random Default Image'),
				'random-uploaded-image' => __('Random Uploaded Image'),
			)
		) );

		$this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );
	}

	public function tab_uploaded() {
		$headers = get_uploaded_header_images();

		?><div class="uploaded-target"></div><?php

		foreach ( $headers as $header ) : ?>
			<a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
				<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
			</a>
		<?php endforeach;
	}

	public function tab_default_headers() {
		global $custom_image_header;
		$custom_image_header->process_default_headers();

		foreach ( $custom_image_header->default_headers as $header ) : ?>
			<a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
				<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
			</a>
		<?php endforeach;
	}
}

The Difference Between Using a Default and Custom Control

If you compare the two control declarations below, you’ll see one of them uses a default setting control of 'type' => 'checkbox' and the other actually instantiates a new object for WP_Customize_Color_Control(). Notice the array of arguments passed in are quite a bit different.

$this->add_control( 'display_header_text', array(
			'settings' => 'header_textcolor',
			'label'    => __( 'Display Header Text' ),
			'section'  => 'header',
			'type'     => 'checkbox',
		) );

$this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
			'label'   => __( 'Text Color' ),
			'section' => 'header',
		) ) );

Make sure to browse the files I linked earlier in the post and learn about how the Theme Customizer works and it’ll make life much easier when implementing your custom options. Also note that these functions will all change at some point, so please reference the current version of the code in trunk (which is what I linked above). We are certainly excited about the future of the UpThemes Framework with the new Theme Customizer and we’ll definitely be posting our progress in implementing these features in the near future so make sure to subscribe to the RSS feed to stay updated.

If you’re running a design or development company, then this theme was made just for you. Agency is a beautiful design-oriented WordPress theme that allows you to showcase your projects and team members with the greatest of ease.

This theme is slated for release within the next couple weeks and will feature integration with the upcoming Theme Customizer in WordPress 3.4 as well as loads of other features:

Agency Theme Features

• Custom Portfolio Section for easily displaying your projects with sorting and previews
• Team Member section to showcase the members of your company or design team
• Integration with the new WordPress Theme Customizer
• Custom lightbox with View.js
• Beautiful blog styles with support for all WordPress post formats
• Custom contact form to integrate seamlessly into your site
• Custom homepage slideshow carousel
• Custom widgets to feature a portfolio item or team member
• Sticky breadcrumbs for easy navigation
• Customizable gradient colors for breadcrumb bar and other parts of the site

Theme Screenshots

Make sure to subscribe to the UpThemes blog to be the first to know when the Agency theme is officially released!

For your sampling pleasure, we’ve even added View.js to UpThemes.com. Click the image below to see it in action:

As of right now, View.js is currently available in the StoreFrontal theme and Micro theme and will soon be available in all themes with a future update to the UpThemes Framework. We hope you enjoy!

One such improvement is the Theme Customizer, which is invoked whenever the user activates a new Theme:

The WordPress 3.4 Theme Customizer, which allows the user to apply - and to live-preview, Theme customizations

As you can see, the Theme Customizer includes a live preview, allowing the user to try out customizations before applying them to the Theme.

The Theme customizer panel expanded

The left panel includes all of the available customizations. This list should look familiar; it is comprised of several of the existing customizations, including:

• Site Title and Tagline (Dashboard -> Settings General)
• Header (Dashboard -> Appearance -> Header)
• Background (Dashboard -> Appearance -> Background)
• Navigation (Dashboard -> Appearance -> Menus)
• Static Front Page (Dashboard -> Settings -> Reading)

When expanded, each customization section includes simplified versions of the full settings pages corresponding to the setting. (The original settings pages are still available, and can still be found in their original locations as noted above, should you need or want the full UI for each setting.)

Perhaps the best feature of the Theme Customizer, however, is the live preview. Make a change in the left-hand panel, and that change is displayed in the preview.

Here’s the header image customized. Select the image in the panel, and it is displayed:

Select an image in the customization panel, and the change is reflected in the live previewer

Here’s the navigation menu customized. Apply an (existing) custom menu to a Theme location, and it is displayed:

Apply a custom navigation menu to a Theme location, and it is displayed in the live preview

And here are the front page settings customized; live preview of a static front page or blog posts index:

Change front page display to a static page or blog posts index, and the live preview is updated

So what do you think? Will you find this new Theme customizer feature to be useful? If you’d like to test-drive it for yourself, just install the latest WordPress 3.4 pre-release version, using the WordPress Beta Tester Plugin (the normal caveats regarding pre-release software in production environments apply, of course).

Typecase is available in the WordPress Plugin Directory and can be installed from your dashboard. In your left-hand menu, just go to Plugins > Add New > Search. You can also purchase the Pro version for $19, which includes a live front-end editor plus lifetime support and upgrades.

This tutorial shows you how to set up Typecase and start adding custom fonts to your WordPress site.

The User Interface

Once you’ve installed and activated the plugin in your WordPress dashboard, you’ll find the Typecase panel in your left-hand menu. Clicking this opens the interface where you manage your fonts.

Searching for Fonts

If you know which font you’re looking for, use the search bar at the top of the “Available Fonts” panel to find it. You can search the entire Google Web Fonts collection from here.

Alternatively, you can browse through all available fonts, which are displayed in alphabetical order below the search bar. Click the “Load More Fonts” button to pull new samples into the preview window.

When you find a font that you want to use, click the green plus icon to add it to your collection.

Some Google Web Fonts offer multiple font weights and character sets, which can be selected once the font is in your collection.

Using New Fonts on Your WordPress Site

You can apply your new fonts to different elements of your site using CSS selectors. Just choose the font, add your CSS selector, and hit enter. Your changes will be saved automatically.

If you’re not sure which CSS selector you need, right click on the relevant area of your site (where you want to apply your new font) and click “inspect element.” This works in both Chrome and Firefox.

In the example shown below, I’ve chosen the font Francois One and applied it to the h1 and h2 elements, for headings and subheadings.

I’ve then chosen Open Sans and applied it to the p element, for paragraph text.

The WordPress posts now look like this:

Some Font Combination Ideas

If you need a little inspiration, these are 10 font combinations you can use on your WordPress site. There are over 500 Google Web Fonts available, so get in there and start experimenting!

Audiowide & Dosis

Averia Libre & Actor

Graduate & Karla

Jolly Lodger & PT Mono

Londrina Sketch & Loved by the King

Oleo Script & Cabin Condensed

Passion One & Shanti

Russo One & Mate SC

Salsa & Oxygen

Wellfleet & Lato

We’re excited to announce that you can now apply kickass web fonts directly to your Page.ly website! With an exclusive partnership between UpThemes and Page.ly, we’ve made it even easier to apply any of 500+ Google Web Fonts to your website. For all new customer signups on Page.ly, Typecase comes pre-installed and ready for you to browse and apply custom fonts to ANY theme! Simply visit the Typecase page in your WordPress admin and start adding fonts to your collection. It’s that easy!

If you’re not yet a Page.ly customer, you should be! Sign up here.