If custom select field = ""

• jasonisaacs

• May 26, 2015 at 6:21 am

Disclaimer, this is my first WordPress site. I’m making a move from Expressionengine and have figured my way around pretty well up to this point but I’m having a small problem.

Using the instructions for the Single CUstom field provided in the docs here: http://www.advancedcustomfields.com/resources/query-posts-custom-fields/

I’m trying to display 3 different sizes of blog posts on my homepage here: http://realhopenow.com

I have class=”featured-large”, class=”featured-medium”, and class=”featured-small”

I have a custom select field for posts that allows author to select “large, medium, or small”

I am able to pull the posts but I am getting posts duplicated 4 or 5 times, and it’s acting buggy. I’ve provided my code below. Also let me know if there is a cleaner way to layout the code. Currently I have 3 seperate sections.

Thanks,
Jason

<section id="content">

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  
<section id="featured">
		<div class="row">
		
		
<?php 

// args
$args = array(
	'meta_key'		=> 'homepage_size',
	'meta_value'	=> 'large'
);
 
 // query
$the_query = new WP_Query( $args );

?>

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

		
			<?php if (has_post_thumbnail( $post->ID ) ): ?>
			<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
			<div class="col-md-6 col-sm-6 col-xs-12 post featured-large" style="background-image: url('<?php echo $image[0]; ?>');');"><?php endif; ?>
			
				<div class="post-content">
				
					<div class="category">
						<?php $categories = get_the_category(); foreach($categories as $category) { $cat_name = $category->name; if($cat_name != 'featured') echo '<a href="'.get_category_link($category->term_id).'">'.$cat_name . '</a> '; } ?>
					</div>
					
					<div class="clearfix"></div>
				
					<div class="title">
						
						<a href="<?php the_permalink(); ?>">
						<h1><?php the_title(); ?></h1>
						
						<h2><?php the_field('subtitle'); ?></h2>
						</a>
					</div>
				</div><!--End Post Content-->
				
			</div>
			
	<?php endwhile; ?>
	<?php endif; ?>
	<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?>
	 <!--End Large-->
				
<?php 

// args
$args = array(
	'meta_key'		=> 'homepage_size',
	'meta_value'	=> 'medium'
);
 
 // query
$the_query = new WP_Query( $args );

?>

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

		
			<?php if (has_post_thumbnail( $post->ID ) ): ?>
			<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
			<div class="col-md-6 col-sm-6 col-xs-12 post featured-medium" style="background-image: url('<?php echo $image[0]; ?>');');"><?php endif; ?>
			
				<div class="post-content">
				
					<div class="category">
						<?php $categories = get_the_category(); foreach($categories as $category) { $cat_name = $category->name; if($cat_name != 'featured') echo '<a href="'.get_category_link($category->term_id).'">'.$cat_name . '</a> '; } ?>
					</div>
					
					<div class="clearfix"></div>
				
					<div class="title">
						
						<a href="<?php the_permalink(); ?>">
						<h1><?php the_title(); ?></h1>
						
						<h2><?php the_field('subtitle'); ?></h2>
						</a>
					</div>
				</div><!--End Post Content-->
				
			</div>
			
	<?php endwhile; ?>
	<?php endif; ?>
	<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?>
	 <!--End Medium-->	
						

<?php 

// args
$args = array(
	'meta_key'		=> 'homepage_size',
	'meta_value'	=> 'small'
);
 
 // query
$the_query = new WP_Query( $args );

?>

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

		
			<?php if (has_post_thumbnail( $post->ID ) ): ?>
			<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
			<div class="col-md-3 col-sm-3 col-xs-12 post featured-small" style="background-image: url('<?php echo $image[0]; ?>');');"><?php endif; ?>
			
				<div class="post-content">
				
					<div class="category">
						<?php $categories = get_the_category(); foreach($categories as $category) { $cat_name = $category->name; if($cat_name != 'featured') echo '<a href="'.get_category_link($category->term_id).'">'.$cat_name . '</a> '; } ?>
					</div>
					
					<div class="clearfix"></div>
				
					<div class="title">
						
						<a href="<?php the_permalink(); ?>">
						<h1><?php the_title(); ?></h1>
						
						<h2><?php the_field('subtitle'); ?></h2>
						</a>
					</div>
				</div><!--End Post Content-->
				
			</div>
			
	<?php endwhile; ?>
	<?php endif; ?>
	<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?>
	 <!--End Medium-->

			<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>

		</div>
	</section>

<?php else : ?>
<?php endif; ?>

</section>

• jasonisaacs

• June 3, 2015 at 10:52 am

Does anyone have any help for me?

• Jonathan

• June 16, 2015 at 3:14 am

Hi Jason,

I actually think you can make this a lot easier on yourself.
Instead of having three queries (inside an empty and completely unnecessary loop) you can probably do a single query and order the results based on your meta data. Luckily in the alphabet it goes L – M – S 😉

Here’s a very refactored code I think should do the trick for you (you might need to set the order parameter too). I haven’t tested this live.

<section id="content">
	<section id="featured">
		<div class="row">
		
			<?php 
			// args
			$args = array(
				'post_type' => 'post',
				'meta_key' => 'homepage_size',
				'orderby' => 'meta_value',
			);
			 
			 // query
			$the_query = new WP_Query( $args );
			
			?>

			<?php if( $the_query->have_posts() ): ?>
				<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
					
					<?php 
					$size = get_field('homepage_size');
					$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
					$image_style = ( $image ? "background-image: url('" . $image[0] . ");" : '' );
					
					if( $size === 'large' ){
						$classes = 'col-md-6 col-sm-6 col-xs-12 post featured-' . $size;
					}else if( $size === 'medium' ){
						$classes = 'col-md-6 col-sm-6 col-xs-12 post featured-' . $size;
					}else{
						$classes = 'col-md-3 col-sm-3 col-xs-12 post featured-' . $size;
					}
					
					?>
		
					<div class="<?php echo $classes; ?>" style="<?php echo $image_style; ?>">
						<div class="post-content">
							<div class="category">
								<?php $categories = get_the_category(); foreach($categories as $category) { $cat_name = $category->name; if($cat_name != 'featured') echo '<a href="'.get_category_link($category->term_id).'">'.$cat_name . '</a> '; } ?>
							</div>
							
							<div class="clearfix"></div>
					
							<header class="title">
								<a href="<?php the_permalink(); ?>">
									<h1><?php the_title(); ?></h1>
									<h2><?php the_field('subtitle'); ?></h2>
								</a>
							</header>
						</div>
					</div>
					
				<?php endwhile; ?>
			<?php endif; ?>
			<?php wp_reset_postdata();	 // Restore global post data stomped by the_post(). ?>
		</div>
	</section>
</section>