Thanks in advance for any assistance.
I have a simple 4 page portfolio site I'm trying to build for myself. The pages consist of: Home Page, Print Design, Digital, and Identity.
I have created a custom post type called "portfolio" with categories: "Print Design", "Digital", and "Identity".
When first visiting the site a user will see a grid of ALL posts from the custom post type (5 columns, 4 rows). I am using the following code to pull the custom post type:
<?php $items = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' => 1000 )); while ( $items->have_posts() ) : $items->the_post(); ?>
Each post pulls the featured image into the grid with the following code:
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
So far, all is well. I have a grid layout of 20 items all displaying nicely.
Here is my issue and what I am trying to accomplish:
The home page will always display all 20 posts just as they do now. I want the 'Print Design' page to display all 20 posts as-well BUT I want all posts outside of the "Print Design" category to be 50% opaque and not-clickable.
For example: A user clicks on "Print Design" and is taken to a new page. This page displays 20 posts of which only 3 stand out and are clickable. The other 17 are grey and can't be clicked.
This same idea would be setup for each additional page listed above.
My thoughts are that I should be able to setup a condition that says something like:
"HEY! There are 20 posts on this page! Find all the posts that aren't in category "Print Design" and use this CSS "property"!"
Thanks again! This stuff is fun but also difficult... and also frustrating when I've come so far but can't complete the idea I have.