How to Add a Toggle Button To Your WordPress Site

How to Add a Toggle Button in WordPress

If you want to imagine a scenario where your users can switch between different states or options, a toggle button is the perfect solution. These buttons give users quick access to options without taking up too much page space. For example, they’re perfect for switching between monthly and yearly pricing, detailed versus summary views, or display preferences like light and dark modes.

While WordPress doesn’t natively support toggle buttons, Ultimate Blocks’ Tabbed Content block makes it easy to replicate their functionality. The plugin is versatile, and unlike many other options, it offers a broad set of blocks that allows you to transform simple tabs into switchable states with just a few adjustments. 

This guide is presented to show you how to utilize this plugin to achieve a sleek, user-friendly toggle button effect. Let’s get started. 

Step 1: Install Ultimate Blocks Plugin

Simply start by logging into your WordPress dashboard and then navigate to Plugins > Add New. In the search bar, type “Ultimate Blocks,” and once it appears, click Install. After installation, activate the plugin.

Install Ultimate Blocks Plugin

Step 2: Add the Tabbed Content Block

Once Ultimate Blocks is active, decide where to add the toggle button. You can open a new page or post or continue with an existing one. 

From the WordPress editor, type /tabbed content or click the + icon to open the block library. If you’re using the + icon method, type “tabbed content” in the search bar to locate the Tabbed Content Block and insert it into your page or post.

Add Tabbed Content Block

Once you’ve added the block to your editor, this is the interface you will get in your editor. 

Initial interface of the block

At this point, the block doesn’t yet resemble a toggle button. What we need now is a few tweaks in the block settings to bring it closer to a setup that mimics a toggle button that lets users shift between visible content sections. 

Step 3: Customize and Configure the Tabbed Content Block 

With the block selected, we go to the settings on the right. Select the Pills style in the settings to make each tab look like a button instead of a tab.

Go to the settings and select the Pills style

Next, we need to adjust the block’s alignment to the center to make it look more like a toggle button. 

Adjust alignment of the block

Now, to create a toggle state, we need to have at least two tabs. Simply click the + sign next to the first tab to add another tab. If you want to have more tabs, follow the same procedure. 

Add another tab

Once we’ve done that, we have separate tabs to work with. What we need now is to transform these tabs into toggle buttons with the help of the color settings. 

But first, rename the tabs with different labels to represent different toggle states, then move to the style settings on the right sidebar. From there, use the Color Settings to add contrasting colors for each tab to make the active tab more distinct.

Rename the tabs and utilize color settings

At this point, your toggle button is ready. All that remains now is to add your content. Click inside each tab to add specific content. You can include text, images, videos, or any blocks to suit your needs. Just click the + sign and add the related block for your preferred content. 

Add content to the tabs

After that, add related content to each tab. Here, we’ve created a sample for a pricing section using paragraph, heading, and list blocks in both tabs. You can specify the color of each block from the color section and, if you feel more highlight is needed for those tabs, change the content background of the whole block. 

customize tabs

Step 4: Preview and Publish

Use the Preview option to test how your tabs function as a toggle button. Check if each tab opens the correct content section. Once you’re happy with the look and functionality, click Publish or Update if it’s an existing post. Your toggle button effect is now live and ready to gift your users an easy way to toggle between content sections.

Preview and Publish

Conclusion

By following these steps, you can successfully turn standard tabs into a fully functioning toggle button. This setup will improve your content layout and make it accessible and easy to navigate. Your visitors can now switch between options instantly, whether exploring different prices, viewing additional details, or choosing their display preferences. This small addition brings clarity and flexibility to your site and allows users to explore content on their terms while keeping the page clean and organized.



The Tableberg Team