Welcome to Praful Bhuskute BlackSpy Praful Bhuskute BlackSpy Praful Bhuskute BlackSpy Praful Bhuskute BlackSpy

Linkedin Envelope

Create a shortcode to display custom post types with a specific taxonomy in Grid view with advanced custom fields

Display custom post type in Grid using shortcode

				
					<?php 
// Create Shortcode to Display Portfolio Post Types

function pbwp_create_shortcode_portfolio_post_type()
{

	$args = array(
		'post_type'      => 'portfolio',
		'posts_per_page' => '999',
		'publish_status' => 'published',
		'tax_query' => array(
			array(
				'taxonomy' => 'project-type',
				'terms' => 'summit2020',
				'field' => 'slug',
			),
		),
	);

	$query = new WP_Query($args);

?>

	<div class="grid-container">
	    
		<?php

		if ($query->have_posts()) :

			while ($query->have_posts()) : $query->the_post();

				// $query->the_post();
				// $result .= '';
				// $result .= '' . get_the_post_thumbnail();
				// $result .= '' . get_the_title() . '<br>';
				// $result .= '' . the_field('linkedin') . '<br>';
				// $result .= '';


		?>
				<div class="grid-item">

					<div class="cust-img-all-ambassadors">
						<img decoding="async" width="255px" height="280px" src="<?php the_post_thumbnail_url(); ?>" class="cust-img-all-ambassadors" alt="<?php the_title(); ?>" loading="lazy">
					</div>
					<div class="eael-entry-wrapper">
						<header class="eael-entry-header">
							<h2 class="eael-entry-title" style="font-size: 16px; line-height:22px"><a class="eael-grid-post-link" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
							</h2>
						</header>
						<?php
						the_field('linkedin');
						?>
					</div>
				</div>
		<?php
			endwhile;
			wp_reset_postdata();
		endif;
		?>
	</div>
<?php
	return $result;
}

add_shortcode('portfoliogrid', 'pbwp_create_shortcode_portfolio_post_type'); 
 
// shortcode code ends here

CSS for Grid

				
					/* custom code for grid start here */

.cust-img-all-ambassadors img{
  object-fit: cover;
	height:280px!important;	
	border-radius:5px;
		}

@media (min-width:767px){
.grid-container {
  display: grid!important;
  grid-template-columns: auto auto auto auto;
  padding: 10px;
}

.grid-item { 
  padding: 20px;
}
}

@media (max-width:767px){
.grid-container {
  display: grid!important;
  grid-template-columns: auto;
  padding: 10px;
}
.grid-item { 
  padding: 10px;
}
}

/* custom code for grid end here */

				
			
				
					/* custom code for grid start here */

.cust-img-all-ambassadors img{
  object-fit: cover;
	height:280px!important;	
	border-radius:5px;
		}

@media (min-width:767px){
.grid-container {
  display: grid!important;
  grid-template-columns: auto auto auto auto;
  padding: 10px;
}

.grid-item { 
  padding: 20px;
}
}

@media (max-width:767px){
.grid-container {
  display: grid!important;
  grid-template-columns: auto;
  padding: 10px;
}
.grid-item { 
  padding: 10px;
}
}

/* custom code for grid end here */

Drop your queries

Create a shortcode to display custom post types with a specific taxonomy in Grid view with advanced custom fields

Table of Contents

Have A Project In Mind? Let's Get To Work

Start a Project
Praful Bhuskute

Categories

Follow on

Linkedin Envelope

Discount Coupons Code for Google Workspace

Google Workspace Business Starter Promotion code for Asia Pacific | Expires 10/2023 
				
					XA77H7K3DVGYXXE
Google Workspace Business Standard Promotion code for Asia Pacific | Expires 10/2023 
				
					RAMCJAQDGED3UYF