Title: Animate all H3 headers
Last modified: September 6, 2018

---

# Animate all H3 headers

 *  [luc3283](https://wordpress.org/support/users/john5171/)
 * (@john5171)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/)
 * How to animate all H3 headers on my website automatically using this plugin.

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10665693)
 * Dear Luc3283,
 * Animating all headers can be a bit tricky, but it can be done.
 * Let me know which animation do you have in mind for the header, and I’ll try 
   to come up with something 🙂
 *  Thread Starter [luc3283](https://wordpress.org/support/users/john5171/)
 * (@john5171)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10668009)
 * Lets just say some light ‘on scroll’ effect such as a buzz or something not too
   distracting.
 * But if I could somehow write it into my theme’s CSS to define an H3 with that
   effect, that would be ideal. However, I am not a CSS pro…
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10668842)
 * Dear Luc3283,
 * This would require a little bit of code addition to your theme’s functions.php
   file.
 * Please follow the below steps:
 * 1. Create your required classes using the Animate It! Classes Generator
    ([https://www.downloads.eleopard.in/class-generator-wordpress](https://www.downloads.eleopard.in/class-generator-wordpress))
   _For this example I am using the following classes **animated shake duration3
   eds-on-scroll** _
 * 2. On your WordPress Backend, go to Appearance > Editor and open functions.php,
   the Theme functions file.
 * 3. At the bottom of the file, paste the following code:
 *     ```
       /** Function to automatically add Additional Class to <h3></h3>  */
   
       add_filter('the_content', 'add_h3_classes', 20);
       function add_h3_classes($content)
       {
           $doc = new DOMDocument(); //Instantiate DOMDocument
           $doc->loadHTML($content); //Load the Post/Page Content as HTML
           $headings = $doc->getElementsByTagName('h3'); //Find all h3
           foreach($headings as $heading)
           {
               append_attr_to_element($heading, 'class', 'animated shake duration3 eds-on-scroll'); //Add your generated classes here
           }
           return $doc->saveHTML(); //Return modified content as string
       }
       function append_attr_to_element(&$element, $attr, $value)
       {
           if($element->hasAttribute($attr)) //If the element has the specified attribute
           {
               $attrs = explode(' ', $element->getAttribute($attr)); //Explode existing values
               if(!in_array($value, $attrs))
                   $attrs[] = $value; //Append the new value
               $attrs = array_map('trim', array_filter($attrs)); //Clean existing values
               $element->setAttribute($attr, implode(' ', $attrs)); //Set cleaned attribute
           }
           else
               $element->setAttribute($attr, $value); //Set attribute
       }
       ```
   
 * 4. Save
 * __________________________________
 * This will add the classes to all the H# heading.
    you can replace the classes
   with any other animations that you wish.
 * You can see this live in action here: [http://animateitdemo.wpdevcloud.com/custom-classes-demo/](http://animateitdemo.wpdevcloud.com/custom-classes-demo/)
 * Let me know if this works for you.
 *  Thread Starter [luc3283](https://wordpress.org/support/users/john5171/)
 * (@john5171)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10671378)
 * Thanks!
 * The animations appear a bit different on my site than on the demo… Jello for 
   example looks more like a bounce and shake…
 * Also, just noticed, it adds strange characters like “” into my text at random
   places and changed “don’t” into “don’t”. For now I have disabled this function…
 * Here is an example link, but the function is **disabled** for now: [https://www.ahcafr.com/bathmate-reviews/](https://www.ahcafr.com/bathmate-reviews/)
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
    -  This reply was modified 7 years, 8 months ago by [luc3283](https://wordpress.org/support/users/john5171/).
 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10672435)
 * Dear Luc3283,
 * Nothing a little CSS tweak can’t fix 🙂
 * Please do the following:
 * 1. Go to Settings > Animate It! > Custom CSS Box.
 * 2. Paste the following:
 *     ```
       h3.eds-on-scroll {
           opacity: 1;
       }
       ```
   
 * This will make all the H3 headings with on-scroll animation visible by default.
   
   Let me know if this works for you.
 *  Thread Starter [luc3283](https://wordpress.org/support/users/john5171/)
 * (@john5171)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10674431)
 * Ok, and how about the strange characters the script adds.
 * It adds “” into my text at random places and changed “don’t” into “don’t”.
 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10675786)
 * Dear Luc3283,
 * That’s strange.
    I cannot imagine why this would be happening, as the function
   only adds classes, and does nothing to the content of the H3.
 * I have added “don’t” to the demo post I created, and it is working fine for me:
   
   [http://animateitdemo.wpdevcloud.com/custom-classes-demo/](http://animateitdemo.wpdevcloud.com/custom-classes-demo/)
 * If you could throw some on how I can re-create this issue on my end, that would
   be great.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Animate all H3 headers’ is closed to new replies.

 * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356)
 * [Animate It!](https://wordpress.org/plugins/animate-it/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animate-it/)
 * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [eleopard](https://wordpress.org/support/users/eleopard/)
 * Last activity: [7 years, 8 months ago](https://wordpress.org/support/topic/animate-all-h3-headers/#post-10675786)
 * Status: not resolved