Keep button pressed

Hello @pdegelder

The example is using jQuery (JavaScript library) to toggle (change by adding or removing) the class of the button when it’s pressed and gives it the active class that is defined in CSS.

YOU SHOULD USE A CHILD THEME FOR YOUR PERSONAL CUSTOMIZATION OR EVERYTHING WILL BE REMOVED ON THE NEXT UPDATE OF YOUR PARENT THEME !

To accomplish this try the following :

1- Create a js folder at the root of your child theme (same level as style.css) then create inside this js folder a .js file for example mybuttonclick.js and put the following inside it

( function( $ ) {
    $('button').on('click', '#mybutton', function() {
        $(this).toggleClass('active');
    }
} )( jQuery );

This will tell the button that have an id of mybutton to add/remove the active class to it when it’s clicked.

2- You should now tell WP to call the js file so the function can do it’s work.
In your child theme functions.php file add the following

function mybutton_script() {
    wp_enqueue_script( 'mybuttonscript', get_template_directory_uri() . '/js/mybuttonclick.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'mybutton_script' );

This will tell WP to grab the mybuttonclick.js file that is inside the js folder at the root of the theme and execute the function(s) that lives inside it.

3- Finally, in your child theme style.css put

.active{
    background:#357EBD;
    color:#FFF
}

OF COURSE, you’ll have to create in your HTML a button with an id of mybutton so that the code works !

If you need further help, don’t hesitate.

SYA 🙂

Hello @pdegelder

If you gave me a link from the beginning it would have been easier.
Now that I see your theme config, it’s easier for me to help you get it done.

1- First your button is <button class="mybutton" value="click me">click me</button>
it should have an id of mybutton ! No need here for the value !
<button id="mybutton">click me</button>

2- Change the active class by clicked !
$(this).toggleClass('active'); BECOMES $(this).toggleClass('clicked');
AND

.clicked{ /* HERE WE JUST REPLACE active by clicked */
    background:#357EBD;
    color:#FFF
}

3- You have to note that the theme you are using have a style for button(s)
So it might affect the behavior a little bit.

Tell me if it works or not, I’ll help you get it done, even concerning the theme button(s) style.

I’m LebCit by the way 🙂
SYA = See You Around 🙂

Hello @pdegelder

Since the code didn’t work, I’ve decided to install the Vortex Theme and make all the necessary changes to the code. It’s my fault…
Did you notice that this theme hasn’t been updated in over 2 years ?!

1- mybuttonclick.js A NASTY ERROR ABOVE WHILE TARGETING THE BUTTON AND IT’S ID 🙁

(function($) {

    $('#mybutton').on('click', function() { /* this line changed ! */
        $(this).toggleClass('clicked');
    });
  
})(jQuery);

2- functions.php NO CHANGES !

function mybutton_script() {
    wp_enqueue_script( 'mybuttonscript', get_template_directory_uri() . '/js/mybuttonclick.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'mybutton_script' );

3- style.css

.clicked {
    background-color:#357EBD;
    color:#fff;
}

.clicked:hover { /* ADDED TO REMOVE THE DEFAULT HOVER EFFECT AND REPLACED IT WITH THE DESIRED ONE */
    background-color:#357EBD;
    color:#fff;
}

DON’T TELL ME IT’S NOT WORKING 🙂 I’VE TRIED IT MYSELF 🙂
Just kidding, don’t hesitate, tell me if I can help your more.

SYA 🙂

Hello @pdegelder

Nice to hear that everything is working for you.
Please mark this topic as resolved 🙂

SYA 🙂