Adding a secondary button to the slider in pure javascript


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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

 

Add_a_button_in_customizr_slider

 

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


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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?

    Thanks

  • Daniel

    Hi,
    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,
    Daniel

  • 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.