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.
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:
https://gist.github.com/wpmark/7e38e5114ecc153f400b
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:
https://gist.github.com/wpmark/1e57902ba32a0f115db7
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.
Leave a Reply