Change class on item in WordPress

Issue

I have to use a specific font on articles with a specific tag.

I previously installed a font but, obviously, using the Additional CSS and modifying the entry-tile class, all the articles on the main page use the selected font.

How I can do it or simply modify the class for the selected article?

The title I have to change:

enter image description here

Solution

If you don’t want to modify the wordpress php files, You need javascript for this kind of dynamic changes. You can search through blog posts for tags and add a custom class for the header. Since you didn’t post any html code or anything, I can’t exactly write a code to help you but here is the sample code:

document.querySelectorAll("article.post").forEach((p) => {
    p.querySelectorAll("span.tag").forEach((t) => {
    if (t.innerHTML == "tag4")
            p.querySelector("h1.title").classList.add("special");
  });
});
h1.title {
  font-weight: bold;
}

h1.title.special {
  color: #ff0000;
}
<section class="posts">
  <article class="post">
    <h1 class="title">Some Blog Post Title 1</h1>
    <div class="tags">
      <span class="tag">tag1</span>
      <span class="tag">tag2</span>
    </div>
  </article>
  <article class="post">
    <h1 class="title">Some Blog Post Title 2</h1>
    <div class="tags">
      <span class="tag">tag3</span>
      <span class="tag">tag4</span>
    </div>
  </article>
  <article class="post">
    <h1 class="title">Some Blog Post Title 3</h1>
    <div class="tags">
      <span class="tag">tag5</span>
      <span class="tag">tag4</span>
    </div>
  </article>
</section>

Answered By – Valour

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published