Question 106062 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Change class on item in WordPress

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    This answer targets all posts with a specific tag and only works if your template adds tag names as classes to post listings — the 2021 WP template does.

    I’m assuming the tag you are targeting is "la peste", try adding the code below to the custom CSS:

    .tag-la-peste, .tag-lapeste, .tag-la_peste { font-family: "yourfontfamily", "Times New Roman", sans-serif}

    Note: I’ve included variations on how the code handles spaces in tags: removes spaces, spaces to dashes, spaces to underscore.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search