{"id":15359,"date":"2025-04-01T17:07:25","date_gmt":"2025-04-01T17:07:25","guid":{"rendered":"https:\/\/wptablebuilder.com\/?p=15359"},"modified":"2025-04-02T11:10:07","modified_gmt":"2025-04-02T11:10:07","slug":"how-to-add-a-toggle-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/wptablebuilder.com\/it\/how-to-add-a-toggle-button-in-wordpress\/","title":{"rendered":"How to Add a Toggle Button in WordPress (3 Easy Steps)"},"content":{"rendered":"
\"How<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Anyone who wants to learn how to add a toggle button in WordPress can follow our tutorial, as we will show you some easy steps for doing that.\u00a0<\/p>\n\n\n\n

A toggle button helps you to switch between content with a simple click. Also, a toggle button can help you increase the user experience since it does not lead you to a new webpage, saves space for adding extra content, etc. <\/p>\n\n\n\n

Today, we will show you three easy steps to help you learn to add a Toggle button without any coding, nor do you need to purchase any premium plugin. <\/p>\n\n\n\n

How to Add a Toggle Button in WordPress?<\/h2>\n\n\n\n

We will use Ultimate Blocks<\/a>, a block editor-only plugin that offers various functionalities in one place. Currently, the plugin has 25+ fantastic blocks<\/strong> for creating unique, engaging content without coding skills.\u00a0<\/p>\n\n\n\n

Step 1: Install the Ultimate Blocks Plugin<\/h3>\n\n\n\n

The first step is installing Ultimate Blocks; go to your website\u2019s WordPress Dashboard > Plugins (1) > Add New<\/strong> (2)<\/strong>. Now type<\/strong> \u201cUltimate Blocks<\/strong>\u201d (3) <\/strong>in the search box and click the \u201cInstall Now<\/strong>\u201d (4) <\/strong>button. Do exactly as shown in the image below.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

After installing the plugin, you must activate it. Otherwise, it won\u2019t work. Also, the plugin is a Gutenberg-only plugin. Therefore, it will not work with any other page builder.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Step 2: Insert the Tabbed Content Block<\/h3>\n\n\n\n

To add a Toggle Button, insert the \u201cTabbed Content\u201d block of the Ultimate Blocks in your post. For that, click the \u201c+<\/strong>\u201d button<\/strong> (1)<\/strong> in the editor to add a new block, type \u201cTabbed Content<\/strong>\u201d (2)<\/strong> in the search box, and click the block<\/strong> (3)<\/strong>.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

When the block is added to your post, you can see the tabbed content like the image below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

However, the inserted block will not look like a Toggle button, and to make it a toggle button, you have to customize the design settings of the block, and you also need to add more tabs. These tabs will work like Toggle Buttons.\u00a0<\/p>\n\n\n\n

Add more tabs by pressing the \u201c+<\/strong>\u201d button inside the Tabbed Block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Check out the image below, which includes the functionalities in the live editor. You can adjust the tab\u2019s title, title alignment, tab alignment, add other blocks in the content area, etc., from the block editor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Step 3: Customize the Tabbed Content To Add A Toggle Button<\/h3>\n\n\n\n

Select the \u201cContent Toggle\u201d block in the editor by clicking above the block. Click the \u201cSettings\u201d button at the top right to customize the block. Select Block (1) > Block Settings (2) > Tab Type (3) > Pills (4)<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Adjust the alignment of the tabs to the center. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

You might think that at this point your work is done. But wait, you need to make your tabs look like toggle switches. <\/p>\n\n\n\n

To make the tabs work and look like toggle switches, you must customize the Tab Style in the Styles menu of the Block Settings. <\/p>\n\n\n\n

Adjust the default tab color, active tab color, Tab Title Color, Active Tab Title color, and Border as needed for all the tabs.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

And that\u2019s it. Your Toggle Buttons are ready. Now you can add content and other blocks inside both of the tabs.\u00a0Here is the Tabbed content block demo after adding content and customization. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Isn\u2019t it easy? You must follow all the simple steps to create unique, eye-catching Toggle Buttons in WordPress Posts & Pages. <\/p>\n\n\n\n

You can also follow the video tutorial of this post below. Enjoy!<\/p>\n\n\n\n

\n