Cozmoslabs » Recomended Reading

WordPress Profile Builder: a front-end user registration, login and edit-profile plugin

Cristian — Tue, 12 Apr 2011 10:04:35 +0000

You can now login, register and edit your profile directly from the font-end

Profile Builder lets you customize your website by adding front-end forms for all your users, giving them a more flexible way to modify their user-information or to register new users.

Also, administrator can customize what basic fields are displayed on the front-end (like First Name, Last Name, Website, etc.)

To achieve this, just create a new page, and give it an intuitive name(i.e. Edit Profile). Now all you need to do is add the following shortcode(for the previous example): [wppb-edit-profile]. Publish your page and you are done!

WordPress User Registration, Login and Edit-Profile Shortcodes:

[wppb-login] - for a log-in form.
[wppb-register] - to add a registration form.
[wppb-edit-profile] – to grant users a front-end acces to their personal information (requires user to be logged in).

Other features:

you can add the shortcodes directly inside a text widget and they will work
add a custom stylesheet/inherit values from the current theme or use the default one, built into this plug-in.
select whether to display or not the admin bar in the front end for a specific user-group registered to the site.
select which information-field to display on the WordPress user registration and WordPress edit profile pages on the font end.

Screenshots:

Professional WordPress Plugin Development review

Cristian — Tue, 22 Mar 2011 09:45:16 +0000

It’s been a while since I’ve reviewed books on this blog and I think it’s about time to start doing that again. And I couldn’t have chosen a better book to start with then “Professional WordPress Plugin Development” written by Brad Williams, Ozh Richard and Justin Tadlock.

This is the book I’ve been waiting for ever since I started to work with WordPress 3 years ago. As a theme designer and developer you really have a lot of documentation online. However, the instance you need to do some wild things with WordPress you realize there just isn’t enough information to go on. I’m talking about stuff like plugin security, proper way of handling plugin settings, ajax in WordPress, cron, the rewrite API and developing for multisite.

Professional WordPress Plugin Development review

A lot of Codex pages are just stubs with almost no information what so ever.

Here are some of the dark corners of WordPress this book brought light to them:

Addresses how to integrate into WordPress, save settings, create widgets and shortcodes, and implement uninstall
Learn the proper techniques for storing data, customizing user roles, and security best practices
Shares techniques for using custom post types and creating and using custom taxonomies
How to create plugins for WordPress Multisite networks
Integrate user and role management
Explores the HTTP API, JavaScript and AJAX, Cron, the Rewrite API, and more

The authors went into so much detail that after reading it you really get start looking at WordPress as a full fledged application framework and not just a simple CMS to display your company portfolio.

Most other book to date that talked about WordPress Plugin Development went around coding examples and solving particular problems. That’s ok, but you’ll never have a birds eye view of the entire API ecosystem. This is where “Professional WordPress Plugin Development” shines. Each little api function that is available in WordPress is explained in a consistent way and also shows how it interacts with the rest of the system.

Another great thing is explaining WordPress plugin development best practices. If you don’t have a lot of experience with WordPress plugins and don’t have the time to really research how to do things you can end up writing code that can be handled by the WordPress API in such a fashion that’s future proof. Take for instance the Plugin Settings options – if you manage them through the API any future changes to the WordPress UI will be reflected in your plugin as well.

All in all this book is a MUST READ by all plugin developers and theme developers alike. If you ask me all the information in this book should be added in the Codex (although that wouldn’t be fair to the writers). So go ahead and get your self a copy from Amazon and start reading it today. (You can get it as a Paperback or digital download – great for code copy&paste)

Cozy Child Theme

Cristian — Tue, 22 Feb 2011 14:01:30 +0000

This elegant WordPress theme started as a custom project but ended up as a Child Theme for the Thematic Framework.

It’s a warm design that makes you feel comfortable.

Cozy Child Theme for Thematic Framework

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 (Cozy and Thematic) to your server in the themes folder AND THEN ACTIVATE the Cozy Theme.

