Building Fully Customized WordPress Front-End Login, Registration and Profiles Without Touching Code

Building Fully Customized WordPress Front-End Login, Registration and Profiles Without Touching Code

The default WordPress login page, registration, and login pages are fine if all you’re building is a basic site with a handful of users, but if you’re working on a client project, creating custom pages is something you should really do.

Ensuring users can sign up, login and check their details, all without ever seeing the backend of WordPress, provides a more comfortable – not to mention less confusing and disorienting – environment. On top of that, you get to control the style and function of these pages, ensure their design matches your site, and also add in any extra bits and pieces you might need, like extra profile fields to the barebones registration form.

So in today’s post we look at some simple ways you can customize the default login, registration, and profile pages, all without touching a lick of code.

Customizing the Login Page

The default login page is plain and boring, just like it should be. After all, it’s the entry point for millions of sites around the world, all with their own designs, so it has to be ready to accommodate any kind of site.

Unfortunately, WordPress hasn’t evolved to the stage yet where you can customize the login page in the backend. Fortunately, customizing how it looks is pretty easy.

If you would prefer code-based customizations, our post How to Completely Customize the WordPress Login Page walks you through all the snippets you need to change everything from the background on the login page to updating the fonts, links and images.

Here’s an example of just some of the customizations you can make:

Fully Customized login page
One of our articles, How to Completely Customize the WordPress Login Page, shows you the steps to creating a custom login page just like this one.

But as promised here are some fantastic plugin solutions that let you tailor the look and feel of your login page without having to make your own code customizations.

  • Ultimate Branding

    Ultimate Branding is one of our most popular plugins and for good reason – it’s easy to use and you can make quick customizations, allowing you to stamp your brand on yours or your client’s site.

    You can replace the WordPress logo on the login screen with any images in your media library, as well as change the background image. You can even completely redesign the login screen with custom design elements, colors and fonts.

    There isn’t much else to say. It’s that simple. Of course, you can use Ultimate Branding to make other tweaks to your site, such as give the dashboard a makeover, which you can find out more about here.

    Interested in Ultimate Branding?

  • WordPress Custom Login Theme Page

    If you like to have lots of options, and I mean a lot of options, then WordPress Custom Login Theme Page is for you. This premium plugin, available to download from ThemeForest, allows you to create templates for your login pages. Each template includes 11 sections with more than 46 individual options.

    It includes the standard customizations, such as changing the login page background and default WordPress logo, as well as replacing the link to the WordPress.org website. Other customizations include changing the fonts, labels of elements and how the actual login form looks.

    Another nice feature is the ability to store multiple templates, which is especially handy for special occasions like holidays and events your site might need to recognise, like trade fairs, Fashion Week or other big ticket celebrations.

    Interested in WordPress Custom Login Theme Page?

  • Custom Login

    Custom Login covers the basic stuff, like changing the login page background image and removing the WordPress logo, but since we last featured this plugin on our blog it’s been updated to version 3.0 and is now 140% faster and comes with some interesting extensions.

    The extensions include Stealth Login (obscure your login URL), Page Template (turn a WordPress page into a login form), Redirects (redirect users by role after logging in), No Password (allow users to login without a password), and a handy style pack with four custom login styles.

Create a Custom Registration Form

Giving your registration form a custom look is, as I’ve mentioned, a straightforward way to make it feel more integrated into your site.

Like the login page, you can make code changes yourself. Here are just a few excellent tutorials:

This collection of plugins are my top picks. They are all regularly updated and have been tested on both single and Multisite installations.

  • Set Password

    Set Password plugin

    With the Set Password plugin, your visitors can register with your site and choose their own password, rather than receiving one automatically through email with WordPress’ default settings.

    This plugin installs as easily as most others and it only gets easier from there. There are no configuration options. Just install and you’re ready to go – a password and confirm password fields will be automatically included in your registration form following your site’s design and stylesheet. No fuss, no muss.

    Set Password also pairs really well with the Remove Email Verification plugin. As you might guess, this plugin stops the default WordPress sign up confirmation email that normally sends. From here, you can style your own HTML, eye-catching emails with the e-Newsletter or Membership 2 Pro plugins.

    All these plugins are premium ones, but as they say, you get what you pay for and in this case, it’s top quality, expertly coded plugins.

  • BuddyPress

    BuddyPress plugin

    You may be surprised that BuddyPress is on this list and I can’t blame you since its primary purpose is to create a social network type of community. The reason why this plugin might actually be helpful lies in the way it replaces the default WordPress registration form with its own creation.

    With this free plugin installed, your site’s registration includes two extra fields – the first is a password field and the second is a confirm password field. You can optionally add an unlimited amount of custom fields that are stored in a user’s profile.

    Here are the types of fields you can create:

    • Text box
    • Multi-line text box
    • Date selector
    • Radio buttons
    • Drop-down select box
    • Multi select box
    • Checkboxes

    If you would like your site’s registration form to only add the paddword fields, you would like to add many simple and custom fields or you already have BuddyPress installed, this plugin is well worth considering.

  • Profile Builder

    Profile Builder plugin

    With shortcodes, the Profile Builder creates front-end login, registration and edit profile forms. It comes pre-loaded with several custom fields to choose from to add to your registration page.

    You also have the option to enable extra features such as front-end password recovery, enabling users to login with their username or email and the ability to set a minimum password strength for users when they are registering.

    Here are the types of fields you can create:

    • Name
    • Username
    • First and last names
    • Nickname
    • Public display name
    • Contact information
    • Email
    • Website
    • About Yourself
    • Biographical information
    • Password
    • Confirm Password

    If you would like to create custom fields or add reCAPTCHA capabilities, they’re available as premium upgrades along with other features.

    Another amazing and often sought after feature that’s included is the ability to choose who sees the WordPress admin bar when users are logged in. There are also 8 free and 4 premium additional add-ons that you can enable to further add to the functionality of your site.

    The currently available add-ons include:

    • Import and export all Profile Builder Settings – free
    • Custom CSS classes on fields – free
    • Enable maximum character length – free
    • Enable multiple admin emails – free
    • Edit all profile builder labels – free
    • Replace labels with placeholders – free
    • Numbers and phone validation – free, with upgrade
    • Valid email checker – free
    • WooCommerce Sync – $24
    • MailChimp integration – $19
    • Campaign Monitor integration – $19
    • Make fields only visible to admins – $24

    It’s also easy to install and use which is an extra bonus for many, I’m sure.

    Interested in Profile Builder?

  • Cimy User Extra Fields

    Cimy User Extra Fields plugin

    If you find you don’t need all the extra features of Page Builder and simply need to add extra fields to your site’s registration form, this is the plugin that’s highly worth considering. It may not offer a wide range of features, but it does allow you to customize your own fields or choose from a list of pre-made fields.

    The custom field options include:

    • Text
    • Text area
    • Rich text area
    • Password
    • Checkbox
    • Radio button
    • Drop down box
    • Multi-drop down box
    • Pre-load image
    • Upload image via URL
    • Date and time
    • File upload via URL
    • Date range

    There are also a lot of other options that come along with custom fields such as creating required fields and displaying information on the front-end such as on the registration form, user’s profile, in search engine results, on the blog and many other features.

    The pre-made fields are plenty and range from double password fields, first and last name, nickname, website, social media and biography.

    It’s a handy plugin that’s easy to install and can be accessed from the admin dashboard > Settings > Cimy User Extra Fields tab.

    Interested in Cimy User Extra Fields?

  • Pie Register

    Pie Register plugin

    What if you need a customized registration form and a front-end user profile? Not to worry because this plugin has got you covered. Your visitors will be able to register with the custom fields you create from double password, social media, reCAPTCHA, math captcha, date, time, upload and all standard field types to name a few, okay, several.

    Users will also be able to edit the information they registered with on a front-end page of your choosing.

    You can also enable many features, some of which include:

    • PayPal payments
    • Customizing user and admin notification emails
    • Blocking the wp-login.php page and have users login in a custom page or widget for extra security
    • Two-step email verification
    • Customizing CSS
    • Creating invitation codes for limiting registration and
    • Hiding the WordPress admin bar from subscribers

    These are also just some of the highlights. There are more features that are included that you may find useful. Keep in mind that this plugin only works for WordPress versions 3.5 and above.

    Overall, Pie register is a free plugin that’s easy to use with its drag and drop form builder and straight forward settings. What about installing the plugin, you may wonder? There’s nothing to it. It’s as easy as easy as … pie.

  • User Meta

    User Meta plugin

    With the User Meta plugin, you can create custom registration forms with an unlimited amount of fields. The form submission is then emailed to the admin and also made available for a given user’s profile.

    This free plugin also includes the capability of creating a front-end profile page for users to view and edit. The form builder has a drag-and-drop interface with many options available including making the submission of the fields of your choice only viewable by admins.

    The types of fields you can include in your form for free include:

    • Username
    • Email
    • Password
    • Website
    • Display name
    • Nickname
    • First name
    • Last name
    • Biographical information
    • Registration date
    • User role
    • Upload an avatar
    • Jabber
    • AIM
    • Yim
    • Text box
    • Paragraph box
    • Rich text box
    • Hidden field
    • Drop down box
    • Radio button
    • Checkbox

    If you would like to enable other fields such as captcha, file upload, country or a completely custom field there is a premium upgrade option. There are many other settings that are made available if you upgrade as well including custom email notifications and special Multisite functionality. Installation is plain and simple and the settings are quite straight forward.

  • Custom User Registration Form Builder

    Custom User Registration Form Builder plugin

    This free plugin enables you to create custom contact and registration forms. Adding reCAPTCHA as well as capturing a form user’s IP address and browser info are also features that are available to enable for all forms on the settings page.

    This plugin has quite a few options for creating custom forms such as creating an auto-responder and page redirection after a form is submitted. It’s also really easy to install and use. A form can be created in seconds and can be displayed on a page with a shortcode.

    includes the following options for form fields:

    • Text
    • Heading
    • Paragraph box
    • Drop down box
    • Radio button
    • Text area
    • Checkbox
    • Date picker
    • Email
    • Number
    • Country
    • Timezone
    • Accepting (and displaying) terms and conditions

    If role-based forms is a feature you’re after, you can get it with this plugin with a premium upgrade along with a file attachment field and form analytics. The free version is another example of a simple plugin with straight forward options. It’s suitable if you only need a custom registration form and nothing else.

    Interested in Custom User Registration Form Builder?

