I am building a WordPress theme for a portfolio site. I have this archive page of categories that displays all the posts’ thumbnails + titles. On top of each thumbnail I have a div that says ‘New’ that I only want to display on posts that have the category ‘New’.
Currently, I have a java script with a list of all the <a> tags that link to projects’ urls that DO NOT have the category of ‘New’. Then, I find the div that displays the ‘New’ sticker, inside those <a> tags, and give them a style of ‘display: none’. Here is my code:
HTML
<div class="projects-container">
<?php while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink() ?>" class="project-link">
<div class="single-project">
<div class="new-project-tag-container">
<button class="new-project-tag">New</button>
</div>
<div class="project-image">
<div class="color-duplicate"></div>
<?php the_post_thumbnail( ); ?>
</div>
<h2>
<?php the_title(); ?>
</h2>
</div>
</a>
<?php endwhile; ?>
</div>
JAVASCRIPT
hideThisProject = [];
hideThisProject[0] = document.querySelectorAll("a[href='http://localhost:8888/projects/projects/project-0/']")[0];
hideThisProject[1] = document.querySelectorAll("a[href='http://localhost:8888/projects/projects/project-1/']")[0];
hideThisProject[0].querySelectorAll('.new-project-tag-container')[0].style.display = 'none';
hideThisProject[1].querySelectorAll('.new-project-tag-container')[0].style.display = 'none';
Since I am doing this one element at a time, the second element depends on the existence of the first one. For exemple: if there is a page with both ‘project-0’ and ‘project-1’, it works; if there is a page with ‘project-0’ but no ‘project-1’, it works; but if there is a page with ‘project-1’ but no ‘project-0’, it doesn’t work.
Why does my second statement depend on my first statement, and how can I fix this?
Thank you for your help, in advance.