When I started designing Charisma I had in mind an elegant, simple, well structured theme which highlights the content and gives the user a pleasurable reading experience.

Charisma, Free Genesis Child Theme

The home page has a beautiful slider, and below it lists the most recent post titles. I created a new widget area that appears only on the homepage and you can add the default featured articles widget or featured page widget from Genesis Theme Framework.

So why Genesis you might ask? To be honest I wanted to experiment with frameworks other then Thematic to see how they work. I’ve used bits from Hybrid in the past and this is how I’ve tested Genesis, by building a child theme for it.

To be honest I was pleasantly surprised. The code is really easy to understand, there are plenty of tutorials on the support forums, the css is straight forward and the html really let’s you create any layout without any problems. I’ve also liked the widgets Genesis comes with by default. They speed up things quite a lot.

Charisma was built on top of the Genesis framework, so it inherits all it’s functionality. In order to install it you have to buy the Genesis Theme (this is an affiliate link), upload both themes (Charisma and Genesis) to your server in the themes folder AND THEN ACTIVATE the Charisma theme.

Support

If you have any question regarding this theme you can always visit the Cozmoslabs forums for help (www.cozmoslabs.com/forums/forum/charisma).

However, for questions regarding the Genesis Theme Framework please make use of the excellent support StudioPress provides.

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Green anyone? Try Commune – Thematic Child Theme!
3. Early Morning Child Theme

I’ve been playing a lot lately with the user registration template (I’ve used it as a great starting point) from Justin Tadlock’s ThemeHybrid and extended it to support custom user profiles.

Unfortunately, user management in WordPress isn’t the sharpest tool in the shed. You have a lot of functionality for the users in the backend, but if you want to do extend that functionality to the front-end you’re in for a rough time.

There are some really nice tutorials that can help you add custom user profile fields in the backend, but if you try to do it to the frontend through a custom page template you’ll find your self validating a lot of fields and there’s even a twist to the entire process that makes things interesting.

Yet Another Thematic Childtheme

For the purpose of this tutorial will create a new Thematic child theme. Most of the code will go into the functions.php file and the individual template pages. If you’re new to this just use the child theme that comes with Thematic.

So let us have a look at what we’re building.

WordPress Extra Profile Fields

First of all, we want some extra profile fields in the back-end. We do this by simply adding input fields to the following two hooks: show_user_profile and edit_user_profile. We need both hooks because we want the users to be able to edit their own extra profile fields and we also want the admin to be able to edit other user’s extra profile fields.

add_action( 'show_user_profile', 'show_extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 );
 
function show_extra_profile_fields( $user ) { ?>
	<input type="text" name="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" />
<?php }

In addition to this, we also need to save our data. This is done by hooking to personal_options_update and edit_user_profile_update. Both hooks are needed for the same reason two hooks were needed when adding the extra input fields.

add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );
 
function save_extra_profile_fields( $user_id ) {
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}

This is what your entire functions.php file should contain:

<?php
 
//
//  Custom Child Theme Functions
//
 
 
add_action( 'show_user_profile', 'show_extra_profile_fields', 10 );
add_action( 'edit_user_profile', 'show_extra_profile_fields', 10 );
 
function show_extra_profile_fields( $user ) { ?>
 
	<h3><?php _e('Extra Profile Information', 'frontendprofile'); ?></h3>
 
	<table class="form-table">
 
		<tr>
			<th><label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label></th>
 
			<td>
				<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
				<span class="description"><?php _e('Please enter your Twitter account.', 'frontendprofile'); ?></span>
			</td>
		</tr>
 
		<tr>
			<th><label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label></th>
 
			<td>
				<?php
 
				for($i=1900; $i<=2000; $i++)
					$years[]=$i;
 
				echo '<select name="birth">';
					echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
					foreach($years as $year){
						$selected = '';
						if( $year == get_the_author_meta( 'birth', $user->ID ) )
							$selected = 'selected="slelected"';
						echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
					}
				echo '</select>';
				?>
				<span class="description"><?php _e('Please select the year of your birth.', 'frontendprofile'); ?></span>
			</td>
		</tr>
 
		<tr>
			<th><label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label></th>
			<td>
			<?php $hobbies = get_the_author_meta( 'hobbies', $user->ID ); ?>
				<ul>
					<li><input value="videogames"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
					<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
					<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
				</ul>
			</td>			
		</tr>
 
		<tr>
			<th><label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label></th>
			<td>
			<?php $agree = get_the_author_meta( 'agree', $user->ID ); ?>
				<ul>
					<li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
					<li><input value="no"  name="agree" <?php if ($agree == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
				</ul>
			</td>			
		</tr>
 
	</table>
<?php }
 
add_action( 'personal_options_update', 'save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_profile_fields' );
 
function save_extra_profile_fields( $user_id ) {
 
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;
 
	update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
	update_usermeta( $user_id, 'birth', $_POST['birth'] );
	update_usermeta( $user_id, 'hobbies', $_POST['hobbies'] );
	update_usermeta( $user_id, 'agree', $_POST['agree'] );
}

The templates

Edit Profile Template

All right. With this out of the way, we can start working on our awesome templates. Let’s start with the Edit Profile Template. First of all, we need a form with all the input fields (both the default ones and our extra fields).

<form method="post" action="<?php the_permalink(); ?>">
 
	<p class="form-twitter">
		<label for="twitter">Twitter</label>
		<input name="twitter" type="text" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" />
	</p><!-- .form-twitter -->
 
	<p class="form-submit">
		<input name="updateuser" type="submit" id="updateuser" class="submit button" value="Update" />
		<?php wp_nonce_field( 'update-user' ) ?>
		<input name="action" type="hidden" id="action" value="update-user" />
	</p><!-- .form-submit -->
 
</form>

Then, we need to update the user meta-data accordingly when needed. All can be summed up to the following snippet:

<?php
	/* Get user info. */
	global $current_user;
	get_currentuserinfo();
 
	/* Load the registration file. */
	require_once( ABSPATH . WPINC . '/registration.php' );
 
	/* If profile was saved, update profile. */
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {
		update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) );	
	}
?>

Notice that loading the registration file found in wp-includes is an absolute must.

Here is the entire edit profile page template for your Thematic Child Theme.

