Animate all H3 headers

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 🙂

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)
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/

Let me know if this works for you.

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.

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/

If you could throw some on how I can re-create this issue on my end, that would be great.