{"id":21280,"date":"2021-03-11T15:00:58","date_gmt":"2021-03-11T14:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21280"},"modified":"2021-06-29T13:27:58","modified_gmt":"2021-06-29T11:27:58","slug":"how-to-create-wordpress-frontend-login-page","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-frontend-login-page\/","title":{"rendered":"How to Create a Front-End Login Page in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress is a very powerful platform that comes with plenty of ready-made solutions for your website. Although perfectly functional, these solutions are not always ideal. That\u2019s just the case with the WordPress default login functionality. It can be confusing to visitors who simply want to log in to their account on your site when they are suddenly redirected to the WordPress admin area. So, unless your visitors have something to do in the admin area, like to write a post or share some content, it doesn\u2019t make a lot of sense to send them there after login. Therefore, enabling your visitors to log in to your site directly from the front end can provide a lot more satisfying user experience.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Why Is It Better to Have a Front-End Login Page?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Before we show you how to create a front-end login page in WordPress, let\u2019s name a few reasons why this could be beneficial for you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">A styled login page with your own logo and branding often gives off a more professional look than a default <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-login-page-plugins-for-wordpress\/\">login page<\/a> that looks nothing like your website. Plus, it can help strengthen your brand.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Many users, especially if you run a membership site, simply do not need access to the admin area. It only confuses them, which may lead to them losing interest in what they came for to your site in the first place.\n<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">If letting users to the admin area is unnecessary, then allowing them to access it could be potentially dangerous as they might unwillingly edit or change something on your site. So, it is a better solution to keep your visitors out of the admin area to prevent them from doing anything they shouldn\u2019t do on your site.\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Frankly speaking, any kind of website gives off a much better impression if their login page is not the default WordPress login screen that we\u2019ve seen so many times. A customized front-end login page simply shows that you put in the effort to provide a better user experience for your visitors, care about your brand and think about every detail. And considering how easily you can add a styled front-end login page to your WordPress site, there are really not many reasons not to do it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Today, we\u2019re going to show you just how simple it is to implement a front-end login page using the Theme My Login plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The fact that the Theme My Login plugin has more than 100 000 active installations speaks for itself about its reliability and efficacy. The reason why we choose this plugin over some other plugins is that it is incredibly simple to use, requires no configuration for building a custom login page, and is entirely free. The plugin ensures that the pages will match your current theme, they will have the same font and colors like the theme you\u2019re using. It works right out of the box, with no need to customize any settings. Plus, the plugin adds a new widget to your site that you can place in your sidebar, footer, or header area and make logging in or registering easily accessible.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to Create a Front-End Login page for WordPress With the Theme My Login Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]We&#8217;re going to assume you already know how to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install a WordPress plugin<\/a>, so we&#8217;ll skip that step. But in case you do come across any issues during the installation process, make sure you check the link above.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login.jpg\" class=\"attachment-full size-full\" alt=\"Theme My Login\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-300x139.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-768x357.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-620x288.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you&#8217;ve installed and activated the plugin, it&#8217;s time to set it up. Let&#8217;s take a look at the settings Theme My Login offers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting Up the Theme My Login Plugin<\/h3>\n<p>[\/vc_column_text][vc_column_text]The plugin creates five new pages instantly after the activation. You will find the login, log out, register, lost password, and reset password page. They are instantly live and will replace the backend login page by default.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is how the login page looks in our case, the plugin automatically created it with the font and the colors that follow our theme\u2019s style:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"468\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/LogIn.jpg\" class=\"attachment-full size-full\" alt=\"LogIn\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/LogIn.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/LogIn-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/LogIn-768x371.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/LogIn-620x299.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To adjust settings for these pages click on Theme My Login in your WordPress admin and then select the <em><strong>General<\/strong><\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-General.jpg\" class=\"attachment-full size-full\" alt=\"Theme My Login General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-General-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-General-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-General-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you will find settings to customize each of the five pages, as well as links that lead to them. The settings are split into three segments: Login, Registration, and Slugs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Login Settings<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the login settings you choose whether you want the visitors to enter the default credentials like username or email, username only, or email only when logging. It is up to you to choose the kind of settings that work best for your site.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"529\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/General-Log-In.jpg\" class=\"attachment-full size-full\" alt=\"General Log In\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/General-Log-In.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/General-Log-In-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/General-Log-In-768x419.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/General-Log-In-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Registration Settings<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the registration settings, you determine what data the user has to enter in order to register an account on your site. You can choose between the default option to ask for both the username and the email, or you can request just the email or just the username. But, bear in mind that the registration settings should match the login settings. If, in the login options, you decided to limit users to logging in with a username, here you need to ensure that they also have to create that username upon registration. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You also have more options here that are dissabled by default but you can enable them if you wish. The first allows users to set their own password and the second automatically logs in users after registration. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Registration.jpg\" class=\"attachment-full size-full\" alt=\"Registration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Registration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Registration-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Registration-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Registration-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Setting Slugs<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A slug is a unique identifier for each page on your WordPress site. It&#8217;s the part of the URL that comes after your domain, and that determines what page a user will view. The Theme My Login plugin generates a simple slug for each of the pages it creates. Generally, when it comes to slugs they should clearly indicate what the page is meant for. In this case, the plugin\u2019s automatically generated slugs are actually ideal. Of course, you can change them if you find it necessary. Just beware of empty spaces in slugs as they are replaced with a \u201c%20\u201d sign, which can quickly make your slugs ineligible. You can use a hyphen instead (e.g. \u201clogin-page\u201d instead of \u201clogin page\u201d).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"616\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Slugs.jpg\" class=\"attachment-full size-full\" alt=\"Slugs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Slugs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Slugs-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Slugs-768x488.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Slugs-620x394.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, remember to save changes after you adjust all the settings.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Add the Theme My Login Widget to Your Site<\/h3>\n<p>[\/vc_column_text][vc_column_text]As we mentioned, the plugin comes with a handy widget that you can add to the sidebar or footer. To access it, go to <em><strong>Appearance &gt; Widgets<\/strong><\/em> and select the<strong> Theme My plugin widget<\/strong>. By clicking on it, a dropdown menu will open and you\u2019ll be able to choose which widget area to place the widget in.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Add-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Theme My Login Add Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Add-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Add-Widget-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Add-Widget-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Add-Widget-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you add the widget to a widget area, you can start customizing it. To do so, find the appropriate widget area on the right side of the screen and open it. Inside, you should see the Theme My Login widget. Once you also open that, you&#8217;ll be able to choose whether you want it to have a login, register, or recover lost password functionality.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"497\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Widget-Added.jpg\" class=\"attachment-full size-full\" alt=\"Theme My Login Widget Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Widget-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Widget-Added-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Widget-Added-768x394.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Widget-Added-620x318.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can add up to three widgets to your widget areas, and select a different option in each one. But, as they usually take up a lot of space, this is not recommendable. To see the widget that you added, you will have to log out of your account or open the site in an incognito tab.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Useful Extensions for Theme my Login<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Theme My Login plugin supports a wide array of extensions that are very useful but are not free. At the moment of writing this, the plugin supports 13 different extensions that include Mailchimp, Avatar, Notifications, Favorites, Restriction, Legacy Bundle, etc. And while the free version of the plugin will cover your basic needs in terms of front-end login, these extensions can be useful if you need additional functionalities.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"507\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Extensions.jpg\" class=\"attachment-full size-full\" alt=\"Theme My Login Extensions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Extensions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Extensions-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Extensions-768x402.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Theme-My-Login-Extensions-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Sum Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Logging in is not something that visitors especially look forward to when they come to your site, but if you\u2019re already running a type of site that requires logging in, why not make it as smooth and easy as possible. Considering how competitive the online world can be, every detail that brings more quality to the user experience matters, and a front-end login page is something that can significantly improve UX and also help you strengthen your brand image.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Find out just how easy it is to create a WordPress frontend login page and enhance the user experience on your website.<\/p>\n","protected":false},"author":42889,"featured_media":21322,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-21280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/42889"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21280"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21280\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21322"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}