<?php
/**
 * Template Name: Edit Profile Page
 *
 */
 
	/* Get user info. */
	global $current_user, $wp_roles;
	get_currentuserinfo();
 
	/* Load the registration file. */
	require_once( ABSPATH . WPINC . '/registration.php' );
	require_once( ABSPATH . 'wp-admin/includes' . '/template.php' ); // this is only for the selected() function
 
	/* If profile was saved, update profile. */
	if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {
 
		/* Update user password. */
		if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
			if ( $_POST['pass1'] == $_POST['pass2'] )
				wp_update_user( array( 'ID' => $current_user->id, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
			else
				$error = __('The passwords you entered do not match.  Your password was not updated.', 'frontendprofile');
		}
 
		/* Update user information. */
 
		update_usermeta( $current_user->id, 'first_name', esc_attr( $_POST['first_name'] ) );
 
		update_usermeta( $current_user->id, 'last_name', esc_attr( $_POST['last_name'] ) );
 
		if ( !empty( $_POST['nickname'] ) )
			update_usermeta( $current_user->id, 'nickname', esc_attr( $_POST['nickname'] ) );
 
		update_usermeta( $current_user->id, 'display_name', esc_attr( $_POST['display_name'] ) );
 
		if ( !empty( $_POST['email'] ) )
			update_usermeta( $current_user->id, 'user_email', esc_attr( $_POST['email'] ) );
 
		if(strpos($_POST['website'], 'ttp://') || empty( $_POST['website'] ))
			update_usermeta( $current_user->id, 'user_url', esc_attr( $_POST['website'] ) );
		else
			update_usermeta( $current_user->id, 'user_url', 'http://' . esc_attr( $_POST['website'] ) );
 
		update_usermeta( $current_user->id, 'aim', esc_attr( $_POST['aim'] ) );
 
		update_usermeta( $current_user->id, 'yim', esc_attr( $_POST['yim'] ) );
 
		update_usermeta( $current_user->id, 'jabber', esc_attr( $_POST['jabber'] ) );
 
		update_usermeta( $current_user->id, 'description', esc_attr( $_POST['description'] ) );
 
		// Extra Profile Information
 
		update_usermeta( $current_user->id, 'twitter', esc_attr( $_POST['twitter'] ) );	
 
		update_usermeta( $current_user->id, 'birth', esc_attr( $_POST['birth'] ) );	
 
		update_usermeta( $current_user->id, 'hobbies', $_POST['hobbies'] );	
 
		update_usermeta( $current_user->id, 'agree', esc_attr( $_POST['agree'] ) );	
 
		/* Redirect so the page will show updated info. */
		if ( !$error ) {
			wp_redirect( get_permalink() );
			exit;
		}
	}
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- EDIT PROFILE STARTS HERE -->
 
			<?php if ( !is_user_logged_in() ) : ?>
 
				<p class="warning">
					<?php _e('You must be logged in to edit your profile.', 'frontendprofile'); ?>
				</p><!-- .warning -->
 
			<?php else : ?>
 
				<?php if ( $error ) echo '<p class="error">' . $error . '</p>'; ?>
 
				<form method="post" id="edituser" class="user-forms" action="<?php the_permalink(); ?>">
 
				<strong>Name</strong>
 
				<p class="first_name">
					<label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->id ); ?>" />
				</p><!-- .first_name -->
 
				<p class="last_name">
					<label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="last_name" type="text" id="last_name" value="<?php the_author_meta( 'last_name', $current_user->id ); ?>" />
				</p><!-- .last_name -->
 
				<p class="nickname">
					<label for="nickname"><?php _e('Nickname (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="<?php the_author_meta( 'nickname', $current_user->id ); ?>" />
				</p><!-- .nickname -->
 
				<p class="display_name">
					<label for="display_name"><?php _e('Display Name', 'frontendprofile'); ?></label>
					<select name="display_name" id="display_name">
					<?php
						$public_display = array();
						$public_display['display_nickname']  = $current_user->nickname;
						$public_display['display_username']  = $current_user->user_login;
						if ( !empty($current_user->first_name) )
							$public_display['display_firstname'] = $current_user->first_name;
						if ( !empty($current_user->last_name) )
							$public_display['display_lastname'] = $current_user->last_name;
						if ( !empty($current_user->first_name) && !empty($current_user->last_name) ) {
							$public_display['display_firstlast'] = $current_user->first_name . ' ' . $current_user->last_name;
							$public_display['display_lastfirst'] = $current_user->last_name . ' ' . $current_user->first_name;
						}
						if ( !in_array( $current_user->display_name, $public_display ) )// Only add this if it isn't duplicated elsewhere
							$public_display = array( 'display_displayname' => $current_user->display_name ) + $public_display;
						$public_display = array_map( 'trim', $public_display );
						foreach ( $public_display as $id => $item ) {
					?>
						<option id="<?php echo $id; ?>" value="<?php echo esc_attr($item); ?>"<?php selected( $current_user->display_name, $item ); ?>><?php echo $item; ?></option>
					<?php
						}
					?>
					</select>
				</p><!-- .display_name -->
 
				<strong>Contact Info</strong>
 
				<p class="form-email">
					<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="email" type="text" id="email" value="<?php the_author_meta( 'user_email', $current_user->id ); ?>" />
				</p><!-- .form-email -->
 
				<p class="form-website">
					<label for="website"><?php _e('Website', 'frontendprofile'); ?></label>
					<input class="text-input" name="website" type="text" id="website" value="<?php the_author_meta( 'user_url', $current_user->id ); ?>" />
				</p><!-- .form-website -->
 
				<p class="form-aim">
					<label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label>
					<input class="text-input" name="aim" type="text" id="aim" value="<?php the_author_meta( 'aim', $current_user->id ); ?>" />
				</p><!-- .form-aim -->
 
				<p class="form-yim">
					<label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label>
					<input class="text-input" name="yim" type="text" id="yim" value="<?php the_author_meta( 'yim', $current_user->id ); ?>" />
				</p><!-- .form-yim -->
 
				<p class="form-jabber">
					<label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label>
					<input class="text-input" name="jabber" type="text" id="jabber" value="<?php the_author_meta( 'jabber', $current_user->id ); ?>" />
				</p><!-- .form-jabber -->
 
				<strong>About Yourself</strong>
 
				<p class="form-description">
					<label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label>
					<textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php echo the_author_meta( 'description', $current_user->id ); ?></textarea>
				</p><!-- .form-description -->
 
				<p class="form-password">
					<label for="pass1"><?php _e('New Password', 'frontendprofile'); ?> </label>
					<input class="text-input" name="pass1" type="password" id="pass1" />
				</p><!-- .form-password -->
 
				<p class="form-password">
					<label for="pass2"><?php _e('Repeat Password', 'frontendprofile'); ?></label>
					<input class="text-input" name="pass2" type="password" id="pass2" />
				</p><!-- .form-password -->
 
				<strong>Extra Profile Information</strong>
 
				<p class="form-twitter">
					<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="<?php the_author_meta( 'twitter', $current_user->id ); ?>" />
				</p><!-- .form-twitter -->
 
				<p class="form-birth">
					<label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label>
					<?php
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '<select name="birth">';
							echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
							foreach($years as $year){
								$the_year = get_the_author_meta( 'birth', $current_user->id );
								if($year == $the_year ) $selected = 'selected="slelected"';
								else $selected = '';
								echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
							}
						echo '</select>';
					?>
				</p><!-- .form-birth -->
 
				<p class="form-hobbies">
					<label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label>
					<?php
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
						<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
						<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-hobbies -->
 
				<p class="form-agree">
					<label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label>
					<?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree" <?php if ($agree == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
						<li><input value="no"  name="agree" <?php if ($agree == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-agree -->
 
				<p class="form-submit">
					<?php echo $referer; ?>
					<input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'frontendprofile'); ?>" />
					<?php wp_nonce_field( 'update-user' ) ?>
					<input name="action" type="hidden" id="action" value="update-user" />
				</p><!-- .form-submit -->
 
				</form><!-- #edituser -->

			<?php endif; ?>
 
<!-- EDIT PROFILE ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();
 
?>

User Registration Page Template

Next, let’s take a look at the Register Template. Similar to the Edit Profile Template, we need a form with all our input fields.

<?php if ( $error ) : ?>
	<p class="error">
		<?php echo $error; ?>
	</p><!-- .error -->
<?php endif; ?>
 
<form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 
	<p class="form-username">
		<label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label>
		<input name="user_name" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
	</p><!-- .form-username -->
 
	<p class="form-email">
		<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
		<input name="email" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
	</p><!-- .form-email -->
 
	<p class="form-twitter">
		<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
		<input name="twitter" type="text" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
	</p><!-- .form-twitter -->
 
	<p class="form-submit">
		<input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" />
		<?php wp_nonce_field( 'add-user' ) ?>
		<input name="action" type="hidden" id="action" value="adduser" />
	</p><!-- .form-submit -->
</form><!-- #adduser -->

Then, when a registration actually occurs, we need to:

• create a user with all the default fields of meta-data;
• separately add the extra meta-data fields;
• mail the password to the new user.

Reduced to a bare minimum, this is how the code looks like:

<?php
/* Load registration file. */
require_once( ABSPATH . WPINC . '/registration.php' );
 
/* If user registered, input info. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) {
	$user_pass = wp_generate_password();
	$userdata = array(
		'user_pass' => $user_pass,
		'user_login' => esc_attr( $_POST['user_name'] ),
		'user_email' => esc_attr( $_POST['email'] ),
	);
 
	if ( !$userdata['user_login'] )
		$error = __('A username is required for registration.', 'frontendprofile');
	elseif ( username_exists($userdata['user_login']) )
		$error = __('Sorry, that username already exists!', 'frontendprofile');
	elseif ( !is_email($userdata['user_email'], true) )
		$error = __('You must enter a valid email address.', 'frontendprofile');
	elseif ( email_exists($userdata['user_email']) )
		$error = __('Sorry, that email address is already used!', 'frontendprofile');
 
	else{
		$new_user = wp_insert_user( $userdata );
		update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter']  ) );
		wp_new_user_notification($new_user, $user_pass);
	}
}
 
?>

Notice the included error reporting features.

Another thing that we should mention is the update_usermeta function. We need to call it because wp_insert_user function doesn’t take into account extra fields.

Here is the entire registration page template for your Thematic Child Theme.

<?php
/**
 * Template Name: Register Page
 *
 */
 
/* Load registration file. */
require_once( ABSPATH . WPINC . '/registration.php' );
 
/* Check if users can register. */
$registration = get_option( 'users_can_register' );
 
/* If user registered, input info. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'adduser' ) {
	$user_pass = wp_generate_password();
	$userdata = array(
		'user_pass' => $user_pass,
		'user_login' => esc_attr( $_POST['user_name'] ),
		'first_name' => esc_attr( $_POST['first_name'] ),
		'last_name' => esc_attr( $_POST['last_name'] ),
		'nickname' => esc_attr( $_POST['nickname'] ),
		'user_email' => esc_attr( $_POST['email'] ),
		'user_url' => esc_attr( $_POST['website'] ),
		'aim' => esc_attr( $_POST['aim'] ),
		'yim' => esc_attr( $_POST['yim'] ),
		'jabber' => esc_attr( $_POST['jabber'] ),
		'description' => esc_attr( $_POST['description'] ),
		'role' => get_option( 'default_role' ),
	);
 
	if ( !$userdata['user_login'] )
		$error = __('A username is required for registration.', 'frontendprofile');
	elseif ( username_exists($userdata['user_login']) )
		$error = __('Sorry, that username already exists!', 'frontendprofile');
 
	elseif ( !is_email($userdata['user_email'], true) )
		$error = __('You must enter a valid email address.', 'frontendprofile');
	elseif ( email_exists($userdata['user_email']) )
		$error = __('Sorry, that email address is already used!', 'frontendprofile');
 
	else{
		$new_user = wp_insert_user( $userdata );
		wp_new_user_notification($new_user, $user_pass);
 
		update_usermeta( $new_user, 'twitter', esc_attr( $_POST['twitter']  ) );
		update_usermeta( $new_user, 'birth',   esc_attr( $_POST['birth']    ) );
		update_usermeta( $new_user, 'hobbies',           $_POST['hobbies']    );
		update_usermeta( $new_user, 'agree',   esc_attr( $_POST['agree']    ) );
	}
 
}
 
 
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- REGISTER FORM STARTS HERE -->
 
		<?php if ( is_user_logged_in() && !current_user_can( 'create_users' ) ) : ?>
 
			<p class="log-in-out alert">
			<?php printf( __('You are logged in as <a href="%1$s" title="%2$s">%2$s</a>.  You don\'t need another account.', 'frontendprofile'), get_author_posts_url( $curauth->ID ), $user_identity ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Logout &raquo;', 'frontendprofile'); ?></a>
			</p><!-- .log-in-out .alert -->
 
		<?php elseif ( $new_user ) : ?>
 
			<p class="alert">
			<?php
				if ( current_user_can( 'create_users' ) )
					printf( __('A user account for %1$s has been created.', 'frontendprofile'), $_POST['user-name'] );
				else 
					printf( __('Thank you for registering, %1$s.', 'frontendprofile'), $_POST['user-name'] );
					printf( __('<br/>Please check your email address. That\'s where you\'ll recieve your login password.<br/> (It might go into your spam folder)', 'frontendprofile') );
			?>
			</p><!-- .alert -->
 
		<?php else : ?>
 
			<?php if ( $error ) : ?>
				<p class="error">
					<?php echo $error; ?>
				</p><!-- .error -->
			<?php endif; ?>
 
			<?php if ( current_user_can( 'create_users' ) && $registration ) : ?>
				<p class="alert">
					<?php _e('Users can register themselves or you can manually create users here.', 'frontendprofile'); ?>
				</p><!-- .alert -->
			<?php elseif ( current_user_can( 'create_users' ) ) : ?>
				<p class="alert">
					<?php _e('Users cannot currently register themselves, but you can manually create users here.', 'frontendprofile'); ?>
				</p><!-- .alert -->
			<?php endif; ?>
 
			<?php if ( $registration || current_user_can( 'create_users' ) ) : ?>
 
			<form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 
 
				<strong>Name</strong>
 
				<p class="form-username">
					<label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="user_name" type="text" id="user_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
				</p><!-- .form-username -->
 
				<p class="first_name">
					<label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="first_name" type="text" id="first_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['first_name'], 1 ); ?>" />
				</p><!-- .first_name -->
 
				<p class="last_name">
					<label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label>
					<input class="text-input" name="last_name" type="text" id="last_name" value="<?php if ( $error ) echo wp_specialchars( $_POST['last_name'], 1 ); ?>" />
				</p><!-- .last_name -->
 
				<p class="nickname">
					<label for="nickname"><?php _e('Nickname', 'frontendprofile'); ?></label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="<?php if ( $error ) echo wp_specialchars( $_POST['nickname'], 1 ); ?>" />
				</p><!-- .nickname -->
 
				<strong>Contact Info</strong>
 
				<p class="form-email">
					<label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
					<input class="text-input" name="email" type="text" id="email" value="<?php if ( $error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
				</p><!-- .form-email -->
 
				<p class="form-website">
					<label for="website"><?php _e('Website', 'frontendprofile'); ?></label>
					<input class="text-input" name="website" type="text" id="website" value="<?php if ( $error ) echo wp_specialchars( $_POST['website'], 1 ); ?>" />
				</p><!-- .form-website -->
 
				<p class="form-aim">
					<label for="aim"><?php _e('AIM', 'frontendprofile'); ?></label>
					<input class="text-input" name="aim" type="text" id="aim" value="<?php if ( $error ) echo wp_specialchars( $_POST['aim'], 1 ); ?>" />
				</p><!-- .form-aim -->
 
				<p class="form-yim">
					<label for="yim"><?php _e('Yahoo IM', 'frontendprofile'); ?></label>
					<input class="text-input" name="yim" type="text" id="yim" value="<?php if ( $error ) echo wp_specialchars( $_POST['yim'], 1 ); ?>" />
				</p><!-- .form-yim -->
 
				<p class="form-jabber">
					<label for="jabber"><?php _e('Jabber / Google Talk', 'frontendprofile'); ?></label>
					<input class="text-input" name="jabber" type="text" id="jabber" value="<?php if ( $error ) echo wp_specialchars( $_POST['jabber'], 1 ); ?>" />
				</p><!-- .form-jabber -->
 
				<strong>About Yourself</strong>
 
				<p class="form-description">
					<label for="description"><?php _e('Biographical Info', 'frontendprofile'); ?></label>
					<textarea class="text-input" name="description" id="description" rows="5" cols="30"><?php if ( $error ) echo wp_specialchars( $_POST['description'], 1 ); ?></textarea>
				</p><!-- .form-description -->
 
				<strong>Extra Profile Information</strong>
 
				<p class="form-twitter">
					<label for="twitter"><?php _e('Twitter', 'frontendprofile'); ?></label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="<?php if ( $error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
				</p><!-- .form-twitter -->
 
				<p class="form-birth">
					<label for="birth"><?php _e('Year of birth', 'frontendprofile'); ?></label>
					<?php
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '<select name="birth">';
							echo '<option value="">' . __("Select Year", 'frontendprofile' ) . '</option>';
							foreach($years as $year){
								if ($error && $year==$_POST['birth']) $selected = 'selected="slelected"';
								else $selected = '';
								echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
							}
						echo '</select>';
					?>
				</p><!-- .form-birth -->
 
				<p class="form-hobbies">
					<label for="hobbies"><?php _e('What are your hobbies?', 'frontendprofile'); ?></label>
					<?php
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("videogames",           $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Video Games',           'frontendprofile'); ?></li>
						<li><input value="sabotagingcapitalism" name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("sabotagingcapitalism", $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Sabotaging Capitalism', 'frontendprofile'); ?></li>
						<li><input value="watchingtv"           name="hobbies[]" <?php if (is_array($_POST['hobbies'])) { if ($error && in_array("watchingtv",           $_POST['hobbies'])) { ?>checked="checked"<?php } }?> type="checkbox" /> <?php _e('Watching TV',           'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-hobbies -->
 
				<p class="form-agree">
					<label for="agree"><?php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?></label>
					<?php $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree" <?php if ($_POST['agree'] == 'yes' ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('Yes', 'frontendprofile'); ?></li>
						<li><input value="no"  name="agree" <?php if ($_POST['agree'] == 'no'  ) { ?>checked="checked"<?php }?> type="radio" /> <?php _e('No',  'frontendprofile'); ?></li>
					</ul>
				</p><!-- .form-agree -->
 
				<p class="form-submit">
					<?php echo $referer; ?>
					<input name="adduser" type="submit" id="addusersub" class="submit button" value="<?php if ( current_user_can( 'create_users' ) ) _e('Add User', 'frontendprofile'); else _e('Register', 'frontendprofile'); ?>" />
					<?php wp_nonce_field( 'add-user' ) ?>
					<input name="action" type="hidden" id="action" value="adduser" />
				</p><!-- .form-submit -->
 
			</form><!-- #adduser -->

			<?php endif; ?>
 
		<?php endif; ?>
 
<!-- REGISTER FORM ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();

User Log-In Page Template

The third and last template is the Log-In Template. Much of it was inspired by Justin Tadlock’s work and it basically consists of the form with the username and password fields and the wp_signon() function at the top that actually does all the dirty work.

<?php
/**
 * Template Name: Log In Page
 *
 */
 
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'log-in' ) :
 
	global $error;
	$login = wp_login( $_POST['user-name'], $_POST['password'] );
	$login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );
 
