How to Add a Simple Button with JavaScript in WordPress (Using WP Code Snippets)

John G: For the first exercise, I want to keep things really simple, so I thought of trying to create a button that when pressed displays a message saying ‘button pressed’.

So I asked ChatGPT to write a ‘how-to’ guide that I could follow and also to write the Javascript code and anything else that was needed for this project.

Here’s what ChatGPT gave me:

ChatGPT

If you’re new to JavaScript but want to start adding some interactive elements to your WordPress site, this tutorial is for you! We’re going to create a simple button that, when clicked, displays the text “Button Pressed” in a box below it. No coding experience needed—just follow along step by step!

What You’ll Need:

A WordPress site
The WP Code Snippets plugin (installed and activated)

Step 1: Open WP Code Snippets

In your WordPress dashboard, go to Snippets > Add New.
Give your snippet a name like “Button Click Functionality”.
In the Code Type dropdown, select JavaScript (Front-end) since we’re adding functionality to the page.

Step 2: Add the JavaScript Code

Copy and paste the following JavaScript code into the snippet editor:

// Function to display text when button is pressed
document.addEventListener("DOMContentLoaded", function () {
    // Select the button and the box
    const button = document.getElementById("myButton");
    const box = document.getElementById("messageBox");

    // Add a click event to the button
    button.addEventListener("click", function () {
        box.textContent = "Button Pressed";
    });
});

Step 3: Add the Button and Message Box to Your Page

Now that we have the JavaScript ready, we need to place the button and message box on a WordPress page or post.

Edit the page or post where you want the button to appear.
Switch to the Custom HTML Block (if using the Block Editor) or simply add the following HTML code inside the Text tab of the Classic Editor:

<button id="myButton">Click Me</button>
<div id="messageBox" style="margin-top: 10px; font-weight: bold;"></div>

Step 4: Save and Activate the Snippet

Go back to your WP Code Snippets page.
Click Save Changes and Activate.

Step 5: Test It Out!

Visit the page where you added the button.
Click the button.
You should see “Button Pressed” appear below it!

John G: OK, so let’s give this a go. I have copied the Javascript code into a ‘sitewide header’ in WP Code Snippets, so the Javascript should be accessible to every page on this website, and I have added the ‘custom HTML’ block below:

ChatGPT:

What Just Happened?

We used JavaScript to listen for a button click.
When the button is clicked, the script updates the text inside the message box.
By adding this as a WP Code Snippet, the JavaScript runs automatically on the front end of your site.

Next Steps

If this worked for you, awesome! 🎉 Now, try modifying it:

Change the message text to something different.
Style the button using CSS.
Make it reset when clicked again!

This is just the beginning of what’s possible with JavaScript and WordPress. Keep experimenting, and let’s keep building together! 🚀

John G: Now that’s clearly not the most ground-breaking piece of computer work there’s ever been, but given that all I had to do was ask the AI to write a guide – including any code and html I need – and then I simply had to follow the steps written, I think that’s amazing.

Although this was only a simple idea, it demonstrates that you can have an idea and turn that idea into reality, with the help of AI.

Let’s ask ChatGPT to expand on this button task:

“Please expand the functionality of the button, still keeping things simple”

ChatGPT:

Expanding the Button Project

Instead of just displaying “Button Pressed”, let’s create a counter that increases each time the button is pressed. This will introduce variables and dynamic updates in JavaScript while keeping things manageable.

What Will Happen?

You’ll click a button.
A number (starting from 0) will increase every time the button is clicked.
This number will be displayed inside a box below the button.

Step 1: New JavaScript Snippet

In WP Code Snippets, create a new snippet with this:

javascriptCopyEdit// Wait for the page to load before running the script
document.addEventListener("DOMContentLoaded", function () {
    let count = 0; // Initialize the counter

    // Select button and display box
    const button = document.getElementById("myButton2");
    const box = document.getElementById("messageBox2");

    // Update the display with the initial count
    box.textContent = "Count: " + count;

    // Add click event to increase count
    button.addEventListener("click", function () {
        count++; // Increase count by 1
        box.textContent = "Count: " + count; // Update display
    });
});

