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

How to display different text and links in html depending on the class that its embedded in – WordPress

I want to display different text and links depending on the category/class that the code is embedded in.
The following works in that it displays "Read more about Apples" or "Read more about Oranges" depending on the category/class that the code is embedded in. However I also want it to include different hyperlinks. I thought that the last two lines would do the job but the text doesn’t appear with hyperlinks in it. Any ideas?

<style>
.category-apples themainbodya::after {
  content: " Apples";
}
.category-oranges themainbodyb::after {
  content: " Oranges";
}
</style>
<p>Read more about</p>
<themainbodya href=https://testa.test.com/ ></themainbodya>
<themainbodyb href=https://testo.test.com/ ></themainbodyb>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to the hint from A Haworth I worked out the answer. HOWEVER I still can't work out how to add a different image depending on whether it's apples or oranges.

    <style>
.category-apples .themainbodya::after {
  content: " Apples";
}
.category-oranges .themainbodyb::after {
  content: " Oranges";
}
</style>
<p>Read more about</p>
<a class=themainbodya href=https://testa.test.com/ ></a>
<a class=themainbodyb href=https://testo.test.com/ ></a>

  2. 0

    I am a little worried that using pseudo elements that way could make the site a little less accessibility friendly as screen readers may not read out their content.

    This snippet uses a slightly different method, the text ‘apples’, ‘oranges’ (and any other fruit) is put into the relevant element (as is an image just to show one way of it being done, though you may prefer to use background-image). Those elements are set to display: none initially, and then they display depending on which of the categories is set in the class list of the containing element.

    As there are only two elements in the test, the toggle function is used to go between them, but of course for more elements you will want a bit more JS to remove the unwanted classes.

    *[class*="themainbody"] {
  display: none;
}

.category-apples .themainbodya {
  display: block;
}

.category-oranges .themainbodyb {
  display: block;
}

.container img {
  width: 100px;
  height: 100px;
}
    <button onclick="const c = document.querySelector('.container'); c.classList.toggle('category-oranges'); c.classList.toggle('category-apples');">Toggle between oranges and apples</button>
<div class="container category-oranges">
  <p>Read more about</p>
  <a class=themainbodya href=https://testa.test.com/><img src="https://i.stack.imgur.com/W4FFq.jpg" alt="apple">Apples</a>
  <a class=themainbodyb href=https://testo.test.com><img src="https://i.stack.imgur.com/wsIvt.png" alt="orange">Oranges</a>
</div>
    Login or Signup to reply.
  3. 0

    The answer from A Haworth is excellent. I added to it to get a default too. I expect it can be optimised, so feel free to make further suggestions.

        <style>
    *[class*="themainbody"] {
        display: none;
      }
      
      *[class*="samsdefault"] {
        display: block;
    }
    
      .category-apples .themainbodya {
        display: block;
      }
    
      .category-apples .samsdefault {
        display: none;
    }
      
      .category-oranges .themainbodyb {
        display: block;
      }
    
      .category-oranges .samsdefault {
        display: none;
    }
    
      
      .container img {
        width: 100px;    
      }
    </style>
    <button onclick="const c = document.querySelector('.container'); c.classList.toggle('category-oranges'); c.classList.toggle('category-apples');">Toggle between oranges and apples</button>
    <div class="container category-oranges">
      <p>Read more about</p>
      <a class=themainbodya href=https://testa.test.com/><img src="https://i.stack.imgur.com/W4FFq.jpg" alt="apple">Apples</a>
      <a class=themainbodyb href=https://testo.test.com><img src="https://i.stack.imgur.com/wsIvt.png" alt="orange">Oranges</a>
      <a class=samsdefault href=https://testd.test.com /><img src="https://i.stack.imgur.com/wsIvt.png" alt="carrot"><br>Carrots</a>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search