Custom Front-End Profiles

The last step is customizing your profiles and fortunately there are some great options available for doing just that, from making basic changes to completely changing up the style and function of your forms.

  • Default Theme

    Default Theme plugin

    What if you wanted to have your fully customized profile page built into a theme of your own creation. How could you easily set it to be available right off the bat to new site creators in your network? Quite possibly the easiest way is with the Default Theme plugin.

    You could create your theme, network activate it, then install this plugin easily in just a few clicks. Next, you would go to Settings > Network Settings in the super admin area, and scroll down to Theme Settings. Here, you should see a drop down box where you can choose between your network activated themes.

    Just select the custom theme you created from the list and save. Once all that’s done, a user will automatically be assigned to your custom theme, with your front-end profile options included. You can also install the Pro Sites plugin to disable the changing of the default theme that you set so your users can access the über customized profile theme you created without being able to stray.

    Both of these are premium, top-notch plugins by WPMU DEV. If you’re thinking “That’s great, but how do I code a front-end user profile to a theme, anyway?” then check out this great complete code example for front-end profiles on Stack Exchange by a user named Bainternet.

    There’s also another option, which you may find a bit easier to manage and it’s by creating your own form that posts to the front-end with the Gravity Forms plugin.

    Interested in Default Theme?

  • Gravity Forms

    Gravity Forms plugin

    The Gravity Forms premium plugin enables you to create custom contact forms with a ton of different fields, including advanced ones. It’s easy to install and has a drag-and-drop interface for form creation which makes it a lot easier to create powerful forms, quickly.

    It’s powerful because it has robust features that most other contact forms don’t include. Sure, it has reCAPTCHA capabilities, email address validation and other common features, but what sets it apart from others is its ability to post fields to the front-end.

    You can very easily create a form that allows your users to create and publish posts entirely from the front-end. Cool, no? The only drawback is you are limited to the standard post fields you are likely familiar with, in the post editor, but don’t let that stop you.

    With the Gravity Forms Developer licence, you also get access to the User Registration add-on. Not only can you create custom registration forms, but also front-end user profiles with however many custom fields you desire.

    You can choose to enable your site’s members to update their name, email, password and even their user role on your site. It just takes a few clicks and you’re done, although, with a higher price point of $199 for the Developer licence, it may be out of reach to many individuals, but likely worth it for many businesses or web developers.

    If you’re more interested in coding your own custom front-end user profile, check out this easy-to-follow tutorial from Tuts+ by Vinny Singh called Posting via the Front End: Inserting.

    Interested in Gravity Forms?

Conclusion

So there you have it. You’re armed and ready to create your own custom front-end login, registration and user profile forms.

For more posts about creating custom and front-end features, check out some of our other posts: How to Customize the WordPress Text Editor to Look and Function Like Your Front-End and Let Users Sign In and Recover Passwords On The Front-End Of Your WordPress Site.

How far have you taken login, registration and profile customizations? I’d love to see your sites. Feel free to share examples in the comments below.