The end of a good run

This will probably be the last free child theme I’ll release for Thematic. The last couple of years have been filed with experiences I never thought possible and I’ve learned so much. However it’s time to move forward, leave Thematic behind and try a more sensible approach to theme development. I’m talking about creating Parent Themes and on top of them Child Themes and not try to solve every problem using Thematic (this is better explained by Justin Tadlock)

This doesn’t mean I’ll stop releasing themes. On the contrary I look forward adding a couple new free designs that can be used by the community.

QandaPress, a Q&A platform based on WordPress

Adrian — Mon, 15 Nov 2010 10:21:29 +0000

During the last couple of months we received several requests from our friends and clients, mainly professional bloggers, who were permanently seeking solutions to expand their blog audience.
They wanted a tool to help them grow their reader base and make the content become more socially engaging. One of the things that got to our ears was a Q&A platform, with some built in game mechanics. A way in which the readers could interact by adding another type of content to the blog.

So the need was for a very simple way to create a Q&A website using WordPress. And this is how QandaPress was born.

QandaPress - Build your own Q&A community

QandaPress makes it easy to build a community around your website. Here are some of its features:

It is built on WordPress, so learning something new is out of the question. You will manage your Q&A platform in a very familiar environment.
Easy to monetize. Multiple ad zones where you can insert your own ads.
Problem free. All technical details are taken care of. No need to manage another WordPress installation.
Scalable. Everything is run on our own super-optimized servers. You don’t have to worry about downtime due to traffic spikes.

You can find some other cool features on the QandaPress website. Feel free to use the comment section and tell us what you think about it and what other features you would like to be added.

Also the first persons who will apply for the QandaPress private beta by December 1′st, will get an all time 30% discount subscription rate.

Charisma, Free Genesis Child Theme

Cristian — Fri, 04 Jun 2010 10:37:21 +0000

Charisma is a free Genesis child theme that will work perfectly for your WordPress personal blog.

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.

WordPress user registration template and custom user profile fields

Cristian — Mon, 31 May 2010 12:14:19 +0000

UPDATE

This tutorial, while providing a good introduction to the concept, hasn’t been updated since it was written.

To this end we’ve written a free plugin that let’s you add all these front-end forms through the easy use of shortcodes: Profile Builder

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="$user->ID ) ); ?>" />
 }

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:


 
//
//  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="$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>
				
 
				for($i=1900; $i<=2000; $i++)
					$years[]=$i;
 
				echo '';
				?>
				<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>
			 $hobbies = get_the_author_meta( 'hobbies', $user->ID ); ?>
				<ul>
					<li><input value="videogames"           name="hobbies[]"  if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _e('Video Games',           'frontendprofile'); ?>li>
					<li><input value="sabotagingcapitalism" name="hobbies[]"  if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _e('Sabotaging Capitalism', 'frontendprofile'); ?>li>
					<li><input value="watchingtv"           name="hobbies[]"  if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _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>
			 $agree = get_the_author_meta( 'agree', $user->ID ); ?>
				<ul>
					<li><input value="yes" name="agree"  if ($agree == 'yes' ) { ?>checked="checked" }?> type="radio" />  _e('Yes', 'frontendprofile'); ?>li>
					<li><input value="no"  name="agree"  if ($agree == 'no'  ) { ?>checked="checked" }?> type="radio" />  _e('No',  'frontendprofile'); ?>li>
				ul>
			td>			
		tr>
 
	table>
 }
 
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="">
 
	<p class="form-twitter">
		<label for="twitter">Twitterlabel>
		<input name="twitter" type="text" value="$current_user->id ); ?>" />
	p>
 
	<p class="form-submit">
		<input name="updateuser" type="submit" id="updateuser" class="submit button" value="Update" />
		 wp_nonce_field( 'update-user' ) ?>
		<input name="action" type="hidden" id="action" value="update-user" />
	p>
 
