A WordPress task management app

Build a WordPress Task Management System Using GravityView

Written by Casey Burridge

Last updated:

Categories How-To

Does your team suffer from a lack of collaboration, inefficient task execution, and missed deadlines? If so, it’s time to think about implementing a WordPress task management system!

After all, what better platform to use for task management than the world’s most popular CMS? In this post, we’re going to show you how to build a custom task and project management app using Gravity Forms and GravityView.

We’ll start by setting up a “task submission” form in Gravity Forms where we can add new tasks as they arise. Next, we’ll use GravityView to create a View that allows users to filter, sort, edit, and update tasks from the front end. Finally, we’ll show you how to display only tasks assigned to the currently logged-in user.

Let’s get started! 🙌

Why Do Task Management in WordPress?

WordPress is a versatile content management system (CMS) that powers over 42% of all sites across the web. WordPress is popular due to its flexibility. There are thousands of themes and plugins for WordPress that allow you to build versatile websites and applications.

WordPress is the CMS of choice for many businesses because it’s open-source and easy to use. This provides the perfect platform on which to build a custom task and project management system!

Furthermore, turning WordPress into a task management app saves you from having to learn another set of tools. Why not have your website, task management, and team collaboration all in one?

Importance of Task and Project Management Tools

When it comes to getting things done and completing projects on time, having a task management system is crucial. 

Back in the day, people often used paper to-do lists and whiteboards for recording and keeping track of tasks. But today things have evolved and we’re lucky enough to have a selection of powerful productivity tools at our disposal. Here are some of the major benefits of using such tools.

Keep Everything Organized in One, Central Hub

Having a specific tool for managing your tasks and projects allows you to manage everything from one central hub instead of having notes and reminders in different places. This helps you to stay organized so that you don’t forget about important tasks.

Task Prioritization

A task management system allows you to prioritize tasks and manage important deadlines. Many people spend time on low-priority tasks which end up delaying deadlines for bigger projects. Task management helps you to prioritize your to-dos so that you finish important projects on time.

Improve Team Collaboration

Task management tools allow anyone to create tasks and assign them to other members of the team. Moreover, having a central hub allows your entire team to see who’s working on what. This makes for more efficient work and better collaboration.

Installing Populate Anything

Part of our task management system is going to involve assigning tasks to specific users. For this functionality, we’ll need to install the Populate Anything perk by GravityWiz.

To do this, we’ll download and install Gravity Perks. Then, we’ll hover over Forms and click Perks, scroll down to “GP Populate Anything” and click Install Perk.

Populate Anything by Gravity Wiz

After activating Populate Anything it’s time to move on to the next step.

Creating the Form in Gravity Forms

The next thing we’re going to do is create a form in Gravity Forms that allows us to submit tasks. This is going to form the backbone of our WordPress task management system.

To create a new form, we’ll hover over Forms and click New Form. Then we’ll give the form a name (“Add Task”) and click Create Form

The 'Create a New Form' window in Gravity Forms with an arrow pointing to the 'Create Form' button.

Okay, now it’s time to add the necessary fields. We’re creating a relatively basic task management app so we’ll just add the following fields:

  • Title (Single Line Text)
  • Description (Paragraph)
  • Priority (Dropdown)
  • Status (Dropdown)
  • Due date (Date)
  • Assigned to (Dropdown)

For the “priority” dropdown field, we’ll add three options – “1st priority”, “2nd Priority” and “3rd Priority”. And for the “Status” dropdown we’ll add the following options:

  • “Active” (for tasks that need attending to) 
  • “Future” (for tasks that aren’t urgent) 
  • “On Hold” (for tasks that are paused for one reason or another) 
  • “Completed” (for tasks that have been finished)

The next field that we need to configure is the “Assigned to” dropdown. Here we’re going to use Populate Anything to dynamically populate the dropdown with a list of users.

To do this, we’ll open up the field settings tab, check the box that says “Populate choices dynamically” and set the type to “User”.

A checkbox that says Populate choices dynamically

Next, we’ll change the Ordering to “Display Name Ascending”.

Ordering Display Name Ascending

Okay, that’s it! Now, all that’s left to do is update our form and embed it on a page or post. To do this, we’ll create a new page, add a “Gravity Forms” block and select our form from the dropdown menu.

The Gravity Forms block in Gutenberg with an arrow pointing to the 'Select a Form' dropdown

Here’s what our completed form looks like on the front end.

A Gravity Forms on the front end

Now that our “Add Task” form is set up and ready, the next step is to create a View that lets us display and edit tasks on the front end.

Creating the View in GravityView

GravityView is a powerful plugin that allows you to display Gravity Forms data on your website. GravityView’s flexibility allows you to use it as a WordPress project management plugin.

Now that we have a “task submission” form set up, we’re going to create a View in GravityView that allows us to display those tasks on the front end. 

