WordPress Plugin For Advanced Customizable Login page : WP Admin White Label Login – Documentation
A. Installing Instructions
- Unzip [codecanyon-plugin].zip
- Upload all the files to the /wp-content/plugins/wp-admin-white-label-login
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- For customizing the plugin settings, click on WP Admin White Label Login Menu option menu in WordPress left admin menu.
Once the plugin is installed and activated you will find a menu named “WP Admin White Label Login Menu” in the left menu bar of the admin menu. Once you click on that menu, you will go to menu listing page. You can click on Add New. But before that lets create a menu first.
B. Customizer Options
1. Enable Plugin
The plugin is turned on at the time of installation. In case you want to disable the plugin or if you think our plugin is causing some issue, check the option to true. This option acts as a kill switch.
2. Select Template
Select template has two settings:
There are 27 different templates which you can choose from. Each template providing a different layout from the other. The plugin uses the built-in login functionality of WordPress and only provides you the design aspects. Select a Template of your liking, click publish and refresh the page.
Once you have selected a template, you can use the template as it is or you can customize different aspects of the templates such as Component colors and Backgrounds.
- Enable customization: Turn on/off the provided customization.
- Background: The plugin provides you three different background options.
- Color: You can choose from a wide range of colors and even set transparent values or preset values.
- Image: You can choose any image from your media library and set it as your form background. Image size may slow your load time so always use optimized images. You can also set background size, repeat and position. The background are set using jarallax.js so all your backgrounds get a parallax effect by default.
- Video: You can set video background to your login form as well. Video background may slow your load time. You can add videos from sources link YouTube, Vimeo or Add your own .mp4 format video from your media library. You can set properties like, Disabled video on android, ios devices, Play Video only when visible, mute volume, video start and end time.
- Template colors: We have made coloring easy for you by allowing you to change only template colors. Primary colors are the most seen colors, Secondary colors are mostly link hover colors and Tertiary Color are any extra colors to match your template set. Please check the template component and color diagram for better understanding different components and names.
- Social Icon Colors: You can set the color for the footer social icons here:
- Icon Color: Set the color for the icons
- Tooltip Text: Set the color for the tooltip text
- Tooltip Background: Set the color for the tooltip background
3. Header Section
Header section consist of two components
- Header Title: You can add your header title here. The default value for this is your site title.
- Header Description: You can add your header description here. The default value for this is your site tagline.
- Hide Logo: Turn logo on/off from this settings. Some templates look nice without a logo while for some, your logo may be the greatest asset.
- Set logo: You can set a logo from the media library. The default logo is the WordPress brand logo.
- Logo URL: Set where clicking the logo leads to.
- Logo Hover Title: Set information to show on logo hover.
4. Display Options
Here you can select option to show or hide different login page components such as:
- Lost password
- Remember me
- Back to option
5. Login form
Login for consist of two sections
You can set your form components here like:
- Lost Password: Set the lost password text here
- Remember Me text: Set the Remember me text here
- Registration Text: Set the Registration text here
- Registration Link Text: Set the Registration link text here
- Registration URL: You can set the Registration url here. It comes handy if you have a custom registration page.
- Back to Text: Set the back to text here.
- Back to URL: Set the back to text URL here. It will lead you to your homepage by default.
6. Google Captcha
The plugin comes with a inbuilt Google Captcha security. You can turn on/off the Google captcha with the Enable Google reCaptcha Option. You can set the google captcha in the Login and the inbuilt registration form. You will need to set the Site Key and Secret Key for the Google Captcha. You can also set an error message.
How to get your Google recaptcha site Key and Secret key
- Go to https://www.google.com/recaptcha/intro/android.html
- Click on Get reCaptcha
- Go to Register a new site section
- Add a Label to recognize your settings for later
- Choose reCaptcha V2
- Add Your domain name
- Accept the terms of service
- Click on Register
- Go to Keys section to get your Site Key and Secret Key
7. Social Login
The plugin comes with in-built social login as well. It supports three platforms: Facebook, Twitter and Google+
- Social Header: Set a header title for the social login methods
- Or Text: Some templates uses or text instead of the Social Header
Set the Enable Facebook Login option to enable Facebook login. You need to set a Facebook App and assign a Facebook App ID and App secret. You can also assign a Label text.
Setting up your Facebook App
- Go to https://developers.facebook.com/ and make sure you are signed in.
- Go to My app and click on Add a New App
- Enter Display Name (The name you want to associate with this App ID) and a Contact Email
- Look for Facebook Login and check on Setup
- Select Web as a platform
- Add your sites URL, save and Continue
- Then go to Facebook Login->Settings and add a Valid OAuth redirect URIs. Your Valid OAuth redirect URIs for this plugin will be <Your site URL>/wp-login.php?wpawll_login_id=facebook_check
- Add the URL and click on save changes
- On the top of the screen you will find Status. Make sure it is Turn on to green.
- Choose a Category and save
- You can find your App ID at the top of your screen and Go to Settings-> Basic to get your APP Secret
Set the Enable Twitter Login option to enable Twitter login. You need to set a Twitter App and assign a Consumer Key and Consumer Secret. You can also assign a Label text.
Setting Up your Twitter App
- Go to https://apps.twitter.com/ and sign in
- Click on Create a New App
- Add a Application Name, Description and your Website. You can set the Callback URL as your sites URL.
- Agree to the Terms and click Create Your Twitter Application
- Go to Keys and Access Token to get your Consumer Key and Consumer Secret.
Set the Enable Google Login option to enable Google+ login. You need to set a Google Project and assign a Consumer Key and Consumer Secret. You can also assign a Label text. Make sure your have a Google+ Account. A Google account and a Google+ Account may not be the same.
Setting Up your Google Project
- Go to https://console.developers.google.com/ and sign in
- Create a new Project
- Add a project name and click on Create
- Click on Enable APIs and Services
- Select Google+ API and enable it
- Click on Create Credentials
- Set What data will you be accessing? As User Data
- Click on What credentials do i need?
- Next you will need to create an OAuth 2.0 client ID
- Set a name and Authorized redirect URIs as <Your site URL>/wp-login.php?wpawll_login_id=google_check and create
- Set up Set up the OAuth 2.0 consent screen add email and Product name click on continue.
- Copy the Client ID and add them to the plugin.
- Go to OAuthconsent screen tab and add your Homepage URL.
- Go back to Credentials tab click to edit your newly created OAuth 2.0 client IDs. You will find your Client Secret there. copy and add it to the plugin.
8. Additional Content Block
For some templates you can add additional text to them to make the templates full. You can add any HTML you like. Here are some of the samples according to Templates to get the same design as in the demo.
<div class="wpawll-additional-content-template-1"> <div class="wpawll-latest-news">Latest News</div> <div class="wpawll-headline">Puntos Premia is cash.</div> <div class="wpawll-tagline">Great Theme for your Business and Construction.</div> <div class="wpawll-readmore"><a href="#">Read more</a> <i class="dashicons dashicons-arrow-right-alt"></i></div> </div>
<div class="wpawll-additional-content-template-11"> <div class="wpawll-headline">Get your deal?</div> <div class="wpawll-tagline">If you do not have an account and new to this site and chewck what the deal.</div> </div>
<div class="wpawll-additional-content-template-15"> <div class="wpawll-template-15-image-wrapper"> <img src="https://demo.accesspressthemes.com/wordpress-plugins/wp-admin-white-label-login/template-15/wp-content/uploads/sites/16/2019/01/left-logo.png"/> </div> <div class="wpawll-headline">Create a Free Account and get access to all the resources</div> <div class="wpawll-tagline">While opening any application, first thing isers do is login to your app or website. Which means it is the first thing.</div> </div>
<div class="wpawll-additional-content-template-17"> <div class="wpawll-headline">Hello World</div> <div class="wpawll-template-17-image-wrapper"> <img src="https://demo.accesspressthemes.com/wordpress-plugins/wp-admin-white-label-login/template-17/wp-content/uploads/sites/18/2019/01/mac-hero.png"/> </div> </div>
<div class="wpawll-additional-content-template-19"> <div class="wpawll-headline">Login Info</div> </div>
Add this to the Registration Text field
<div class="wpawll-registration-content-template-19"> <div class="wpawll-headline">New Customer</div> <div class="wpawll-template-19-image-wrapper"> By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addressess, view and track your order in your account and move. </div> </div>
<div class="wpawll-additional-content-template-20"> <div class="wpawll-headline">Best consultant</div> <div class="wpawll-template-20-image-wrapper"> By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addressess, view and track your order in your account and move. </div> </div>
<div class="wpawll-additional-content-template-22"> <div class="wpawll-template-22-image-wrapper"> <img src="https://demo.accesspressthemes.com/wordpress-plugins/wp-admin-white-label-login/template-22/wp-content/uploads/sites/24/2019/01/right-background-img.png"> </div> </div>
<div class="wpawll-additional-content-template-23"> <div class="wpawll-template-23-image-wrapper"> <img src="https://demo.accesspressthemes.com/wordpress-plugins/wp-admin-white-label-login/template-23/wp-content/uploads/sites/23/2019/01/logo-left.png"> </div> <div class="wpawll-headline">Welcome to </div> <div class="wpawll-tagline">Existing Customer</div> </div>
<div class="wpawll-additional-content-template-24"> <div class="wpawll-headline">We love creative Business Ideas</div> <div class="wpawll-tagline">Get your Free Account</div> <button class="wpawll-frontend-button">Join now</button> </div>
<div class="wpawll-additional-content-template-25"> <div class="wpawll-headline">We love creative Business Ideas</div> <div class="wpawll-tagline"> <ul> <li>Leverage agile frameworks to provide a</li> <li>Robust Synopsis for high level overviews</li> <li>Iterative Approaches to corporate strategy</li> </ul> </div> <div class="wpawll-button-wrapper"> <button class="wpawll-frontend-button">Join now</button> </div> </div>
<div class="wpawll-additional-content-template-26"> <div class="wpawll-headline">We love creative Business Ideas</div> <div class="wpawll-tagline">Login and check whats new!</div> </div>
9. Footer Section
Footer Section has two components
- Footer Text: Add your footer text here. You can also add links as
Copyright © 2019 <a href="#">AccessPress Themes.</a>
- Social Icons: You can add social icons to the footer. Select the icon you like add a URL and the Tooltip Text. You can Delete the the icon or leave the URL field empty to not show the icon in the frontend.
10. Custom CSS
If you are not satisfied with the currently design and if all the available customization settings are not enough for you then you can add your Own Custom CSS in this section.