Step 2: Page Custom HTML

Add a new Custom HTML Block with this:

htmlCopyEdit<button id="myButton2">Click Me</button>
<div id="messageBox2" style="margin-top: 10px; font-weight: bold;"></div>

Step 3: Save and Activate

In WP Code Snippets, click Save Changes and Activate.
Refresh your page and test it out by clicking the button!

John G: Let’s try that out!
Don’t worry about understanding the Javascript at this stage, we can ask ChatGPT later to help by explaining what the code does. The main point of this exercise is to show that you can create ‘things’ just by asking ChatGPT using normal everyday language and using the code that the AI generates:

ChatGPT:

What’s Happening Here?

We introduced a counter (count) that starts at 0.
Each time the button is clicked, the counter increases by 1.
The updated count is displayed inside the message box.

This introduces state management—an essential concept in JavaScript—while still keeping things simple. Try it out, and let me know if you want to tweak it or add more features! 🚀

John G: State Management? What’s that all about ChatGPT?

ChatGPT:

What is State Management (in Simple Terms)?

Think of state as a box where you store information that your website needs to keep track of while people are using it.

For example, in our button project, the state is the count number—because every time you press the button, the number changes and we need to remember what it is.

Everyday Example of State Management

Imagine you’re playing a video game, and you collect 5 coins.

If the game forgets how many coins you have every time you move to a new level, that would be a problem.
State management makes sure the game remembers your 5 coins so they don’t reset unless you start a new game.

The same idea applies to websites!

Why Does This Matter in JavaScript?

When you build interactive features in JavaScript (like our button counter), the state keeps track of changing values, like:

A score in a game
A form’s input before it’s submitted
Whether a menu is open or closed

In our example:

The state is the count number.
JavaScript updates the state every time you click the button.

How Can We Store State?

In memory (like our count variable) → This works while the page is open.
In localStorage → This keeps data even if you refresh the page.
In a database (for bigger applications like shopping carts).

Right now, we’re just managing state inside JavaScript while the page is open, but we could take it further by storing it even after refreshes.

Want to Try an Upgrade?

We could modify our counter to use localStorage so that even if you close and reopen the page, it remembers the last count. Let me know if you want to try that! 🚀

John G: Where is local storage located? how does that work if there are multiple people accessing the webpage at the same time?

ChatGPT:

Where is `localStorage` Located?

localStorage is part of your browser—it stores data on your device (computer, phone, tablet) inside your web browser.

Each website has its own separate localStorage space. This means:

The data is only available to the person using that browser on that device.
If you open the same website on a different device (or another browser), the stored data won’t be there.
If you clear your browser cache, the data gets wiped.

How Does It Work with Multiple People?

Since localStorage is stored locally per browser, different people using your website won’t share the same stored data.

If Person A clicks the button 10 times, their browser will remember “10”.
But if Person B visits the site for the first time, their count will start at 0.

Each visitor gets their own personal storage, independent from others.
If you need shared state (so that all users see the same count), you’d need a database on a server instead.

Want to Try It? (Saving State with `localStorage`)

We can modify our counter so that even if you refresh the page, the number doesn’t reset. Would you like me to guide you through that? 🚀

John G: Is storing data like ‘count’ in visitors’ browsers an example of a ‘cookie’?

ChatGPT:

Is `localStorage` an Example of a Cookie?

Not exactly, but they are similar in that both store data in a visitor’s browser. However, there are key differences between cookies and localStorage:

Feature	`localStorage`	Cookies
Where it’s stored	Browser (on the user’s device)	Browser (on the user’s device) but can also be sent to a server
Data Size	Up to 5MB	Only 4KB max
Expiration	Never expires (unless the user clears it)	Can be set to expire at a specific time
Accessible By	Only JavaScript on the same website	Both JavaScript and the server
Used For	Storing user preferences, temporary data, etc.	Authentication, tracking users across sessions, remembering login details

So, What’s the Difference?

Cookies are mainly used for server-client communication (e.g., logging in, tracking users across sessions).
localStorage is only for client-side storage (it doesn’t send data to a server).

