Add CSS class JavaScript code – Change class on click WordPress Tutorial

To dynamically change CSS class of a HTML element on click gives us wide variety of possibilities to add interaction to our website. A HTML element can change it’s CSS class or get a new one when we click on it. In other words, we can visually style an element differently (and much more) before and after it’s clicked. All we need is a simple Add CSS class JavaScript code that will enable that functionality in WordPress.

What can the Add CSS class JavaScript code do for your website?

You probably noticed various dynamic elements on websites, that change their form, visual appearance or functionality once you click on them. Many of them are based on a simple JavaScript technique that changes the CSS class of an element when visitors click on it. The area of appliance of the Add CSS class JavaScript code on click is quite wide. Let’s list just a couple of examples:

• change color or visual appearance of a website element
• show or hide specific content
• expand or collapse elements
• template colors switch (day/night – summer/winter etc.)
• accessibility options (change contrast / font sizes…)
• etc…

In our example of Add CSS class JavaScript code we’ll create an accessibility feature that will enhance the contrast of text by clicking a button.

This tutorial is intended for WordPress users, meaning we’ll explain the process of implementing the Add CSS class JavaScript code into WP websites. The JavaScript code that enables to change CSS class on click will also work on any other non WordPress website as well. In that case, the implementation is slightly different, depending on each website structure.

A basic example of the Add CSS class JavaScript code

In this simplest example of Add CSS class JavaScript code , we’ll make a piece of content change it’s text and background color when a button is clicked. To achieve our goal, we need three different components that will work together:

• HTML markup: that will define the structure of the element
• CSS styles: to define the visual appearance of the HTML element before and after we add a new class
• Add CSS class JavaScript code: the function that will add a custom CSS class to the HTML element which state we want to change by clicking a button

Here are those code components needed to achieve our example’s goal:

/* HTML */

<div id="some-content" class="normal-contrast">

<button onclick="add_class()">Enhance contrast</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

</div>

/* CSS */

.normal-contrast {
    padding: 30px;
    background: burlywood;    
    color: #525252;
}

.enhanced-contrast {
    background: white;
    color: black;
}

/* JavaScript */

<script>
function add_class() {
var element = document.getElementById("some-content");
element.classList.toggle("enhanced-contrast"); }
</script>

How does the Add CSS class JavaScript code work?

The HTML and CSS parts in our Add CSS class JavaScript example are straight forward. We created a div element containing a button and a paragraph with some text. With just a couple of CSS properties we defined the visual appearance of our content block before and after the button is clicked.

The important part of the HTML code is the onclick=”add_class()” onclick Event Attribute. This attribute will execute the add_class() JavaScript function when the website visitor click the button. The add_class() parameter is a custom function name and you can name it any way it suits you. Of course you need to respect the rules of naming JavaScript functions.

The main part of our example is the JavaScript function itself. The function we named add_class() is executed when we click the button to change the CSS class of our container div. The first part of the function targets our div by it’s id using the getElementById() method. In the second part of the function, we use the classList.toggle() method to add another CSS class to our container div. Accordingly, the new class enhanced-contrast CSS properties will override the initial normal-contrast properties and change the visual appearance of the targeted div.

How to add HTML & CSS code into WordPress

As we mentioned earlier, this JavaScript function works on any website. However, since this tutorial is intended for WordPress users, we’ll explain in more details how to implement this function into a WP website.

You can insert the HTML code form our example anywhere on your website: a page, a post or into a template file. You can also modify the code structure according to your specific needs. Just make sure that you use the same div container id in the Add CSS class JavaScript function later. Also make sure that the function name declared in the onclick button attribute is the same as the name of the function inside the JavaScript code.

Add the CSS code to your theme’s style sheet and modify the properties according to your needs. Make sure that the onclick state class name is the same as the one in the JS function.

Adding the Javascript code into WordPress

Adding a JavaScript function to WordPress is a specific procedure. WordPress supports JavaScript by default, but you can not place a JS script just anywhere. JS scripts can’t be added to pages or posts trough the classic visual, code or Gutenberg editor. JavaScript functions are added to WordPress template files, usually header.php or footer.php. To insert the Add CSS class JavaScript code, you must use the Theme editor, located inside the Appearance tab of the WP Dashboard menu.

Pro Tip: The best practice when editing template files and style sheets is to firstly create a Child Theme and edit your files there. That way you assure that the template file modifications won’t get lost once you upgrade the main theme. This is specially important if you use auto-update on your theme.

If you insert the Add CSS class JavaScript code from our example into the header.php or footer.php template file, the effect of the function will be sitewide, no matter where you added the HTML code. We suggest adding the <script> into footer.php, just before the closing </body> tag. That way the JS code won’t have virtually any efect on your website loading speed. In case your website uses multiple footers, make sure to add the script to all footer template files.

If you use the HTML element that changes it’s CSS class on click only on certain parts of your website, you can add the JavaScript code only into that specific template file. For example, if you use your element only on pages, you can add the script into the page.php template file. Accordingly if you need the function only in posts you can add it only inside the single.php file, preferably on or near the end of it. Template files may vary by structure and file name, depending on the theme you use.

To learn more about the Add CSS class JavaScript code and extend it’s possibilities, consult the w3schools classList dedicated page.