Build a WordPress Plugin 102

WordPress Code

Written by Brian, Lead Ninja

As a WordPress Ninja, I love to find a way to do things better and faster with technology and then hide in the shadows like I'm not even there. If you want to be on the leading edge, I want to be your ninja guide.

Photo Credit: Shahadat Rahman on Unsplash

Last month we started a plugin to allow you to put a login anywhere on your site (a post, page, or widget) but we're not done yet. We have some work to do to allow it to work in widgets and who wants to see a login form when we're already logged in. That would be really confusing. At the bottom of the article are the before and after files for this project.

In our last post we ended up with a form looking like this (this is the actual working form):

First, since this is a new version, I'm going to update the version number in the header of the plugin:

* Plugin Name: EvoD Simple Login Shortcode
* Author: Brian Seim
* Author URI:
* Version: 0.0.2

I think we should also add a bit of styling as well. Lets add a border, background color, and some padding to the form. Open the before file and add a style attribute before the closing angle bracket (>) in the opening form tag as highlighted below:

function evod_loginform_shortcode(){
   $loginform = <<<DOC
    <form name="loginform" id="loginform" action="/wp-login.php" method="post" style="border: 1px solid #5f442b; background-color: white; padding: 0 15px; display: inline-block;">

    <label for="user_login">Username
    <input type="text" name="log" id="user_login" class="input" value=" size="20"></label>

    <label for="user_pass">Password
    <input type="password" name="pwd" id="user_pass" class="input" value=" size="20"></label>
    <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
    <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
    <input type="hidden" name="redirect_to" value="/">
    <input type="hidden" name="testcookie" value="1"></p>

return $loginform;

Here's what it looks like now:

The styling used here is as follows:

  • boder has three properties: thickness style and color code
  • background-color has a color name which could also be a color code
  • padding has a top and bottom padding set to zero and a left and right padding set to 15 pixels
  • display set to inline-block helps the form take the space it is given and give room for all the fields in it

That is looking pretty good now. But, as I'm writing this, I am already logged in. I don't want to see the form when I'm logged in. I want to see a welcome and an opportunity to logout. Lets do that now. First, we're just going to add an indicator of being logged in. We're going to add the condition to the end of the evod_loginform_shortcode() function like this:

    return "logged in";
return $loginform;

The function is_user_logged_in() is a built in function of WordPress and returns true if they are logged in. In this case we just return the text "logged in" otherwise we return the form we need. That is pretty nice. Now lets add a little flare (ok, not really flare just best practice) by changing it into a welcome message like this:

    $current_user = wp_get_current_user();
    return "Welcome " . $current_user->user_firstname;
    return $loginform;

WordPress Documentation directs us to use wp_get_current_user(). This retrieves the current user from WordPress to use in our plugin. Current user is a collection of information (object) that I can get the user's first name from by using this format: $current_user->user_firstname. $current_user has a bunch of other information that you can see listed here. Here we have the opportunity to learn another bit of PHP. notice the "." after the "Welcome "? The "." just indicates to the code to link the string "Welcome " and the string we get from $current_user->user_firstname together to make a longer string.

We are almost there, just one more best practice to add. Every welcome notice is accompanied by a logout button. And WordPress has that URL built in as well: wp_logout_url()

    $current_user = wp_get_current_user();
    return "Welcome " . $current_user->user_firstname . '<a href="' . wp_logout_url() . '">Logout</a>';
    return $loginform;

So we just add an "a href" tag after the first name to include a logout link. Once again, you might like to style the a href tag to your liking or even turn it into a button.

There you have it, your very own working plugin for WordPress that you wrote yourself. Below is the link to the before and after files for your reference:

[Resource Files]


Submit a Comment

Join Our Newsletter for Updates & Offers

x Logo: ShieldPRO
This Site Is Protected By