Think of cookies like a note you leave on a visitor’s browser that can be read by both JavaScript and the server.
Whereas localStorage is more like a private notepad that JavaScript can access but the server can’t see.

Example Use Cases:

localStorage → Save a visitor’s theme preference (dark mode vs. light mode).
Cookies → Store a login session so the visitor stays logged in even after closing the browser.

Would you like to try modifying your counter to use localStorage so the number remains the same even after refreshing the page? 🚀

John G: OK, please give me the steps to save the ‘count’ value in local storage?

ChatGPT:

How to Store a Button Click Counter Using `localStorage` in WordPress

Now that we’ve built a simple button counter, let’s make it remember the count even after refreshing the page! We’ll use localStorage, which stores data in the visitor’s browser.

What Will Happen?

When the visitor clicks the button, the count increases.
If they refresh the page, the count stays the same (instead of resetting to 0).

Step 1: Update Your JavaScript Snippet

Go to WP Code Snippets, open your existing snippet, and replace the JavaScript with this:

// Wait for the page to load before running the script
document.addEventListener("DOMContentLoaded", function () {
    let count = localStorage.getItem("buttonCount") || 0; // Get saved count or start at 0

    // Select button and display box
    const button = document.getElementById("myButton3");
    const box = document.getElementById("messageBox3");

    // Update the display with the stored count
    box.textContent = "Count: " + count;

    // Add click event to increase count
    button.addEventListener("click", function () {
        count++; // Increase count by 1
        localStorage.setItem("buttonCount", count); // Save updated count
        box.textContent = "Count: " + count; // Update display
    });
});

Step 2: Add the Button to Your Page

If you haven’t already, go to the page where you want the button and insert this HTML in a Custom HTML Block:

<button id="myButton3">Click Me</button>
<div id="messageBox3" style="margin-top: 10px; font-weight: bold;"></div>

Step 3: Save and Activate

Click Save Changes and Activate in WP Code Snippets.
Refresh your page and test it out!

What’s Happening Here?

localStorage.getItem("buttonCount") → Retrieves the saved count when the page loads.
If there’s no saved value, it starts at 0.
Every time the button is clicked, the count increases and gets saved in localStorage.
Even after refreshing, the counter keeps its last value.

Bonus Challenge: Add a Reset Button!

Want a button to reset the count back to 0? Try adding this inside your HTML block:

<button id="resetButton">Reset Counter</button>

Then, change your JavaScript snippet completely to this:

// Wait for the page to load before running the script
document.addEventListener("DOMContentLoaded", function () {
    let count = localStorage.getItem("buttonCount") || 0; // Get saved count or start at 0

    // Select button, message box, and reset button
    const button = document.getElementById("myButton3");
    const box = document.getElementById("messageBox3");
    const resetButton = document.getElementById("resetButton"); // Move this inside

    // Update the display with the stored count
    box.textContent = "Count: " + count;

    // Add click event to increase count
    button.addEventListener("click", function () {
        count++; // Increase count by 1
        localStorage.setItem("buttonCount", count); // Save updated count
        box.textContent = "Count: " + count; // Update display
    });

    // Add click event to reset count
    resetButton.addEventListener("click", function () {
        count = 0; // Reset count
        localStorage.setItem("buttonCount", count); // Save reset value
        box.textContent = "Count: " + count; // Update display
    });
});

Now you have a reset feature! 🚀

Try this out and let me know how it goes!

John G: Here it is!

John G: That’s the end of this first exercise and hopefully it’s shown that it’s possible to build/add coded functionality to a website, without needing to understand anything about code at all.

Even though this exercise is very simple, does it have real world applications? Let’s ask ChatGPT:

“Can you give me any real world applications that uses functionality similar to this simple button set up?”

ChatGPT:

Absolutely! Your button click + counter + reset setup might seem simple, but the underlying logic (event listeners, state updates, local storage) is used in many real-world applications. Here are some practical applications based on this concept:

1. Online Shopping Cart (E-Commerce) 🛒

