Ali Jafarian

Modal logins are a popular choice for any website login since they provide easy login access from any page or post. Today we’re going to build a login modal for WordPress using Bootstrap.

Let’s get started!

1) Create the modal HTML

First we need to create the modal HTML. We’ll use most of the default Bootstrap HTML found in their docs – https://getbootstrap.com/javascript#modals. Be sure to give the modal a unique id like “login-modal” so it can be referenced. We’ll also add our own form HTML for the login portion.

<div id="search-modal" class="modal fade">
  	<div class="modal-dialog">
	    <div class="modal-content">
		  	<div class="modal-header">
		    	      <button type="button" class="close" data-dismiss="modal">×</button>
		    	      <h2>Member Login</h2>
		  	</div>
		  	<!--/.modal-header-->
		  	<div class="modal-body">
			    <form action="" method="" name="">
				  	<div class="form-field">
				  		<label>Username:</label>
				  		<input type="text" class="login-username" name="log" />
				  	</div>
				  	<div class="form-field">
				  		<label>Password:</label>
				  		<input type="password" class="login-password" name="pwd" />
				  	</div>
				  	<div class="form-field">
						<label for="rememberme" class="mm-remember-me">
							<input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">
							Remember me
						</label>
					</div>
				  	<div>
				  		<button type="submit" name="wp-submit" class="btn btn-primary btn-block">Login</button>
				  	</div>
				</form>
		  	</div>
		  	<!--/.modal-body-->
	  	</div>
	  	<!--/.modal-content-->
  	</div>
  	<!--/.modal-dialog-->
</div>
<!--/.modal-->

2) Add the WP Login Parameters

Next we’ll add the needed form parameters – method and action – to make our form work with WordPress. The method will be a post request and the will be the full URL of your website. For example, the action for my website would be http://alijafarian.com/. We’ll also give the form a name parameter of loginform, which is the WP default for loggning in.

<form action="http://yourwebsite.com/wp-login.php" method="post" name="loginform">

3) Add the Modal to footer.php

Lastly, we’ll add the modal HTML to the bottom of our footer.php file so it’s accessible from any page or post on our site. Below is an example of adding the modal HTML to the footer.php file of WordPress theme, TwentyFourteen. Your footer.php will look slightly different depending on your specific theme.

<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?>

		</div><!-- #main -->

		<footer id="colophon" class="site-footer" role="contentinfo">

			<?php get_sidebar( 'footer' ); ?>

			<div class="site-info">
				<?php do_action( 'twentyfourteen_credits' ); ?>
				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>
			</div><!-- .site-info -->
		</footer><!-- #colophon -->
	</div><!-- #page -->
	
	<div id="search-modal" class="modal fade">
	  	<div class="modal-dialog">
		    <div class="modal-content">
			  	<div class="modal-header">
			    	      <button type="button" class="close" data-dismiss="modal">×</button>
			    	      <h2>Member Login</h2>
			  	</div>
			  	<!--/.modal-header-->
			  	<div class="modal-body">
				    <form action="http://yourwebsite.com/wp-login.php" method="post" name="loginform">
					  	<div class="form-field">
					  		<label>Username:</label>
					  		<input type="text" class="login-username" name="log" />
					  	</div>
					  	<div class="form-field">
					  		<label>Password:</label>
					  		<input type="password" class="login-password" name="pwd" />
					  	</div>
					  	<div class="form-field">
							<label for="rememberme" class="mm-remember-me">
								<input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">
								Remember me
							</label>
						</div>
					  	<div>
					  		<button type="submit" name="wp-submit" class="btn btn-primary btn-block">Login</button>
					  	</div>
					</form>
			  	</div>
			  	<!--/.modal-body-->
		  	</div>
		  	<!--/.modal-content-->
	  	</div>
	  	<!--/.modal-dialog-->
	</div>
	<!--/.modal-->

	<?php wp_footer(); ?>
</body>
</html>

4) Reference the Modal

Now that we have the modal in place you can reference it anywhere using an anchor tag. The anchor tag must have the data-toggle=”modal” attribute AND the href must be the unique id of the modal we added in step 1 above.

<a href="#login-modal" data-toggle="modal">Login</a>

And that’s all there is to it. A simple, yet helpful way to allow your site visitors to login from any page or post!


  • Jane

    Are you sure that this is modal login? It looks like modal search. But thank you.

    • Great catch, Jane! I confused this with another tutorial I was writing.

      The code has been fixed :)

  • benny hendrikx

    Nice one thx Ali