Display custom post type as tabbed content

While this is definitely not a direct issue with our plugin, I’ll summarize some thoughts for you.

The biggest thing you need to do is utilize javascript/jQuery to toggle the correct content section based on current selection. This requires all of the content sections to be available in the markup. Whether it be on click or on hover or however you choose, you need to hide any displayed ones, and then only re-display the correct associated one.

Perhaps this codepen will help illustrate what needs to be done at a minimal level https://codepen.io/cssjockey/pen/jGzuK

Hi Michael,

I agree. But it’s not really an issue just a question if it’s possible.

I know how content tabs work, just have no idea what classes and or id’s to create or which link to place on the title to create the content tabs.

I can create content tabs as in your example, just not sure how to create this effect when the content has to be rendered and I can’t give the elements classes and id’s before they are generated if you get what I mean…

There’s no global classes to use for this, just a matter of using the same one(s) appropriately. Part of why I linked to the codepen example, so you can see how they did it and what html/css/js they used to achieve.

You should have full control over the markup with the WP_Query you’re making, including IDs and classes used.

I guarantee it’s possible, just need to get the details figured out.

Yes I know the idea is possible, that’s why I’m asking on different forums but no one seems to have a direct answer to this question.

The problem is that the codepen you gave (which I already found a few days ago) has numerical values which separate them from each other.

I’m looking for a good example to get some insight, but I’ll continue looking then.

If I ever get this figured out I’ll be sure to post it here so if anyone tries to accomplish the same thing they won’t have to look so long for the answer.

I have the query as such

<ul>
	<?php
      		$args = array (
      			'post_type' => 'uitgeverij', 'categorie' => 'distributie-pers-promotie',
			'posts_per_page' => '-1',
			'orderby'=>'title',
			'order'=>'ASC'
      		);
      		$the_query = new WP_Query( $args );

      	?>
	<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>	

	<li><a class="dispp"><?php the_title(); ?></a></li>

      	<?php endwhile; endif; ?>
</ul>

Don’t know if it’s correct, but since the actual content is in another div I repeat the array and specs of it again to display the content, otherwise I could only get the content of the last post in the list

<?php
      		$args = array (
      			'post_type' => 'uitgeverij', 'categorie' => 'distributie-pers-promotie',
			'posts_per_page' => '-1',
			'orderby'=>'title',
			'order'=>'ASC'
      		);
      		$the_query = new WP_Query( $args );

      	?>
	<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

	<?php
      		$thumbnail_id = get_post_thumbnail_id();
      		$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
      	?>

	<div class="dispp"><?php the_post_thumbnail( $size, $attr ); ?> 

	<?php the_field('omschrijving'); ?>
	<p><a href="<?php the_field('website'); ?>" target="_blank">Ga naar de website</a></p></div>

      	<?php endwhile; endif; ?>

PS this is just some more info if anyone stumbles upon this post and sees what I’m totally missing ??

If you’re needing some sort of numerical identifier, use either the post ID or a self-set incrementer that you increase at the end of each iteration of the loop.

Also, instead of making the same query twice, I recommend doing $the_query->rewind_posts() to point it back to the start of the found results. Just for variable safety, I’d also recommend something besides $the_query for a variable name. However, this may just be quick pseudo-code as well and not what you’re actually using.