Clicking the “Add to Cart” button increases the count of items in the cart.
The count updates in real-time (just like your counter).
The total is stored (session storage, cookies, or a database) so the cart persists if the user navigates away.
A “Clear Cart” button resets the count back to 0.

🔹 Example: Amazon, Shopify stores.

2. Like/Upvote System (Social Media & Forums) 👍⬆️

Clicking a like button increases the count (just like your counter).
The count is saved so it remains even after refreshing.
Clicking the “Unlike” or “Reset” button removes the count (similar to your reset button).

🔹 Example: YouTube video likes, Reddit upvotes, Facebook reactions.

3. Task Completion Tracker (To-Do Apps) ✅

A user clicks a button to mark tasks as complete.
The number of completed tasks updates live.
A reset button clears progress.
The count is stored (like localStorage) so it doesn’t disappear on refresh.

🔹 Example: Habit trackers, Trello, Todoist.

4. Website Visitor Counter (Analytics) 📊

Each time a visitor lands on a page, a counter increases.
The count is stored and remains persistent.
Admins can reset it if needed.

🔹 Example: Basic visitor hit counters on personal blogs.

5. Digital Voting Systems 🗳️

Clicking a vote button increases the vote count.
The system remembers votes so they don’t reset accidentally.
A reset button can clear votes for admins.

🔹 Example: Online surveys, product ratings.

6. Step Counter / Exercise Tracker (Fitness Apps) 🏃‍♂️

Clicking “Log a Step” increases the step count.
The count is stored for later.
A reset button clears progress at the start of a new session.

🔹 Example: Step-tracking websites, fitness challenges.

7. Quiz Score Counter (E-Learning) 🎓

A user clicks “Submit Answer”, and a score counter increases for correct answers.
The score persists across questions.
A reset button clears progress to restart the quiz.

🔹 Example: Kahoot, Duolingo, online quizzes.

How This Applies to Your Learning?

Your button click + counter + reset setup is the foundation of all these real-world applications. By adding:

Databases → Store data for all users instead of just local storage.
APIs → Sync data with other platforms.
CSS Styling → Improve user experience.
User Authentication → Track personal progress.

You can scale this idea into something powerful! 💡

John G: Did you try building these buttons yourself? How did it go? Does it make you excited about the possibilities of building with AI? Please leave your comments below:

What You’ll Need:

Step 1: Open WP Code Snippets

Step 2: Add the JavaScript Code

Step 3: Add the Button and Message Box to Your Page

Step 4: Save and Activate the Snippet

Step 5: Test It Out!

What Just Happened?

Next Steps

Expanding the Button Project

What Will Happen?

Step 1: New JavaScript Snippet

Step 2: Page Custom HTML

Step 3: Save and Activate

What’s Happening Here?

What is State Management (in Simple Terms)?

Everyday Example of State Management

Why Does This Matter in JavaScript?

How Can We Store State?

Want to Try an Upgrade?

Where is localStorage Located?

How Does It Work with Multiple People?

Want to Try It? (Saving State with localStorage)

Is localStorage an Example of a Cookie?

So, What’s the Difference?

Example Use Cases:

How to Store a Button Click Counter Using localStorage in WordPress

What Will Happen?

Step 1: Update Your JavaScript Snippet

Step 2: Add the Button to Your Page

Step 3: Save and Activate

What’s Happening Here?

Bonus Challenge: Add a Reset Button!

1. Online Shopping Cart (E-Commerce) 🛒

2. Like/Upvote System (Social Media & Forums) 👍⬆️

3. Task Completion Tracker (To-Do Apps) ✅

4. Website Visitor Counter (Analytics) 📊

5. Digital Voting Systems 🗳️

6. Step Counter / Exercise Tracker (Fitness Apps) 🏃‍♂️

7. Quiz Score Counter (E-Learning) 🎓

How This Applies to Your Learning?

Leave a Comment Cancel reply

Where is `localStorage` Located?

Want to Try It? (Saving State with `localStorage`)

Is `localStorage` an Example of a Cookie?

How to Store a Button Click Counter Using `localStorage` in WordPress