Login and Register Setup

Creating Login/Register Forms

If you want to allow users to register and login into your website you can set up login/register popup windows or pages. If you imported a demo with these features, this will already be done for you. If not, please select one of the following tabs:

Creating Login/Register Pages

If you want to use pages instead of popups for users to register and login do the following:

Creating A Login Page

  1. Go to Pages > Add New and give your page a title and click Publish.
  2. Click the blue Edit with Elementor button at the top of the page to open the Elementor editor.
  3. From the left side find the Form element and drag into the area marked Drag widgets here.
  4. You can change the appearance of the form under the Style tab.
  5. Click Update at the bottom of the page to save your page.

Creating A Register Page

If you are using BuddyPress you need to use their Register page instead. This page should have been created automatically when activating the Plugin. If it has not, create a new page called “Register” and publish it. Now go to Settings > BuddyPress > Pages and select this page from the Registration dropdown.

  1. Go to Settings > General and make sure the Membership checkbox is checked.
  2. Go to Pages > Add New and give your page a title and click Publish.
  3. Click the blue Edit with Elementor button at the top of the page to open the Elementor editor.
  4. From the left side find the Form element and drag it into the area marked Drag widgets here.
  5. From the Form Type dropdown menu change the value to Register.
  6. You can change the appearance of the form under the Style tab.
  7. Click Update at the bottom of the page to save your page.

Creating A Lost Password Page

  1. Go to Pages > Add New and give your page a title and click Publish.
  2. Click the blue Edit with Elementor button at the top of the page to open the Elementor editor.
  3. From the left side find the Form element and drag it into the area marked Drag widgets here.
  4. From the Form Type dropdown menu change the value to Lost Password.
  5. You can change the appearance of the form under the Style tab.
  6. Click Update at the bottom of the page to save your page.
  7. To add a Lost Password link to your login form go back to the Login page and from the left side find the Text element and drag it into the area marked Drag widgets here below the Form element.
  8. Add the following, replacing the page URL with your own:
<a href="http://your-domain.com/lost-password">Lost Password</a>
  1. Customize the appearance of the link under the Style tab.

Create Login/Register Popups

If you want to use popups instead of pages for users to register and login do the following:

Creating A Login Popup

  1. Go to GhostPool Core > Template Editor and click Add New.
  2. Give your template a title and from the Template Settings panel on the right select Popup from the Type dropdown, click the Publish/Update button to save these changes. Finally click the Edit with Elementor button.
  3. From the left side find the Form element and drag it into the area marked Drag widgets here.
  4. Click the cog icon in the bottom left corner of the page to open the Post Settings menu.
  5. Click the Popup Settings toggle at and in the Open By Selector text field give your popup the class name .gp-login-popup
  6. Save your template.

Creating A Register Popup

If you are using BuddyPress you need to use their Register page instead. This page should have been created automatically when activating the Plugin. If it has not, create a new page called “Register” and publish it. Now go to Settings > BuddyPress > Pages and select this page from the Registration dropdown.

  1. Go to GhostPool Core > Template Editor and click Add New.
  2. Give your template a title and from the Template Settings panel on the right select Popup from the Type dropdown, click the Publish/Update button to save these changes. Finally click the Edit with Elementor button.
  3. From the left side find the Form element and drag it into the area marked Drag widgets here.
  4. Select Register from the Form Type dropdown.
  5. Click the cog icon in the bottom left corner of the page to open the Post Settings menu.
  6. Click the Popup Settings toggle at and in the Open By Selector text field give your popup the class name .gp-register-popup
  7. Save your template.

Creating A Lost Password Popup

  1. Go to GhostPool Core > Template Editor and click Add New.
  2. Give your template a title and from the Template Settings panel on the right select Popup from the Type dropdown, click the Publish/Update button to save these changes. Finally click the Edit with Elementor button.
  3. From the left side find the Form element and drag it into the area marked Drag widgets here.
  4. Select Lost Password from the Form Type dropdown.
  5. Click the cog icon in the bottom left corner of the page to open the Post Settings menu.
  6. Click the Popup Settings toggle at and in the Open By Selector text field give your popup the class name .gp-lost-password-popup
  7. Save your template.
  8. To add a Lost Password link to your login form go back to the Login popup and from the left side find the Text element and drag it into the area marked Drag widgets here below the Form element.
  9. Add the following:
<a href="#" class="gp-lost-password-popup">Lost Password</a>
  1. Customize the appearance of the link under the Style tab.

Linking to Login/Register Forms

Once you’ve created your login and register pages or popups you will want to create links to them so the user can find these forms. Usually links to these pages will be added in a menu.

Linking To Pages

  1. Go to Appearance > Menu and select or create the menu you want to use.
  2. From the Pages toggle insert the Login and Register pages you just created into your menu.
  3. Check the Hide for logged in users checkbox so these links are only shown for logged out user.
  4. Click Save Menu.

Linking To Popups

  1. Go to Appearance > Menu and select or create the menu you want to use.
  2. From the Custom Links toggle, add a link to the menu with the URL value set to # and in the CSS Classes text field add gp-login-popup
  3. Check the Hide for logged in users checkbox so these links are only shown for logged out user.
  4. Do the same for the Register page but set the CSS Classes text field add gp-register-popup