endif;
 
    // calling the header.php
    get_header();
 
    // action hook for placing content above #container
    thematic_abovecontainer();
 
?>
 
	<div id="container">
		<div id="content">
 
            <?php
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
 
                <?php 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    <?php
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
 
				</div>
			</div><!-- .post -->
 
<!-- LOGIN STARTS HERE -->
 
	<?php if ( is_user_logged_in() ) : // Already logged in ?>
 
		<?php global $user_ID; $login = get_userdata( $user_ID ); ?>
 
		<p class="alert">
			<?php printf( __('You are currently logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php _e('Log out of this account', 'frontendprofile'); ?>"><?php _e('Log out &raquo;', 'frontendprofile'); ?></a>
		</p><!-- .alert -->
 
	<?php elseif ( $login->ID ) : // Successful login ?>
 
		<?php $login = get_userdata( $login->ID ); ?>
 
		<p class="alert">
 
				<?php printf( __('You have successfully logged in as <a href="%1$s" title="%2$s">%2$s</a>.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?>
 
		</p><!-- .alert -->
 
	<?php else : // Not logged in ?>
 
		<?php if ( $error ) : ?>
			<p class="error">
				<?php echo $error; ?>
			</p><!-- .error -->
		<?php endif; ?>
 
		<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
			<p class="login-form-username">
				<label for="user-name"><?php _e('Username', 'frontendprofile'); ?></label>
				<input type="text" name="user-name" id="user-name" class="text-input" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" />
			</p><!-- .form-username -->
 
			<p class="login-form-password">
				<label for="password"><?php _e('Password', 'frontendprofile'); ?></label>
				<input type="password" name="password" id="password" class="text-input" />
			</p><!-- .form-password -->
 
			<p class="login-form-submit">
				<input type="submit" name="submit" class="submit button" value="<?php _e('Log in', 'frontendprofile'); ?>" />
				<input class="remember-me checkbox" name="remember-me" id="remember-me" type="checkbox" checked="checked" value="forever" />
				<label for="remember-me"><?php _e('Remember me', 'frontendprofile'); ?></label>
				<input type="hidden" name="action" value="log-in" />
			</p><!-- .form-submit -->
 
			<p>
				<a href="<?php echo get_option('siteurl');  ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'frontendprofile'); ?></a>
			</p>
		</form><!-- .sign-in -->
 
	<?php endif; ?>
 
<!-- LOGIN ENDS HERE -->
 
        <?php
 
        if ( get_post_custom_values('comments') ) 
            thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
 
        // calling the widget area 'page-bottom'
        get_sidebar('page-bottom');
 
        ?>
 
		</div><!-- #content -->
	</div><!-- #container -->

<?php 
 
    // action hook for placing content below #container
    thematic_belowcontainer();
 
    // calling the standard sidebar 
    thematic_sidebar();
 
    // calling footer.php
    get_footer();

Conclusions

WordPress dose allow you to add any kind of fields to your user profile. It’s not very developer friendly and there’s a lot of validations that we need to do but it is possible and that’s all that matters if you ask me.

We need an UI in the core of WordPress for this, but probably we won’t have anything like this for quite a while.

The funny thing is that BuddyPress has a plugin that let’s you create extra user fields and displays them in the front end, but not in the backend. And we also have a plugin that is called Cimy User Extra Fields that creates the extra fields for the backend but it’s still more a developer’s tool and not that easy to use for the standard user. But there isn’t any real integration so that’s the bad thing.

The way this should work in an ideal word would be for us to have an UI in the backend and page templates that come with the default WordPress theme so developers can build on top of that (similar to the comments form).

Extra Struff

You can follow the tutorial to create your Extra User Fields or you can just preview / download the child theme directly and then make it fit your needs.

Credits

http://dquinn.net
http://blog.ftwr.co.uk
http://rubenwoudsma.nl
http://justintadlock.com

Related posts:

1. 10 design tips for your custom wordpress theme built with thematic
2. WordPress as a social platform
3. Early Morning Child Theme

Photo by derSven ¶

One of the hardest things to do with WordPress is creating a multilingual blog / website that is easy to maintain and develop.

My interest on the subject comes from the need of my customers for easy to maintain multilingual websites. This way they can extend their services to new markets.

I’ve had this discussion in the past, with a description of various plugins and methods to develop a multilingual WordPress blog / site.

In that article I’ve talked about the theory behind multilingual web-developement and mostly about the multilingual WordPress and four ways of implementing it:

1. The “Two-Tree” concept ( we use “language” categories )
2. Automated translation (using google languages or babelfish)
3. Manual translation using plugins ( I could only find one really good plugin that can do that so we’ll look into that)
4. Semi-automated payed translation. (this is rather an ingenious concept and I believe the people who created the service will have a lot to gain from it)

Today we’ll talk about a new and really interesting WordPress multilingual plugin: WPML.

The interesting thing about this multilingual plugin is the way it organizes the information. It’s completely different from qTranslate (that I presented in the previous multilingual blog post). Instead of using language tags (that separates the content in different languages), MPLM links one post in English to another post that will represent it’s translation in Spanish for example. This way you get to translate everything in a very clean way.

Beside this, there are more really cool features that help you get a complete translation done, like:

• Theme localization – Provide translation for texts that appear in your theme.
• Professional translation – an optional service, built for people who want to have their site’s contents professionally translated.
• Navigation – Control the appearance of site-wide navigation based on WordPress pages.
• Sticky links – This is an essential function for running full websites with WordPress. It guarantees that links between pages can never break.
• Home page link – All themes have links to the home page. This function will make that home page link point to the correct language.
• Hard coded theme links – Many themes include hard-coded links. This will make these links language dependent so that the link text and the target match the display language.

The Tutorial – Building a multilingual website from scratch with WordPress

The best way to showcase the functionality of this plugin is creating a tutorial in which we’ll create our very own multilingual website.

For this I’ve installed a new WordPress blog here, installed our plugin (you can download and install it from here) and the Thematic theme ( because I do like it a lot! )

So far so good. Next we’ll need to add some content to our new website. This is going to be a site about a fictional company called “Lettuce INC.” that produces 100% natural lettuce (Lactuca sativa).

We’ll have four pages: Home, About, Blog and Contact. Also we’ve selected the Home page to be a static one (as opposed to displaying our latest posts). You can do this from the admin panel, just go under Settings → Reading.

The available languages will be English and Romanian.

Setting up WPML, the multilingual plugin for WordPress

Before we can start translating anything we need to tell WPML what languages we’ll have on our site. So head over in the WordPress admin and select WPLM → Languages.

The next step lets us select the secondary languages for our site. I’ve selected Romanian.

The third and final step to activating WPML consists of adding a language switched. This way the visitors will be able to easily select their preferred language. While available in the form of a widget, it’s also possible to insert it directly into the theme using the icl_post_languages() function, but this is outside the scope of the current tutorial.

Translating our content

Now that we’ve set up the plugin we can finally start translating our content.

We’ll start by translating the pages of our blog. To do so simply go to the edit pages admin panel in WordPress and there, we have a small “+” button that lets us translate individual pages.

This will create a new page for us where we can add the translated title, content, custom fields (if any) and basically anything needed for your page.

Another way of generating the same result would be to open (or create a new page for that matter) any page and on the right side, above the Publishing box, we have the language box.

Translating the blog

Similar to the pages we can translate blog posts.

Also we can translate categories and tags. This is a really useful functionality that in my opinion makes this plugin complete.
To do so we’ll go to the category page in the WordPress admin panel and click on the category that you want to translate. Then scroll to the bottom and in the Language box click “Add translation”.

Translating various strings in WordPress like blog title, blog description or widgets

Our next stop is the String Translation under the WPML tab.

You might want to “Save settings and rescan strings” first, just in case.

An interesting functionality here is the possibility to import/export .po files. The way this works is you export the English strings in .po format, insert them into PoEdit to translate them, export the Romanian .po files from PoEdit and then Import the translated file into WPML… Confused? Don’t worry… the only reason you might use this is if you need to hire someone else to translate your site but you don’t want to give them access to the WordPress backed to do the translation!

Theme translation

The only thing left for us now is to translate our theme.

There are two way of doing this:

• Translate the theme by WPML.
  WPML will add the theme’s texts to the string translation page, where you can enter translations.
• Using a .mo file in the theme directory.
  Include the theme’s .mo files in the theme’s folder and WPML will load the right file for each language.

Both are good ways… I’ve mentioned in the beginning that I’ve chosen Thematic for a reason and that reason is that it’s localized in a lot of languages… 13 to be exact (lucky number ). This means if your needed language is between those 13 then you don’t have to translate your theme.

Conclusions

What I like

• It’s the first and only really complete multilingual plugin for WordPress
• You can easily translate any page, post, widget, theme text, blog string, plugin, etc.
• Professional translation. This is how the WPML team makes money! They offer the possibility to automatically translate your blog without touching a single string. This is done by real translators (no robots at the end of the line) so you get really good quality .
• Comments translation. So if you really want to take your multilingual blog to the next level then comments translation is the way to go.

What I didn’t like

• Ok… Call me picky… but PLEASE transform the “Advanced »” link into a BIG BUTTON in the Languages Section in WPML. I’ve searched for something like 2 hours for it. I thought it was removed or something in the latest version! I mean that’s where all the good stuff is, like selecting the URL format and admin language!
• The information on the WPML.org website is… terribly unorganized… there is a lot of good info there, just that it’s all over the place. There is a really informative forum… but there is no link to the forum in the main menu! You have to click the main support page and there you have a link to the forum. Not user friendly at all.

Final thoughts

The WPML plugin is genius! It’s the best multilingual plugin for WordPress there is. As you could see the only things that I didn’t like were simple UI issues! But the core of the plugin is rock solid and the functionality it provides it’s just unprecedented! I wish the WPML team best of luck and congratulations for this really, really good multilingual plugin for WordPress! Keep up the good work!

Related posts:

1. Multilingual solutions for a wordpress installation
2. Members: WordPress Plugin by Justin Tadlock
3. Use WordPress as a CMS with Thematic – Part2

This theme doesn’t scream at you, instead it takes a step back and lets the user read. Please don’t spoil it by putting ads on it!

Early Morning - A refreshing child theme for Thematic

You also have some nifty options:

• You can upload your own logo
• It comes with it’s own custom designed Twitter widget, so your visitors can see what you’re doing from your blog
• If green isn’t your style, it comes with 5 background options that you can select from the Early Morning Theme Options (Green, Turquoise, Brick Red, Gray and Black)
• Has a one column page template and archive template
• It’s been tested and works on Firefox 3.5, Safari 4, Opera 9, Chrome, IE7, IE8

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Early Morning and Thematic) to your server in the themes folder AND THEN ACTIVATE the Early Morning Theme.

Related posts:

1. Green anyone? Try Commune – Thematic Child Theme!
2. Street WordPress Theme
3. Charisma, Free Genesis Child Theme

WordPress as a social platform

WordPress started in 2003. Since then it has grown to be the largest self-hosted blogging tool in the world, used on hundreds of thousands of sites and seen by tens of millions of people every day. But you already knew that!

By itself this blogging tool used to be just that: a way to put your thoughts out there, so anyone with a internet connection could read it. But WordPress is not just about blogging, at least not anymore. While still limited in terms of “out of the box” functionality compared with other CMS out there, WordPress managed to shine thought it’s plugins and themes.

Right now WordPress can be a forum, multi blogs platform, social media platform, microblog, social bookmarking and these are just a few of the possibilities.

WordPress is slowly making it’s way into the corporate world as well: Yahoo, CNN, New York Times, Ford, Nike are just a few of big names that implemented it for it’s ease of use, fast development times, cost reduction and easy maintenance of the platform. Oh… and U.S. Government Agencies are also using WordPress.

So where do we go from here? Recently it was announced WordPress to merge with WordPress MU. This will probably appear with the 3.0 launch. This seams to be just one of the big steps towards a social web platform. The next step will probably be to integrate more social media features from BuddyPress.

The power of a blog is in its network of users. Since web users are becoming accustomed to a culture of participation, publishers will look to include tools that will better facilitate the conversation. Tools like user profile pages and groups from BuddyPress will make a good additions to blogs. An issue could be the “yet another account and password” problem but solutions like oAuth or using accounts from other more prestigious social networks (login in with your facebook or google account) will help the transition from simple comments to complex communication.

While all these extra features mean nothing for end users that just wants to blog (and for which the WordPress was created initially) they will mean the world for power bloggers, web-developers and web entrepreneurs by transforming expensive and time consuming activities into cheap and fast ones. Implementing ideas, interconnecting social networks, creating learning platforms, building multilingual information hubs, using community feedback to build a better business, all this will get easier to implement (for the web-developer) and use (for the end user).

Another interesting thing happening in the WordPress community is the adoption of GPL licensing for payed theme clubs that previously used proprietary licenses. In my opinion, this is because Matt Mullenweg started to pressure non-GPL theme clubs and designers. He did this by voicing his opinion, removing all non-GPL themes and theme designers that have even the slightest contact with non-GPL themes from the Theme Repository and by making it easy to install themes directly from the backend of WordPress. While this can be debated indefinitely one thing is sure: it’s good for the end user and the community! For WordPress as a platform this is even better since most of these themes are good quality and people can now reuse the professionally developed code in future projects without the fear of legal repercussions.

WordPress definitely has the opportunity to become a great social platform. The same way blogging changed the publishing world it’s fair to say that social networking will change the blogging platform to facilitate communication and collaboration. It’s appropriate.

Related posts:

1. Members: WordPress Plugin by Justin Tadlock
2. Multilingual solutions for a wordpress installation

Photo by divemasterking2000

I want a redesign. I need it to be forward thinking with easy access to most sections of the site. Although this sounds like I’m trying to sell something to a client, please bare with me. Creating an effective landing page (in my case the front page) is a must. This is not a tutorial, but a discussion, a way to put into perspective several elements of effective web-design. I’ll analyze a few blogs and web-sites that make good use of their front page and try to draw some conclusions that will help me in my own quest towards a full redesign.

There are several flaw in the current design, conceptual and technical. Technically there are some issues with IE that simply annoyed me to the point that I just ignored them. I want to integrate threaded comments and the footer isn’t exactly what I would like it to be. Also, I never got a chance to update to the latest Thematic version on which this blog is built because I didn’t need any of the new features. The content I had was simply happy with the current design.

From an usability point of view there are bigger problems with the design. Right now the articles are accessible through a right column with nothing but text and to be honest it looks like a big blurb. I want a better way to differentiate my categories, WordPress Themes and the services page.

To make it clearer this is what I want to achieve with this new redesign:

• Better navigation
• Easy access to all of the content
• Article suggestion at the end of each post
• Pixel perfect in all modern browsers
• Instant understanding of what this blog is about by new visitors (tough an about widget perhaps?)
• A more useful footer. This should be a place where one can find other info site related and introduce the visitor further inside the website

Inspiration

I’ve browsed around for ideas. Seeing and analyzing how others have solved their problems will help me come up with my own solutions for the content I have. There are quite a lot of websites and blogs that have really good content design and this is really important if you want your users to stay more on your website.

1. http://boagworld.com/ – Boagworld is the blog of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast with Marcus (pop star) Lillington on all things relating to building and running websites.

What I found interesting were 4 areas:

1. The main menu. It’s one of the first things you see when you enter the website. The fact that it has only 4 elements (and one of them the search box) means that they removed a possible home link or a contact link thus giving more importance to the remaining 3 links
2. The banner. I really like this! Not just the graphics, but the idea behind it. This is the first thing I read once I entered the website. It has a clear message and you instantly know what to expect from this site: A podcast for those who design, develop and maintain websites. The RSS and iTunes buttons are a really nice touch also.
3. The blog post introduction. Made to draw your attention, it dose so not through graphics, but using a short and differently styled text that makes you curious. What do they have to say next?
4. Latest Shows. This is probably the second thing you see when you view the page, right after the banner. The way this was orchestrated is simply beautiful. We normally read from top left to bottom right, thus after you find out what this blog is about (which is a podcast) you immediately find the latest shows. There is absolutely no effort from the user to find what he’s looking for.

2. Lifehacker.com – Tips and Downloads for getting things done.

This is one type of design that is not really common online. Most themes and designs follow the header->menu->content->sidebar design. This on the other hand has several differences:

1. Top Featured Articles. Lifehacker dosen’t lose time introducing you to the latest and hottest news and articles.
2. Article Listing. There isn’t anything spectacular here. Each article excerpt has an image to the right and little text, but since there are so many articles here, the short info makes it easy to scan through and view just the ones that interest you.
3. Latest Comment. Instead of putting ads in the right bottom corner, they chose to engage the users in the conversation. While most blogs display just the number of comments, they show you the latest comment on that article.

2. Themeshaper.com – a WordPress-powered thinking machine disguised as a Blog, home of Thematic, the popular and free WordPress Theme Framework.

I really like the new Themeshaper redesign. As Ian said in a blog post, there are several reasons why this design works! This kind of complex landing page makes for a really good introduction and urges the user to go deeper into the website.

1. Featured product. This is the biggest thing on this page. It’s the first thing you see when you enter the website and you’re compelled to read about the product. There must be something good there, otherwise this wouldn’t be so big!
2. The short description. Meant to introduce new users to the site it dose a good job attracting attention. The color difference make it stand alone and clear, even when there’s so much info around it
3. The good, the bad and the ugly. Or more exactly “Must Read Ideas”, “Blog Design Tips” and “Recent Items From the Blog”. These are your introduction into the large article archive. From here you can navigate to different sections of the web-site and get your share of useful information.

As you can see what I’m really interested is a different content design, a landing page that will help users better navigate the entire web-site. The three web-sites I’ve presented are just a few. If you are looking for more great ways to arrange your content I would suggest taking a good look over:

• darrenhoyt.com
• outlawdesignblog.com
• problogger.net – there is a lot of content here, but somehow it’s manageable… the way color is used makes this possible

Now that I’ve done my homework is time to actually start arranging my content. I will come up with a wire frame shortly and hopefully you’ll be able to give me some feedback.

Related posts:

1. Working on the blog design
2. 10 design tips for your custom wordpress theme built with thematic

First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic.

The search box will be displayed on the right of the menu, inside of the #access div. The way Thematic hooks and actions were constructed will first need to remove the thematic_access() action from the thematic_header() hook. If all this sounds a bit difficult fear not. All you have to do is add this code inside of functions.php file of your child theme (don’t forget the <?php opening tag and the ?> ending tag).

// Remove default Thematic actions
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');

If everything is working properly when you reload your WordPress installation the entire menu would have disappear! Now we can create our own menu WITH the search box on the right of it! Add this code at the end of your functions.php:

// Create a custom access div with the menu and search box
function search_access() { ?>
    	<div id="access">
    		<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
            <?php wp_page_menu('sort_column=menu_order') ?>

			<div id="access-search">
				<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
					<div>
						<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
						<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
					</div>
				</form>
			</div>

        </div><!-- #access -->
<?php }
add_action('thematic_header','search_access',9);

Reload your page and the search box will be there, but not where you expected it to be! We’ll need to add a bit of css styling to it.

Go ahead and open the style.css and at the end of it add this css code:

#access-search{
	position:absolute;
	left:50%;
	width:260px;
	margin-left:170px;
	height:29px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:2px 0 0 4px;
}

This is it! You now have successfully added a search box to the right of your thematic main menu!

Related posts:

1. Replacing the Thematic Menu with a DropDown List of Categories
2. Green anyone? Try Commune – Thematic Child Theme!
3. Byty the Free Child Theme – Built on Thematic

Simply put I have been lazy lately. I know this isn’t the best way to sell my self but a little bit of honesty hasn’t hurt anyone (or has it? ). So without further ado I here by present you Commune Child Theme based on Thematic!

As far as I know it’s the first magazine like Thematic child theme released for free!

     

A small guide

There are basically three things to explain: adding your own logo, the Tabbed Widget and adding images to posts!

Adding your own logo

Commune features an Options page that allows you to upload your own logo or banner image. You need to go to the WordPress admin panel and under “Apperance -> Child Theme Options”.

This is how the interface looks like:

Child Theme Options Page - You now have the posibility to upload your header image from WordPress

The Tabbed Widget – update: it currently doesn’t work with WordPress 2.8

To use the functionality of the Tabbed Widget Plugin you first need to download and install it!

Once that’s out of the way select Appearance –> Tabbed Widgets. The interface gives you the possibility to create 8 Tabbed Widget areas, but in out case we’ll use just one. In Tabbed Widget No. 1 select the widgets you want displayed. For the demo of the child theme Commune I used:

• Recent Posts
• Recent Comments
• Tag Clouds
• Search

Make sure you give a title to each individual widget or your users will only see 4 tabs.

Other settings you need to take into consideration are:

• deselect show title (it’s deselected by default)
• select Style as: tabs

I’ve also uploaded an image with the settings for the Tabbed Widget Nr.1.

The next and last step is to head over to Appearance -> Widgets. Select the Primary Aside Widget, click Show and add Tabbed Widget 1 to it and save changes. After this you should have your Tabbed Widget displayed on the front-end of your blog in all it’s glory!

Category and post images

Another key element of this theme is the way pictures are used and displayed. For this the Easy Peasy Images code by Andrew Rickmann was integrated into the theme code.

What this does is to get a list of all the images attached to a post. It then finds the first image with a sort order of 0 and displays it. By default all images have a sort order of zero unless you choose to reorder them. If you don’t make any changes then it will find the first image. If you reorder them using drag and drop the first image in the list will have an order of 1 and you would need to change it to 0.

Default images by category

The theme will add a list of categories to the Media -> Library so that you can assign images to one or more categories. If the function doesn’t find a post attachment with a sort order of 0 then it will default to the image attached to the category the post is in. Note: it will use the first category image it finds.

For more information on the usage you can see a video-tutorial over at Andrew Rickmann’s web-site, www.wp-fun.co.uk

As always if you have any questions or if you find bugs please let me know! I appreciate every input!

Related posts:

1. Installing WordPress Child Themes and Customizing the Byty Theme
2. Commune Child Theme – Update
3. Early Morning Child Theme

Photo by mykreeve

From my point of view the internet has became a really crowded place. No more “build it and they will come” mentality. Today’s internet business have started to compete for every single user and the need to address all potential users is more important then ever.

This is where multilingual web-sites and web-applications come into place. Limiting your business to a single language or expanding it to target users from all over the world could mean the difference between failure and success.

The big players on the internet seem to get this. Google, Microsoft, Yahoo and many more offer they services in numerous languages. The introduction of tools like Google Language Tools, Yahoo! Babel Fish and similar ones have opened the multilingual doors for the masses. You can now view an entire web-page in your native language at the click of the mouse.

However things are not quite there! Even though the automated translation of a web-site is acceptable for getting a general idea of the content, mistakes are common and things can and are misinterpreted between languages.

The theory behind multilingual web-design

Implementing a static HTML web-site in multiple languages is quite simple. Just duplicate the content in a /lang1/ folder and translate the content. For web-sites that don’t need to be updated very often this a rather good solution, giving you a lot of flexibility. This type of multilingual implementation has been around from the birth of the internet.

With the appearance of dynamic web-site things started to get complicated. Content became separated from HTML to some extent and databases transformed the way we store data. To translate every piece of information in a modern web-site, things just had to be implemented differently. The old way of copy and paste in a different folder is no longer an option. Extra work needed to manage two, three or even more dynamic systems (one for each language) just isn’t justified. As a result complex implementations of the solution transformed the way we think about multilingual web-sites.

Multilingual WordPress

There are quite a few options out there for WordPress users to translate the content of their blogs or web-pages. I’ll first make a list of the different implementations and them try and talk more about each one in particular.

1. The “Two-Tree” concept ( we use “language” categories )
2. Automated translation (using google languages or babelfish)
3. Manual translation using plugins ( I could only find one really good plugin that can do that so we’ll look into that)
4. Semi-automated payed translation. (this is rather an ingenious concept and I believe the people who created the service will have a lot to gain from it)

All these solutions have both advantages and disadvantages. From my experience a multilingual web-site is an added complication with absolutely no easy way out. There are just so many things that could go wrong: encoding, special characters, the content to maintain increases with every extra lanuage, not everything can be easily translated (anything other then the post body and title needs extra steps to translate), communication between the site admin and the translators introduces a lot of undesired lag into the project and let’s not forget the big bill from a professional translator.

But as I said in the beginning all this effort could be well worth. Even if you are promoting a service or product that is difficult to ship / commercialize / support abroad the extra traffic alone could be worth a lot. A few trackbacks could significantly improve your google ranking in search that would in turn bring you even more traffic. The way business is done on the internet is that of a Three Way Market and every bit of extra traffic helps.

1. The “Two-Tree” concept

This is the “old” way to do it. This does not imply “old-fashioned” as if this is an inferior way to the new possibility! It just fits another purpose.

Both lang1 and lang2 web-sites are part of the same wordpress installation.

First you would need to create two pages: en and ro. Then create the rest of the pages for every other page you want. Our en page will be the home page for English and ro will be the home page for Romanian. When we create a new page, for example the Contact page, will select the page parent to be en. Repeat this for every page and language and by no time you’ll have a proper multilingual structure!

The listing in the edit pages tab inside wordpress would look something like this:

Next we’ll implement a similar structure for our categories. Two “en” and “ro” categories will hold out translated posts. A custom made theme would be required to display the right menus and content for each language in particular.

This might not be a really efficient way to translate one’s web-blog but it dosen’t require any plugins. Is quite SEO friendly but unless you make serious changes to the way your theme manages the menus it won’t be user friendly.

2. Automated translation (using google languages or babelfish)

This is one type of translation that is just great for blogs. It’s really simple to use, free, fast to implement (don’t have to send anything to a translator). Chances are your non English users will use these services directly from Google or Yahoo so this saves them quite a few clicks which is always a good thing.

The obvious disadvantage is the quality of the translation. By no means this should be used for a respectable business. While one can understand the meaning and general feeling of the article, even the smallest misspell in the initial language will render this service useless, there are grammar mistakes and the words are not always translated in their intended meaning (based on context).

There are quite a few plugins available for wordpress that automatically translate your content but the one I used and recommend is Global Translator.

With Global Translator plugin for WordPress one can:

• translate the blog in 34 languages
• provide the translations by using Google Translation Engine, Babel Fish, Promt or FreeTranslations.com
• use the permalinks by adding the language code at the beginning of all your URI. For example the english version on www.domain.com/mycategory/mypost will be automatically transformed in www.domain.com/en/mycategory/mypost
• use the built in Fast Caching System. Drastically reduction of the risk of temporarily ban from translation engines.
• you can easily customize the appearance of the translation bar

As you can see you can do a lot with Global Translator. It also translates the front-end WordPress interface (words like Posts, Pages, Read More, etc). Again my recommendation is to use this plugin for your blog if you are trying to reach a larger audience but try and don’t use it for large web-sites unless you know what you are doing (due to the quality of the translation).

3. Manual translation using plugins

Translating your wordpress installation to the last word could be a really hard thing to do, especially for non-technical wordpress users. Although a blog has a really straight forward structure and dosen’t pose so many problems, developing a multilingual web-site using wordpress is a different story all together. A web-site can have different widgets on different pages, might use plugins that have an front-end interface that is not translatable and will need to have at least a contact form that will be available in several languages.

Solutions? One thing is certain: it’s not impossible . Although it might be somewhat unintuitive at first one can create a fully translated web-site (for a blog this is quite easy to do).

By unintuitive I mean users might have to use <!–:en–><!–:–> tags for widget translation and even template changes in order to get the entire web-site translated.

However there are good new. The latest version of the qTranslate plugin has a really easy to use interface when translating post and pages. They offer One-Click-Switching between the languages. One can change the language as easy as switching between Visual and HTML editors!

Here are a few screen-shots of the plugin:

Other options that make qTranslate such a great plugin includes:

• No more for adding special characters or strings to separate your multilingual texts! – qTranslate will handle them almost everywhere for you
• No need to edit the plugin file to get your language working! – Use the comfortable and intuitive Configuration Page
• Comes with many languages already built in! – English, German, Simplified Chinese and a lot of others
• Add your language in seconds! – Thanks to the simplistic Configuration Page
• Multilingual dates out of the box – Translates dates and time for you.
• Improved Installation! – No need to manually search and upload Gettext Databases/.mo files anymore
• Multilingual Text in Templates without the need to change Gettext Databases/.mo files – Use Language Tags with Gettext!
• Choose one of 3 Modes to make your URLs pretty and SEO-friendly. – The everywhere compatible ?lang=en, simple and beautiful /en/foo/ or nice and neat en.yoursite.com
• One language per URL – Users and SEO will thank you for not mixing content.

From all these options a few are really useful, particularly the SEO-friendly URLs and the automatic download of Gettext Database/.mo files that you should have otherwise downloaded then and then uploaded them to your WordPress installation.

There is a really useful forum available in case you need help with the plugin or have suggestions. Qian Qin ( the author ) responds fast to enquirers and there’s quite a big community around it.

4.Semi-automated payed translation

This is a intriguing idea. You install the Icanlocalize plugin and then:

• Their system fetches posts and pages that require translation (new or updated).
• Professional translators do the translation. The translation retains all formating, embedded objects, links, etc.
• Translation is saved on WordPress. It can be saved on the original blog or on an independent blog.
• Comments are moderated in your own language. You can reply in your language and they’ll translate it instantly.

Sound good right? But wait there’s even more! You can even have a Multi-lingual contact form, where your visitors can contact you in their language and you can respond in your language.

If you have the cash to invest in a ongoing translation of your articles in different languages this plugin is for you. I haven’t personally tested their system and don’t know what is the quality of the translation (they are using payed translators so by all means it will be incomparable better then a automated translation).

The pricing is… well… compared to Romanian translators, expensive. They have a quote for text translation so you can paste your text and receive a instant price. For a word count of 470 I received a cost to translate per language of 32.9 USD. This means that for a larger article you could end up paying over 100$ per/language/article. If this is a good price for you then this service is the way to go!

Conclusions

Multilingual web-sites are the least an annoyance and can transform in a nightmare if you try to rush things up ( I think I lost an entire day on a past project because two persons worked on it with two different editors and different encoding and every special character was displayed as question mark or a square! ).

Luckily open source has evolved quite a lot in the past years and now we can make use of out of the box solutions that really make your life easy. Even if more powerful CMS’s like Joomla! or Drupal have advanced multilingual solutions, WordPress is not far behind and I hope this article can bring the reader a bit closer to solving it’s multilingual problems.

Disclaimer: I have no affiliation with iCanLocalize.com and do not receive commissions on sales.

Related posts:

1. Multilingual WordPress – WPML Plugin Review
2. WordPress as a social platform
3. Use WordPress as a CMS with Thematic – Part2

There comes a time when you might want to use the Thematic Theme for other things then just a blog, like a magazine or a portal and it might be best suited to have the categories of your blog on top instead of your static pages. After all, you’ll probably have two static pages (about and contact) and several categories and subcategories.

I’ve seen this request twice in the forums over at ThemeShaper and I’ll now try and answer it.

I’ve created a the CatDrop Child Theme that dose just that: transforms Thematic’s menu into a magazine style category based one!

        

Assuming you’ve already downloaded the latest version ofThematic (at the time of the writing it was version 0.7) and uploaded it inside your wp-content/themes directory, we can start the tutorial.

We won’t modify Thematic directly, instead we’ll create a Child theme and add this functionality to it. To do just that create a directory named catdrop inside your themes folder and two files: functions.php and style.css.

We’ll start by telling WordPress that our theme is a ChildTheme of thematic add this code into style.css.

/*
Theme Name: CatDrop
Theme URI: http://cozmoslabs.com/
Description: Built on Thematic Theme</a>
Author: Cristi Antohe
Author URI: http://cozmoslabs.com/
Template: thematic
Version: 0.1
.
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

/************************************************ Style for drop-down menu */
#header{
	z-index:99; /* IE7 z-index bug */
}
#access{
	overflow:visible;
	position:static;
	float:none;
	height:37px;
}
#menu{
	position:static;
	width: 940px;
	margin-top: 0pt;
	margin-right: auto;
	margin-bottom: 0pt;
	margin-left: auto;

	padding-top: 7px;
	padding-right: 0pt;
	padding-bottom: 8px;
	padding-left: 0pt;
	overflow-x: visible;
	overflow-y: visible;
	overflow:visible;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu ul li ul{

}
#menu li{
	margin:0;
	padding:0;
}
#menu li a{
	text-align:center;
	margin:0 0px 0 0;
	width:11em;
	padding:5px;
	border-left:1px solid #6DA5D6;
}
#menu li li li a{
	background:#B5D1EA;
}
#main{
	clear:both;
}

