How to Add a Toggle Button in WordPress (Step by Step)

If you’re looking for a compact and interactive way to display content on your WordPress site, toggle buttons are a fantastic solution. When clicked, a toggle button expands to reveal more content — making your site cleaner, easier to navigate, and much more engaging.

The good news? Adding a toggle button in WordPress is easier than you think. In this quick tutorial, we’ll walk you through the process step-by-step!

Let’s get started.

Adding a Toggle Button in WordPress

To add a toggle button in WordPress, we’ll use the Ultimate Blocks plugin — a popular Gutenberg block plugin that offers a wide range of content blocks, including an easy way to create toggles.

Here’s how you can do it:

Step 1: Install and Activate Ultimate Blocks Plugin

Go to your WordPress Dashboard.
Navigate to Plugins → Add New.
Search for Ultimate Blocks.
Click Install Now, then Activate.

Step 2: Add the Tabbed Content Block

Open the page or post where you want to add the toggle.
Click the (+) Add Block button.
Search for Tabbed Content and insert it.
Alternatively, you can quickly add it by typing /tabbed content in the editor.

Step 3: Customize the Tab Settings

Once the Tabbed Content block is added, it will look something like this:

Don’t worry — we’ll turn it into a toggle button with a few quick tweaks.

In the block settings sidebar, change the Tab Type to Pills.

Step 4: Center Align the Tabs

Align the tabs to the center for a button-like appearance.

Step 5: Add More Toggle Options

Click the (+) icon next to the existing tab to add another toggle option.

Now it’s starting to look like a real toggle switch!

Step 6: Style Your Toggle Buttons

Head over to the Styles settings in the sidebar.
Customize the tab background color and tab text color to match your site’s branding. You can also change tab button border radius.

Step 7: Add Content to Each Toggle Tab

Now that your toggle buttons are ready, it’s time to add content inside each tab.

Think about what would be most useful for your visitors. Here are a few ideas:

Display pricing options (e.g., Monthly vs Yearly plans).
Show different service packages (e.g., Basic vs Premium).
Add FAQs, with each question inside a tab.
Share ingredients vs instructions for a recipe.
Compare product specifications and user reviews.

To add content, simply click inside each tab and start typing or inserting blocks (like paragraphs, images, buttons, etc.).

Here’s a quick demo for you:

That’s it! You now have fully functional and stylish toggle buttons ready.

You can now add different content under each toggle to create a more organized and interactive experience for your visitors.

Conclusion

Adding toggle buttons in WordPress is a simple yet powerful way to enhance your site’s usability and design. With the help of the Ultimate Blocks plugin, the whole process becomes incredibly easy — even if you’re a beginner.

If you want to explore more options, you can also check out our list of best WordPress toggle plugins.

Here are a few more helpful tutorials you might like: