How to Create a Checklist in WordPress Without Plugins

Want to add an interactive checklist to your WordPress site that visitors can tick off as they complete tasks? Maybe it’s a shopping list, a travel packing guide, or a recipe ingredient list. Surprisingly, there’s no built-in Gutenberg block or dedicated plugin for this simple functionality.

You can create one yourself with just a few lines of HTML and JavaScript. This solution works without requiring users to sign up or log in—their progress is saved locally in their browser and persists across visits.

How to Create Your Interactive Checklist

Step 1: Access Your WordPress Editor

Navigate to the page or post where you want to add your checklist. In the Gutenberg editor, click the + button to add a new block and search for “Custom HTML”. Select it.

Step 2: Add the Code

Paste the following code into the Custom HTML block:

<style>
  ul[data-list] {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
  }

  ul[data-list] li {
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 4px;
    transition: background 0.2s, opacity 0.2s;
  }

  ul[data-list] li:hover {
    background: #e0e0e0;
  }

  ul[data-list] li.checked {
    text-decoration: line-through;
    opacity: 0.6;
  }
</style>

<ul data-list="list1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul data-list="list2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const lists = document.querySelectorAll('ul[data-list]');

    lists.forEach(list => {
      const listName = list.dataset.list;
      const savedState = JSON.parse(localStorage.getItem(`checkedItems_${listName}`) || '{}');

      list.querySelectorAll('li').forEach(item => {
        const text = item.textContent.trim();

        // Load saved state
        if (savedState[text]) item.classList.add('checked');

        // Toggle on click
        item.addEventListener('click', () => {
          item.classList.toggle('checked');
          savedState[text] = item.classList.contains('checked');
          localStorage.setItem(`checkedItems_${listName}`, JSON.stringify(savedState));
        });
      });
    });
  });
</script>

Step 3: Customize Your List Items

Replace the list items between the <ul> tags with your own items. For example:

<ul id="shopping-list">
  <li>Your first item</li>
  <li>Your second item</li>
  <li>Your third item</li>
</ul>

Then click “Preview” to see how it displays (image example below):

How It Works

HTML: Creates an unordered list with unique ID shopping-list

CSS: Styles the list items with hover effects and makes them look clickable

JavaScript:

• Uses localStorage to save checked items (stored in the visitor’s browser)
• Saves items by their text content (not position), so your checklist works correctly even if you reorder or add new items later
• Toggles strikethrough styling on click
• Automatically loads previously checked items when the page loads

Multiple Checklists on One Page

If you need multiple checklists on the same page, give each list a unique ID:

<!-- First list -->
<ul id="shopping-list-groceries">
  <li>Item 1</li>
</ul>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const list = document.getElementById('shopping-list-groceries');
    const savedState = JSON.parse(localStorage.getItem('checkedItems-groceries') || '{}');
    // ... rest of the code with updated storage key
  });
</script>

<!-- Second list -->
<ul id="shopping-list-hardware">
  <li>Item 1</li>
</ul>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const list = document.getElementById('shopping-list-hardware');
    const savedState = JSON.parse(localStorage.getItem('checkedItems-hardware') || '{}');
    // ... rest of the code with updated storage key
  });
</script>

Conclusion

You now have a functional, persistent checklist on your WordPress site without needing any plugins. This solution is lightweight, doesn’t require user accounts, and saves progress locally in each visitor’s browser. The checked state persists across page refreshes and return visits from the same browser.

While this approach uses browser localStorage (meaning progress isn’t synced across different devices), it’s perfect for single-session tasks like shopping lists, packing checklists, or step-by-step guides. You can customize the styling further by modifying the CSS section, and you can easily update the list items at any time without affecting users’ saved progress.