Adding a secondary button to the slider in pure javascript

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

This snippets will allow you to add another button in any slide like in the picture below.




This snippet has been developed in javascript because there are no easier way to do this with filters or actions in the current version of the theme (v3.1.6).

To make the snippet works :

  1. Create a slide with a call to action linked to a page or post of your site
  2. Grab the page/post’s id of this call to action, and replace FIRST-POST-ID ( 2 in the snippet below ) by its value in the code
  3. Grab the id of the secondary  page/post’s you want to link to the secondary buttons and replace SECOND-POST-ID ( 9 in the snippet below ) by its value  in the code


Further reading :

Styling the buttons in Customizr

Adding an external url to a slide


Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

Related Snippets you may also like

4 thoughts on “Adding a secondary button to the slider in pure javascript

  • Moh

    It doesn’t show a new button after pasting the code into functions.php. We replaced “Call to action #2” with our custom text but the rest of the instructions are unclear.

    What part of the code are we supposed to replace and/or how exactly do we make the 2nd button show?

    Finally, Can we add the button below the first button?


  • Daniel

    I try to figure out two things:

    – how to I get rid of the light grey rectangle around my call to action button
    – how to move the call to action button further to the right underneath the SubHeadline

    I’m not sure if the Call To Action Button is created by Magic Action Box light or if it’s within your framework?

    Appreciate any help I can get…

    Thanks from Cologne, Germany,

  • Jess

    Hey, so I added this snippet, but have a problem – adding the 2nd button ALSO adds it to the nav menu right after the 1st. I don’t want it there.

Comments are closed.