-1

I am using wordpress and there is no way to add custom attribute to HTML element via theme. I found that it can be done via Jquery, but it doesn't help me.

Attributes that I want to add to HTML element on load (No need to click anything specific):

data-tf-popup="Vxs1VOeK" 
data-tf-hide-headers="" 
data-tf-transitive-search-params="utm_source, utm_medium,utm_campaign,utm_term,utm_content" 
data-tf-iframe-props="title=Dermatologo konsultacija internetu - iDerma" 
data-tf-medium="snippet" 
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx"

Specific button/item to which I want to add it. Currently it has Ahref, but I will remove the ahref, to keep it empty.

<li id="menu-item-37" class="menu-singup menu-item menu-item-type-custom menu-item-object-custom menu-item-37" data-tf-popup="Vxs1VOeK"><a href="https://form.typeform.com/to/Vxs1VOeK">Pradėti konsultaciją</a></li>

Any help will be appreciated!

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
ValdemarT
  • 77
  • 5
  • 2
    so [select the element](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and add the attributes.... – epascarello Feb 03 '22 at 13:57
  • 2
    "*...[But] it doesn't help me.*" - what are you having problems with? Where are you stuck? – David Thomas Feb 03 '22 at 14:00
  • `$("#menu-item-37").attr("data-tf-popup", "Vxs1VOeK")` etc. However, it's unclear why this doesn't help you / what it doesn't solve or what those `data-tf-...` attributes are actually used for. jQuery will not re-read `data-` attributes if it's already read them so you may need to do `$("#menu-item-37").data("tf-popup", "Vxs1VOeK")` but, equally, if you have a third-party plugin (especially as "wordpress") that's already read *and used* those attributes, then you setting them may be too late. – freedomn-m Feb 03 '22 at 14:04
  • 1
    Also, while this question is on-topic for Stack Overflow; there's a chance it may be a better fit over on [wordpress.se]. – David Thomas Feb 03 '22 at 14:10
  • Does this answer your question? [Adding attribute in jQuery](https://stackoverflow.com/questions/5995628/adding-attribute-in-jquery) – Wimanicesir Feb 03 '22 at 14:52

1 Answers1

1

You can add the attributes via jQuery's .attr() function. The first parameter determines the attribute you're adding while the second parameter is the value of the said attribute.

Example:

$(document).ready(() => {
  $('#element_id').attr('data-tf-popup', 'Vxs1VOeK');
  $('#element_id').attr('data-tf-hide-header', '');
  // ...
});

You can make it cleaner by using JSON objects as such:

$(document).ready(() => {
  const attr = {
    'data-tf-popup': 'Vxs1VOeK',
    'data-tf-hide-header': '',
    'data-tf-transitive-search-params': 'utm_source, utm_medium,utm_campaign,utm_term,utm_content',
    // ...
  }
  
  for (let key in attr) {
    $('#element_id').attr(key, attr[key]);
  }
});
Satch
  • 99
  • 8