WordPress Front End Profile Plugin

Have you ever worked on a site where you have lots of users on the site but they should never need to go into the WordPress admin area? Maybe you have different roles setup to show them different types of content. However you would like them to be able to edit the information on their profile page? Well now you can allow them to do this without going near the WordPress admin buy using my new WP Front End Profile plugin. Lets take a look at it.

Put simply this plugin provides you with a function for which you can add to your themes template files. When you do this the function outputs a profile editor on the front end. The function in question is:

wpfep_show_profile();

Once you add this you will be presented on the front end, in whichever template you added it to with the following profile editing screen.

Screen Shot 2014-12-06 at 11.15.28

As you can see, by default the profile editor has two tabs named Profile and Password. Each tab contains a set of fields which the user can edit. The profile tab has the majority of things that can be edited on the profile admin screen, such as first and last name, URL, email address and the bio or description. The password tab allows the user to change their password, entering it twice to confirm.

All that sounds great, but that it not really the best part of the plugin, this comes in the form of its extensibility. The plugin is built in a way that easily allows developers to add their own tabs and their own fields, either to tabs they have added or to existing tabs. What is also good, is that all of the saving is taken care of for you. Lets took at look how.

Adding Your Own Tabs

To do this you will need to use the wpfep_tabs filter. An example of how to add a new tab is given below:

As you can see you declare a number of tab args when adding the tab. Perhaps the most important of these in the Tab ID. This is used for adding fields to your tab. So lets take a look at how to add fields to your tabs.

Adding Fields to a Tab

All fields that you add are added to the user as user meta (you can use the wpfep_reserved_ids filter to save to the user table rather than user meta but that is for another day!). Fields are added to a tab using a dynamic filter. The filter is dynamic as it uses the tab ID from when the tab was added. The filter takes the following format:

wpfep_fields_$tab_id

Here the tab id is the ID of any added tab. The ID of the default tabs are profile and password. The ID of the tab we added above is wpmark_tab. Therefore to add fields to this tab we would use a filter named:

wpfep_fields_wpmark_tab

The code below is an example of how we do this:

Here we have added a select input setting the type to select and adding and options arg to give the different select options. Other types you could add include WYSIWYG, text, textarea, checkbox, password and email.

Actions and Filters Available

There are also a number of actions and filters that developers can use to modify things such as password length requirements and whether or not to use the plugins built in styles and javascript. Take a look at the Wiki on Github in order to find out more.

You can download the WP Front End Profile Plugin in the WordPress.org plugin repository or view the code and submit issues on Github.

Published by

Mark Wilkinson

Lead developer & owner at Highrise Digital @highrisedigital. Develops the @wpbroadbean plugins. Former teacher.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s