0

I want to add multiple HTML attributes to a button which is present across all blog posts on my website. The buttons all have links in them, to which I want to add like 3-4 'rel' attribute values. I coded a basic function that applies the attributes to all buttons of the same class on single blog posts. I am just an amateur at coding so I don't know if the below code is correct. I added this to my functions.php file and it did not throw any syntax errors but it also doesn't work.

I would like to do this without using any additional plugins. Any help is much appreciated.

add_action('wp_head', 'buttonRel'); function buttonRel() { if (is_single ('^\d+$')) { ?> <script type="text/javascript"> document.getElementByClassName("button-class").setAttribute("rel", "abc1"); document.getElementByClassName("button-class").setAttribute("rel", "abc2"); document.getElementByClassName("button-class").setAttribute("rel", "abc3"); document.getElementByClassName("button-class").setAttribute("rel", "abc4"); </script> <?php } }

Edit: So I added the below JS function to the 'js' folder in my child theme. Lets call it vsr.js

document.addEventListener( 'DOMContentLoaded', function() { if (is_single ()) { document.getElementByClassName("button-class").setAttribute("rel", "abc1"); document.getElementByClassName("button-class").setAttribute("rel", "abc2"); document.getElementByClassName("button-class").setAttribute("rel", "abc3"); document.getElementByClassName("button-class").setAttribute("rel", "abc3"); } );

Then I added the below function in my child theme's functions.php file to enqueue the script.

function SRel() { wp_enqueue_script('sprel', get_stylesheet_directory_uri() . './js/vsr.js'); } add_action( 'wp_enqueue_scripts', 'SRel' );
Improve this question
4
  • you need to ask this in an Elementor community, 3rd party plugin user/dev support questions are offtopic here Commented Sep 28, 2022 at 8:49
  • 1
    Edited question to add code to buttons in general, not specific to 3rd party plugins. Thank you for pointing this out! Commented Sep 28, 2022 at 14:44
  • I've reopened, but keep in mind that since these are Elementor buttons there's very likely a way involving filters or settings to do this that needs Elementor knowledge to do and skips javascript entirely. It's worth also asking this in an Elementor community even if you find a general solution here. Commented Sep 29, 2022 at 10:46
  • Thank you. I did ask in the Elementor community but so far, there has been no response. Plus I figured I might as well learn how to incorporate custom JS functions for any future needs. Commented Sep 30, 2022 at 9:06

1 Answer 1

Reset to default
0

There are 2 problems.

The first problem is this:

if (is_single ('^\d+$')) {

is_single can't take a regex, it only takes:

Post ID, title, slug, or array of such to check against. https://developer.wordpress.org/reference/functions/is_single/

So you could do this: is_single( 'my-page' ) for example, but in this case it would be better to do is_single() or better yet is_singular() which also works for pages and custom post types.

It may also be helpful to know that if your theme correctly uses the body_class function, then the <body> tag will have CSS classes such as is-single etc that can be used for conditional styling without having lots of conditional stylesheets and checks in PHP.

I'd also advise adding the JS by enqueing a javascript file, rather than printing it inline.

The second problem, is when the javascript runs. Your code runs immediately, but it's in the header, and the page isn't delivered and rendered instantly all at once. So it's very likely that when you run document.getElementByClassName("button-class") it will not find the buttons because the HTML for the buttons is still in a network cable or a router making its way to your computer.

Instead, you should run the code when the page signals that the DOM is ready. This event happens when all HTML is loaded and the page is ready.

A basic JS dom ready/loaded event might look like this:

document.addEventListener( 'DOMContentLoaded', function( event ) { //the event occurred } );

More info about what the DOM ready event is here: https://stackoverflow.com/questions/12637725/what-is-the-dom-ready-event

Improve this answer
3
  • Thank you for your help. Your answer did help me approach this in the right way, however my code still doesn't work. I edited my question to include what I changed in my code. Please take a look if possible. Commented Sep 30, 2022 at 9:25
  • you cannot use PHP functions in javascript, if (is_single ()) { will never work in a javascript file or inside script tags. You would need to check if the <body> tag has the right HTML class on it. At that point though it's no longer a WordPress question, but a generic javascript question. Your code also only changes the very first button, not all of them, fixing that will also require generic javascript help. You should ask about that on stackoverflow Commented Sep 30, 2022 at 13:59
  • Okay then I suppose I will have to do that then. Thanks again for your help :) Commented Sep 30, 2022 at 14:29

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.