How to Create Your Own Workout Diary With WordPress

How to Create Your Own Workout Diary With WordPress

Did you eat too much turkey and pie during the Christmas break and gain a couple of pounds? Did you make a New Year’s resolution to start exercising properly in 2015?

For many people tracking is the key to success. While there are some great tools available like Fitbit, Lifesum and other apps and devices, we’re yet to see a real, personalized global application. For instance you may want to track the number of soft drinks you drink, record how stressful your day was and so on.

With the help of WordPress, the free Advanced Custom Fields plugin and a tiny bit of coding, we’re going to create a simple but powerful workout diary in today’s Weekend WordPress Project. Let’s get started.

Our Environment

I’ll be working with a completely fresh WordPress installation. If you would like to keep this diary private you can use the Registered Users Only plugin or you can install WordPress locally. Make sure to install the Advanced Custom Fields plugin and activate it.

We’ll be using Twenty Fifteen, the new default WordPress theme but we’ll create a child theme since we’ll modify it a tiny bit. Create a new folder in the wp-content/themes directory – name it workout-diary. In the new folder create two files: style.css and functions.php.

Open the new stylesheet you created and paste the following:

Feel free to modify the details, the only important line to keep as is is the “template” one where we define that the Twenty Fifteen theme is the parent theme. Once done, open your new functions file and paste the following:

The code above loads the stylesheet of the parent theme. This allows us to modify looks instead of having to recreate them from scratch.

Planning Our Diary

Next let’s create the fields we’ll be using for the diary. To add them we’ll need to know what they are first. We’ll also need to decide what a post will be used for. Should we use a post for a single day and add all our information (potentially multiple workouts) to it, or should one post be a workout or some other event?

Let’s handle each post as its own event. We’ll split posts into three categories: “Workouts,” “Meal” and “Sleep” – these are the three most important aspects of a healthy lifestyle.

Each category will have its own settings. Here’s a quick breakdown:

  • Workouts
    • Type
    • Duration
    • Distance
    • Calories
    • Link
  • Meal
    • Calories
    • Fat
    • Protein
    • Carbohydrates
    • Cholesterol
  • Sleep
    • Start
    • End

Based on this list we can set up our fields using ACF. I’ll create an option group for each category and make sure to set up ACF to only show the group for the correct category.

Be sure to create the categories before creating your fields so you can select them in the display rules.

Custom Workout Fields

Next, create a post and select any of your categories. You should see the list of fillable fields appear under the post editor. Go ahead and fill them out now.

As an optional extra, find a nice featured image for your post and add that, too.

Post Fields

If you preview your post it should already look pretty good but it doesn’t have any of the info we entered. Let’s change that and make sure that everything is displayed.

There are a few ways to go about this, the most obvious is to modify the file that displays our content. You could also use the functions.php file to hook into the the_content filter or you could write a plugin. Let’s go with using the functions file.

We’ll need to add a single function, which prepends our workout details underneath our workout posts. Here goes:

This function must return the full content of the post. In our case this would be the content of the post editor with our additional data prepended. First of all, I check if this is indeed a workout post. If it is I gather all the data from ACF into a table. Then I return the original content and prepend our diary to it.

The important function here is get_field(). Pass this any field name (from our custom fields backend) to grab the data for that field. You can use this method for the meal and sleep posts as well:

And here’s what our workout diary looks like on the front-end:

Workout Post


Using this method and modifying it to your needs lets you create a flexible and information-rich platform for yourself where you can record all the things important in your life.

What I like most about creating mini-diaries like this is the personalization, flexibility and future uses it offers. First of all, no one is telling you what information should be important to you. If you want to record the number of birds you counted while skating it’s easy.

This simple system is actually pretty flexible. Since you are storing everything as discrete data your information can be plotted easily on graphs, bar charts, maps and other visualization tools.

I'm interested to hear what uses you can find for such a flexible and customizable diary system. Let us know in the comments below.

Daniel Pataki

Daniel Pataki Daniel is the CTO at Kinsta and has written for many outstanding publications like WPMU DEV and Smashing Magazine. In his spare time, you'll find him playing board games or planning the next amazing office game like the not-at-all-destructive Megaball.