Build Responsive, Real-Time Graphs in WordPress: Functions and Data

In the first part of this series, we covered the basics of setting up customized WordPress functions. Here’s a quick recap of the steps if you skipped ahead:

1. We installed the Flot for WordPress plugin
2. We uploaded custom-workout.php to the plugin folder
3. We told WordPress where to find the custom-workout.php file by using the include(); call

Moving forward with this part, we’ll be covering these steps in three sections:

1. Creating a blank post with a placeholder shortcode
2. Telling WordPress about your shortcode
3. Creating a database table for collecting data

For some of you, this will be a very challenging tutorial to follow — the database tables are usually a serious point of fear and loathing for newbies. But, don’t sweat it. I’ll walk you through how to create a new table just for this data so that you don’t have to worry about breaking your current WordPress site. With that being said, let’s get rolling!

Step 1: Create a Blank Post

Now, one of the easiest steps of this process! Go to your “Posts” > “Add New,” and create a post called “Pushups” or whatever you’d like. In the body, only add the following code:

[pushups_sc]

You just added a shortcode to your post, which we will call and define later. When you click “Publish” and view the post, it will display this shortcode as the exact text “[pushups_sc]” for now. That’s to be expected.

It doesn’t look like much, but this is a big step and one that will make many uncomfortable if they’ve never worked with shortcodes. Now, we’ll create the functionality for the shortcode so it actually does something.

Step 2: Create a Function and Shortcode

This step is more just an experience-gainer than anything else, but it’s important if you need to troubleshoot later. Open up that blank custom-workout.php file in the “Plugins” > “Editor” area. We’re going to create our first function and register a shortcode so you can see how this process works.

With your blank custom-workout.php file open, paste the following code:

<?php
function pushups (){
echo ‘<h1>Pushups</h1>’;
};
add_shortcode( ‘pushups_sc’, ‘pushups’ );
?>

Save it (or upload it to your wp-content/plugins/flot-for-wp/flot folder, replacing the blank file we added earlier). Now, go and refresh the “Add Pushups” post we created. You’ll see that the “[pushups_sc]” has been replaced with the <h1>Pushups</h1> code that we put in the function!

If it still just shows the [pushups_sc] shortcode, then you’ll need to check your code and paths to the files. You might also need to disable your WP-Cache under “Settings” within your WordPress dashboard. Lastly, you may have to do a Shift + Refresh of your page.

Let me step you through what we just accomplished:

1. We created a function called pushups.
2. Then, we added some code for this function to execute, namely to print out “Pushups” in the heading tags.
3. After closing the function, we then told WordPress that we created a shortcode. The first attribute is the name of the shortcode, followed by the function that it calls.

Step 3: Create a Pushups Table in Your WordPress Database

Log into phpMyAdmin and you’ll be staring down a screen that looks something like this:

On the left, we have a list of tables in a standard WordPress installation. On the right, we have our various admin tools. I’m working with a database called WOT — which stands for workout tracker. Your database name will likely be named something different.

For now, I want you to scroll down to the bottom of the screen to the “Create new table…” field. For the name, use “pushups,” for the number of fields use 5, and press “Go.”

Now we’re ready to tell your database what kind of data to expect. Set up your five rows of data using the following names, types, length/values, and extra settings:

Field	Type	Length/Val	Extra	Default
pushups_id	INT	10	auto_increment	(leave blank)
pushups_count	INT	3	(leave blank)	(leave blank)
pushups_date	VARCHAR	15	(leave blank)	(leave blank)
pushups_wpuser	VARCHAR	100	(leave blank)	(leave blank)
active	INT	2	(leave blank)	1

Here’s a screenshot of the setup for clarity:

Let’s take a step back for the sake of learning. Looking at the pushups_id row as an example, we’ve told the database to expect a number (INT) with a value of up to 10 characters and to auto-increment each row. This is our unique id for each pushup score that we record. The pushups_wpuser is going to be the username of the person logged into the WordPress site — so your users will have to register for your site to make this work, but that’s a good thing!

You can store some other unique field here, such as an email address instead. That’s fine, too. But, for this tutorial I want to teach you how to use some more advanced features than simply adding an email to a form field.

Click “Save” to add these fields, and you’re almost done with this phase.

You’ll notice, hopefully, that along the bottom of the page you’ve got a little red box with some red warning text. Click the “Go” button in this area as we need to define an index real fast.

In the “Field” drop-down, select the pushups_id option and leave the size blank. Click “Save” and you’re ready to start adding data!

(Quick point: I know the experienced database guys are going to be screaming at me for not going through a detailed list of best practices. As a matter of fact, they’re right, but the goal of this article is to get you out of your comfort zone and into the development pit. If I put too much information into one instruction set, the beginners will get overwhelmed.)

So, I’ve made the decision to keep this database setup simple and straightforward. As you learn more about how to set up tables and other database matters, you’ll learn a lot about the finer points of database design and maintenance. But for now, let’s move on to the more fun stuff, like using forms to add data to these new tables.

Recap

Wow! We covered a lot of ground here. Between shortcodes and database tables, you’re doing some really advanced stuff in WordPress at this point. You’ve already done some of the hardest work. The rest is just building out our functionality.

Coming up in the next part, we’re going to create a way to start loading data into our database by giving our shortcode some functionality. You’re going to be working with your new database table, so don’t close out of phpMyAdmin just yet.

Hang in there! You’re getting close!