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?
data-splitting
to every heading? If you can load the javascript then I'm not sure what kind of help you need that needs WordPress expertise, are you sure this isn't a vanilla javascript question better asked on stackoverflow?