A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Create a To-Do Task List in WordPress with the Frontend Checklist Plugin

How to Create a To-Do List with a WordPress Checklist Plugin

Have you ever thought how cool it would be to add an interactive checklist to your website, or one of your blog posts? Checklists are super-useful and kind of cool for all sorts of things. From organizing and hosting events, to planning holidays or simply going shopping, we all make lists, or, at least, we all need them. Whether you need a checklist for your personal use or you want to offer this functionality to your readers, you’ll be glad to hear about a cool little WordPress checklist plugin we want to recommend to you today.

With the use of this excellent plugin, you can easily add checklists for whatever needs you might have. For instance, if you’re running a travel blog, you can put on a checklist of things people absolutely need to bring to a certain destination.

Another example would be a maternity blog, where you can come up with a list of things all parents-to-be need to get before the baby arrives.

You can make shopping lists, grocery lists, to-do lists, pretty much any sort of checklist that makes sense for your particular website or blog.

As we said earlier, you can easily add a checklist to your blog using the WordPress Frontend Checklist plugin. It’s a terrific solution that you’ll just love using.

Checklists are all about being practical, so we decided to be practical too and save you time by researching this excellent solution for you.

Frontend Checklist

Frontend Checklist is a WordPress plugin for creating HTML or PDF checklists for your site. It’s a very simple, intuitive, no-fuss plugin. It’s not particularly feature-rich, but that’s only because you don’t really need it to do that many things. You need a simple checklist and that’s what Frontend Checklist will help you get.

A great thing about this plugin is that you can save your checklists via cookies or in the database. That way, your visitors can access their checklist when they come back to the site and check or uncheck additional items.

Basic Settings and Use

Frontend Checklist Plugin

The first thing to do, of course, is to install the plugin and activate it. Once you got all that sorted out, head over to Settings > Frontend Checklist.

Frontend Checklist

You will see a simple options panel, which contains several different shortcodes. The only available option here is New Checklist.

New Checklist

Click on New Checklist and enter a checklist name first. Don’t worry, the name of the list won’t actually appear on your page.

The Description field is optional. Again, the text you insert here won’t show on your page and only serves for easier management of multiple checklists.

The Items part is an important one. That’s where you actually insert your checklist items. You can add up to 50 items, which is more than enough. Additional fields open as you go through the list and fill the item fields.

If you wish, you can also use basic HTML in these fields. For instance, if you want to emphasize one or more words in bold, put it between tags <b> and </b> . For italic, use <i> and </i> tags.

Checklist Plugin Item List

Once you’ve completed your checklist and inserted all the items, the next step is, naturally, to add it to a page on your site. Frontend Checklist offers four different shortcodes.

Use the first one, [frontend-checklist name=”Standard”], to add a checklist to a page. Make sure to replace the name attribute with the name of your actual checklist.

Checklist Plugin Name

Copy the shortcode and paste it where you want it. We created a special page for the Travel Packing checklist, added an image and placed the checklist below.

You can also add checklists to widgets using the text field. Of course, only do this if it makes sense for you to place the checklist in your footer or your sidebar.

Checklist Shortcode

And here’s the result:

Checklist Plugin Shortcode

The next shortcode option is “Cookie on/off,” and it’s extremely useful. Basically, it helps you set whether you want to save the checklist for future use or not. If the cookies are on, the status of the checklist will be saved for logged-in users and they will be able to pick up where they left off before refreshing or leaving the page. If you don’t want this functionality to be enabled – if you want to display a blank checklist each time, simply turn the cookies off.

[frontend-checklist name=”ChecklistName” cookie=”off”]

You can even set the cookie lifetime, using the days attribute. Simply add the number of days you want your cookies to last and note that the default is 365 days.

[frontend-checklist name=”Standard” days=”180″]

Another interesting option you can use is to offer a link for the PDF version of your checklist. That way, your visitors, once they’ve completed the checklist, can save it on their computer or print it. This is particularly convenient for shopping lists, vacation packing, and so on.

The shortcode for this is [frontend-checklist name=”ChecklistName” type=”pdf” title=”My Checklist” linktext=”To the Checklist”].

The download link will be located below the checklist. You can change the default link test “To the Checklist” and replace it with your own text.

Plugin

Advanced Settings

After you have set your checklist, you may want to customize it and make it more fitting to your website.

With the Frontend Checklist plugin, by default, your checklist has the same settings as other forms used on your site. That means the same font size, color, spacing, and so on. Thanks to this, your website is stylistically uniform, but if you want to change it and make your checklist stand out, that’s possible too.

Checklist Settings

If you want to customize the appearance of your checklist and its items, you need to add HTML tag “span” to each of the items, and define the class. In this case, the class is “myclist,” but you can, of course, use your own. We do this to assign certain attributes to the class, attributes which will change the appearance of your checklist.

Checklist Plugin HTML

After you have inserted HTML tags, you’ll need to define what the items in the “myclist” class will look like. For that, you need to add a few lines of CSS, which is very simple and doesn’t require any particular knowledge of this language. Think of adding CSS as adding certain attributes to a class. Just follow these steps:

Go to Appearance > Customize > Additional CSS.

To your left, you’ll see a field in which you can enter your CSS, in our case, the “myclist” class. You can follow the live changes in the field to the right.

Go to the Menu and find the page where your checklist is located.

Checklist Plugin Advanced

In this example, we’re going to change the font and its properties. Specifically, we’re going to assign six properties to our class:

  • color: for changing the font color of the items in the checklist
  • text-shadow: for adding a 3D feel to the fonts. The numbers in the code define the size of the shadow compared to the font size. You can experiment with adding different colors to shadows and fonts too.
  • font-weight: for setting the thickness of the font
  • font-family: there are plenty of these available, so pick according to your preferences
  • font-size: for setting the size of the fonts used for the checklist items
  • padding: for defining the number of pixels around the item itself. Expressed values refer to top, right, bottom and left, in that order, so pay attention. In our example, it’s just left padding, meaning the space between the box and the item in the checklist.
.myclist {
color: #cc615f;
text-shadow: 0.5px 1px orange;
font-weight: 600;
font-family: 'Comic Sans MS', Comic Sans, cursive;
Font-size:20px;
padding: 0 0 0 10px;
}

Note that you have to pay a lot of attention to the structure of your code, if you want everything to turn out right. The class is defined as .classname. Of course, you will probably have a different name that you will use instead. All properties are placed between {}. The properties are added as property: description of property; and this is the structure that absolutely has to be followed.

Another interesting thing you can set is to make checked items different from the unchecked ones to make the distinction even clearer. To do this, you will add properties to the .checked .myclist class.

Unlike unchecked items, the checked ones will have text-decoration: line-through which crosses out the checked items.

.checked .myclist {
color:#e4d2b8;
font-weight: 300;
text-decoration: line-through;}

The result will look like this:

Checklist Plugin

As you can see, it’s all very simple. Just follow the code structure, experiment, play around with properties and make your blog stand out with this cool and useful addition.

Final Thoughts

Frontend Checklist plugin for WordPress is a useful little tool that you probably didn’t even know you needed. Consider adding a checklist or two to your website to increase user engagement and keep your visitors coming back for more.

Also, now that you know how easy it is, make sure to customize your checklist, make it more personal and in line with your blog style. And let us know of the results!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (3)

  • Eric

    Thank you, this is a precious and unique guide that permitted me to realize a good interactive to-do list on my site! 🙂

    reply
  • Džangir

    I can’t get pdf link, I inserted a shortcode from above with my checklist name?

    reply

Leave a Reply