1. Code
  2. WordPress

How to Develop a Membership Site With WordPress: Part 2

This post is part of a series called How to Develop a Membership Site with WordPress.
How to Develop a Membership Site With WordPress: Part 1
How to Develop a Membership Site With WordPress: Part 3
Final product image
What You'll Be Creating

In the first part of this series, we covered customizing the registration and login forms. Today we’ll be covering how to add custom fields to the registration form. We’ll be adding a text input for a Twitter handle and a checkbox where users will need to agree to terms before registering. The work required can be divided into three parts:

  • Adding the fields themselves
  • Validation on the fields
  • Processing the data

We will also very briefly discuss the best ways to style your outgoing emails. This means users will receive nice branded emails when they register.  

Quickly before we start, make sure Anyone can register is ticked in your WordPress settings (Settings > General).  

General Settings

There’s Lots to Do; Let’s Get Started

One of the greatest things about WordPress is the way it supplies you with actions and filters. These allow us to hook onto events or filter content, which gives us the opportunity to extend WordPress gracefully.   

So using the register_form action, let’s hook into the registration form and add our fields. Copy the following function to our admin.php that we created in part one of this series.

Basically we are injecting some new fields into our registration form. The markup used is mimicking that of the native fields. We also want to retain the values if the page is reloaded, so we will check if they exist in the $_POST super global. You might be wondering why our Twitter label is wrapped in a function: <?php _e( 'Twitter name', 'tutsplus' ) ?>.

The _e function allows translation to occur—you can read more about it in the WordPress Codex.

This is great, but how about some validation? As it stands, users can put whatever they want in there or just leave it blank. Let’s make our fields required and make sure the text field only takes in regular characters to prevent malicious attacks. This time we will be using a WordPress filter: registration_errors

The above filter is passed three parameters: 

  1. The errors that have been processed
  2. The user's email
  3. The user's sanitized user name

The function is triggered after the form is submitted but before the data hits the database. In our case we are checking if the fields are empty and if there are any bizarre characters in our Twitter name input. If any of these are true we pass an error message to the $error object that is returned.   

Note: if you are getting an empty error box, don't worry. The security plugin we installed in part one has a default setting that hides the messages. Under the WordPress Tweaks section, uncheck the option Disable login error messages.  

Login page showing four error messages

Now the final piece of our puzzle: processing the data so it’s saved in our database against that user. Again we will be using a WordPress defined action (user_register) to hook into this process. It takes one parameter, the user_id—that way it knows who to save the data against. Assuming the $_POST superglobal contains our data, we can save it using update_user_meta.

Custom Fields in the Admin

Right now we have collected the users' data - including our custom fields - but we can not edit those values in the WordPress admin. Let's hook that up. In our admin.php add the following function:

Using some WordPress actions we are easily able to add custom fields. 

Now to process the custom user meta. 

Redirect on Login

Finally we want to redirect our users to a specific page when they are logged in. The default sends them to the WordPress back end. Forget that. Let's send them to a "my account" page. So firstly you'll need to create this page in the back end. Don't worry about content for now, because we'll get into that in the next part of the series. 

Now that we have our page, paste the code below into ____.php and give it a test drive. Assuming your "my account" page has the slug my-account it should work. Yet again we have used a WordPress filter to achieve this sorcery. 

In a nutshell, the code checks for a user, and if they are an admin user they are directed to the default place, else they are redirect to the my-account page. All this is triggered when the user logs in using the filter login_redirect

A Quick Note on Outgoing Emails

When users register on your site they will be receiving confirmation emails. Also if a user forgets their password they have the ability to retrieve it over email. So it's important we give these emails some love and attention if we want our membership site to be all that. 

Now there are a few ways to do this. For all the purists out there you can use WordPress filters to change the email content type and style your emails—see the WordPress Codex. Alternatively there's a host of plugins out there designed for this purpose. 

Personally I like to use MailChimp's Mandrill to send emails out of my WordPress sites. It's not too tricky to set up and it's full of features, one of which is being able to apply templates/styles to your outgoing emails. 

What’s Next?

In the next and final part of the series we will be making a basic account section whereby the logged-in users will be able to edit their details. We also want administrators to be able to edit these details from the WP admin area, so we will be adding some custom fields in there too.

If you have any suggestions or questions please leave a comment. I'll do my best to reply in a timely fashion. 

Things to Note

Please note: if you are downloading the code from the GitHub repository it includes all the files to get your theme up and running. The idea is that you can grab the repo and just run the necessary Gulp and Bower commands and you'll be away!  If you just want the files that contain code specific to this series the files are listed below. 

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.