Atomic Smash homepage splash

Building a Web App with WordPress

Words by Adam WardMarch 17, 2017

In this post we will run through the simple steps involved in created a WordPress driven Web App. All you need to get started is a fresh install of WordPress and the free plug-in ‘Cleverness To-Do List’.

Since it’s humble beginnings in 2003, as a blogging platform, WordPress has established itself as the World’s most popular content management system (CMS), powering more than half of the Websites on the entire internet (1). In those 14 years, there has been a huge increase in web browser based applications (Web Apps), that are beginning to offer users much more advanced and complex interactions and services.

WordPress is certainly not known as being a platform/framework for building Web Apps, but out of the box it comes with most of a Web Apps basic needs – User Roles, Content Types, Actions and Filters we can hook in to and nearly 50k prebuilt plugins in the official plugin directory, which make it simple to extend the base functionality of WordPress.

To-do list challenge

Whenever I look into learning a new framework, it seems a to-do list is always the first tutorial I come across, so, that’s exactly what we’ll do!

Before we start building a Web App with WordPress, I just want to make it clear this tutorial does require you to be pretty familiar with WordPress, able to setup a local development environment and a bit of PHP.

We’re going to build a simple Web App using a few common and very useful WordPress functions, to allow users to register, login and create their own to-do list. For the to-do list functionality, we will be using a great free plugin called ‘Cleverness To-Do List’.

Lets get started…

Firstly, we’ll need a local copy of WordPress installed and ready to go. Next we’ll start making the basic outline of our To-do List theme, which we’ll call TodoPress.

Lets make a theme folder called todopress and add the following files inside it –

/todopress

  • index.php
  • header.php
  • footer.php
  • comments.php
  • functions.php
  • style.css
  • screenshot.png

Can't wait to see it in action?

Download the completed project from GitHub

Visit GitHub

Next, we need to check in our WordPress backend, that anyone can register. In Settings>General make sure the Membership ‘Anyone can register’ box is checked and in the ‘New user default role’ dropdown, select ‘Author’, then the save changes.

TodoPress will utilise WordPress’s out of the box admin interface and we will not need to create an additional page template files. We’ll start by editing our style.css, header.php, footer.php and index.php.

Before we add any styles we need to add our theme information to the top of our style.css file –

/*
Theme Name: TodoPress
Theme URI: https://github.com/addidesign/todopress
Description: Example of building a Web App in WordPress
Author: Adam Ward - Atomic Smash
Author URI: http://www.atomicsmash.co.uk
Version: 1.0.0
*/

Here’s our basic header.php and footer.php

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <?php wp_head(); ?>

    </head>

    <body class="<?php body_class(); ?>">
<?php wp_footer(); ?>

    </body>

</html>

Next, we’ll set up our index.php so it includes our header.php, footer.php and links to use the default WP login and register functions.

<?php get_header(); ?>

<h1>TodoPress</h1>

<?php
$link .= '<a href="' . wp_login_url() . '" class="button">' . __( 'Login' ) . '</a>';
    $link .= '<a href="' . wp_registration_url() . '" class="button">' . __( 'Register' ) . '</a>';
echo $link;
?>

<?php get_footer(); ?>

Now we have a homepage where users can come and register and login. We don’t need to set anything else up for these functions, WP has this handled! At this point try registering with a another email address and look at the default process. After registering we can also login using the link from our homepage.

Next add the ‘Cleverness To-Do List’ plugin and activate it. As a newly signed up Author, you will now have the ability to login in to the back end and use the plugin to create to-do lists. Very quickly we have the basic functionality all setup.

If we select ’To-do List’ from the main menu in the WP backend, you’ll notice the url structure is yourlocal.dev/wp-admin/admin.php?page=cleverness-to-do-list. To make sure our users are redirected to this page on login and not the default dashboard we’ll adjust our index.php so the `wp_login_url()` function includes this link as a redirect parameter. We’ll also add a condition to see if the current user is logged in using the `is_user_logged_in()` function and we’ll set a conditional view so if the user is logged in they will see a ‘Logout’ button and a ‘My Profile’ button, else, they will see what we had before.

<?php get_header(); ?>

<h1>TodoPress</h1>

<?php

$admin_link = admin_url("admin.php?page=cleverness-to-do-list");
if ( is_user_logged_in() ) {
    $link .= '<a href="' . wp_logout_url( home_url() ) . '" class="button">' . __( 'Log Out' ) . '</a>';
    $link .= '<a hef="' . $admin_link . '" class="button">' . __( 'My Profile' ) . '</a>';
} else {
    $link .= '<a href="' . wp_login_url($admin_link) . '" class="button">' . __( 'Login' ) . '</a>';
    $link .= '<a href="' . wp_registration_url() . '" class="button">' . __( 'Register' ) . '</a>';
}
echo $link;
?>

<?php get_footer(); ?>

Next we will use these useful functions to firstly redirect users after login using the `login_redirect` filter and use the `current_screen` function along with `wp_die();` if the users try to access any other admin page other than the to-do list pages. Lets add these to our functions.php file.

/*
* Login redirect
*/
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );

function my_login_redirect( $redirect_to, $request, $user ) {
	if ( isset( $user->roles ) && is_array( $user->roles ) ) {
		if ( in_array( 'admin', $user->roles ) ) {
			return $redirect_to;
		} else {
            // Redirect non-admins to todo list
			return admin_url( 'admin.php?page=cleverness-to-do-list' );
		}
	} else {
		return $redirect_to;
	}
}


/*
* Limit non-admins to todo screens
*/
add_action( 'current_screen', 'restrict_admin_screen' );

function restrict_admin_screen() {
    if ( ! current_user_can( 'manage_options' )) {
        $current_screen = get_current_screen();
        if( $current_screen->id !== "toplevel_page_cleverness-to-do-list" ) {
            echo '<h1 class="title">TodoPress</h1><br />';
            echo 'Whoops, where are we?';
            echo '<a href="' . admin_url( 'admin.php?page=cleverness-to-do-list' ) . '" class="button">Back to Todos?</a>';
            wp_die();
        }
    }
}

Lets now add a new css file to our project. In our theme root add a file called `admin-style.css` and now lets register and enqueue this file but we will so conditionally, so anyone who logs in that is not admin will only see these styles and Admin will continue to see the default styles.

Lets add this snippet to our functions.php

/*
* Conditionally Enqueue Admin Styles
*/
function wp_admin_style() {
    if ( ! current_user_can( 'manage_options' )) {
        wp_register_style( 'admin-css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'admin-css' );
    }
}
add_action( 'admin_enqueue_scripts', 'wp_admin_style' );

That’s pretty much it, we have created a theme, restricted our new users access and given them the ability to create their own managed to-do list.

I have put the finished working version up here – http://todopress.xyz and the final code here – GitHub

The intention of this project was to show a very quick example of building a Web App with WordPress, with the help of one excellent free plugin and a few WordPress hooks we’ve created a simple yet useful application.

Profile picture of Adam Ward

Adam WardDeveloper

Adam is an expert in WordPress development and CRM integrations. His ability to craft WordPress to a users needs makes our websites easier to use.

Go back to top

Keep up to date with Atomic news