Use Case: Changing the user’s Display Name

One of WordPress’ present shortcomings is the lack of a configuration option to specify a default display name format for your users. The last sentence was long, so let me give you an example.

Let’s say you’ve allowed user registration on your WordPress website (Settings – General) but instead of the plain username, you want to display their full name on the articles they submit.

You have two options. Either you independently edit each user and change the ‘Display Name’ option or…

Enter the ‘user_register’ hook

This action hook runs immediately after the successful registration of a new user on your website. It passes on the user ID to the callback function. For our purpose, the code is very simple:

class myUsers {
	static function init() {
		// Change the user's display name after insertion
		add_action( 'user_register', array( __CLASS__, 'change_display_name' ) );
	}

	static function change_display_name( $user_id ) {
		$info = get_userdata( $user_id );

		$args = array(
			'ID' => $user_id,
			'display_name' => $info->first_name . ' ' . $info->last_name
		);

		wp_update_user( $args );
	}
}

myUsers::init();

First, we grab the newly created user information with the get_userdata() function. Then, we concatenate the first name and the last name and feed it as an argument to wp_update_user().

Just paste this into your functions.php file and you’re all set.

References

• Codex: the ‘user_register’ action hook
• Codex: get_userdata()
• Codex: wp_update_user()

Thank you for retweeting.

Get Twitter Tools

Head over to the WordPress plugin repository and grab the Twitter Tools zip file. Upload it to your /wp-content/plugins directory and unzip. Next, go to the Plugins section of your WP admin and activate the plugin.

Twitter Tools bundles a set of complementary plugins. Make sure you activate Twitter Tools – Bit.ly URLs for the URL shortening ability. We’ll be using this plugin to send out custom tweets (triggered by any type of action), so we don’t need the other components (Exclude Category and Hashtags).

Connect to Twitter

Follow the instructions on the Twitter Tools settings page to connect your website to Twitter. First, you need to register your site as a Twitter application. A couple of things to keep in mind:

• Your Application’s Name will be what shows up after “via” in your twitter stream
• Application Type should be set on Browser
• The Callback URL should be your website URL
• Default Access type should be set to Read & Write

A screenshot is worth more than 1000 words, so here’s an example:

A couple of special strings used for authentication and API access need to be copied over to Twitter Tools:

• The Twitter Consumer Key and Consumer Secret
• The application Access Token and Access Token Secret

The latter can be found by going to ‘My Access Token’ in the right menu:

Configure Twitter Tools

Remember that we only need this plugin as a support to send out our custom Tweets, so we’re gonna disable all the auto-tweeting functionality. Set the following options to ‘No’:

• Enable option to create a tweet when you post in your blog?
• Create tweets from your sidebar?
• Create a daily digest blog post from your tweets?

That’s it! Now let’s get down to some coding.

Example code for a custom tweet

Suppose your website uses a Custom Post Type called ‘product’ and you want to send out a custom notification on Twitter each time a new ‘product’ is added.

First let’s create a custom function that uses (or hijacks) the Twitter Tools objects to tweet out a text portion, a link and some hashtags:

function my_tweet( $args = array() ) {
	// Check reqs
	if( ! class_exists( 'aktt_tweet' ) )
		return;

	global $aktt;

	// Set up defaults
	$defaults = array(
		'text' => '',
		'url' => '',
		'tags' => array()
	);

	// Extract the arguments
	extract( wp_parse_args( $args, $defaults ) );

	// Sanity check
	if( empty( $text ) )
		return;

	// Add the URL, after shortening
	if( ! empty( $url ) )
		$text .= ' ' . aktt_bitly_shorten_url( $url );

	// Add the hashtags
	if( count( $tags ) )
		$separator = ' #';
		$text .= $separator . implode( $separator, $tags );

	// Initialize the aktt_tweet object
	$tweet = new aktt_tweet;
	$tweet->tw_text = @html_entity_decode( $text , ENT_COMPAT, 'UTF-8' );

	// And Tweet!
	return $aktt->do_tweet( $tweet );
}

Armed with this awesome function, we’ll use the wp_insert_post action hook to check when a new ‘product’ is added:

add_action( 'wp_insert_post' , 'my_twitter_notifications' , 99 );
function my_twitter_notifications( $post_id ) {
	$post = get_post( $post_id );
	if( $post->post_status != 'publish' ) return;

	switch ( $post->post_type ) {
		case 'product':
			// Tweet it
			$args = array(
				'text' => 'New Product: ' . $post->post_title,
				'url' => get_permalink( $post_id ),
				'tags' => array( '#awesome', '#merchandise', '#fb' )
			);

			my_tweet( $args );
		break;
	}
}

This function checks the post type and calls the my_tweet function with the appropriate arguments.

That’s all folks. See you for my next WordPress tutorial (which will hopefully come sooner).

As always, thank you for retweeting.

We’re all enjoying the benefits and features of WordPress 3.0. Custom menus are awesome and custom post types shatter all capability and imagination limits. A small problem arises when these two features are used in conjunction: the classes applied to navigation menu items only reflect direct inheritance, and entities that have their URLs included in the current URL can’t get highlighted.

Let me illustrate through a simple example:

Suppose you defined a ‘Services’ page that lives at this URL: http://example.com/services/.
This page has an entry in the main menu of your website. To further emphasize your services, you also defined a ‘services’ custom post type with the slug services. The URL of a ‘service’ post can be http://example.com/services/branding/.

When you browse the ‘Branding’ post, however, no special class is applied to the menu entry of your ‘Services’ page, and it’s impossible to style it as the current section of your website, even though the proposed URL structure is semantic.

The Solution

The solution is based on the nav_menu_css_class WordPress hook. This is a filter hook that allows us to alter an array containing CSS classes that will be applied to a menu item.

We also need a way to find the current URL, or the URL being browsed.

The Code

add_filter( 'nav_menu_css_class', 'add_parent_url_menu_class', 10, 2 );

function add_parent_url_menu_class( $classes = array(), $item = false ) {
	// Get current URL
	$current_url = current_url();

	// Get homepage URL
	$homepage_url = trailingslashit( get_bloginfo( 'url' ) );

	// Exclude 404 and homepage
	if( is_404() or $item->url == $homepage_url ) return $classes;

	if ( strstr( $current_url, $item->url) ) {
		// Add the 'parent_url' class
		$classes[] = 'parent_url';
	}

	return $classes;
}

function current_url() {
	// Protocol
	$url = ( 'on' == $_SERVER['HTTPS'] ) ? 'https://' : 'http://';

	$url .= $_SERVER['SERVER_NAME'];

	// Port
	$url .= ( '80' == $_SERVER['SERVER_PORT'] ) ? '' : ':' . $_SERVER['SERVER_PORT'];

	$url .= $_SERVER['REQUEST_URI'];

	return trailingslashit( $url );
}

In the hooked function, a check is first made to see if we’re on a 404 page. When an invalid URL is accessed, we don’t want to highlight anything.

The same holds if the menu item points to the domain root URL: all other URLs on the website include it.

The rest is pretty straightforward: add the class if the menu item URL is included in the current URL and return the $classes array.

Thank you for retweeting.

Description

Very Sirius Productions is the online identity of creative director David Mayne. The site features a heavily modified version of the Modularity WordPress theme.

The main highlight is the HD Media Player used to present his extensive video portfolio. As a side-project, I also developed the “Creative Impulses” playground blog.

Both websites are powered by WordPress

It caused hours of painful debugging to get the same look and feel for a website. It put brilliant minds at work to devise hacks and workarounds to make it more standards-compliant. It killed millions of web developer neurons just because a small percentage of people (including, maybe, your client’s peers) have refused to upgrade.