To create a new View, we’ll hover over Views in the sidebar menu and click on New View.

The 'Add New View' page in GravityView

Next, we need to select our form in Gravity Forms as the “Data Source”. Finally, under “Choose a View Type”, we’ll select the DataTables layout.

The 'Choose a View Type' box in GravityView with an arrow pointing to the DataTables layout

The next step is to start configuring our View by adding widgets and fields to the Multiple Entries page. The Multiple Entries page is where all the tasks will be displayed.

The View loads with a Search Bar widget at the top automatically. We’ll start by adjusting the search settings by clicking on the gear icon. We’ll add a search input for the “Assigned to” field and one for the “Priority” field.

The GravityView Search Bar widget settings

Next, we’ll add fields to the Entries Fields section by clicking on the + Add Field button and selecting the “Title”, “Priority”, “Status”, “Due Date”, and “Assigned to” fields.

GravityView Entries Fields

Next, we’ll add a link through to the Single Entry by clicking on the gear icon next to the Title field and checking the box that says “Link to Single Entry”.

A checkbox that says 'Link to single entry'.

The Single Entry page shows additional information about a task. To edit the Single Entry layout, we’ll click on the Single Entry Layout tab at the top. Here we’ll ensure that all the fields are visible, including the Task Description.

The GravityView Single Entry Layout containing different fields

Now when we click on the title of a task, it will take us through to the Single Entry page where we can view more information about that particular task. 

Sorting Tasks

To sort tasks by a particular field, we’ll scroll down to the View Settings box and click on the Filter & Sort tab. Here we’ll sort tasks by Priority Ascending (ASC) so that the highest priority tasks show up at the top.

An arrow pointing to the 'Filter & Sort' tab in the GravityView Settings

Okay, we’re almost done! The final step is to enable front-end editing so that team members can edit and update tasks from the front end. This is important because we need the ability to update the status of a task or assign it to a different user.

Editing Tasks

Our WordPress task management app would not be complete without the ability to update tasks from the front end. GravityView includes this functionality by default. To enable this feature, all you need to do is configure the Edit Entry layout and then add a link to the Edit Entry page.

However, instead of using GravityView’s built-in editing functionality, we’re going to use the Inline Edit Add-On. Why? Because Inline Edit allows us to edit entries faster and more efficiently, without having to click through to the Edit Entry page.

To install Inline Edit, we’ll hover over Views and click Manage Add-Ons, scroll down to Inline Edit by GravityView and click Install

The GravityView Manage Add-Ons screen

After activating the plugin, we’ll head back over to our View Settings and check the box that says “Enable Inline Edit”.

An arrow pointing to a checkbox that says Enable Inline Edit

Now we’ll be able to edit tasks from the front end without having to click through to the Edit Entry page. Okay, let’s check out our View on the front end.

A GravityView table layout on the front end showing a list of tasks for a WordPress task management system

As you can see, the tasks are displayed one after the other in a table, ordered by priority so that the most urgent tasks appear first. Clicking on the title of one of the tasks will take us through to the Single Entry page which includes the task description.

The Single Entry showing detailed information about a specific task

To edit a task from the front end, all we need to do is click on the “Enable Inline Edit” link. As you can see below, this is a fast and efficient way to edit entries on the front end.

The GravityView inline editing functionality

We’ve now got a fully functioning WordPress task management system that allows users to add tasks as well as filter, sort, and update them from the front end! Now let’s take things a step further and see how we can display tasks that are assigned to the currently logged-in user.

How to Only Display Tasks Assigned to the Current User

Sometimes it’s handy to be able to only display tasks assigned to the current user. We can do this by using the Advanced Filtering extension. To install Advanced Filtering, we’ll hover over Views and click on Manage Add-Ons. Then we’ll scroll down to Advanced Filtering and click Install.

The GravityView Manage Add-Ons screen

After activating the extension, we’ll head back over to our View Settings and click on the Filter & Sort tab. Now under the Advanced Filtering section, we’ll add the following condition:

The Advanced Filter containing the User ID merge tag

As you can see, we’re using the {user:ID} merge tag to only display tasks where the value of the “Assigned to” field matches the ID of the currently logged-in user.

A list of tasks displayed in the task management app that are all assigned to the same person

Now when one of our team members opens the task list, they will only see the tasks that are assigned to them.

Start Building Your Project and Task Management App With GravityView

Using a task and project management system helps you prioritize your work, stay on track and ensure that important deadlines are always met. Moreover, task management apps are crucial for team collaboration and organization.

But why spend time (and money) on third-party tools when you can build your own task management app using WordPress? In this post, we showed you how to build a custom task management system using Gravity Forms and GravityView.

Did you find this post helpful? Check out some of our other tutorials showing you how to build a WordPress job board or create a custom issue tracker.