{"id":34588,"date":"2022-02-09T15:00:40","date_gmt":"2022-02-09T14:00:40","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34588"},"modified":"2022-02-09T09:58:54","modified_gmt":"2022-02-09T08:58:54","slug":"create-wordpress-login-popup-modal","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-login-popup-modal\/","title":{"rendered":"How to Create a WordPress Login Popup Modal"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Whether you are running a typical online store, selling courses, providing listings, or have any kind of membership-based content, you need <strong>a clear way for your users to register and log in<\/strong> to your website. While the WordPress login page can be used for this purpose, it isn\u2019t very user-friendly since it redirects users from their point of interest onto a default login page. After logging into your website, the users are often left confused about how to access the content they were interested in, losing you potential conversions and revenue.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For that reason, <strong>a more user-friendly custom login option<\/strong> is needed. The best solution for this issue is <strong>adding a login popup modal<\/strong> which allows users to register and log in to the website without being redirected to other pages. Therefore, it improves the overall user experience on the website, leading to more sales. The login popup can be added to various parts of the website and proves to be a valuable asset in growing online stores and membership websites, as previously mentioned. In this article, we will explain how you can add such a login popup modal to your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we will be covering:[\/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 href=\"#using-the-login-signup-popup-plugin\">Using the Login\/Signup Popup Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#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 href=\"#adding-the-login-popup-as-menu-item\">Adding the Login Popup As a Menu Item<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#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 href=\"#adding-the-login-popup-as-link\">Adding the Login Popup As a Link<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#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 href=\"#adding-the-login-popup-and-inline-form-using-shortcode\">Adding the Login Popup And Inline Form Using a Shortcode<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#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 href=\"#additional-tips\">Additional Tips<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[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\"><a id=\"using-the-login-signup-popup-plugin\"><\/a>Using the Login\/Signup Popup plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since membership websites are a well-known niche, there is a lot of WordPress plugins that offer custom login screens, popups, and similar functionalities. These functionalities could also be integrated into themes. Therefore, you should <strong>first inspect the functionalities of your current theme<\/strong> before resorting to a plugin. In this article, we will cover the plugin method only, explaining all the nuances of a plugin made specifically for this purpose, which we found while exploring WordPress.org\u2019s plugin repository.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/easy-login-woocommerce\/\" target=\"_blank\" rel=\"noopener\">Login\/Signup Popup<\/a> plugin is <strong>a lightweight plugin for handling registration, resetting passwords, and adding login popups<\/strong> that can be incorporated with WooCommerce. While the plugin offers additional premium features like social login, Google reCAPTCHA, custom registration fields, one-time password login, and email verification, the free features of this plugin are more than enough for this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin itself is intended for intermediate WordPress users, as<strong> it requires quite a bit of prior WordPress knowledge<\/strong> to be used to its full extent. Nevertheless, we have done our best to explain all the nuances of the plugin below, so that it can be used by all WordPress users. That said, let us proceed to the main part of the article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, <strong>navigate to the Login\/Signup Popup section<\/strong>. The section has two subsections \u2013 Settings and Fields, where all the options regarding the plugin\u2019s use are set. Both these subsections are divided into tabs which contain the relevant options. For this article, we will only focus on the plugin\u2019s free functionalities. We will not be covering the premium add-ons in the Add-ons tab.[\/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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Popup-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Login Popup Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Popup-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Popup-Settings-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Popup-Settings-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Popup-Settings-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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\/2022\/02\/Fields-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Fields Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having said that, let us cover the options. While they are divided into separate tabs, we find it better suited to divide them into two categories &#8211; those concerning login popup\u2019s functionality and those which are used for its stylization. We will explain them that way as well in the following part of the article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To set up the functionality of the login popup, we have to start with the General tab, located in the <strong>Login\/Signup Popup &gt; Settings<\/strong> section. In it, you can enable the registration process, set the default user role after registering, enable auto-login after signing up and the possibility to reset the password. Additionally, for the registration process to work properly, you also need to enable the \u201cAnyone can register\u201d option, found in the <strong>Settings &gt; General<\/strong> section of your admin dashboard.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the Main subsection of the General tab, you can also set up redirections after logging in, registering, or logging out, as well as if a successful login or register should be reflected in the URL by appending the following labels to URL &#8211; \u201clogin=success\u201d or \u201cregister=success\u201d, depending on the action taken.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Following that, the forms provided by the plugin can also be used to replace the WooCommerce\u2019s My Account page form and the login form on the Checkout page, if enabled.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, <strong>you can also set that the login popup provided by this plugin is automatically opened<\/strong>. This can be set for all pages, once or always, or only on specific pages. To specify the pages on which the login popup appears automatically, insert a page\/post ID or page\/post slug. Of course, using this option to its full extent requires you to know <a href=\"https:\/\/qodeinteractive.com\/magazine\/find-post-page-category-comment-uder-id-wordpress\/\">how to find page\/post IDs<\/a> and <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-are-wordpress-permalinks\/\">permalink slugs<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, if you choose to open the login popup automatically, you can also choose the time delay for the appearance of the popup after loading a page. The delay is expressed in milliseconds, with 500ms, i.e. half a second, as the default value.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This concludes the overview of the options found within the General tab. Knowing their purpose, <strong>you can set them up according to your needs<\/strong>. After doing so,<strong> press the \u201cSave\u201d button at the bottom<\/strong> to save your choices.[\/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=\"583\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab.jpg\" class=\"attachment-full size-full\" alt=\"General Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-768x462.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-620x373.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"536\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-Save.jpg\" class=\"attachment-full size-full\" alt=\"General Tab Save\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-Save.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-Save-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-Save-768x425.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/General-Tab-Save-620x343.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We proceed to the remaining options which relate to the functionality of the login\/sign up popup. More precisely, these enable you to <strong>customize the fields of the register form<\/strong>, i.e. the fields within the popup\u2019s Sign Up tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Access them by navigating to the <strong>Login\/Signup Popup &gt; Fields<\/strong> section in the Fields tab, or by navigating to the <strong>Login\/Signup Popup &gt; Settings<\/strong> section and clicking the \u201cManage\u201d link next to the Registration Fields option. Unfortunately, you can only edit the existing fields with the options provided for each of them. Extending the register form with new fields is limited to one of the premium plugin add-ons.[\/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\/2022\/02\/Fields-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Fields Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fields-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are several different editable aspects of the fields within the register\/sign up form. These depend on the field, of course, and include the<strong> fields label, placeholder text, icon, whether it should be included in the form<\/strong> and what <strong>percentage of the total width of the form it should take.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, for some fields, you can <strong>set the character limits, add extra CSS classes, add the privacy policy text and link,<\/strong> or even <strong>auto-fill the WooCommerce billing and shipping fields with their content<\/strong> of the First Name and Last Name fields.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, <strong>these fields are part of the registration form<\/strong> found in the Sign Up tab <strong>and their properties should be edited according to your needs<\/strong>. After doing so, make sure to <strong>click the \u201cSave\u201d button<\/strong> in the top right corner of the screen to save your choices. Additionally, you should check the Terms and Conditions field and make sure that the link to your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-privacy-policy-to-wordpress\/\">Privacy Policy page<\/a> is properly linked, as it is added using an HTML anchor tag.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us touch on the plugin options intended for styling login popup forms. The first part of those options is located in the Style tab, in the <strong>Login\/Signup Popup &gt; Settings<\/strong> section. Here, you can set the following options:<strong> the position of the popup on the screen, its dimensions, the padding around the login and register forms that are part of that popup, the background color of the popup, the color of the text in the popup, the image that used with the popup, whether it is positioned on the left or right side of the popup window<\/strong> and <strong>what percentage of the total width it occupies.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All these options are straightforward, which is why we won\u2019t delve any further into them. We will note that<strong> the sidebar image is only meant for wider screens<\/strong>. On smaller screens, only the Login and Sign Up tab will be shown. Since this is not obvious from the options presented, we thought it is best to specify.[\/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=\"687\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-Tab-300x213.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-Tab-768x544.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Style-Tab-620x440.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We proceed to the second part of the stylization options, which are related to the login and register forms of the login popup. From the <strong>Form<\/strong> subsection,<strong> you can adjust the propertiesrelated to the tabs and buttons in the tabs.<\/strong> These include the <strong>background color of a tab<\/strong> and the <strong>color of the text in it<\/strong>, both for the active and inactive tab. As for the buttons, you can set their <strong>background color, text color, height<\/strong>, and <strong>border properties<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, <strong>do this only if you choose the Custom button design option<\/strong>. This is something that can be changed later, depending on your preference. But, make sure to <strong>click the \u201cSave\u201d button<\/strong> after choosing the styling options to save your choices and apply them on the website.[\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Form-Fields-Save.jpg\" class=\"attachment-full size-full\" alt=\"Form Fields Save\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Form-Fields-Save.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Form-Fields-Save-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Form-Fields-Save-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Form-Fields-Save-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we come to the last part of the stylization options, found in the Settings tab belonging to the<strong> Login\/Signup Popup &gt; Fields<\/strong> section. Alternatively, you can access this tab by clicking on the \u201cManage\u201d link next to the Form Fields Style option in the<strong> Login\/Signup Popup &gt; Settings<\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Settings tab in the Fields section<\/strong> contains the stylization options for the fields of the login and register forms. These include whether to <strong>add icons next to the related fields, their size, color, container width<\/strong>, and <strong>the background color of the icon container<\/strong>. Also, you can adjust the border color of the form fields and their bottom margin. And, specifically for input fields that make the majority of every form, you can adjust its text and background color, both while focused and unfocused.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In a similar manner as before, <strong>you can adjust these stylization options<\/strong> at this point or later on, depending on your preference. But, if you choose to do so now, don\u2019t forget to <strong>click the \u201cSave Changes\u201d button<\/strong> found at the bottom of the Settings tab.[\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Settings-Tab-Save.jpg\" class=\"attachment-full size-full\" alt=\"Settings Tab Save\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Settings-Tab-Save.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Settings-Tab-Save-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Settings-Tab-Save-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Settings-Tab-Save-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes our overview of the stylization options provided by the plugin. However, there are still two important tabs we have purposefully left for last. These are the Advanced and Info tab, found in the <strong>Login\/Signup Popup &gt; Settings<\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Advanced tab is designed to store any custom CSS you might need<\/strong> to further stylize the login popup and its components past the options provided. While creating the article, we haven\u2019t used this tab. Instead, we have used the <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> section, which is the default location for adding CSS code to a WordPress website.[\/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\/2022\/02\/Advanced-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Advanced-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Advanced-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Advanced-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Advanced-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>As for the Info section, it displays all the possible ways of implementing the login popup available.<\/strong> Therefore, it is an instruction manual on how to add the login popup with this plugin.[\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Info-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Info Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Info-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Info-Tab-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Info-Tab-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Info-Tab-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, as most of these instructions aren\u2019t friendly towards newer WordPress users, we have decided to specifically cover all these uses in separate subsections. We will try to cover them as thoroughly as possible so that they are understandable by most, if not all, WordPress users. Then, depending on your preference, you can choose the way(s) to implement the login popup that is best suited for your website. With that being said, let us begin.[\/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\"><a id=\"adding-the-login-popup-as-menu-item\"><\/a>Adding the Login Popup As a Menu Item<\/h2>\n<p>[\/vc_column_text][vc_column_text]Of the four methods mentioned in the Info tab, adding the login popup as a menu item is the most user-friendly and most frequently used. For this reason, we will also cover it first.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add the login popup as a menu item,<strong> navigate to Appearance &gt; Menus<\/strong> and<strong> select a menu<\/strong> you wish to edit. <strong>Locate the Login\/Signup Popup type of menu items<\/strong> in the Add menu items section on the left. By expanding that subsection, you will see all the menu items that the plugin supports. These include<strong> login, register, lost password, logout, two hello menu items<\/strong>, and <strong>my account menu item<\/strong>. Of these menu items, the first three are only visible to logged-out users, while the rest are only visible to logged-in users. The first three are part of the login popup window and what we will showcase in this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to add any of these items to the selected menu, <strong>tick the checkbox<\/strong> next to it and <strong>click the \u201cAdd to menu\u201d button<\/strong> found below.[\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Menus.jpg\" class=\"attachment-full size-full\" alt=\"Edit Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Menus.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Menus-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Menus-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Edit-Menus-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The selected menu item(s) will be added to the end of the menu<\/strong>, but you can drag and drop it in any other place within the selected menu. For this article, we have opted to add the Login menu item at the end of the existing menu. It will be added as a custom link with a custom CSS class<strong> xoo-el-login-tgr<\/strong> given by the plugin.[\/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\/2022\/02\/Menu-CSS-Classes.jpg\" class=\"attachment-full size-full\" alt=\"Menu CSS Classes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-CSS-Classes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-CSS-Classes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-CSS-Classes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-CSS-Classes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, depending on the menu item that you add, you might see a different CSS class with the prefix \u201cxoo-el-\u201c. However,<strong> regardless of the CSS class, you shouldn\u2019t remove it, as it is required for the login popup modal to work.<\/strong> Furthermore, the same CSS class will be mentioned in the following subsection on adding the login popup using links.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, you should <strong>click the \u201cSave Menu\u201d button at the bottom of the menu screen<\/strong> to save the changes you previously made and <strong>test the menu item and its functionality.<\/strong> In doing so, you should be aware of the visibility policies enforced by the plugin. More precisely, for the login menu item we used, it means testing the website while being logged out.[\/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=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login.jpg\" class=\"attachment-full size-full\" alt=\"Menu Login\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Having found the Login menu item, you only need to click on it to open the login popup modal.<\/strong> It will appear on the screen stylized using the previously mentioned options.[\/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=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Menu Login Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-Popup-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-Popup-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Menu-Login-Popup-620x416.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\"><a id=\"adding-the-login-popup-as-link\"><\/a>Adding the Login Popup As a Link<\/h2>\n<p>[\/vc_column_text][vc_column_text]Apart from adding the link that opens the login popup in the menu, you can also add it anywhere else on your website. In doing so, <strong>you can add an anchor link with specific words as anchors or a regular link with the plugin-specific class<\/strong>. As these two methods are quite similar, we have decided to group them in this section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-links-in-wordpress\/\">Adding a link in WordPress<\/a> can be done using any plugin editor: Gutenberg, Elementor, WPBakery, Classic Editor, etc. However, the process of doing so differs slightly based on which plugin you are using for editing pages. In this article, we will explain how it is done for Gutenberg editor only.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In Gutenberg, one way of adding any kind of links, including <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-anchor-link-in-wordpress\/\">anchor links<\/a>, involves<strong> adding the Paragraph block<\/strong>. In it, you can <strong>insert the text<\/strong> you wish displayed on a certain page. Then, <strong>by highlighting a certain part of the text, you can access additional paragraph options<\/strong>, including the ability to make that part of the text a link.<strong> To make that text into a link, choose the Link option.<\/strong> This will open a small popup window allowing you to<strong> specify the link URL and whether it should open in a new tab.<\/strong> For the link to open the login popup provided by the plugin, you will need to add a specific anchor link.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Depending on whether you wish the Login or Sign Up tab to be opened by default, you will need to<strong> make the URL \u201cwww.mywebsite.com#login\u201d or \u201cwww.mywebsite.com#register\u201d<\/strong>, making sure that the \u201cwww.mywebsite.com\u201d is properly replaced with <strong>your actual website URL<\/strong>. Or, if you find this a bit confusing, you can <strong>simply input #login or #register<\/strong>, which will function just as well, since they will be interpreted as internal links.[\/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\/2022\/02\/Login-Link.jpg\" class=\"attachment-full size-full\" alt=\"Login Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Alternatively, if you want to have a higher level of control over how the link is created, you can select the three dots option and select the <strong>\u201cEdit as HTML\u201d<\/strong> suboption from the menu that appears. This will convert the Paragraph block into HTML code, allowing you to<strong> edit the &lt;a&gt; tag within it as you see fit<\/strong>. For example, you can add a specific ID or CSS class to that link using this method. Of course, doing so requires a bit of HTML, CSS, and overall WordPress knowledge.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, make sure to <strong>update the page\/post<\/strong> where you added the link and then <strong>test it on the front end.<\/strong>[\/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\/2022\/02\/Login-Link-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Login Link Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, the same rules regarding the functionality of the login popup modal apply here. Meaning, even though the paragraph containing the corresponding link can be seen both while logged in and logged out, <strong>the login popup will only appear while a user is logged out of the website<\/strong>, as it is intended. After clicking the link, the same login popup we saw previously will appear. Needless to say, either the Login or Sign Up tab will be opened by default, depending on if you have added the <strong>#login<\/strong> or <strong>#register<\/strong> as the anchor link, respectively.[\/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=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Link-Login-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Link Login Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Link-Login-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Link-Login-Popup-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Link-Login-Popup-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Link-Login-Popup-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As mentioned, <strong>the login popup can also be added using a link with a specific class<\/strong>. To do so, <strong>use the Paragraph block converted to HTML, a custom HTML block, or a Buttons block<\/strong>. We will showcase the third option, as it is the most user-friendly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Add the Buttons block<\/strong> to your page or post. A button will already be added to the <strong>Buttons block<\/strong> after inserting it on the page\/post. By clicking on the button, you will be able to add its text and change some of its properties using the options found in the right-hand menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The most important option for this process is found in the Advanced section and is called <strong>Advanced CSS class(es)<\/strong>. Depending on what type of button style you have selected \u2013 fill or outline \u2013 <strong>a custom class will already be present:<\/strong> is-style-fill or is-style-outline, respectively. These will be added by WordPress by default. What you need to do is<strong> insert an additional CSS class \u2013 xoo-el-login-tgr or xoo-el-reg-tgr<\/strong>, depending on if you wish that the login popup has the Login or Sign Up tab opened by default. Whichever of these you choose, make sure to separate it with a space from the CSS class inserted by WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we have opted to add the <strong>xoo-el-reg-tgr<\/strong> class, as seen in the screenshot below.[\/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=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button.jpg\" class=\"attachment-full size-full\" alt=\"Sign Up Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Button Link Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Additional-CSS-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Additional-CSS-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Additional-CSS-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After updating the page, we have gotten the following result.[\/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\/2022\/02\/Sign-Up-Button-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Sign Up Button Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Sign-Up-Button-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As mentioned previously,<strong> the login popup will only be displayed to logged-out users<\/strong>. But, in this case, both the button and the login popup will be hidden from logged-in users, as opposed to the Paragraph block method.[\/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=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Popup-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Button Link Popup Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Popup-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Popup-Preview-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Popup-Preview-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Button-Link-Popup-Preview-620x416.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\"><a id=\"adding-the-login-popup-and-inline-form-using-shortcode\"><\/a>Adding the Login Popup and Inline Form Using a Shortcode<\/h2>\n<p>[\/vc_column_text][vc_column_text]Finally, we have come to the most challenging method within this article \u2013 the shortcode. <strong>The plugin offers two shortcodes \u2013 the login popup and the login inline form shortcode.<\/strong> And while calling shortcodes seems frightening for most WordPress users, using the two provided by this plugin is made much easier thanks to the instructions left within the Info section. For each of the shortcodes mentioned, the plugin author has included a list of attributes, the expected and default values of those attributes, as well as what each of these attributes represents.[\/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\/2022\/02\/Shortcodes.jpg\" class=\"attachment-full size-full\" alt=\"Shortcodes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcodes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcodes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcodes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcodes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moreover, you can also see examples of how these two shortcodes can be called. We have used them in our article as well. But, before we delve into how the shortcode calls can be added to your website, it is worth mentioning that<strong> this process depends on the page editor<\/strong> plugin you are using: Gutenberg, Elementor, WP Bakery, Classic Editor, and so on. As with previous examples, we will explain only the Gutenberg editor. Therefore, if you aren\u2019t certain how the same process is done in your editor choice, we advise reviewing our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/#using-custom-shortcodes\">the use of custom shortcodes<\/a> beforehand to get a better grasp on this topic. With that being said, let us continue with our explanation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a shortcode using a Gutenberg editor, you will need to use the Shortcode block. <strong>Add a Shortcode block<\/strong> to a page or post where you wish to display the login popup shortcode. Then, <strong>enter the shortcode call whose option choices best suit your website<\/strong>. Of course, to do so, consult the helpful overview shown above. For the article, we have used the default example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[xoo_el_action type=\"login\" display=\"button\" text=\"Login\" change_to=\"logout\" redirect_to=\"same\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this shortcode, we made the Login tab open by default, while the login link is displayed as a button and with Login as the text. Furthermore, after logging in, the link text will change into logout, and after logging in, the user will remain on the same page, i.e. there will be no redirection to an alternative page.[\/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=\"447\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Login Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Shortcode-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Shortcode-768x354.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Shortcode-620x286.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having explained that, the only thing that remains is to update the page and test the login popup functionality on the front end. As stated before, to do so, <strong>you will need to be logged off<\/strong>. Since we have specified that \u201cLogin\u201d is our link test, after clicking it, the popup will appear.[\/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\/2022\/02\/Shortcode-Login-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Login Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Popup-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Login Popup Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Popup-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Popup-Preview-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Popup-Preview-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Shortcode-Login-Popup-Preview-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, we must mention that<strong> in some cases, your initial login\/register link won\u2019t be displayed as a button<\/strong>, despite it being specified as such within the shortcode call. We have purposefully left that as an example in one of our previous shortcodes. Thankfully, such a minor issue can be solved quite easily using CSS code. This will be shown in the <a href=\"#additional-tips\">Additional tips section<\/a>, later in the article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us explain how you can display the inline form as well. While it is not the point of our article, it is an additional functionality of the plugin that we thought is worth showing to our readers.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add the inline login\/sign up form on your website, <strong>add a Shortcode block<\/strong> to one of your pages or posts and <strong>enter the appropriate shortcode call inside it<\/strong>. Of course, you can consult with the explanation provided within the Info section the inline form shortcode. In our case, we have used the following shortcode call:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[xoo_el_inline_form active=login]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]meaning that we have specified that, of the two available tabs, the Login tab will be opened by default.<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=\"440\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inline-Form.jpg\" class=\"attachment-full size-full\" alt=\"Login Inline Form\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inline-Form.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inline-Form-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inline-Form-768x349.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inline-Form-620x282.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After inserting the shortcode call,<strong> update the page<\/strong> and <strong>test the inline form from the frontend<\/strong>. Similar to all other methods, <strong>to view the inline form, users must be logged out of the website.<\/strong> As seenin the screenshot below, the form will be displayed without the side image. This is the same display the login popup will have on smaller screens, which we already mentioned while discussing the plugin options 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=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Form-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Login Form Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Form-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Form-Preview-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Form-Preview-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Form-Preview-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, <strong>the plugin also has a Forgot Password form, which is not a part of the two prominent tabs.<\/strong> While we have mentioned it, we haven\u2019t showcased it in the article yet. The reason for it is that <strong>it is accessed by following the \u201cForgot Password?\u201d link found in the Login tab<\/strong>. Therefore, we thought it best to showcase the display of all the tabs with a suitable gif.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-case-study-video-holder\" style=\"border:1px solid #ebebeb\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Result-video-original.mp4\" \/>\n\t<\/video>\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\"><a id=\"additional-tips\"><\/a>Additional Tips<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even though the plugin we covered has its set of stylization options, <strong>knowing how to create additional CSS code to tweak some styling errors can be beneficial<\/strong>. For example, it can help you stylize the Login link as a button if it doesn\u2019t appear that way. Of course, doing so requires a moderate amount of HTML and CSS knowledge.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Nevertheless, we will try to explain the code creation process below, as thoroughly as possible. If something remains unclear to you even after reading this section of the article, we advise brushing up your knowledge by reading our <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-css-guide\/\">general overview of CSS code<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create the CSS code needed for stylization, you need to know how to inspect a certain element using the developer tools of your current browser. To do so, <strong>right-click on the element you wish to change<\/strong> and <strong>select the \u201cInspect\u201d option<\/strong> from the menu which opens.[\/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=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Login Link Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Inspect-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Inspect-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Link-Inspect-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the Elements tab of your current browser and position you on the element you right-clicked. Then, you will need to <strong>examine the HTML structure<\/strong> to figure out the appropriate CSS selector you will need to use for the code. You might need to scroll up or down the HTML structure to find the most appropriate CSS selector. Each time you do so, the current HTML element will be highlighted on the screen, so you can keep track of it easily.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this particular case, we didn\u2019t need to scroll up or down the structure, as the Login link was a simple <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/a\" target=\"_blank\" rel=\"noopener\">&lt;a&gt;<\/a> tag. Looking at it, we have noticed that it has the following four classes: xoo-el-action-sc, button, btn, and xoo-el-login-tgr.[\/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=\"579\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Login Inspect Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inspect-Elements-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inspect-Elements-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Inspect-Elements-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These classes are all added by the Login\/Signup Popup plugin, but only <strong>the two with the prefix \u201cxoo-el-\u201d are used by the plugin<\/strong>. The other two \u2013 button and btn are added assuming that they will be used by your current theme to apply theme-specific button design. But, if they remain unused, the link design will remain unchanged.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To solve this, you will need to create a CSS code which targets the link specifically and apply the desired stylization. As one of the possible CSS selectors, we can use one or even all the CSS classes it contains. We have opted to use the following CSS selector: <strong>.xoo-el-action-sc.button.btn<\/strong>, i.e. only the three of the four available classes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The only thing that remains is to <strong>add the CSS declarations<\/strong> which stylize the &lt;a&gt; tag such that it appears as a button while maintaining the same style as the theme we are using. This is expressed with the following pseudocode.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.xoo-el-action-sc.button.btn {\r\n\/\/ Add CSS declarations here\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Unfortunately, adding the right CSS declarations is not an easy task, since it needs to be done on a case-by-case basis. Therefore, we can\u2019t suggest any code which can be applied to all websites. Instead, we will leave you with the code which was sufficient in our case. Of course, we have to note that <strong>it is not meant to be simply copied and pasted<\/strong>, but used as a starting point while creating code which best suits your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.xoo-el-action-sc.button.btn {\r\ncolor: #fff;\r\nbackground-color: #1f1f1f;\r\nborder: 1px solid #1f1f1f;\r\nposition: relative;\r\ndisplay: inline-block;\r\nfont-size: 13px;\r\nline-height: 2em;\r\nfont-weight: 700;\r\npadding: 15px 40px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Such <strong>code can be inserted<\/strong> either<strong> in the Appearance &gt; Customize &gt; Additional CSS<\/strong> section<strong> or in the Advanced tab<\/strong> provided by the plugin. We have opted for the former, as previously stated. After inserting the above-mentioned CSS, we have gotten the following result for the login link which opens the popup. With it, we conclude the article.[\/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\/2022\/02\/Login-Button.jpg\" class=\"attachment-full size-full\" alt=\"Login Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Login-Button-620x331.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\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]A login popup modal is a great addition to any WordPress membership website or e-commerce store, as it provides a more streamlined user experience to your website visitors and customers. Adding it is relatively simple using a wide range of WordPress plugins that offer this feature.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we have covered one such plugin called Login\/Signup Popup. Since it requires a bit of overall WordPress knowledge, we strived to explain all the steps thoroughly. We are sure that, by following our instructions, all WordPress users will be able to add a login popup modal to their website, be it either as a menu item, link, shortcode, or an automatic popup.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, in the article, we have added some key points regarding CSS stylization which will be helpful to any intermediate users willing to learn more. Therefore, whether you need to add a WordPress login popup modal or simply want to brush up on your existing WordPress knowledge, this article is the one that you should bookmark and review at a later date.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need a simple and clear way for users to log in? Check out our take on the WordPress login popup modal.<\/p>\n","protected":false},"author":11229,"featured_media":34720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[212,4,13],"class_list":["post-34588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-login","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34588","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\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=34588"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34720"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}