There used to be a time when on any given day you’d hear someone in the office say: “Oh man, I wish IE6 was dead already!” But after the outrage settled, the person responsible would sit down and respect the accessibility code by continuing the mind-numbing debugging process. The day IE6 died was a concept similar to the “light at the end of the tunnel” – a recognized reality situated somewhere in the future at a psychologically infinite distance.

But the future is promising. Things are definitely steering in the right direction with Google and Amazon joining the ‘kill-IE6′ army last month. Some have even gone so far as proclaiming the browser dead and organized an obituary and wake in its painful memory. I must say I sympathize with these people from all my heart as I proudly join them and refuse the total waste of resources called ‘developing for IE6′.

As far as I’m concerned IE6 is dead.

That’s why I’ll finally get to the point of this post: a small compilation of IE6-related memorabilia.

1. What God does to kitten when you use IE6

Original source: António Farinha

2. What retarded PNG support and CSS compliance does to fragile developers

Original source: Laughing Squid

3. A friendlier way of disposing IE6 users

Original source: John Martz

4. IE6 Standards compliance demonstrated on a human model

Original source: Atzu

5. The life, times and death of IE6

Original source: Smashing Magazine

Related Articles and resources:

• 15+ Amazing Anti IE Resources
• Dear IE6
• End 6
• IE6 Funeral
• …and my all time favorite: Crash IE6 with one line of code

Edit: @markkolich suggested adding a link to the crash IE6 jQuery plugin.

Do you often find yourself changing the default WordPress settings after a fresh install? Not anymore.

WPEngineer has a great article promoting a very simple but ultra-effective plugin.

The plugin was written by Thomas Scholz and addresses the problem of always having to do the same adjustments after a clean WordPress install.

Examples include setting the Permalink structure, deleting the default post, and basically altering any other default setting from the wp_options table. If you don’t have database access you can access an automatically generated overview of available options at [your_base_URL]/wp-admin/options.php

Instructions

1. Download the plugin by toscho
2. Upload the plugin into your /wp-content/plugins/ directory
3. Activate the plugin
4. Deactivate the plugin
5. Delete the plugin

The Code

<?php
/*
Plugin Name: Toscho's basic settings
Plugin URI: http://toscho.de/2010/wordpress-grundeinstellungen-per-plugin-setzen/
Description: Some useful default configuration settings. See 'wp-admin/options.php' for more options.
Version: 0.2
Author: Thomas Scholz
Author URI: http://toscho.de
*/
function set_toscho_defaults()
{
    $o = array(
        'avatar_default'            => ''blank',
        'avatar_rating'             => 'G',
        'category_base'             => '/thema',
        'comment_max_links'         => 0,
        'comments_per_page'         => 0,
        'date_format'               => 'd.m.Y',
        'default_ping_status'       => 'closed',
        'default_post_edit_rows'    => 30,
        'links_updated_date_format' => 'j. F Y, H:i',
        'permalink_structure'       => '/%year%/%postname%/',
        'rss_language'              => 'de',
        'timezone_string'           => 'Etc/GMT-1',
        'use_smilies'               => 0,
    );
    foreach ( $o as $k => $v )
    {
        update_option($k, $v);
    }
    // Delete dummy post and comment.
    wp_delete_post(1, TRUE);
    wp_delete_comment(1);
    return;
}
register_activation_hook(__FILE__, 'set_toscho_defaults');
?>

Update: Thomas has provided me with a link to a public repository on GitHub. Feel free to contribute.
http://github.com/toscho/WordPress-Basic-Settings

A common problem with the WordPress built-in function for page navigation is the lack of anchor text separator support.

In version 2.7 two more arguments for wp_list_pages() were added to mitigate this inconvenience: link_before and link_after. When using these, the function prepends or appends the specified strings to the generated anchor text. This works well for styling vertical menus.

However, for horizontal menus like the one below, you want the separator to appear between consecutive links and both options become unsuitable:

• link_before would produce extra markup before the first link
• link_after would produce extra markup after the last link

The solution

