--- title: "How To Add Switcher Toggle Button in WordPress?" url: https://nexterwp.com/docs/add-switcher-in-wordpress/ date: 2023-02-02 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "Some choices are better shown one at a time — monthly against yearly, metric against imperial, before against after. Putting both on screen at once makes the reader do the..." image: https://nexterwp.com/wp-content/uploads/2023/02/add-switcher-in-wordpress-1024x519.jpg word_count: 750 --- # How To Add Switcher Toggle Button in WordPress? ## Key Takeaways - Switcher block muestra dos paneles de contenido y un conmutador, y en la edición gratuita funciona en Nexter Blocks y con Nexter Blocks Pro. - Switcher bloquea solo dos opciones a la vez, muestra primero el pane 1 y permite cambiar entre Monthly y Yearly o cualquier par de alternativas. - Switcher recuerda la elección solo cuando el visitante hace clic en las etiquetas, no en el control deslizante, y esa elección se guarda en el navegador tras recargar. - Carousel Remote necesita Nexter Blocks Pro para conectarse al Switcher; con solo el plugin gratuito, el id de conexión queda vacío y ningún remoto lo encuentra. Some choices are better shown one at a time — monthly against yearly, metric against imperial, before against after. Putting both on screen at once makes the reader do the work. The Switcher holds two panes of content and a toggle, and shows one of them. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-content-switcher/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Switcher, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=yEwEQFiS59M ## Steps - Add the **Switcher** block to your page. ![Adding the Switcher block](https://nexterwp.com/wp-content/uploads/2023/02/switcher-activation-new.webp) - Set the two **labels** — for example Monthly and Yearly. ![Setting the two switcher labels](https://nexterwp.com/wp-content/uploads/2023/02/switcher-design-type.webp) ![A switcher showing the Content style, first pane active](https://nexterwp.com/wp-content/uploads/2026/09/switcher-content-before.webp) ![The same switcher after clicking to the second pane](https://nexterwp.com/wp-content/uploads/2026/09/switcher-content-after.webp) ![A switcher showing Style 1, first pane active](https://nexterwp.com/wp-content/uploads/2026/09/switcher-content-before.webp) ![The same switcher after clicking to the second pane](https://nexterwp.com/wp-content/uploads/2026/09/switcher-content-after.webp) - Choose the **source** for each side and enter the content for pane 1 and pane 2. ![Choosing the content source for each pane](https://nexterwp.com/wp-content/uploads/2023/02/switcher-label-icon-new.webp) - Pick a **style** for the toggle, and switch the slider button off if you want the labels alone. ![Choosing the switcher style](https://nexterwp.com/wp-content/uploads/2023/02/switcher-conection-id-new.webp) ![A switcher showing Style 2, first pane active](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style2-before.webp) ![The same switcher after clicking to the second pane](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style2-after.webp) ![A switcher showing Style 3, first pane active](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style3-before.webp) ![The same switcher after clicking to the second pane](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style3-after.webp) - Publish and try the toggle on the real page. ![The published switcher](https://nexterwp.com/wp-content/uploads/2023/02/switcher-style-new.webp) > ***The visitor's choice is remembered only if they click the labels, not the slider.** Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load.* ## How It Behaves The Switcher shows one of two panes of content at a time, with a toggle between them. It is the block behind a monthly / yearly pricing switch, or any pair of alternatives that should not both be on screen at once. - **Pane 1 is shown first.** Measured on a default block: the first pane is visible, the second is hidden, and the toggle is in its inactive state.- **The toggle swaps them.** Measured: clicking the slider hid pane 1, showed pane 2 and put the toggle into its active state.- **The labels switch the panes on their own.** Measured with the slider turned off: clicking either label still switched the content, so the toggle button is optional.- **The block does remember, by design.** Measured: choosing the second pane by its label stored the choice in the browser, and the page opened on that pane after a reload. The choice is per browser, not per visitor account.- **The panes and the toggle work in the free plugin.** Measured with Pro deactivated: both content panes rendered with their text and the toggle switched between them exactly as under Pro. ![A switcher showing Style 4, first pane active](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style4-before.webp) ![The same switcher after clicking to the second pane](https://nexterwp.com/wp-content/uploads/2026/09/switcher-style4-after.webp) ![The Carousel ID field used to pair a remote with the switcher](https://nexterwp.com/wp-content/uploads/2023/02/carousel-anything-carousel-remote-unique-carousel-id-2-new.webp) ## Limitations - **The visitor's choice is remembered only if they click the labels, not the slider.** Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load.- **Two panes only.** For three or more alternatives use the Tabs Tours block instead.- **Both panes are in the page.** The hidden one is hidden with CSS, not withheld, so treat it as public content.- **Connecting a Carousel Remote needs Nexter Blocks Pro.** Measured: with Pro active the switcher carries the connection id the remote looks for; with only the free plugin the id is empty, so no remote can find it. ## Troubleshooting ### The toggle does nothing Check you are on the published page rather than the editor, and that both panes have content. Measured: the switch runs on the front end. ### It forgets which side I chose **The visitor's choice is remembered only if they click the labels, not the slider.** Measured on one page with both controls: clicking the label kept the second pane selected after a reload, while clicking the slider switched the panes but was forgotten on reload. This is reported to the development team; until it is fixed, do not rely on the choice surviving a page load. ### I want the labels without the round slider Switch the toggle button off. Measured: the labels switch the panes on their own. ### My second pane is empty Check the source and content for pane 2 — each side is set separately, and it is easy to fill in one and not the other. ### A Carousel Remote will not drive it **Connecting a Carousel Remote needs Nexter Blocks Pro.** Measured: with Pro active the switcher carries the connection id the remote looks for; with only the free plugin the id is empty, so no remote can find it. See the [Carousel Remote connection guide](https://nexterwp.com/docs/connect-carousel-remote-with-switcher/). ## Related Docs - [Toggle a pricing table with the Switcher](https://nexterwp.com/docs/toggle-pricing-table-switcher/)- [Connect a Carousel Remote with the Switcher](https://nexterwp.com/docs/connect-carousel-remote-with-switcher/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)