BytePlate Brand Navigation
  • About
  • wpCultivate
  • Services
    • Brand Consultation
    • Identity & Print Design
    • WordPress Websites, Maintenance & Services
    • E-Mail Campaigns & Social Media Branding
    • Interactive Presentations & Messaging
    • Search Engine Optimization (SEO)
    • Hosting Services & Maintenance
    • WordPress for Lawyers, Attorneys & Firms
  • Projects
  • Blog Bytes
  • Contact Us
  • Search
  • About
  • wpCultivate
  • Services
    • Brand Consultation
    • Identity & Print Design
    • WordPress Websites, Maintenance & Services
    • E-Mail Campaigns & Social Media Branding
    • Interactive Presentations & Messaging
    • Search Engine Optimization (SEO)
    • Hosting Services & Maintenance
    • WordPress for Lawyers, Attorneys & Firms
  • Projects
  • Blog Bytes
  • Contact Us
  • Search
Home Blog Bytes Customizing Front-End and Backend Login for WordPress

Customizing Front-End and Backend Login for WordPress

Whether you want your users to log in from the front-end or backend of your websites, WordPress allows you to fully customize the experience for both.

Occasionally, when building a WordPress website you might think that the built-in login page doesn’t exactly meet your needs. Sometimes, you might want the login form embedded into your site’s front-end. Other times, you might need functionality that isn’t available using the default /wp-login.php page.

We’ve previously looked at how to completely customize the WordPress login page, exploring ways of merging it into your site’s branding. In this post, we’ll look at how to extend some of the functionality offered in that post with more practical examples.

This post looks at front-end and backend login customization in two sections. In the first part, I will explain how to handle the login process from the site front-end. We’ll look at how to:

  • Include a login form into posts and widgets
  • Redirect the user on successful login
  • Set a custom login page
  • Conditionally display a login/logout link in a menu

Note that we’ll explore just the login task, letting WordPress take care of redirection on failed login, password reset, user registration and data editing. All these tasks deserve careful attention and will provide us with more to dive into and explore in the future.

In the second part of this post, I will show you how to add greater functionality to the built-in login page. We’re going to:

  • Customize the HTML structure of the login page header
  • Get the most from the built-in login page with additional form fields

We’ll also look at several examples to acquaint you with functions, actions and filters available for the handling of the login process. I’ll assume you’re familiar with the key concepts behind action and filter hooks. If you’re not, before going through this post take the time to have a read over A Quick (and in-Depth) Guide to WordPress Hooks.

Let’s start diving into login customization.

The WordPress backend login form.
The WordPress backend login form.

Including a Login Form in Posts and Text Widgets

When designing the user flow for a new website, you might want to display a login form on the front-end of your site. You can achieve this goal thanks to the wp_login_form function, which echoes (or returns) a simple login form (check the WordPress Codex for details).

This function holds an array of parameters, whose values set the URL for redirection after login, IDs, labels and the default values of the form elements.

In the following example we’ll create a simple shortcode, which will enable site authors to embed the login form anywhere into the site:

.gist table { margin-bottom: 0; }

In the code above we’ve set the value of echo to false so that the function won’t print the HTML of the form, but will return the mark-up as value of the $output variable. The same value will be returned by the callback function.

In case the user was already logged in, the function returns a message and the logout link (this latter returned by the wp_loginout function).

Now, let’s create a new post (or page) and include the [frontend-login-form] shortcode. As a result, we’ll get the login form shown in the image below.

wp login form
The image shows the login form embed into a regular post

We can include the form in a sidebar as well, but first we have to force WordPress to process shortcodes in text widgets. This task can be accomplished using the widget_text filter and the do_shortcode function as we’ve already done in the code above.

shortcode widget
Once we’ve enabled shortcode processing in text widgets, the login form can be included into any sidebar

Redirecting the User on Login

In the previous example, once logged in the user is redirected to the same page he/she is coming from, whatever their role. But we can redirect users to specific pages depending on their roles or capabilities.

For instance, we may want to prevent site subscribers from having access the admin area while redirecting to the dashboard all the users belonging to other roles. We can accomplish this usin the login_redirect filter hook.

Consider the following code:

.gist table { margin-bottom: 0; }

It’s quite self explanatory: login_redirect filters the URL of the resource the user should be redirected to on successful login. In our example, if the user has the capability to edit_posts (all roles but subscribers), the user will be redirected to the dashboard. If the users hasn’t, they will be redirected to the site home page.

Setting a Custom Login Page

If we’ve created a new custom login page, we may also want to overwrite default login URL. To do that we can use the login_url filter, as shown in the following code:

.gist table { margin-bottom: 0; }

Here, we’re calling the add_query_arg function, which we’ve appended the query arguments redirect_to and reauth to the URL. The same URL is finally returned by the callback function.

Adding Login and Logout Menu Items Programmatically

