Display Tags With Extra Text in Archives and Dropdowns

  • Hi,

    I’m looking for a way to add text to taxonomy values, only when displaying in meta archives and dropdowns.

    Let’s assume we have tags with years (1990, 1991, 1992, etc.). Now a post is tagged with a year, e.g., “1990”), then that tag will also be displayed as “1990” in the meta section below that post.

    On archive pages and in dropdowns, however, I would like the year tag to display not as “1990” but as “Year 1990″—without changing the actual value. That’s for sorting reasons among others.

    • Year 1990 [value=”1990″]
    • Year 1991 [value=”1991″]
    • Year 1992 [value=”1992″]
    • Year 1993 [value=”1993″]
    • Year 1994 [value=”1994″]
      …

    Can someone come up with a solution for this? Pseudo elements won’t work on <option>, otherwise I might have considered that.

    Any ideas are are welcome and appreciated. Thanks much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jfbprivate

    (@jfbprivate)

    Or, if easier for some reason, the other way around:

    I could change the actual value from “1990” to “Year 1990” but have it output as “1990” in the frontend.

    Whatever works best.

    Moderator bcworkz

    (@bcworkz)

    I think changing the actual values would be ill advised. There could be undesirable knock-on effects.

    You can add “Year” to any HTML element with CSS by using the :before pseudo-selector and specifying desired content:. Without a link to an example page on your site, I cannot be more specific, but as a generic example, add something like the following to the Additional CSS section of the customizer or style book:

    .tag-123 .page-title span:before {
   content: 'Year ';
}

    This will only apply to the archive page title for tag ID 123 using a certain theme. Alter the selectors as needed for your specific theme and site. Your browser’s element inspector tool can help you determine the right selectors. You can test out your CSS code in the tool before making it permanent in Additional CSS.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Display Tags With Extra Text in Archives and Dropdowns’ is closed to new replies.