In this tutorial, you will learn how to create a login popup in WordPress. You can add the link to this pop-up to your pages as a shortcode or insert it in the menu items of the site.

login popup created without plugins for WordPress

WordPress login popup without plugins

WordPress login popup without reCAPTCHA

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and update it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

add_action('wp_body_open', function() { ?> 

<style>
.blur-bg {
    inset: 0;
    z-index: 99;
    background-color: black;
    opacity: 0;
	position: fixed;
	pointer-events: none;
	transition: 200ms ease-in-out;
}
.blur-bg.active {
    background-color: black;
    opacity: 0.5;	
       pointer-events: all;
    }	
.modal {
max-height: 85%;
overflow: auto;
position: fixed;
top: 50%;
left: 50%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
transform: translate(-50%, calc(-50% - 100px));
opacity: 0;
z-index: 100;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
width: fit-content;;
max-width: 90%;
transition: 200ms ease-in-out;
pointer-events: none;
}
.modal.active {
	transform: translate(-50%, -50%);
	opacity: 1;
	pointer-events: all;	
}
.modal-header {
	padding: 5px 15px 0px 15px;
	margin: 0px 0px -12px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.modal-title {
	font-size: 1.2rem;
}
.modal .close {
    cursor: pointer;
}
button.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.5rem;
color: #9e9e9e;
padding: 0;
transition: all 0.5s ease;
margin-right: -5px;
}
button.close-button:hover {
color: black;
}
.modal-body {
	padding: 10px 15px;
}
.modal.hiden {
		display: none;
}
	form#loginform {
    margin: 18px 10px -24px 10px;
}
form#loginform label {
    display: block;
}
form#loginform input[type=text], form#loginform input[type=password] {
    width: 300px;
    height: 3rem;
}
a.login, a.logout-link {
    text-decoration: none;
}
#loginform input#wp-submit {
    height: 3rem;
    width: 7rem;
    cursor: pointer;
}
a[href='#login#'] {
    display: none;
}
</style>
 
<script>
class loginPopUp { 
    constructor(openType, Pclass, id) { 
		this.id = id;
		this.Pid = "a"+id;
		this.pop = '<div class="modal hiden" id="'+ this.Pid +'"> <div class="modal-header" > <div class="modal-title" ></div> <button class="close-button close" > &times; </button> </div> <div class="modal-body" ></div> </div>';	
		document.body.insertAdjacentHTML("beforeend", this.pop);
		this.bg = '<div class="blur-bg close"></div>';
		if ( !document.querySelector('.blur-bg') ) { document.body.insertAdjacentHTML("beforeend", this.bg); }
        this.Pclass = Pclass;
        this.Type = openType;
        if (this.Type == "click" ) {
            this.btnPopShow();
        } else if (this.Type == "time" ) {
            this.showTimePop();           
        }
	
	}
	
	closePopUp(e) {
			setTimeout( () => {      
				document.querySelector("#"+this.Pid+".active")?.classList.remove("active");
				document.querySelector(".blur-bg").classList.remove('active');
			} , e * 1000 ); }

			btnPopShow(){  
			document.querySelectorAll("."+this.Pclass).forEach((bot) => {
			bot.addEventListener("click", ()=>{
			document.querySelector("#"+this.Pid)?.classList.remove("hiden");
			setTimeout( () => { 
			document.querySelector("#"+this.Pid).classList.add("active");	
			this.settings();
		}, 100)
		})
		});
		}
	showTimePop(){
	let storage = sessionStorage.getItem(this.Pid) ? sessionStorage.getItem(this.Pid) : 0;
	if (storage > 1 ) return;
	setTimeout( () => {      
		document.querySelector("#"+this.Pid)?.classList.remove("hiden");
	} , 1000 );      
		setTimeout( () => {      
		document.querySelector("#"+this.Pid).classList.add("active");
		this.settings();			
		sessionStorage.setItem(this.Pid, parseInt(storage) + 1);			
	} , this.Pclass * 1000 );
	}
	settings(){
		const observer = new MutationObserver(list => {  this.closePopUp(6); observer.disconnect();});
		observer.observe(document.querySelector("#"+this.Pid+".active .modal-body"), {attributes: true, childList: true, subtree: true });
		[...document.querySelectorAll(".close")]?.forEach(  e => { e.addEventListener("click", e => { this.closePopUp(0) }) }, { once: true });
		document.querySelector(".blur-bg").classList.add('active');
		document.body.addEventListener('click', e => {
		if (!document.querySelector('.modal.active')?.contains(event.target)) {
		this.closePopUp(0);
	}}, { once: true })

		}
}
 
