I wanted to add a WordPress modal login to the website Gorilla Nutrition (www.gorillanutrition.ca)which has been a ongoing project for a number of months. I would like to have a client area where users can track orders and invoices. This would require having a login. I first looked to see what plugins were available to see if any worked the way I had hoped. 2 plugins that looked promising were paid plugins on codecanyon (such as this one https://codecanyon.net/item/modal-login-register-forgotten-wordpress-plugin/) but I wanted to see if I could accomplish the task for free. I don’t mean to say anything bad about any of the plugins in this blog but rather to show how I was able to arrive at what I was trying to accomplish.

Ciusan Register Login (https://wordpress.org/plugins/ciusan-register-login/)

It’s very rare that i’ll take a chance on a plugin that hasn’t been around for a while or has very little downloads such s this WordPress Modal Login plugin which only had 100+ downloads. I was excited when I saw the screenshots as this plugin looks aesthetically pleasing. However I was disappointed after installing it since it simply didn’t work. This popup was what I was looking for in terms of having the login popup in a modal but once again another plugin that failed me since it simply didn’t work. After I installed this plugin and tried to login it would simply redirect me to a login page. What is the point of that ? I followed the installation instructions which were no hep and I wasn’t going to start going through the forums to debug what should have worked after a simple install. I decided to see what else was available before I decided to take the time debugging.

SimpleModal Login (https://en-ca.wordpress.org/plugins/simplemodal-login/)

I was expecting a lot more from this plugin. Based on the screenshots it wasn’t as pretty as the previous but it had 10000+ active installs which typically means that it’s a credible plugin. Once again I was disappointed. Maybe you need to be a programmer to get this WordPress Login plugin working properly. After I installed the plugin I followed the instructions and placed the short code at the top of the header but after testing it out I found the Login link doesn’t change to Logout once your’e logged in. This unfortunately is a flaw that I wouldn’t want on my sites. Much like the last plugin discussed I wasn’t going to start researching why this plugin wasn’t working as it should have.

Sam Modal Login (https://wordpress.org/plugins/sam-modal-login/)

With only 60+ active installs I was waiting to once again be disappointed due to the low number of downloads but I was pleasantly surprised. The behaviour of the plugin was exactly what I was looking for and with a few CSS and code touch ups I had exactly what I wanted. I was also looking to add a Facebook login integration. This was achieved by installing another plugin called Nextend Facebook Connect. Here are the steps I took to get the plugin working as it currently looks and functions on the Gorilla Nutrition website.

Step 1: Install the plugin. You can search for it in the WordPress plugin directory in the WordPress admin or download it here: https://wordpress.org/plugins/sam-modal-login/

Step 2: Configure the plugin as you’d desired by visiting Settings->Sam Modal Login. You can adjust the CSS, redirect page and customize the site registration email.


Step 4: Add the following shortcode to your sites header: 

[modal_login login_text=”Login” logout_text=”Logout”]

Step 5: Install the Nextend Facebook Connect plugin through the WordPress plugin directory in the dashboard  by downloading it at https://wordpress.org/plugins/nextend-facebook-connect/

Step 6: Once installed edit the following file /wp-content/plugins/sams-modal-login/sams-modal-login.php at about line 505 under <div class=”ml-content”> and add:

<a CLASS=”loginWithFb” href=”https://gorillanutrition.ca/wp-login.php?loginFacebook=1&redirect=https://gorillanutrition.ca” onclick=”window.location = ‘https://gorillanutrition.ca/wp-login.php?loginFacebook=1&redirect=’+window.location.href; return false;”> LOGIN WITH FACEBOOK </a>

Be sure to edit the above line to reflect your websites URL.

Step 6: Add the following CSS to your global CSS or to the plugins CSS:

a.loginWithFb {
background: #3B579D none repeat scroll 0px 0px;
color: #FFF;
border-radius: 4px;

That’s it! Still needs some touch ups but this was what I originally wanted to accomplish.

You should now have a login that looks like the image below and can see it in action by visiting https://www.gorillanutrition.ca and click on the login link in the header.



If you would like to hire a professional WordPress Developer to help you get this done for you then contact NexToronto Web Development & Internet Marketing. We are a Toronto based web development and digital marketing company that are WordPress enthusiasts ready to help businesses grow and stand apart from competitors. Get professional web development and internet marketing assistance today and contact NexToronto.