How to Create a To-Do List in WordPress

A to-do list isn't just a task organizer. It can help you prioritize, delegate, save time, & boost productivity too! Learn to make one with WordPress forms.

Approximate read-time: 6.5 minutes

Interested in task management solutions? Do you use WordPress? Ever thought about creating a WordPress project management solution? The dream of collaboration, productivity, and organization is closer than you think.

There are a lot of WordPress to-do list apps, but who wants to download another app? If you are already a WordPress user, all you need to create a to-do list in a solid form plugin.

Sure, there are WordPress themes and even plugins that allow users to create a frontend checklist. But think about what an online to-do list is. It's just a pre-built form!

And since every WordPress site needs a form builder plugin, adding a WordPress checklist plugin feels a bit redundant. Why complicate your site with another management plugin?

You know what else? More WordPress plugins usually lead to slower load times. So really, it's always best to avoid installing too many of them!

With all that in mind, why not build your own frontend to-do list on your WordPress site? If you are working with your website daily, this could be a great way to maximize productivity.

In this guide, we'll show you how to use Formidable Forms to build and manage a WordPress frontend to-do list. As you can see, there are 9 steps involved but don't worry because each step is easy as pie.

With your new WordPress frontend to-do list, You'll be more organized & productive before you know it!

Step 1: Create a to-do list form in WordPress

Log in to your WordPress admin panel and create a new form. Click the Add New button and click the Blank Form icon.

A pop-up window will open, asking you for a Form Name and Form Description. Give it a name and description if you want.

Step 2: Add fields to your to-do form

There are only a handful of fields needed for a basic to-do form. All of these are added via the Add Fields menu on the left of your screen. Soon you'll have a fully functional interactive checklist!

Go ahead and add the following fields into your to-do list form. We recommend using the field keys mentioned below, so you can quickly copy and paste the content for the View later on.

• Text Field: This field will be your to-do list items. Set the field key to to-do-name.
• Paragraph Field: Here we can add notes or instructions to our to-do list items. Use to-do-notes for the field key.
• Date Field: This will be the due date field. Be sure to set the Year Range appropriately, and use to-do-date for the field key.
• Dropdown Field 1: This will serve as the priority field. Leave the first option blank, then Normal & Urgent as the next two options. Insert to-do-priority for the field key.
  
• Dropdown Field 2: This will serve as the status field. Enter Pending as the first option and Completed as the second. Set the field key to to-do-status.
  
• User ID field: This hidden field will capture a logged-in user's ID so you can see who added the task to your to-do list.

And that's it! Your WordPress frontend to-do list is finished...

Almost!

Your to-do list form may be finished, but neither the form or the to-do list itself is visible anywhere by default. There are two more steps needed to bring your to-do list into the world.

Step 3: Publish your to-do list

The first thing you'll want to do is publish the to-do list entry form by adding it to a page or post. That's where you'll enter new tasks.

To do that, create a new page or post and add your to-do list form. The easiest way to do this is by adding it with your shortcode manually.

Step 4: Create a view to list tasks

Then you'll create a view so you can see the list on your site.

To get started, go to the Formidable → Views page and click Add new. Choose Table for the View type and choose your to-do list form as the data source.

Next, in the Customize View step, select the fields that you want to display in the table. For this example, we'll use the fields for Status, Item name, Due date, and Priority.

Check off to-do items

Now, you've got a table created for you. But we're missing the option to check off a to-do. So let's add it.

You'll see a few content areas. Here's the code to add into each one. You can just copy and paste:

Before content: (before the existing content)

<style type="text/css">.red_x a {color:red;} .red_x {color:green;} .green_check a {color:green;} .green_check {color:red;}
.todo_tr{border-bottom: solid 1px #E3E3E3;}</style>

Content:
Replace the first <td>[something]</td> with this:

<td>[if to-do-status equals="Pending"]<div class="red_x">[frm-entry-update-field id=[id] field_id=to-do-status value="Completed" label="✗" message="✔"]</div>[/if to-do-status]
[if to-do-status equals="Completed"]<div class="green_check">[frm-entry-update-field id=[id] field_id=to-do-status value="Pending" label="✔" message="✗"]</div>[/if to-do-status]</td>

With those bits of code inserted, add some tasks into the form you should see something that looks like this:

Finishing up your WordPress to-do list

Now you're truly finished and ready to take advantage of your new organizational tool. Aren't you glad you skipped the checklist plugin?

Read More: Productivity tips in Formidable

• 3,000+ Formidable Forms API Integrations
• 5 Top Reasons to Switch to Paperless Forms
• Conditional Logic WordPress Form Email Notifications

---

If you're not already a Formidable user, check out our free WordPress form builder plugin to get started. Or take a look at our premium plans.