inspiredbywordpress

Wordpress User Directory: Part One

I have literally spent hours working on this since I decided it had to be done.  I new there had to be a way, but where do you start with this sort of idea?  Frustratingly Chris Cagle beat me to it, but his tutorials are quite hard to follow, so I decided that someone had to explain how it is done set-by-step.  In this tutorial you will learn how to make your own membership directory, from scratch.

This tutorial will be over multiple parts (thats 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 optimization

What You Will Need

I could go on all day with plug-ins that will help to optimize this process, but I am going to start with the bare minimum, and then we will build on these over the next few days as we optimize the whole directory into a much more streamlined system.  We will start by building the system off just one plug-in, and then work from there.

So, I guess you want to know what plug-in this is?  The plug-in is called Register Plus.  What does Register Plus do?  It is a plug-in that will simply enable us to customize the registration process in Wordpress.

Additionally, I would advise that you make sure that you are happy with your current Wordpress theme as we will have to edit the core files, but DON’T PANIC!  It’s not as bad as it sounds…. I promise.  Any theme will do, you should still be able to follow the steps here without any problems.

The (really) easy bit

As I say, this bit is really quite easy, so I’m not going to go into much detail here, if you need any extra help just leave a comment below and I will get back to you.  For this bit you need to install the Register Plus plug-in from the Wordpress plug-in repository and ensure you have the theme that you wish to use installed and activated.

Now, you can navigate to Settings –> Register Plus in Wordpress in order to access the control panel for the plugin.  You should now work through this page and customize 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.

The "Twitter" custom field that I added

Finally you should tick “Add Registration Field” if you want it to appear on the registration page when people register, “Add Profile Field” if you want it to appear on their profile page in the Wordpress back-end and Required if you want to have to fill-out the field.

If you want to add more custom fields, click the little plus at the end of the line, then scroll down to the bottom of the page and hit save.

Editing Author.php

This is where the fun begins.  You now need to login to your server via FTP, and then navigate to “[wordpress_root]/wp-content/themes/[your_theme]“.  Now some of you might have a file named author.php, if you do sorry but I cannot write a tutorial especially for you because they are all different.  So, for you there are two options, delete it and follow this guide or read this guide and try to work out what you can edit via trail and error.  If you need nay help, again just post a comment below.

For the rest of you duplicate the file in your theme called archive.php and rename the new copy to author.php.  Now, open it in a text editor. The first thing that we need to do is remove the mark-up that is not needed from the file, you should three lines of code that look like those below, but note that it is common to find the first two of these lines on one line.

<?php if (have_posts()) : >
<?php while ( have_posts() ) : the_post(); >
<?php endwhile; else: >

The first thing that you will need to do is delete everything between line one and two and then everything between lines 2 and 3, so the three lines look like the above, do not delete anything outside of these lines as it may effect your theme.

Now you need to add the following lines of php to the file between line one and two from the above php.


<?php

?>


If I’m honest I believe that that was the hardest part. Now, we are going to put all of the user data we can into a list on the page, once finished you can go through and delete any information that you don’t want. Now, we need to create a bullet-pointed list, and then add our data. In order to do this add the following directly after the php you just added before. On top of this we will set the user nickname to the title of the page. This assumes that your page titles for you theme are level 2 headings.


<h2></h2>
<ul>
<li></li>
</ul>


Now we will add (yet more) php that will make a call the user database and pull out the pieces of information that we request. The first field that I will add is the page title, to do this we will edit the code that we just added.


<h2><?php echo $curauth->nickname; ?></h2>
<ul>
<li></li>
</ul>


So, what did that bit of markup do? Well, it makes a call to the variable ($curauth) that we declared in the first piece of php we added, which has already fetched an array of all of the user data from the database, we then simply pulled out the correct piece of information. the word “echo” simply tells the php to put the nickname into the html, allowing the browser to render the page normally. Now, in a list we will add the other variables.


<li>Website: <?php echo get_usermeta($curauth->ID, 'user_url'); ?></li>
<li>Email:<?php echo get_usermeta($curauth->ID, 'email'); ?></li>
<li>AIM: <?php echo get_usermeta($curauth->ID, 'aim'); ?></li>
<li>Yahoo: <?php echo get_usermeta($curauth->ID, 'yim'); ?></li>
<li>Google Talk/Jabber: <?php echo get_usermeta($curauth->ID, 'jabber'); ?></li>
<li>About: <?php echo get_usermeta($curauth->ID, 'description'); ?></li>


So, what should you have far? Well it should look something like the screenshot below, but of course it will appear blank where information is not filled out in their profile (we’ll fix that later).

Your profile so far

And your code so far:


<?php if (have_posts()) : ?>

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>


Now, don’t forget that you should still have other HTML and PHP around this which will control what your theme.

Now, that wasn’t too bad… was it? Feel free to leave comments if you need any help or support.