Manage Frontend Login Forms

Creating Frontend Login Form

This addon provides a shortcode called [wppcp_frontend_login] to create frontend login forms. You can add this shortcode to a new page and make it as default login page in the settings section. Also you can use this shortcode on any other page to display a frontend login form to users. Following screenshot previews page with frontend login shortcode in edit mode.

wppcp_fr_3

Users can view the login form on frontend as shown in the following screenshot.

wppcp_fr_4

Once form is submitted, addon will check the validity of user login details and display the necessary errors as shown in the following screenshot.

wppcp_fr_5

Once user is successfully logged in, user will be redirected to the same page with a greeting message as shown in the following screenshot.

wppcp_fr_6

Using Login Form Options

Login form shortcode comes with list of attributes to get different login related features. Let’s take a look at the functionality of each option.

  • redirect_url  (Ex: [wppcp_frontend_login redirect_url= ‘http://www.example.com’] ) – This attribute is used to configure the redirection URL after login. By default, user will be redirected to the current page. You can define a custom URL for redirection using this attribute. This attribute also supports some predefined options and we will be looking at them in next section .
  • logged_in_message  (Ex: [wppcp_frontend_login logged_in_message= ‘off’] )   – This attribute is used to display/hide the greeting message after login. By default this is enabled and you can disable it by using off as the value.

Now, we can look at the available predefined values for redirect_url.

  • previous_url  (Ex: [wppcp_frontend_login     redirect_url= ‘previous_url’] ) – This redirect value is used to redirect the user to the previous page/post after login. This is useful when you restrict a post/page and redirect the user to login. Once user is logged in, user will be redirected to previous page allowing user to view the content again .
  • private_page  (Ex: [wppcp_frontend_login    redirect_url= ‘private_page’ ] )   – This redirect value is used to redirect the user to their private page after login. This is useful when you directly want the user to login and view the private content assigned by the admin.
  • backend_profile  (Ex: [wppcp_frontend_login    redirect_url= ‘backend_profile’ ] )   – This redirect value is used to redirect the user to their backend WordPress profile page after login.
[mpc_textblock content_width=”100″ font_color=”#ffffff” font_size=”22″ margin_divider=”true” mpc_tooltip__border_divider=”true” mpc_tooltip__padding_divider=”true” class=”wpexpert-wpro-ad-free-docs-static-text”]WPPCP Frontend Login[/mpc_textblock][mpc_animated_text duration=”1000″ delay=”2650″ text_font_preset=”mpc_preset_17″ text_font_color=”#ffffff” text_font_align=”center” text=”Simple Setup|||Advanced Restriction Rules|||Priority Support|||” text_border_divider=”true” text_padding_divider=”true” disable_sides=”true” sides_font_preset=”mpc_preset_17″ sides_font_color=”#ffffff” sides_font_align=”center” border_divider=”true” padding_divider=”true” margin_divider=”true” class=”wpexpert-wpro-ad-free-docs-animated-text”][mpc_button preset=”mpc_preset_29″ url=”url:https%3A%2F%2Fwww.wpexpertdeveloper.com%2Fwppcp-frontend-login-addon|||” font_preset=”mpc_preset_20″ font_color=”#ffffff” font_size=”16″ font_transform=”uppercase” font_align=”center” title=”VIEW MORE” background_color=”#2bb3e7″ border_divider=”true” border_css=”border-top:2px;border-right:0px;border-bottom:2px;border-left:0px;border-color:#ffffff;border-style:solid;border-radius:0px;” padding_divider=”true” padding_css=”padding-top:12px;padding-right:32px;padding-bottom:12px;padding-left:32px;” margin_divider=”true” margin_css=”margin-top:11px;” hover_font_color=”#2bb3e7″ hover_background_color=”#ffffff” hover_background_effect=”expand-horizontal” hover_background_offset=”0″ hover_border_divider=”true” hover_border_css=”border-radius:0px;” mpc_tooltip__border_divider=”true” mpc_tooltip__padding_divider=”true” class=”wpexpert-wpro-ad-free-docs-button”]