inspiredbywordpress

Wordpress User Directory: Part Two

It’s now day two of the Wordpress user directory tutorial, today we will be adding our own custom fields to the users profile pages.  We will also turn the Website URL into a link, and turn the email address into a link for those of your who wish to keep it on your profile page.

This tutorial will be over multiple parts (that’s right, it’s our first series). The different parts are detail below.

• Part One: Creating the Profile pages
• Part Two: Adding Custom Fields
• Part Three: Listing the users, and optimisation

So, what additional fields will we be adding?  I think that their is quite a lot missing so, we will add those listed below:

• Twitter
• Linked In
• Website Name (we’ll turn this into a link)
• A Profile Picture
• Posts they have written on the website

On top of this we will also make any field that the user has not filled out hide themselves by default, this will make the profile page feel much more customized than it may otherwise feel.

Creating the custom fields

Now I have already talked you through doing this once already, but I will walk you through doing it with all of the above.

Now, you can navigate to Settings –> Register Plus in Wordpress in order to access the control panel for the plug-in.  You should now work through this page and customise the settings as you wish, the settings will change what the user can/has to do on the Wordpress sign-up page.

When you get to the “Add User Defined Fields” section you will need to be careful, the first input field should be the same as the name of the field all in lowercase, and the second should be the name of the field.  The name of the field can be whatever you like, but should be linked to what you expect the user to do with it, for example I added a custom field named “Twitter” where I wanted people to input there twitter user-names.  In the next box (the drop-down one) you can choose what type of field you want it to be.

So, now we will do one together.  We will start with Twitter, if you don’t already have a Twitter account I would suggest that you start by going over to Twitter and getting one for free.

To start navigate to the Register Plus page under Settings in your Wordpress control panel.  Now, scroll down to the User Defined Fields section, here you will see a sub-section labelled Custom Field, in the first box type “twitter” all in lower-case, and in the second box type “Twitter Username”.  After this make sure “Text Field” is selected in the drop-down box and then tick the “Add Registration Field” and “Add Profile Field” boxes.  Finally scroll box to the bottom of the page and click “Save Changes”.  That’s it, you have created you first custom field.  The custom fields should now look something like this.

Now try to repeat this process for the other fields, using the credentials shown in the picture below.  For now we will skips the recent posts and profile picture sections as they are done differently.  In order to add more fields you need to click the little green plus icon by the field that you have already created.

Adding your custom fields to the template

Now, like yesterday this isn’t as bad as people think it is going to be.  Open author.php again in your text editor and get ready to begin editing it.  We’ll start by adding the users twitter user-name, and linking it to the users twitter profile underneath the email address.  To do this add the following code, you should know where by now.

Twitter: ID, ‘twitter’);?>

You’ll notice now that it is exactly the same what we were adding before, except we replace the code between the quotes with the variable we declared in the first box back in the control panels for the Register Plus plug-in. So, how do we turn this into a link? Well, we link to twitter.com/ and then the twitter user-name, just I have below.

Twitter: @ID, ‘twitter’);?>

OK, twitter done, lets make the name of the user’s website into a link.

Website: ID, ‘websiteName’); ?>

And then add a new bullet-point for there linked-in profile.

Website: ID, ‘websiteName’); ?>

Showing Author Posts

This bit, will be really quite easy. Go to your server and open archive.php, and then copy everything between:

and

Now, paste it between the same two line sin author.php, and your done.

Making Things Vanish

So, this is all good and that, but what if someone doesn’t want to fill out a field? Well, we need to make it vanish. For this section I am going to go through and edit the entire block of code in one go, and then I will explain what I did in a moment.

$curauth = $wp_query->get_queried_object();

?>

ID, ‘nickname’); ?>

ID, ‘websiteName’); ?>) == ”) {?>
• Website: ID, ‘websiteName’); ?>

ID, ‘user_email’) == ”) {?>

• Email: ID, ‘user_email’); ?>

ID, ‘twitter’) == ”) {?>

• Twitter: @ID, ‘twitter’);?>

ID, ‘linkedin’) == ”) {?>

• Linked-in: ID, ‘linkedin’); ?>
  ID, ‘aim’) == ”) {?>
• AIM: ID, ‘aim’); ?>

ID, ‘yim’) == ”) {?>

• Yahoo: ID, ‘yim’); ?>

ID, ‘jabber’) == ”) {?>

• Google Talk/Jabber: ID, ‘jabber’); ?>

ID, ‘description’) == ”) {?>

• About: ID, ‘description’); ?>

So, what did I do here? Well, it’s simple really. Before every bullet-point I added a PHP if statement, so in simple terms this is what the description one is saying:

If there is a user description, display this code, otherwise don’t.

So, what does mine look like? Well, that what the picture below is of. Take a look, your should be pretty similar at this time, but style to look like your theme.

Conclusion

Now you should have a fully working Wordpress profile page, but how you access it? Simple, go to [yourwordpressurl]/author/[yourusername], and that should land you on your profile page. If you need any help at all with this tutorial, or Wordpress in general post a comment below and I will get back to you ASAP.

Tomorrow we will be looking at how to optimise the whole user profile, as with the default settings every user has to have made a post to get a profile page. That is just the start of what we will be looking at though, as I have a lot more lined up as well including controlling what members can do and tracking what they do.