The solution I came up with for a recent project involves using regular expressions to inject the page separator. Basically, you want to alter the structure of all links except the last one. This can be accomplished by searching for all list elements that are followed by an extra list element.

The code

$args = array(
  'sort_column' => 'menu_order',
  'title_li' => '',
  'depth' => '1',
  'echo' => 0
);
$separator = ' | ';
$pattern = '/(<\\/a>).*?(<\\/li>).*?(<li)/is';
$replace = '</a>' . $separator . '</li><li';
$subnav = preg_replace($pattern,$replace,wp_list_pages($args));
echo $subnav;

You can specify the separator string in the $separator variable and alter its appearance position by changing the $replace variable.

Resources

• The wp_list_pages() codex reference page
• The wonderful http://txt2re.com regular expression generator

Description

This website constitutes the online identity of public accountant and business adviser Arthur Green. The site content is easily manageable thanks to the WordPress CMS Integration services I provided.

Other notable features include the integration of 3rd party log-in forms to simplify client access to valuable online accounting tools.

Description

The main highlight of this project was the seamless integration of four separate blogs into a unified environment provided by WordPress MU.

This solution allowed the authors to continue publishing on the same platform they were familiar with while also providing consistency to their web presence through the unified user interface.

Description

Can a business be based entirely online? 30 Delivery successfully answered this question when they choose to base their web store on Magento – a revolutionary eCommerce platform.

All content (products & pages) is manageable through a comprehensive CMS, and, with the innovative one-page checkout process the client can have his order on the way within seconds.

A custom module was developed as a way to alert customers that they could only deliver products during certain times. Also, a Firstdata Payment Gateway module was crafted specifically for this project.

Description

Boston Unique Properties is a real estate listing website run by Lawrence Shevick, one of Boston’s top sales agent. The unique design was carefully coded and integrated into a WordPress powered Content Management System.

On the back-end, custom field templates were developed for easier property data entry. On the front-end, the jQuery and Fancybox powered image galleries provide an immersive user experience.

Description

Sean Marshall’s passion for photography makes him a perfectionist. Extreme care was needed during the development of his virtual gallery and print shop.

The site matches the design to pixel precision and allows lovers of fine art to browse Sean’s galleries in a unique fashion and buy his prints in various sizes.

Description

The Government of Quebec established this online identity site to support the sustainable development of the Québec food industry.

I provided my PSD to HTML coding services to produce clean, semantic and speed-optimized base code for their efforts.

Description

The New England based architecture firm refreshed its online identity in 2008.

I provided design conversion services and delivered clean, semantic and speed-optimized HTML code.

Description

Terra Mamaliga is an event blog commissioned by the French Cultural Center in my hometown. It advertises a traditional food fair.

For this project I customized an existing WordPress theme and added some neat User Interface effects to the producers list.

Description

Shalrie Joseph is a fun player running soccer training programs for kids throughout Massachusetts.

I helped bring his website to life offering my best PSD to HTML / CSS coding skills.

Description

Casasolara.com is a local business specializing in eco-friendly solar panel technology. The front-end features a slight variation of the WordPress default theme.

The over-simplified design is balanced out by the website functionality: a fully operational eCommerce solution based on the WordPress Shopp plug-in.

The checkout process was customized to allow the entering of business credentials specific to Romanian commerce practices.

Description

This New England based restaurant chain prides itself with its commitment to quality. It is the very same principle that governed my work when I coded their new design into clean, semantic and valid HTML / CSS.

Description

Green Beacon Solutions is a firm specializing in Business Management software. Their new website design was coded by me into skeleton HTML / CSS files they could later use to implement a CMS

For the homepage user experience I programmed an animated banner that very much resembles Flash technology. It’s done entirely in Javascript to allow for easy content management.

Description

Box-o-Box helps parents throughout the US support their student kids. The site went through a major face-lift in 2008.

The main requirement was to keep their custom built eCommerce system. I coded their new design, integrated it into their old system and programmed additional features.