WordPress already includes functionality for displaying custom post types. It’s time to display custom post type as grid content on your website once you’ve added a few new posts to it. You may use a few different methods, and each one has its own advantages.
The use of custom post types has the advantage of keeping your custom content types separate from your regular posts. However, you can show custom post types as a grid anywhere on your website if you’d like.
First, you may need to create custom post-type functionality in WordPress. To create it, see our guide on the best way to create a custom post-type
2 Ways To Display Custom Post Type as Grid in WordPress
1: Displaying Custom Post Types with a plugin
WordPress’s plugin system has made WordPress much easier for users. There is a free plugin to show custom post types as a grid in WordPress. Let’s install and activate the plugin called Wp Show Posts. After activating you may create a grid view for any post type.
First, create a new list and name it anything you want. You will get many options in this area. You have to choose the post type you’ve created. and can limit the post in the view section.
There is also support for column customize, content length, read more button, and many more. After configuring the options you may publish this list. Then the plugin will provide a shortcode for the list you’ve created now.
On the right side, you will see a shortcode. Simply copy the shortcode and paste it anywhere in WordPress. The plugin will display custom post type as grid.
-The output of shortcode
2. Display custom post type as Grid by Adding Code to WordPress
To create a WordPress custom post-type grid layout by adding code to your WordPress theme, you’ll need to perform several steps. Custom post types allow you to create content types beyond regular posts and pages. In this example, I’ll create a custom post type called “Movie” and display it in a grid layout. See our guide on the best way to create a custom post-type
You can create a custom page template like “page-movies.php” to display your custom post type in a grid layout. Here’s a basic structure:
<?php
/*
Template Name: Movie Grid
*/
get_header();
?>
<div class="movie-grid">
<?php
$movie_query = new WP_Query(array(
'post_type' => 'movies',
'posts_per_page' => -1, // Display all portfolio items.
));
if ($movie_query->have_posts()) :
while ($movie_query->have_posts()) :
$movie_query->the_post();
?>
<div class="movie-item">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<?php
endwhile;
wp_reset_postdata();
else :
echo 'No movie items found.';
endif;
?>
</div>
<?php get_footer(); ?>Style Your Grid with CSS: You should add CSS styles to your theme’s stylesheet (usually style.css) or use a custom CSS plugin to style the grid as you desire.
/* Movie Grid Styles */
.movie-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Adjust the number of columns as needed */
gap: 20px;
}
.movie-item {
border: 1px solid #ccc;
padding: 20px;
}
/* Additional styling as needed */
Create a Page and Assign the Custom Template: Create a new page in WordPress and assign the “Movie Grid” template to it. You can do this in the page editor under the “Page Attributes” section.
Publish and Preview: Publish the page and view it to see your custom post-type grid layout.