form>

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


	/* 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.


/**
 * 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">
 
            
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-" class="">
 
                 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t".__('Pages: ', 'thematic'), "
\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'','') ?>
 
				div>
			div>
 

 
			 if ( !is_user_logged_in() ) : ?>
 
				<p class="warning">
					 _e('You must be logged in to edit your profile.', 'frontendprofile'); ?>
				p>
 
			 else : ?>
 
				 if ( $error ) echo '' . $error . '
'; ?>
 
				<form method="post" id="edituser" class="user-forms" action="">
 
				<strong>Namestrong>
 
				<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="$current_user->id ); ?>" />
				p>
 
				<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="$current_user->id ); ?>" />
				p>
 
				<p class="nickname">
					<label for="nickname">php _e('Nickname (required)', 'frontendprofile'); ?>label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="$current_user->id ); ?>" />
				p>
 
				<p class="display_name">
					<label for="display_name">php _e('Display Name', 'frontendprofile'); ?>label>
					<select name="display_name" id="display_name">
					
						$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="$id; ?>" value="$item); ?>" selected( $current_user->display_name, $item ); ?>>php echo $item; ?>option>
					
						}
					?>
					select>
				p>
 
				<strong>Contact Infostrong>
 
				<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="$current_user->id ); ?>" />
				p>
 
				<p class="form-website">
					<label for="website">php _e('Website', 'frontendprofile'); ?>label>
					<input class="text-input" name="website" type="text" id="website" value="$current_user->id ); ?>" />
				p>
 
				<p class="form-aim">
					<label for="aim">php _e('AIM', 'frontendprofile'); ?>label>
					<input class="text-input" name="aim" type="text" id="aim" value="$current_user->id ); ?>" />
				p>
 
				<p class="form-yim">
					<label for="yim">php _e('Yahoo IM', 'frontendprofile'); ?>label>
					<input class="text-input" name="yim" type="text" id="yim" value="$current_user->id ); ?>" />
				p>
 
				<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="$current_user->id ); ?>" />
				p>
 
				<strong>About Yourselfstrong>
 
				<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>
 
				<p class="form-password">
					<label for="pass1">php _e('New Password', 'frontendprofile'); ?> label>
					<input class="text-input" name="pass1" type="password" id="pass1" />
				p>
 
				<p class="form-password">
					<label for="pass2">php _e('Repeat Password', 'frontendprofile'); ?>label>
					<input class="text-input" name="pass2" type="password" id="pass2" />
				p>
 
				<strong>Extra Profile Informationstrong>
 
				<p class="form-twitter">
					<label for="twitter">php _e('Twitter', 'frontendprofile'); ?>label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="$current_user->id ); ?>" />
				p>
 
				<p class="form-birth">
					<label for="birth">php _e('Year of birth', 'frontendprofile'); ?>label>
					
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '';
					?>
				p>
 
				<p class="form-hobbies">
					<label for="hobbies">php _e('What are your hobbies?', 'frontendprofile'); ?>label>
					
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]"  if (is_array($hobbies)) { if (in_array("videogames",           $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _e('Video Games',           'frontendprofile'); ?>li>
						<li><input value="sabotagingcapitalism" name="hobbies[]"  if (is_array($hobbies)) { if (in_array("sabotagingcapitalism", $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _e('Sabotaging Capitalism', 'frontendprofile'); ?>li>
						<li><input value="watchingtv"           name="hobbies[]"  if (is_array($hobbies)) { if (in_array("watchingtv",           $hobbies)) { ?>checked="checked" } }?> type="checkbox" />  _e('Watching TV',           'frontendprofile'); ?>li>
					ul>
				p>
 
				<p class="form-agree">
					<label for="agree">php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?>label>
					 $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree"  if ($agree == 'yes' ) { ?>checked="checked" }?> type="radio" />  _e('Yes', 'frontendprofile'); ?>li>
						<li><input value="no"  name="agree"  if ($agree == 'no'  ) { ?>checked="checked" }?> type="radio" />  _e('No',  'frontendprofile'); ?>li>
					ul>
				p>
 
				<p class="form-submit">
					 echo $referer; ?>
					<input name="updateuser" type="submit" id="updateuser" class="submit button" value="" />
					 wp_nonce_field( 'update-user' ) ?>
					<input name="action" type="hidden" id="action" value="update-user" />
				p>
 
				form>

			 endif; ?>
 

 
        
 
        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>
	div>

 
 
    // 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.

 if ( $error ) : ?>
	<p class="error">
		 echo $error; ?>
	p>
 endif; ?>
 
<form method="post" id="adduser" class="user-forms" action="http://$_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="$error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
	p>
 
	<p class="form-email">
		<label for="email">php _e('E-mail (required)', 'frontendprofile'); ?>label>
		<input name="email" type="text" value="$error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
	p>
 
	<p class="form-twitter">
		<label for="twitter">php _e('Twitter', 'frontendprofile'); ?>label>
		<input name="twitter" type="text" value="$error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
	p>
 
	<p class="form-submit">
		<input name="adduser" type="submit" id="addusersub" class="submit button" value="" />
		 wp_nonce_field( 'add-user' ) ?>
		<input name="action" type="hidden" id="action" value="adduser" />
	p>
form>

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:


/* 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.


/**
 * 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">
 
            
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-" class="">
 
                 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t".__('Pages: ', 'thematic'), "
\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'','') ?>
 
				div>
			div>
 

 
		 if ( is_user_logged_in() && !current_user_can( 'create_users' ) ) : ?>
 
			<p class="log-in-out alert">
			 printf( __('You are logged in as %2$s.  You don\'t need another account.', 'frontendprofile'), get_author_posts_url( $curauth->ID ), $user_identity ); ?> <a href="" title="">php _e('Logout »', 'frontendprofile'); ?>a>
			p>
 
		 elseif ( $new_user ) : ?>
 
			<p class="alert">
			
				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( __('
Please check your email address. That\'s where you\'ll recieve your login password.
 (It might go into your spam folder)', 'frontendprofile') );
			?>
			p>
 
		 else : ?>
 
			 if ( $error ) : ?>
				<p class="error">
					 echo $error; ?>
				p>
			 endif; ?>
 
			 if ( current_user_can( 'create_users' ) && $registration ) : ?>
				<p class="alert">
					 _e('Users can register themselves or you can manually create users here.', 'frontendprofile'); ?>
				p>
			 elseif ( current_user_can( 'create_users' ) ) : ?>
				<p class="alert">
					 _e('Users cannot currently register themselves, but you can manually create users here.', 'frontendprofile'); ?>
				p>
			 endif; ?>
 
			 if ( $registration || current_user_can( 'create_users' ) ) : ?>
 
			<form method="post" id="adduser" class="user-forms" action="http://$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
 
 
				<strong>Namestrong>
 
				<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="$error ) echo wp_specialchars( $_POST['user_name'], 1 ); ?>" />
				p>
 
				<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="$error ) echo wp_specialchars( $_POST['first_name'], 1 ); ?>" />
				p>
 
				<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="$error ) echo wp_specialchars( $_POST['last_name'], 1 ); ?>" />
				p>
 
				<p class="nickname">
					<label for="nickname">php _e('Nickname', 'frontendprofile'); ?>label>
					<input class="text-input" name="nickname" type="text" id="nickname" value="$error ) echo wp_specialchars( $_POST['nickname'], 1 ); ?>" />
				p>
 
				<strong>Contact Infostrong>
 
				<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="$error ) echo wp_specialchars( $_POST['email'], 1 ); ?>" />
				p>
 
				<p class="form-website">
					<label for="website">php _e('Website', 'frontendprofile'); ?>label>
					<input class="text-input" name="website" type="text" id="website" value="$error ) echo wp_specialchars( $_POST['website'], 1 ); ?>" />
				p>
 
				<p class="form-aim">
					<label for="aim">php _e('AIM', 'frontendprofile'); ?>label>
					<input class="text-input" name="aim" type="text" id="aim" value="$error ) echo wp_specialchars( $_POST['aim'], 1 ); ?>" />
				p>
 
				<p class="form-yim">
					<label for="yim">php _e('Yahoo IM', 'frontendprofile'); ?>label>
					<input class="text-input" name="yim" type="text" id="yim" value="$error ) echo wp_specialchars( $_POST['yim'], 1 ); ?>" />
				p>
 
				<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="$error ) echo wp_specialchars( $_POST['jabber'], 1 ); ?>" />
				p>
 
				<strong>About Yourselfstrong>
 
				<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>
 
				<strong>Extra Profile Informationstrong>
 
				<p class="form-twitter">
					<label for="twitter">php _e('Twitter', 'frontendprofile'); ?>label>
					<input class="text-input" name="twitter" type="text" id="twitter" value="$error ) echo wp_specialchars( $_POST['twitter'], 1 ); ?>" />
				p>
 
				<p class="form-birth">
					<label for="birth">php _e('Year of birth', 'frontendprofile'); ?>label>
					
						for($i=1900; $i<=2000; $i++)
							$years[]=$i;
 
						echo '';
					?>
				p>
 
				<p class="form-hobbies">
					<label for="hobbies">php _e('What are your hobbies?', 'frontendprofile'); ?>label>
					
						$hobbies = get_the_author_meta( 'hobbies', $current_user->id );
					?>
					<ul class="hobbies-type-list">
						<li><input value="videogames"           name="hobbies[]"  if (is_array($_POST['hobbies'])) { if ($error && in_array("videogames",           $_POST['hobbies'])) { ?>checked="checked" } }?> type="checkbox" />  _e('Video Games',           'frontendprofile'); ?>li>
						<li><input value="sabotagingcapitalism" name="hobbies[]"  if (is_array($_POST['hobbies'])) { if ($error && in_array("sabotagingcapitalism", $_POST['hobbies'])) { ?>checked="checked" } }?> type="checkbox" />  _e('Sabotaging Capitalism', 'frontendprofile'); ?>li>
						<li><input value="watchingtv"           name="hobbies[]"  if (is_array($_POST['hobbies'])) { if ($error && in_array("watchingtv",           $_POST['hobbies'])) { ?>checked="checked" } }?> type="checkbox" />  _e('Watching TV',           'frontendprofile'); ?>li>
					ul>
				p>
 
				<p class="form-agree">
					<label for="agree">php _e('Do you agree that WordPress is the greatest thing since bread came sliced?', 'frontendprofile'); ?>label>
					 $agree = get_the_author_meta( 'agree', $current_user->ID ); ?>
					<ul>
						<li><input value="yes" name="agree"  if ($_POST['agree'] == 'yes' ) { ?>checked="checked" }?> type="radio" />  _e('Yes', 'frontendprofile'); ?>li>
						<li><input value="no"  name="agree"  if ($_POST['agree'] == 'no'  ) { ?>checked="checked" }?> type="radio" />  _e('No',  'frontendprofile'); ?>li>
					ul>
				p>
 
				<p class="form-submit">
					 echo $referer; ?>
					<input name="adduser" type="submit" id="addusersub" class="submit button" value="" />
					 wp_nonce_field( 'add-user' ) ?>
					<input name="action" type="hidden" id="action" value="adduser" />
				p>
 
			form>

			 endif; ?>
 
		 endif; ?>
 

 
        
 
        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>
	div>

 
 
    // 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.


/**
 * 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">
 
            
 
            // calling the widget area 'page-top'
            get_sidebar('page-top');
 
            the_post();
 
            ?>
 
			<div id="post-" class="">
 
                 
 
                // creating the post header
                thematic_postheader();
 
                ?>
 
				<div class="entry-content">
 
                    
 
                    the_content();
 
                    wp_link_pages("\t\t\t\t\t".__('Pages: ', 'thematic'), "
\n", 'number');
 
                    edit_post_link(__('Edit', 'thematic'),'','') ?>
 
				div>
			div>
 

 
	 if ( is_user_logged_in() ) : // Already logged in ?>
 
		 global $user_ID; $login = get_userdata( $user_ID ); ?>
 
		<p class="alert">
			 printf( __('You are currently logged in as %2$s.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?> <a href="" title="">php _e('Log out »', 'frontendprofile'); ?>a>
		p>
 
	 elseif ( $login->ID ) : // Successful login ?>
 
		 $login = get_userdata( $login->ID ); ?>
 
		<p class="alert">
 
				 printf( __('You have successfully logged in as %2$s.', 'frontendprofile'), get_author_posts_url( $login->ID ), $login->display_name ); ?>
 
		p>
 
	 else : // Not logged in ?>
 
		 if ( $error ) : ?>
			<p class="error">
				 echo $error; ?>
			p>
		 endif; ?>
 
		<form action="" 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="$_POST['user-name'], 1 ); ?>" />
			p>
 
			<p class="login-form-password">
				<label for="password">php _e('Password', 'frontendprofile'); ?>label>
				<input type="password" name="password" id="password" class="text-input" />
			p>
 
			<p class="login-form-submit">
				<input type="submit" name="submit" class="submit button" value="" />
				<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>
 
			<p>
				<a href="/wp-login.php?action=lostpassword">php _e('Lost password?', 'frontendprofile'); ?>a>
			p>
		form>
 
	 endif; ?>
 

 
        
 
        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>
	div>

 
 
    // 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

Multilingual WordPress – WPML Plugin Review

Cristian — Thu, 08 Oct 2009 17:41:51 +0000

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:

The “Two-Tree” concept ( we use “language” categories )
Automated translation (using google languages or babelfish)
Manual translation using plugins ( I could only find one really good plugin that can do that so we’ll look into that)
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!

Early Morning Child Theme

Cristian — Mon, 20 Jul 2009 10:54:25 +0000

This elegant WordPress theme was inspired by the colors of the early morning as I see them from my window. It’s light, elegant and pleasantly surprising.

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.

Inspired by: Adrian Pelletier

WordPress as a social platform

Cristian — Tue, 16 Jun 2009 06:46:22 +0000

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.

Content design – what makes a good landing page

Cristian — Tue, 28 Apr 2009 08:09:14 +0000

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:

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
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.
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?
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:

Top Featured Articles. Lifehacker dosen’t lose time introducing you to the latest and hottest news and articles.
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.
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.

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!
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
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.

Cozmoslabs » Recomended Reading

WordPress Profile Builder: a front-end user registration, login and edit-profile plugin

You can now login, register and edit your profile directly from the font-end

WordPress User Registration, Login and Edit-Profile Shortcodes:

Professional WordPress Plugin Development review

Professional WordPress Plugin Development review

Cozy Child Theme

The end of a good run

QandaPress, a Q&A platform based on WordPress

Charisma, Free Genesis Child Theme

Support

WordPress user registration template and custom user profile fields

UPDATE

Yet Another Thematic Childtheme

WordPress Extra Profile Fields

The templates

Edit Profile Template

User Registration Page Template

User Log-In Page Template

Conclusions

Extra Struff

Credits

Multilingual WordPress – WPML Plugin Review

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

The Tutorial – Building a multilingual website from scratch with WordPress

Setting up WPML, the multilingual plugin for WordPress

Translating our content

Translating the blog

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

Theme translation

Conclusions

What I like

What I didn’t like

Final thoughts

Early Morning Child Theme

You also have some nifty options:

WordPress as a social platform

Content design – what makes a good landing page

Inspiration

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