</script> 
<?php });
add_shortcode( 'login', 'loginpopup_func' );
function loginpopup_func( $atts ) {
	$atts = shortcode_atts( array(
		'type' => 'click', 
		'open' => 'login',
		'content' => '111',
	), $atts, 'login' );
	
	if (isset($_SERVER['HTTP_REFERER'])) {$THE_REFER=$_SERVER['HTTP_REFERER'];} else { $THE_REFER = get_home_url() ;}

		
		$content =  wp_login_form( 
							array( 
								'echo' => false ,
								'redirect'       => $THE_REFER ,
								'label_username' => __( 'Your Username ' ),
								'label_password' => __( 'Your Password' ),
								'label_remember' => __( 'Remember Me' )
			              )
			)."<br><a href=".esc_url( wp_lostpassword_url() )." style='margin-left: 10px;'>Lost your password?</a>";	


	$popup ='<script>
	
	document.addEventListener("DOMContentLoaded", function(){
	
	setTimeout( () => {new loginPopUp("click", "login", "111");
	document.querySelector("#a'.$atts["content"].' div.modal-body").innerHTML = `'.$content.'`;
	} , 1000  );	
    
});
</script>';

	
	$loginTXT = ( !is_user_logged_in() ) ? 'Log in' : 'Log out';
	$loginBTN = '<a href="#l#" class="login menu-link">'.$loginTXT.'</a>';	
	
if (is_user_logged_in()) { return wp_loginout( $_SERVER['REQUEST_URI'], false ).'<script>[...document.querySelectorAll("a")].forEach( e => { if (e.href.includes("action=logout") ) { e.classList.add("logout-link"); e.classList.add("menu-link");  } } )</script>'; }
	

	return "{$popup}{$loginBTN}";	
	
}

function my_dynamic_menu_items( $menu_items ) {
    $placeholders = array(
        '#login#' => array(
            'shortcode' => 'login',
            'atts' => array(), // Shortcode attributes.
            'content' => '', // Content for the shortcode.
        ),
    );
    foreach ( $menu_items as $menu_item ) {

        if ( isset( $placeholders[ $menu_item->url ] ) ) {

            global $shortcode_tags;

            $placeholder = $placeholders[ $menu_item->url ];

            if ( isset( $shortcode_tags[ $placeholder['shortcode'] ] ) ) {

                $menu_item->title = call_user_func( 
                    $shortcode_tags[ $placeholder['shortcode'] ]
                    , $placeholder['atts']
                    , $placeholder['content']
                    , $placeholder['shortcode']
                );
            }
        }
    }

    return $menu_items;
}
add_filter( 'wp_nav_menu_objects', 'my_dynamic_menu_items' );

With the following shortcode, you can now add login popup to your pages:

[login]

WordPress login popup with google reCAPTCHA

To enable Google reCAPTCHA on your login popup, replace the code above with the code below.

This code is for WPCookie PLUS+ members only.

Join WPCookie PLUS+

Enter your sitekey and secretkey in the field shown.
This code will activate Google reCAPTCHA on the WordPress login page as well.

function my_recaptcha_key(){
	$sitekey= "00000000000000000";
	$secretkey= "000000000000000";
	return explode(",", $sitekey.",".$secretkey ); 	
}

Adding the login button to the site menu

In classic WordPress themes:

In the WordPress dashboard, go to Appearance ➡ Menus.
Select your desired menu in the “Edit Menus” tab, then add a “Custom links” like below:

URL: #login#
Link Text: login

Adding custom login popup links to the menu 

After saving the menu, if you visit the website, you will find that the login link has been successfully added to the site menu.

A login popup link has been added to the Astra theme menu

In block themes (like 2023 etc.):

The menu system in block themes is different from classic themes. To add a login link to the menu of block themes in the WordPress dashboard, go to Appearance ➡ Editor.
Now add a login shortcode in the header area and save the theme.

adding a login popup link to the 2023 block theme header

After saving the theme, if you visit the website, you will find that the login link has been successfully added to the site header.

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 53

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *