How to change ```<h2>``` to ```<h2 data-splitting>```?

Question

How to change the heading tags <h1> to <h1 data-splitting> and <h2> to <h2 data-splitting> and <h3> to <h3 data-splitting> and <h4> to <h4 data-splitting> in WordPress?

How can I change them on all pages through hard coding or by change through JS/JQuery?

For hard coding, where should I look at, on theme files, or is it coded into the WordPress itself?

There are ID’s and classes such as <div id="nav"> and <div class="sidebar-box"> but what is the above type is called as? Is it same as <h2> + <data-splitting>?

This is required to add some animation effect to the headings - View on Codepen

Now how can I change heading tags?

I added this to the WordPress fuctions.php:-

 function enqueue_my_custom_script() {
    wp_enqueue_script( 'hjs', 'https://example.com/h.js', false );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

The h.js has the following code:-

$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});

But this doesn't add the script to the head.

I even added it manually as <script async src="https://example.com/h.js"> but it does not gets show up in the head

If I add any other script manually like <script async src="https://example.com/a.js"> it does gets added.

I even tried to add the JS as inline in the head, now the script does shows up in the head section as inline JS but doesn't change the <h1> to <h1 data-splitting> and <h2> to <h2 data-splitting>.

<script>
$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});
</script

or as

<script>
jQuery.noConflict()(function($) {
    $('document').ready(function() {

        $('h1, h2, h3, h4').attr('data-splitting', '');

    });
});
</script>

Now the script is present in the head as inline JS but it does change the heading tags.

I can't make it to work. Is there no way to hard code into the WordPress?

Answer 1

The headings will be defined in many different places, mostly in the theme and in the page content. So using JS as you have will be the most reliable approach.

A few things to note about enqueuing scripts:

• As your script uses jQuery, you need to pass jQuery as a dependency to make sure it loads after jQuery does so that it's actually defined when it tries to run. wp_enqueue_script( 'hjs', 'https://example.com/h.js', array( 'jquery' ) );
• jQuery in WordPress runs in noConflict mode, so you can't just use the $ variable for the jQuery object. This article has more information.

Now all that aside, from looking at the codepen I'm not sure any of this is nessecary. For the ScrollOut settings it is targetting the data-splitting attribute like so:

ScrollOut({
   targets: '[data-splitting]'
});

However, you can change that to instead just target all the headings instead of trying to add that data attribute to the headings first, like so:

ScrollOut({
   targets: 'h1,h2,h3,h4'
});

And also updating what the Splitting.js target is, as per the options (the data-splitting attribute is just the default)

Splitting({
  target: 'h1,h2,h3,h4'
});

Working demo without data attributes