Using the jQuery .addClass() attribute it’s easy to add a class to an existing class or ID. There are various reasons you may like to do this; as an example, for a recent WordPress website that I built, the client required a certain element to use CSS animation. The simplest and most reliable means of achieving the animated element was to use Animate.css and then add the necessary Animate.css classes (to make Animate.css work) alongside the existing element class. It isn’t practical adding the Animate.css classes to the HTML of the form as an update of the WordPress plugin for the form will overwrite my manually input classes. You may see this in action at our WordPress Tips website where the Mailchimp signup form uses animation (please sign up for the newsletter whilst you’re at the site 😉 ).
jQuery script to add a class or ID
The script required is simple enough and is shown below. All you need to know is the existing class or ID of the element and then the jQuery below will add the new class.
The script above should be output into the footer (
wp_footer()) of your WordPress website as there is no valid reason that it needs to be in
Adding CSS animation to an existing class
Near the top of this post I mentioned that our WordPress Tips website website uses Animate.css. Here is an example of the jQuery script used to animate the form.