How to Display Your WordPress Posts in a Grid Layout
Check Out More At: WP Beginner
WordPress: Best WordPress Plugins | WordPress Tutorials
How to Display Your WordPress Posts in a Grid Layout
| Product Image | Product Name / Primary Rating / Price | Primary Button / Description |
|---|---|---|
|
Best Wordpress Page Builder
|
|
|
|
Best WordPress Form Builder
|
|
|
|
Best WordPress Theme
|
|
|
|
Best Wordpress Cloud Hosting
|
|
|
|
Best Budget WordPress Host
|
|
|
Elementor is an amazing website builder plugin for WordPress. Elementor makes it easy to create beautiful and high converting websites yourself without having to learn code.
Gravity Forms is a WordPress plugin that creates powerful forms quickly and easily, with drag-and-drop fields, custom notifications and confirmations, and custom styling capability.
Kadence Theme is a powerful, intuitive and flexible WordPress theme that offers an expansive set of features and customization options.
It includes a robust page builder, beautiful design options, mobile-friendly responsiveness, powerful SEO tools and optimized performance for faster loading times.
It's perfect for creating stunning websites without needing to write any code.
Cloudways is a managed cloud hosting platform that simplifies cloud infrastructure deployment and management.
It provides an intuitive dashboard, automated backups and optimized stack for speedy performance. It also provides 24x7 support with multiple server locations, enabling businesses to host their applications quickly and securely.
If you want to display your WordPress posts in a grid layout, there are a few things you need to do. First, you need to create a grid layout. You can do this by creating a new file in your WordPress theme called grid.php.
Once you have grid.php, you need to add the following code to it:
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => -1
);
$the_query = new WP_Query( $args );
?>
have_posts() ) : ?>
have_posts() ) : $the_query->the_post(); ?>
This code tells WordPress to look for a grid layout called grid.php and display all your posts in a grid.
Once you have added this code to your grid.php file, you need to add the following CSS to your style.css file:
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 33.33%;
padding: 10px;
}
This CSS code tells WordPress to display your posts in a grid with three columns.
Now, if you go to your WordPress site, you should see your posts displayed in a grid layout.