WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Get CPT, separate into taxonomy terms and style first post different from next 3 (2 posts)

  1. flint_and_tinder
    Member
    Posted 1 year 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.
    http://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.

  2. flint_and_tinder
    Member
    Posted 1 year ago #

    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 -->

Topic Closed

This topic has been closed to new replies.

About this Topic