I’ve added some stilling to the #access and #menu divs or the theme would look odd.

Next we need to create our functions.php file. Add the following code to it:

<?php
/* Create unordered lists with our categories */
function categ_menu() {
?>
<div id="menu">
<ul class="sf-menu">
	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&amp;amp;exlude=181&amp;amp;title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "<ul>";
			wp_list_categories('orderby=id&amp;amp;show_count=0&amp;amp;title_li=&amp;amp;use_desc_for_title=1&amp;amp;child_of='.$this_category->cat_ID);
 		echo "</ul>";
 	}
	?>
</ul>
</div>
<?php
}
/* Add the needed style and javascript for the dropdown */
function add_to_head(){
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/superfish/superfish.css" media="screen">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/superfish/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/superfish/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
	jQuery(function(){
		jQuery('ul.sf-menu').superfish({
            delay:       300,                            // one second delay on mouseout
            speed:       'fast',                         // faster animation speed
            autoArrows:  false,                          // disable generation of arrow mark-up
            dropShadows: true                            // disable drop shadows
		});
	});
</script>
<?php
}
add_action('wp_head', 'add_to_head');
add_action('wp_page_menu', 'categ_menu');
?>

The categ_menu function is the one that generates the list of categories and the add_to_head one is adding the needed css and javascript files to out Child Theme.(you can get the files from the Child theme download). This could be easily modified to support drop-down pages for the menu but that one some other time!

And this is the way you make Thematic similar to a magazine style WordPress theme!

Related posts:

1. Use WordPress as a CMS with Thematic Theme- Part1
2. Add “Featured Posts” to your Thematic child theme
3. Quickly add a Category DropDown to Thematic 0.9