Get CPT, separate into taxonomy terms and style first post different from next 3

  • Resolved flint_and_tinder

    (@flint_and_tinder)


    11 years, 10 months ago

    Hi all,

    I am using The Events Calendar on a site and wish to display some of the posts in the jquery carousel shown below.
    https://tympanus.net/codrops/2011/08/16/circular-content-carousel/

    Ideally I’d like a loop that will get all the ‘tribe_events’ posts, then create a separate div for all the terms of the taxonomy ‘tribe_events_cat’. Within each of those boxes, I would like the loop to call the next upcoming event and style it a certain way, then call the next three upcoming events a different way.

    In brief the code needs to look something like this:

    ---------------------
Container for complete carousel

<div id="ca-container" class="ca-container">
    <div class="ca-wrapper">

---------------------

//  THE CUSTOM LOOP THAT CREATES A BOX FOR EACH TYPE OF TERM

---------------------

 <div class="ca-item CUSTOM IDENTIFIER">

// First Upcoming post of a term

 <div class="ca-item-main">
FEATURED IMAGE
<div>
THE TERM TITLE
</div>
<div>
POST TITLE
EXCERPT
 <a href="#" class="ca-more">more...</a>
</div>

---------------------

Then a container for the next 3 posts:

<div class="ca-content-wrapper">
<div class="ca-content">

---------------------

 // For each of the next three posts of a term

 <div>
POST TITLE
EXCERPT

---------------------

Close 3 post containers
            </div>
        </div>

---------------------
END LOOP
Close carousel

</div>
<div>
---------------------

    Does that make sense? If not, let me know.

    So far I’ve been playing around with this, but I can’t see how to implement the code the Carousel requires into it:

    $terms = get_terms( 'tribe_events_cat', 'hide_empty=0' );
 foreach ( $terms as $term ) {
	  $args = array(
		'post_type' => 'tribe_events',
		'tax_query' => array(
				array(
					'taxonomy' => 'tribe_events_cat',
					'field' => 'slug',
					'terms' => $term->slug
				 )
	        ),
		'posts_per_page' => 4
       );
  $query = new WP_Query( $args );
  if( $query->have_posts() ) : while(  $query->have_posts() ):the_post();
    the_title();
  endwhile;endif;
     }

    Can anyone help me please?

    Many thanks,

    Adam.

Viewing 1 replies (of 1 total)
  • Thread Starter flint_and_tinder

    (@flint_and_tinder)

    Solution if anyone ever needs it:

    <div id="ca-container" class="ca-container">
		<div class="ca-wrapper">
			<?php
				global $post;

				$current_date = date('j M Y');
				/* get upcoming 30 day event, you can edit this to less day */
				$end_date = date('j M Y', strtotime('180 days'));

				$terms = get_terms( 'tribe_events_cat', array(
 	'exclude'    => '3,9,27,31,26,14',
	'parent' => '0',
 	'hide_empty' => 1
 ));
				$i = 1;

				foreach($terms as $tribe_category) {

				echo '<div class="ca-item ca-item-'.$i.' '.$tribe_category->slug.'">'; $i++;

				/* Featured Event */

				$all_events_one = tribe_get_events(
						array(
								'post_type' 	=> 'tribe_events',
								'start_date'    => $current_date,
								'end_date'      => $end_date,
								'eventDisplay'  => 'upcoming',
								'posts_per_page'=> 1,
								'tax_query'=> array(
										array(
											'taxonomy' => 'tribe_events_cat',
											'field' => 'slug',
											'terms' => $tribe_category
										)
								)
						)
				);

				/* Sub Event */
				$all_events_two = tribe_get_events(
						array(
								'post_type' 	=> 'tribe_events',
								'start_date'    => $current_date,
								'end_date'      => $end_date,
								'eventDisplay'  => 'upcoming',
								'posts_per_page'=> 3,
								'offset'        => 1,
								'tax_query'=> array(
										array(
											'taxonomy' => 'tribe_events_cat',
											'field' => 'slug',
											'terms' => $tribe_category
										)
								)
						)
				);

				foreach($all_events_one as $post) {
					setup_postdata($post); ?>

			<div class="ca-item-main">

            	<div class="event-thumb">
                	<?php if(has_post_thumbnail()) { ?>
                            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium');?></a>
                    <?php } else { ?>
                        <a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/the-spring-fallback-medium.gif" alt="The Spring" /></a>
                    <?php } ?>
				</div>

                <div class="ca-featured">
                    <h2><?php echo $tribe_category->name; ?></h2>
                    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <h4 class="event-date"><?php echo tribe_get_start_date( $post->ID, false, 'M j, Y - g:i a'); ?></h4>
                        <div class="event-excerpt">
                            <?php echo excerpt(40); ?>
                            <a href="<?php the_permalink(); ?>">Read more&hellip;</a>
                        </div>
                </div>

				<a href="#" class="ca-more button" style="display: block;">more...</a>

			</div>
		<?php } //endforeach
		wp_reset_query(); ?>

			<!-- start sub-event -->

			<div class="ca-content-wrapper">

		<?php
			foreach($all_events_two as $post) {
			setup_postdata($post);
		?>
				<div class="ca-content clearfix">
                	<div class="left">
                    	<?php if(has_post_thumbnail()) { ?>
                            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail');?></a>
                    	<?php } else { ?>
                        	<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/the-spring-fallback-thumb.gif" alt="The Spring" /></a>
                    	<?php } ?>
                    </div>
                    <div class="ca-content-text right">
						<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                    	<h5 class="event-date"><?php echo tribe_get_start_date( $post->ID, false, 'M j, Y - g:i a'); ?></h5>
						<?php echo excerpt(20); ?><br /><a href="<?php the_permalink(); ?>">Read more&hellip;</a>
                    </div>
				</div>
		<?php
			} // end foreach
				wp_reset_query(); ?>
			<!-- end sub-event -->
				<a href="#" class="ca-close">close</a>

			</div>

<?php
		echo '</div>'; // end div.ca-item
		} // end foreach($terms as $tribe_category)
?>
      </div>
      <!-- ca-wrapper -->
    </div>
    <!-- ca-container -->
Viewing 1 replies (of 1 total)
  • The topic ‘Get CPT, separate into taxonomy terms and style first post different from next 3’ is closed to new replies.