{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/zoie-carnegie/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"0c8fb1e2-8a9d-5ae4-b53f-941256884102","html":"

I often come across people and clients who would like to build their custom login, registration, and lost password form in WordPress instead of using the default wp-login.php page. It's probably because it's too wordpress-y.

\n

In this tutorial, I will demonstrate how to build a custom login form using the default functionality that wordpress gives us.

\n\n

Building a WordPress Login Form (Out of the box)

\n

This is what WordPress gives us out of the box.

\n

\"wp-login\"
\nThere are quite a few different options available to make a custom login page. You can build a shortcode so that you could simply put [wp-login] or something you like on any page/post, make a page theme file and use that page to attach to a post/page, a widget could be a good solution too, or maybe you'd like to simply edit the existing form and add some pizzazz to it.

\n

I am going to show you all of this tutorial using the page-theme method because it is probably the easiest to implement for beginners. This will also give you an intro into page themes, if your not familiar with it.

\n

To start our theme, you will need to do the following:

\n
    \n
  1. Install WordPress
    2. \n
  2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one
    3. \n
  3. create a file called page-login.php in the theme directory
    4. \n
  4. Next open that file with a text editor of your choosing and add the following at the top of the php file.
    5. \n
\n
<?php\n/*\nTemplate Name: Login\n*/\n \nget_header(); ?>\n \n<div id="primary" class="content-area">\n<div id="content" class="site-content" role="main">\n \n</div><!-- #content -->\n</div><!-- #primary -->\n \n<?php get_sidebar(); ?>\n<?php get_footer(); ?>
\n

To initialize this page template, make sure to activate the theme you've selected in \"Appearance/Themes\" in your admin dashboard and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template under \"Page Attributes\". Change your template to \"Login\" or to the name that you specified in \"Template Name:\" and that will attach that page theme to this page/post.

\n

Now we're ready to start editing this page-login.php template file. So first open this file in your favorite editor and Let's get a login page started.

\n

To quickly show you how to get this login on the page Let's paste the following code between the div with id of content.

\n
<div id="primary" class="content-area">\n<div id="content" class="site-content" role="main">\n<?php wp_login_form(); ?>\n</div><!-- #content -->\n</div><!-- #primary -->
\n

Look at what that small piece of code do

\n

\"custom-login\"

\n

Now we need to set some arguments that we can provide to this form to customize it. Let's take a look at the documentation for wploginform()

\n

In that document, it explains all the uses and arguments of wploginform(). Let's use those arguments section and see what happens. Paste the $args section shown in the wordpress doc right above our login form.

\n
<?php $args = array(\n'echo' => true,\n'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],\n'form_id' => 'loginform',\n'label_username' => __( 'Username' ),\n'label_password' => __( 'Password' ),\n'label_remember' => __( 'Remember Me' ),\n'label_log_in' => __( 'Log In' ),\n'id_username' => 'user_login',\n'id_password' => 'user_pass',\n'id_remember' => 'rememberme',\n'id_submit' => 'wp-submit',\n'remember' => true,\n'value_username' => '',\n'value_remember' => false\n); ?>\n<?php wp_login_form( $args ); ?>
\n

It will look the same as the one we did earlier but, by customizing the arguments above, you can customize elements of the login form.

\n

Handling the login form response (Custom)

\n

To handle the Login Form response we need to grab the $_POST parameters and login the user. You can create this as complex as you like, but I will demonstrate a simpler but effective method.

\n

For this action, we'll be using the aftersetuptheme and wp_authenticate. I have added the following two functions within the functions.php file. The first function optionalemailaddress_login searches for a users email address based on their username, with this functionality you can log in using your email address or the username.

\n

The second function, login_user, handles the actual functionality of the login by receiving the $POST parameters and passing them into the wpsignon method.

\n
/**\n* optional_email_address_login allows the user\n* to log in with a email address as well as a username\n* @param string &$username username or email\n* @param string &$password password\n*/\nfunction optional_email_address_login( &$username, &$password ) {\n$user = get_user_by( 'email', $username );\nif ( ! empty( $user->user_login ) )\n{\n$username = $user->user_login;\n}\n}\n// Allows the use of email logins\nadd_action( 'wp_authenticate', 'optional_email_address_login', 1, 2 );\n \n/**\n* login_user handles the $_POST array and logs in users\n*/\nfunction login_user() {\nif ( ! is_user_logged_in() ) {\n$creds = array();\n$creds['user_login'] = isset( $_POST['log'] ) ? $_POST['log'] : '';\n$creds['user_password'] = isset( $_POST['pwd'] ) ? $_POST['pwd'] : '';\n$creds['remember'] = isset( $_POST['rememberme'] ) ? true : false;\n$user = wp_signon( $creds, false );\n \nif ( is_wp_error( $user ) ) {\nerror_log( $user->get_error_message() );\n}\n}\n}\n// Run login_user before headers and cookies are sent\nadd_action( 'after_setup_theme', 'login_user' );
\n

In this example I have used the default WordPress login form that you could customize and style to your desire. In the next blog, I will be demonstrating how to build a login form that is fully customized. We won’t be using the provided wordpress functions!

\n","frontmatter":{"title":"Wordpress Custom Login Form Part 1","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"March 01, 2016","updated_date":null,"tags":["WordPress","Learning"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d7e167a0f378c80cdc10b3b3d49b0825/e7487/wordpress-icon-150x1501-150x150.webp","srcSet":"/static/d7e167a0f378c80cdc10b3b3d49b0825/e7487/wordpress-icon-150x1501-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/wordpress-custom-login-form-part-1/"}}},{"node":{"id":"da619579-7270-565c-9e4a-1464a5bae851","html":"

In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we will create this login form and the styling from scratch, making it a very customized form. I will be providing the CSS I am using, however you may style this however you wish.

\n

Building a Custom Login Form

\n

\"wp-login-boring\"

\n

This is what WordPress gives us out of the box.. Boring, right?

\n

I am going to show this part once again because it is probably the easiest to implement for beginners. I covered this in Part 1, but we'll go through it again just in case you're skipping ahead

\n

To start our page theme you will need to do the following

\n

1. Install WordPress\n2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one\n3. create a file called page-login-custom.php in the theme directory (Notice we are now making a new Page Theme)\n4. Next open that file with a text editor of your choosing and add the following at the top of the php file

\n

-->

\n

To initialize this page template make sure to activate the theme you've selected and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template. Change your template to Login Custom and that will attach that page theme to this page/post.

\n

Now for the custom code. Below I have provided an example of some code that I have customized to make my custom login form.

\n
<form method="post" action="" class="wp-user-form">\n\n:\n<input type="text" name="log" value="" size="20" id="user_login" tabindex="11" />\n\n:\n\nRemember me\n\n<input type="submit" name="user-submit" value="" tabindex="14" class="user-submit" />\n<input type="hidden" name="redirect_to" value="" />
\n

\"login-2-custom\"

\n

Let's take a look at that custom form

\n

Handling the Login Form response

\n

To handle the Login Form response use the exact same method we used in part 1. Remember to place that function within your functions.php file within your theme unless you're building a plugin.

\n

In this example we have built a custom WordPress login form that you could customize and style to your desire. In the next section I will be demonstrating how to build a lost password form that is fully customized. Our custom lost password form will send an email to the user as well as handle creating a new password for the user.

\n","frontmatter":{"title":"Part 2 - Creating a Custom Login Form","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"December 08, 2015","updated_date":null,"tags":["Engineering","Login"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c77161283a52150af28cf97603d842a3/e7487/cust-login-2-150x150.webp","srcSet":"/static/c77161283a52150af28cf97603d842a3/e7487/cust-login-2-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/part-2-creating-a-custom-login-form/"}}},{"node":{"id":"d3c85820-2567-5ea7-81f2-fa6a060e9d3f","html":"

An API is an acronym for Application Programming Interface. API's include various tools, protocols, and routines. API's are used as a way for applications to communicate with various systems.

\n

But what does this mean? Well let me explain what they are with some examples. I am going to be using various API's for these examples.

\n

Let's Begin

\n

Let's start by looking at a favorite website of mine called The Yoda Speak Generator found here.

\n

This website allows users to enter text and get a return of that same text formatted the way Yoda might say it. This is done with an API.

\n

Yoda Speak: Fun stuff, api's are! Yes, hmmm.

\n

API’s contain what is called an endpoint to access this API. The endpoint provides the connection to communicate with the API and give it some text to generate into Yoda Speak. The API would then return the generated Yoda Speak to the location of the request.

\n

Another way to think of an API is to think of it like an egg carton. An egg carton holds the eggs, protects them from damage and allows someone who wants to make breakfast a way to open and close the carton to access the eggs inside. The eggs inside would be the data, and the hand reaching into the carton would be much like the communication using an endpoint from a server.

\n

Okay, Let's make breakfast.... Just Kidding!

\n

For those of you who are visual Let's look at some examples of the code. These snippets are in PHP because it is my favorite language. Below is a link to download a small zip file called apidemo.zip.

\n

Demo Link

\n

You can host this directory on your localhost or on a website if you choose.

\n

After you have extracted the zip and have a directory such as localhost/apidemo open a browser and enter http://localhost/apidemo/api.php?request=example&name=yourname where localhost is your domain.

\n

To enter this endpoint in an application that makes API calls try Postman. Here is a link for a chrome extension.

\n

Try using a GET and a POST method with parameters request=example for the example function in api.php and name=yourname to output a name

\n

You should now see the output \"Your name is yourname\" in your browser

\n

explore the files api.php, API.class.php and MyAPI.php to explore how this simple API is taking in the parameters and outputting a name

\n

Hopefully, I have explained API's so you have a basic understanding of what they are. There are many types of API's, one that you may see often is RESTful API's, these unlike this example must abide by constraints that have been defined by the REST architecture.

\n","frontmatter":{"title":"What is an API","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"June 23, 2015","updated_date":null,"tags":["API","Postman"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/a01dd1d7515afffa79ea80811d70b895/403a4/whats-an-api-300x300.webp","srcSet":"/static/a01dd1d7515afffa79ea80811d70b895/61e93/whats-an-api-300x300.webp 200w,\n/static/a01dd1d7515afffa79ea80811d70b895/403a4/whats-an-api-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/what-is-an-api/"}}},{"node":{"id":"58b24602-dd97-50b9-bae3-0a54ebcc936e","html":"

What are they?

\n

cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is included in PHP and cURL is a library that can be installed on a server or utilized on many different platforms.

\n

Example:

\n

cURL-

\n
<!---->
\n

Fsock-

\n
<!--<?php\n$fp = fsockopen("www.example.com", 80, $errno, $errstr, 30);\nif (!$fp) {\n    echo "$errstr ($errno)\\n";\n} else {\n    $out = "GET / HTTP/1.1\\r\\n";\n    $out .= 'Host: www.example.com\\r\\n';\n    $out .= "Connection: Close\\r\\n\\r\\n";\n    fwrite($fp, $out);\n    while (!feof($fp)) {\n        echo fgets($fp, 128);\n    }\n    fclose($fp);\n}\n?>-->
\n

How to check if you have cURL enabled

\n

Run phpinfo() to see if cURL is enabled on your server then navigate to the cURL section. You will see the setting cURL support - enabled or disabled.

\n

Or use the php script below to create a curl_check.php file

\n
<!--<?php\n// Script to test if the cURL extension is installed on this server\n// Define function to test\nfunction _is_curl_installed() {\n    if (in_array('curl', get_loaded_extensions())) {\n        return true;\n    }\n    else {\n        return false;\n    }\n}\n// Output text to user based on test\nif (_is_curl_installed()) {\n    echo 'cURL is installed on this server';\n} else {\n    echo 'cURL is NOT installed on this server';\n}\n?>-->
\n

After saving this file as curl_check.php load it on a server installed with PHP and run the path yourpath/curl_check.php you will see a message shown that notifies you if cURL is enabled or disabled

\n

Check if fsockopen function exists

\n
<!---->
\n

Normally, by default your server will have cURL enabled and ready to use on your server. It is the most commonly used method to communicate to different types of servers. If you're ever having a problem communicating with a server run one of the above checks to verify your cURL and Fsock is working correctly.

\n","frontmatter":{"title":"An Intro to Curl & Fsockopen","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"March 09, 2015","updated_date":null,"tags":["curl","Fsock"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/60c66ca2257d555ebf5e86ccaa6d56c8/403a4/fsock-and-curl.webp","srcSet":"/static/60c66ca2257d555ebf5e86ccaa6d56c8/61e93/fsock-and-curl.webp 200w,\n/static/60c66ca2257d555ebf5e86ccaa6d56c8/403a4/fsock-and-curl.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/intro-curl-fsockopen/"}}},{"node":{"id":"ac5c0a13-a209-50c0-8e31-5383e377f70c","html":"

In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing process for new WordPress developers.

\n

There are three different areas that a developer can enqueue scripts for; the first is the client side, the second is the admin side and the third is the login pages.

\n

Each of these areas uses a specific hook to enqueue scripts to use in that area. For example, if a script was enqueued using the login_enqueue_scripts hook that script would not be loaded in the admin area. This allows WordPress to load only the scripts needed for that specific section. Optimization!

\n

When you don’t enqueue scripts using these hooks and instead use the <script> tag, it can cause the script to be loaded every time you load the site, admin area or login page. This can cause conflicts with other scripts, plugins or themes. WordPress takes care of these problems when you use the hooks intended.

\n

An example of the three enqueuing hooks are below:

\n

wp_enqueue_scripts hook – Front End

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
\n

admin_enqueue_scripts hook – Admin area

\n
function load_custom_wp_admin_style() {\n    wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );\n    wp_enqueue_style( 'custom_wp_admin_css' );\n}\nfunction my_enqueue($hook) {\n    if ( 'edit.php' != $hook ) {\n        return;\n    }\n    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );\n}\nadd_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );\nadd_action( 'admin_enqueue_scripts', 'my_enqueue' );
\n

login_enqueue_scripts hook – Login pages

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_style', 10 );\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_script', 1 );
\n

If you are calling the same script in many different areas you can register the script or stylesheet first and then use it when needed in your plugin. In the above examples you’ll notice the function being called is enqueuing a script or a style only and not registering a script or a style. When you register first it allows that script or style to be called in the area it was registered in when you enqueue it. Here’s an example of registering scripts first.

\n
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts' );\nfunction my_plugin_admin_scripts() {\n    /* Register our script. */\n    wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );\n    wp_enqueue_script( 'my-plugin-script');\n}
\n

In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.

\n","frontmatter":{"title":"Enqueuing Scripts in WordPress","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"March 02, 2015","updated_date":null,"tags":["WordPress","PHP"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp","srcSet":"/static/4e9051d7a28e019245372bfa4f533083/61e93/wordpress.webp 200w,\n/static/4e9051d7a28e019245372bfa4f533083/1f5c5/wordpress.webp 400w,\n/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp 750w","sizes":"(max-width: 750px) 100vw, 750px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/enqueuing-scripts-wordpress/"}}},{"node":{"id":"e73b7857-79b4-5db5-831c-41e2f6f08d71","html":"

In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing about Facebook social login is the great documentation and instructions already provided at  Facebook Login for the Web. There is also a code snippet that is provided to you by Facebook to implement their login system. I have gone ahead and customized this code and have provided a codepen here which I will explain.

\n

The first thing you’ll need to do is create a Facebook app since an app Id is required to implement login using Facebook. You can create a facebook app by going to  http://developers.facebook.com. You'll notice in the codepen nothing is displayed since I have not added a app Id. You'll need to remember to replace this placeholder with your own Facebook app Id once you have created your Facebook app.

\n

Next, we’ll implement login using Facebook. All we need to do is copy and paste the code provided to us by Facebook to create the Facebook social login and replace the placeholder with your own Facebook app id. I will be explaining the same code with my customization provided in the codepen below.

\n

Let's add the Facebook login interface. You'll want to place this code in the body section of your html code.

\n
<!--\n\n\n-->
\n

Next, you'll notice this section of code at the end of the JavaScript section. This code snippet loads the Facebook SDK JavaScript asynchronously. It also provides the JavaScript library which is used to render your Facebook login interface.

\n
// Load the SDK asynchronously\n(function(d, s, id) {\n    var js, fjs = d.getElementsByTagName(s)[0];\n    if (d.getElementById(id)) return;\n    js = d.createElement(s); js.id = id;\n    js.src = "//connect.facebook.net/en_US/sdk.js";\n    fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));
\n

Now we just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId : '{your-app-id}'. This function is just above loading JavaScript asynchronously.

\n
window.fbAsyncInit = function() {\n    FB.init({\n        appId : '{your-app-id}',\n        cookie : true, // enable cookies to allow the server to access the session\n        xfbml : true, // parse social plugins on this page\n        version : 'v2.1' // use version 2.1\n    });\n\n    // Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus().\n    // This function gets the state of the person visiting this page.\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n};
\n

Next we'll add the function that handles the response and alters the page contents based on the type of response. I have this function located at the very top of the scripts section.

\n
// This is called with the results from from FB.getLoginStatus().\nfunction statusChangeCallback(response) {\n    // The response object is returned with a status field that Let's the app know the current login status of the person.\n    if (response.status === 'connected') {\n        console.log('Welcome! Fetching your information.... ');\n        FB.api('/me', function(response) {\n            console.log('Successful login for: ' + response.name);\n            document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';\n        });\n    } else if (response.status === 'not_authorized') {\n        // The person is logged into Facebook, but not your app.\n        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';\n    } else {\n       // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.\n       document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';\n    }\n}
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. You'll also notice the not_authorized status. When the login is not authorized, this function changed the html on your page to ask you to log in. But how does this function get used? In this next function this is handled when someone clicked on the Facebook button on the page. Notice the onlogin=\"checkLoginState(); in your body html code for the Facebook button.

\n
// This function is called when someone finishes with the Login Button.\nfunction checkLoginState() {\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n}
\n

Now if you save this page as index.html and open it in a browser you should see the Facebook Login button. You can use the code provided by facebook at the link listed above or you can used the codepen code that I have altered to make it a bit shorter for explanation.

\n

Facebook Page example

\n

\"zoie-facebookblog\"

\n

Log In and look at the console output. You’ll now see some basic info including id, email, first_name, gender, last_name, link, locale, name, timezone, updated_time, verified

\n

That is all there is to it. Of course, there are many more scopes you can use which allow you to collect more data currently this script has a scope of public_profile and email, features and API calls you can play with to create your desired app just explore the Facebook documentation to discover all these features.

\n

Want to extend your social systems with additional provider functionality check out these posts on LinkedIn social login and Twitter social login.

\n","frontmatter":{"title":"How to Implement Facebook Social Login","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"February 24, 2015","updated_date":null,"tags":["Facebook","SocialLogin"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/6c361cdd8b58e5ed76e50ba960c74e49/403a4/fb-feat-img.webp","srcSet":"/static/6c361cdd8b58e5ed76e50ba960c74e49/61e93/fb-feat-img.webp 200w,\n/static/6c361cdd8b58e5ed76e50ba960c74e49/403a4/fb-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/implement-facebook-social-login/"}}},{"node":{"id":"1cf9eebb-5427-583d-ba55-f103e54c627c","html":"

Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.

\n

What you will need:

\n\n

Let’s start building the popup

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:

\n

\"popup-example-01\"

\n

Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n\n    #popupclose {\n        float: right;\n        padding: 10px;\n        cursor: pointer;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n    // Initialize Variables\n    var closePopup = document.getElementById("popupclose");\n    var overlay = document.getElementById("overlay");\n    var popup = document.getElementById("popup");\n \n    // Close Popup Event\n    closePopup.onclick = function() {\n        overlay.style.display = 'none';\n        popup.style.display = 'none';\n    };\n</script>\n</body>\n</html>
\n

Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.

\n
#overlay {\n    display: none;\n    ...\n}\n \n#popup {\n    display: none;\n    ...\n}
\n

After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n    <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t  overlay.style.display = 'none';\n\t  popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t  overlay.style.display = 'block';\n\t  popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>
\n

We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

\n

Demo:

\n

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

\n

Please post your questions or feedback in the comment area.

\n","frontmatter":{"title":"A Simple Popup Tutorial","author":{"id":"Zoie Carnegie","github":null,"avatar":null},"date":"January 05, 2015","updated_date":null,"tags":["HTML","CSS","UI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp","srcSet":"/static/c6bf325c9c408389282535e3a446b575/61e93/simplepop.webp 200w,\n/static/c6bf325c9c408389282535e3a446b575/1f5c5/simplepop.webp 400w,\n/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp 800w,\n/static/c6bf325c9c408389282535e3a446b575/210c1/simplepop.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Zoie Carnegie","slug":"/engineering/simple-popup-tutorial/"}}}]},"authorYaml":{"id":"Zoie Carnegie","bio":"Graduated from NAIT Digital Media and IT specializing in application development. PHP is my favorite language. I am a continuous learner always trying new languages, applications, frameworks. Passions are Programming, Photography and Travel.","github":null,"stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Zoie Carnegie","__params":{"id":"zoie-carnegie"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}