This post is aimed at WordPress developers and advanced users.

There are plenty of directory plugins out there and plenty of membership plugins, many free. However none of these gave me everything I needed.

For this website members needed to be able to register and login but I didn’t need to restrict the view of content, which is the way the Membership plugins tend to work.

Registered users needed to be able to contribute through the front-end to more than one post type so a standard listings Directory was not enough.

When I was researching this there seemed to be quite a few developers with the same requirements, so I hope this helps.

The client requirements

  1. Membership was to be paid monthly by subscription.
  2. A smooth user experience where all user interactivity be carried out ‘whilst still in the website’. Which translates to all member activity being done through the website front-end including:
    • Member registration form with built-in subscription payment.  Members should not be allowed to register without payment being made.
    • Members only blog posts
    • Members only business listings, categorised and searchable
    • User profile update form
    • Login
    • Reset password form
    • Public job listings – pay to post.
  3. The front-end submission forms needed to be able to add new standard posts and custom posts.  Plus custom taxonomy data and metadata where applicable.
  4. Hide the admin bar from any role below editor.
  5. Divert to a specified page on member login.

The plugins I used

  1. The amazing GRAVITY FORMSI needed the developer version for the various payment options but it pays for itself in a heartbeat.  I have already used it on 2 more projects.
  2. Gravity Forms add on – PayPal payments
  3. Gravity Forms add on – User registration
  4. Gravity Forms + Custom Post Types (free version)
  5. Profile Builder (free version)
  6. A couple of small plugins I wrote myself for the custom admin settings.

The Process

Set up the custom post types

For jobs and business listings and associated custom taxonomies.  I won’t go into that because there are plenty of online resources for setting up post types and taxonomies including this one »

Set up the pages

For the front-end forms and confirmations:

  1. User Registration – for the form
  2. Registration Complete – confirmation following payment
  3. Subscription Cancelled – return page following aborted payment
  4. Login – for the login form
  5. Password Recovery – for password recovery form
  6. Members Area page – Links to ‘add a business listing’, ‘update profile’ etc
  7. User Profile Page – user profile form
  8. Add a business listing – members only form
  9. Add a blog post – members only form
  10. Add a job listing – public pay to post form
  11. Job Listing Payment Completed – confirmation following payment
  12. Job Listing Payment Cancelled – return page following aborted payment

Note.  Once gravity forms are created a button is added to the posting editing screen, next to the add media button for adding any created forms to a page.

Activate All Plugins

Set up the PROFILE BUILDER plugin

The settings for the profile builder can be found under Users » Profile Builder

  1. Basic information – provides the shortcodes.
  2. General settings – I did not alter these.
  3. Show/Hide the Admin Bar on Front End I set as follows
    Show hide admin bar on front end
  4. The Default Profile Fields are those that will appear to the user in the front end profile form.  I set as follows (I could have used a Gravity form to update the user profile but this was easier and ready to go, plus there was other functionality in the Profile Builder plugin that I wanted to use as described above:

Profile Builder default profile fields

Then I added the shortcode to the profile pages I created at the start:

  1. Password Recovery – [wppb-recover-password]
  2. User Profile – [wppb-edit-profile]

That’s it as simple as that for the profile section.

The user profile form as it appears on the front-end

Front end user profile form

Setting up GRAVITY FORMS for front-end user registration and front-end post submission, including a pay to post form

Add the user registration form

This is the basic form, the mapping is done later.  The field types are listed over on the right.

User Registration Form Editing

Clicking on a field will open up the blue panel for editing.

The USERNAME field is SINGLE LINE TEXT from the STANDARD FIELDS section. I have ticked ‘required’ and ‘no duplicates’.

field-username

The NAME field is NAME from the ADVANCED FIELDS section.

field-name

The EMAIL field is EMAIL from the ADVANCED FIELDS section.

field-email

The PASSWORD field is PASSWORD from the ADVANCED FIELDS section.

field-password

The MONTHLY SUBSCRIPTION field is PRODUCT from the PRICING FIELDS section, settings as follows:

field-price

Form Settings

Under form settings » confirmations I set it up to go to a page after successful registration.  Ultimately this page will be reached after successful payment but first we need to set up the actual user registration functionality.

Form settings confirmations

Add the User Registration Functionality to the Registration Form

This is under Forms » User Registration. This form will map to the basic registration form previously set up.  I kept the user registration form very short and simple.  Users can always add other data later through the user profile form.

  1. Set the action to create user.
  2. Select the User Registration Form as the Gravity form to use.
  3. Map the fields from the form as below.

User Registration Settings

 

Add the Subscription Payment Functionality to the Registration Form

Under Forms » Settings » PayPal

I set up my IPN settings in my PayPal account/PayPal sandbox following the link given.  Then I was good to go with adding PayPal payments.

Under Forms » Paypal

I added my new PayPal form and called it user registration.

I set up the form as shown below, making sure I selected the User Registration Form as the Gravity Form for PayPal.  This ties the whole thing together through the original form created earlier.

These 3 forms then tie together to add a user registration form to the front-end with subscription payments tied in.  The user cannot register on the site until the payment set up is complete.

User registration form PayPal settings

The user registration form in the front-end

User registration form in the front end

 

Add the front-end add job listing and pay to post functionality

There are 2 stages to this.  Adding the form and adding the PayPal functionality.

This is a form to add a custom post with custom taxonomy and uses the standard metadata.

Gravity Forms will allow post submission via a front-end form but it does not yet support custom-post types which is where the Gravity Forms + Custom Post Types plugin comes in.

Adding the ‘Add a Job Listing’ Form

I have a long form here.  Basically because both members and non-members can post through this form.

I have used section breaks as you can see.

Under Form Settings I changed the button text to “Make Payment”

Under Confirmations I set it to return to a page “Job Listing Payment Completed”

The form settings panel

The form settings panel

 The job listing form – it’s a long one!

Add a job listing form

The job listing form fields:

JOB TITLE is the TITLE field from the POST FIELDS section.

Under the advanced section it is now possible to set the custom post type  The custom post type ‘Job’ is mapped to the form through this TITLE field. (The Gravity Forms + Custom Post Types plugin must be active).

Job title fieldAdvanced field job title

JOB DESCRIPTION is the BODY field from the POST FIELDS section.

Job description field

JOB CATEGORY & JOB LOCATIONS are using a DROP DOWN field from the STANDARD fields section.  The standard fields section is used because this is not a standard post category but a custom Taxonomy.

The fields here are automatically populated because of what I have ticked in the advanced settings section.  You will notice that I have ticked the Populate with a Taxonomy section and then selected my Business Categories Custom Taxonomy.

Field Job CategoryAdvanced field for job category

 

 

CONTRACT TYPE is a CHECK BOX field from the STANDARD fields section.  The standard fields section is used because this is not a standard post category but a custom Taxonomy.

The field choices are automatically populated because I have ticked Populate with a taxonomy and added Contract Types in the advanced section.

Field contract type

Advanced field contract type

 

 

SALARY, APPLICATION EMAIL ADDRESS and APPLICATION CLOSE DATE are all using CUSTOM FIELD from the POST FIELDS section.  I created a job listing thorough admin and added the custom fields so that they would be available for use in the form.

I didn’t need to create custom metaboxes because the members are not using the admin area but if they do it will be clear for them to see what they need to edit. I understand it is possible to use custom metaboxes here if required but I didn’t explore this.

Under this it is possible to select a field type.  I have selected email because this is the email address field.  This makes sure that submitted information is correctly formatted.

Post field email address

Then I inserted a standard section break “Your Details”

We need to collect money through this form and as clients do not have to be logged in to post, it is wise to collect as many details as possible.

COMPANY NAME is a CUSTOM FIELD from the POST FIELDS section.  (See above for posting custom fields).

field-jobcompanyname

Adding the featured image/company Logo to the form.  The COMPANY LOGO is the IMAGE field from the POST FIELDS section.

Note I have set this as the featured image simply by ticking the box.

Company logo field

NAME is the NAME field from the ADVANCED FIELDS SECTION

Field advanced name

ADDRESS is the ADDRESS field from the ADVANCED FIELDS SECTION

Field job address

JOB VACANCY LISTING is a PRODUCT field from the PRICING FIELDS SECTION

This is the price/product payment field.  Effectively, the pay to post field.

Field Pay to Post

 

Adding the PayPal payment functionality

Under Forms » Settings » PayPal

I set up my IPN settings in my PayPal account/PayPal sandbox following the links given.  Then the form can be set up.

Under Forms » Paypal

I added my new PayPal form and called it Job Listing.

Then I set up the form as shown below, making sure I selected the Add Job Listing Form as the Gravity Form for PayPal.  This ties the whole thing together through the original form created earlier.

These 2 forms tie together to add a job listings submission form to the front-end that takes payment before the post can be submitted.  A pay to post solution.

Here are my form settings:

Setting up the pay to post paypal form

With all of that tied up, anyone can now post a job listing through the front-end.  I have not added Captcha to the form because the pay to post functionality negates that requirement.

The front-end job listing form

Front end job listing form

 

The public view of a submitted job

I made a few additions to the standard loop to display the custom fields and custom taxonomies.  I will come onto the custom template shortly.

Front end job listing

The admin view of a submitted job

Admin view of job listing

Business Listings and Blog Posts

Were added in exactly the same way but without the PayPal payment elements.  These are members only forms, so the user must be logged in to use them.  I created shortcode tags and a members landing page for this, which I will come onto shortly.

The business listings form

Add business listing form editor

 The front-end business listings form

Front-end business listings form

Create the Shortcodes to display content for the members only post submission forms

I created a small plugin for this but this code can equally be inserted into the theme functions file:


// Visitors stuff if user is not logged in
add_shortcode( 'visitor', 'visitor_check_shortcode' );
function visitor_check_shortcode( $atts, $content = null ) {
if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
return $content;
return '';
}

//Members stuff for logged in users
//note do_shortcode as we are adding the form shortcode within
add_shortcode( 'member', 'member_check_shortcode' );

function member_check_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
return do_shortcode($content);
return '';
}