Now we have a new login URL and we can build the corresponding link programmatically from our scripts. In the next example, I’ll show you how to append the login and logout links to a primary menu.

In the main file of a plugin (or in the functions.php file of a child theme) copy and paste the following block of code:

.gist table { margin-bottom: 0; }

The wp_nav_menu_items filter allows us to append new items to menus. By setting a specific theme location, our customization will affect just one custom menu. If the user is logged in, the callback function will automatically append the logout URL, otherwise it will append the login URL.

So far we’ve seen how to log in the user from the front-end. Nevertheless, chances are that we would prefer to keep the login on its own default page. So, in the following examples we’ll see how to take advantage of some of the many functions, actions and filters we can use to customize the page structure and add functionalities to the login form.

Customizing the Login Header

The header of the default WordPress login page is structured as follows:

.gist table { margin-bottom: 0; }

It’s just a h1 element with an anchor pointing to WordPress.org. We can act on this structure thanks to three hooks, one action (login_head) and two filters (login_headerurl and login_headertitle). Take the following code as an example:

.gist table { margin-bottom: 0; }

  • The login_head action fires after scripts are enqueued, and we can hook to this action a function to enqueue custom scripts and styles. In our example, we’ve added a single declaration to change the background image of the anchor in the header
  • login_headerurl filters the link URL of the header logo. In our example, the callback function returns the home URL
  • login_headertitle filters the title attribute

This is just a basic example, which aims to demonstrate how actions and filters come in handy to customize the login experience. If you need more control over the presentation of the login page, take a moment to read how to completely customize the WordPress login page. Then, if you want to add more functionality to the built-in login form, read over our last and more advanced example…

Let Your Users Select the Redirect URL

It’s time to give our users more control over the login process. In this last example, we’ll give them the ability to choose the URL of the page to be redirected to.

First, we’ll add a new field to the login form with the following function:

.gist table { margin-bottom: 0; }

The login_form action fires following the ‘Password’ field in the login form and preceeding the ‘Remember me’ checkbox, so the callback function prints the select menu in that precise position.

With the form field in its place, we can put it in action with the following code:

.gist table { margin-bottom: 0; }

Here, we’re checking whether a valid value for the select field has been sent. If so, the switch statement set a value for $redirect_to variable depending on the option selected by the user.

custom login form
A customized login form


The user will be now redirected to the page of their choice.

Wrapping Up

The login process is an important part of a website’s user flow and we as web designers should take the time to consider the user experience. Whether we decide to allow users to log in from a site front-end or keep with the default backend log in form, we can customize all options in terms of both presentation and functionality.

WordPress provides up with the powers of customizzation – it’s up to use to make good use of them.

 

Have you got further ideas for login customization? Do you have any favorite examples of login forms that have been customized? Join the conversation and share them with us in the comments below.

Logo credit Giulio Baccari.

Related posts:

  1. Building Fully Customized WordPress Front-End Login, Registration and Profiles Without Touching Code The default WordPress login, registration and profile pages are perfectly…
  2. How to Find Your WordPress Login URL If you’re new to WordPress and wondering “How do I…
  3. How to Completely Customize the WordPress Login Page The WordPress login page provides a generic looking one-size-fits-all solution…

View original post at WPMU

loginlogin formWordpressWordPress DevelopmentWordPress TutorialsWPMU
BytePlate Brand has over 20 years of experience making brands happy through Website Design, Search Engine Optimization (SEO), Social Media, Print Design and more. Let us know how we can help your business grow:

About Us Form

    We will not share your address with any third parties. Don't worry. You can trust us!
  • This field is for validation purposes and should be left unchanged.

Recent Posts

  • The Leadership Practice That Keeps Teams Moving in Uncertain Times
  • How Building Tech With No Tech Background Taught Me the Most Valuable Skill in Business
  • Stop Switching Tabs and Compare Every AI Model in One Place
  • Scan, Sign, and Manage Your Documents Right From Your Phone
  • Scammers Can Deepfake Your CEO in Just 3 Minutes for $15 — Here's How to Stop Them

Archives

  • September 2025
  • August 2025
  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023
  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • March 2015
  • February 2015
  • January 2015

Categories

  • Advertising
  • Branding
  • Charity
  • Data-Driven Marketing
  • Design
  • Fundraising
  • hummingbird
  • managed hosting
  • Marketing
  • Multisite Plugins
  • Online
  • optimization
  • performance
  • premium content
  • Reviews
  • Social Media Marketing
  • speed
  • Uncategorized
  • upgrades
  • web hosting
  • Wordpress
  • wpCultivate
  • WPMU DEV

  • Home
  • About BytePlate
  • Services
  • Some of Our Projects
  • Blog Bytes
  • Contact Us
FacebookXLinkedInRSS

© Copyright BytePlate Brand LLC. All rights reserved.