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 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 checklist plugins 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 new form

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 your to-do list form fields

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. For reference, make sure to set the fields marked below with an * as Required in the Field Options:

• Text Field*: This field will be your to-do list items.
• Paragraph Field: Here we can add notes or instructions to our to-do list items.
• Date Field*: This will be the due date field. Be sure to set the Year Range appropriately.
• Dropdown Field* 1: This will serve as the priority field. Leave the first option blank, then Normal & Urgent as the next two options.
• Dropdown Field 2: This will serve as the status field. Enter Pending as the first option and Completed as the second.
  
• 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

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

To get started, click on the Formidable → Views tab and set the Basic Settings for the view. Select your newly created form in the dropdown menu and select Both (Dynamic) as your view format.

If you are new to views, this is where things can become a bit complex. Worry not! This time, we'll give you the code so all you'll need to do is copy & paste it in the appropriate boxes.

First, in the Views → Listing tab, you'll see 3 content areas. Here's the code to insert in each content area:

Before 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;}

Content:

<tr class="todo_tr">
<td class="todo_td">[if to-do-status equals="Pending"]<div class="red_x">You are missing options in your shortcode. A field_id is required. field_id=to-do-status value="Completed" label="✗" message="✔"]</div>[/if to-do-status]
[if to-do-status equals="Completed"]<div class="green_check">You are missing options in your shortcode. A field_id is required. field_id=to-do-status value="Pending" label="✔" message="✗"]</div>[/if to-do-status]</td>
<td>[to-do-name]</td>
<td>[to-do-date]</td>
<td>[to-do-priority]</td>
</tr>

After content:

</tbody></table>

After that, switch to the Views → Detail tab (still on the views panel) and insert the following code:

<h3>[to-do-name]</h3>
[to-do-priority show="field_label"]: [to-do-priority]
[to-do-date show="field_label"]: [to-do-date]
[to-do-status show="field_label"]: [to-do-status][if to-do-status equals="Pending"]You are missing options in your shortcode. A field_id is required. field_id=to-do-status value="Completed" label=" - Mark as Complete"][/if to-do-status]

<strong>[to-do-notes show="field_label"]</strong>
[to-do-notes wpautop=0]

<a href="?to-do-list">← Back to All Items</a>

With those bits of code inserted, add some entries into the form you should be able to 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

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

The post How to Create a To-Do List in WordPress appeared first on Formidable Forms.