The code creates the following shortcode tags for wrapping around the content. So content only intended for Visitors will have the [visitor]Some content here …[/visitor] shortcode tags wrapped around. Content only intended for members will have the [member]Some content here …[/member] shortcode tags wrapped around it.

The [visitor] and [member] shortcode in use in the Add a Business Listing page

The business listings page showing the shortcode

Non-members don’t see the business listings form, they just see a message

Add a listing page non-members view

The theme templates for outputting the Job Listings

I use get_template_part in single.php template.

This very easily allows me to select different loops for different post types:

<?php while ( have_posts() ) : the_post(); ?>
<?php // if it is a job post get this loop ?>
<?php if ( 'tc_job' == get_post_type() ) { ?>
<?php get_template_part( 'content', 'singlejobs' ); ?>
<?php // if it is a business listing get this loop ?>
<?php } elseif ( 'tc_business_listing' == get_post_type() ) { ?>
<?php get_template_part( 'content', 'singlelistings' ); ?>
<?php // for everything else ?>
<?php } else { ?>
<?php get_template_part( 'content', 'single' ); ?>
<?php } ?>


<?php endwhile; // end of the loop. ?>

Then my custom loop for the job posts

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header>
<?php
// check if the post has a Post Thumbnail (logo) assigned to it.
if ( has_post_thumbnail() ) { ?>
<div><?php the_post_thumbnail('thumb'); ?></div>
<?php } ?>

<h1><?php the_title(); ?></h1>
<div
</div><!-- .entry-meta -->

</header><!-- .entry-header -->

<div>
<?php //grab the company name custom metadata ?>
<?php $coname = get_post_meta ($post->ID, 'Company Name', true ); ?>
<?php if( !empty ($coname) ) { ?><h2><?php echo $coname; ?></h2><?php } ?>
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div>' . __( 'Pages:', 'clientname' ),
'after'  => '</div>',
) );
?>
</div><!-- .entry-content -->
<div id="custom-data">

<?php //output my custom taxonomy data ?>
<p><?php echo get_the_term_list( $post->ID, 'job_location', '<b>Job Location:</b> ', ', ', '' ); ?></p>
<p><?php echo get_the_term_list( $post->ID, 'job_category', '<b>Job Category:</b> ', ', ', '' ); ?></p>
<p><?php echo get_the_term_list( $post->ID, 'contact_type', '<b>Contract Type:</b> ', ', ', '' ); ?></p>

<?php //Check first to see if the custom meta fields are populated ?>
$salary = get_post_meta ($post->ID, 'Salary', true );
$jobemail = get_post_meta ($post->ID, 'Email', true );
$close = get_post_meta ($post->ID, 'Application Close', true ); ?>
<?php //If they are, output them ?>
<?php if( !empty ($salary) ) { ?><p><b>Salary:</b> <?php echo $salary; ?></p><?php } ?>
<?php if( !empty ($close) ) { ?><p><b>Applications Close:</b> <?php echo $close; ?></p><?php } ?>
<?php if( !empty ($jobemail) ) { ?><p><a href="mailto:<?php echo $jobemail; ?>?subject=Application from Website">APPLY BY EMAIL NOW</a></p><?php } ?>
</div>

<footer>
<?php edit_post_link( __( 'Edit', 'clientname' ), '<span>', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post-## -->

Creating the Login Form

I created my own login form, as I needed full control over the redirect. The profile builder plugin offers a login form but you have to pay for the premium version to get custom redirects (or you can alter the core plugin files, which I always choose not to do).

I created a template page for the login form and added the standard WordPress code. You can see the lost password and register links go to the pages I set up earlier:

<?php
/*
 Template Name: Login Page
 Description:  A page created purely to display my front-end login form
 */

get_header(); ?>

<div id="primary">
<main id="main" role="main">
<h2>User login</h2><br /><br />
<?php //get the standard WP Login form ?>
<?php wp_login_form(); ?>
<?php //add my custom password recovery link ?>
<p>Lost your Password? <a href="<?php bloginfo('url'); ?>/password-recovery/">Click here »</a></p>
<?php //add the link to the registration page ?>
<p>Not registered yet? <a href="<?php bloginfo('url'); ?>/registration/">Register here »</a></p>

</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar('page'); ?>
<?php get_footer(); ?>

Displaying the buttons according to user status, Logged in or Logged out

I used a little bit of conditional code to display login and logout links depending on the status of the user:

if ( is_user_logged_in() ) {

echo '<li id="member-area"><a href="http://yourdomain.co.uk/members-area">MEMBERS AREA</a></li><li id="logout-link"><a href="'. wp_logout_url() .'">LOGOUT</a></li>';

} else {

echo '<li id="register-link"><a href="http://yourdomain.co.uk/become-a-member">REGISTER</a></li><li id="logout-link"><a href=""<?php bloginfo('url'); ?>/login/">LOGIN</a></li>';

}

The resulting buttons for logged in users

Buttons

 

This created a completely seamless front-end editing system for my client’s users.

There are lots of ways to do things in WordPress and this post is by no means prescriptive.


SHARE THIS ...

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someone

© Tracey Rickard. If you want to use any of my content please ask me first, you can't use it without permission that's stealing. You can use an excerpt as long as it is linked back to this article.