Do you need to show WordPress posts in a grid structure?
A grid structure offers you extra flexibility when displaying your posts in WordPress. This may be useful when creating customized pages.
On this article, we’ll present you learn how to simply show your WordPress posts in a grid structure anyplace in your web site.
When Do You Want a Grid Structure for WordPress?
Each WordPress theme helps the standard vertical structure of weblog posts, and this works effectively for many varieties of internet sites. Nevertheless, this structure can take up a number of area, particularly when you’ve got a number of posts.
In case you’re making a customized homepage on your web site, then you could need to use the grid structure to show your latest posts.
This gives you extra space so as to add different parts to your property web page.
Plus, your put up grid will spotlight your featured photos, so it’s visually interesting and clickable. You may as well use the put up grid to indicate off your inventive portfolio and different kinds of customized content material.
Many journal themes and images themes already use the grid-based structure to show posts. Nevertheless, in case your theme doesn’t help this performance, then you definitely’ll want so as to add it.
With that stated, let’s present you learn how to show your WordPress posts in a grid structure. Merely use the fast hyperlinks under to leap straight to the tactic you need to use.
Create a grid structure with WordPress block editorCreate a grid structure with Put up Grid pluginCreate a grid structure utilizing SeedProd web page builderCreate a grid structure by including code to WordPress
Methodology 1. Create a WordPress Put up Grid Structure with Block Editor
This technique enables you to merely show your posts and thumbnails in a put up grid structure utilizing the WordPress block editor. There’s a built-in put up grid block that permits you to create your individual grid.
To do that, open up the web page you need to edit, then click on the ‘Plus’ add block button and seek for ‘Question Loop’, then click on the block so as to add it.
This block provides your put up loop to your web page.
Then, click on the ‘Begin Clean’ possibility on the high of the block to create a put up grid.
This offers just a few totally different decisions relying on the kind of info you need to show along with your put up grid.
We’ll choose the ‘Picture, Date, & Title’ possibility, however you may select no matter you want.
After that, hover over the picture and choose the ‘Grid View’ possibility.
This turns your record right into a put up grid.
Subsequent, you may customise the knowledge you need to show.
First, we’re going to delete the pagination on the backside of the block. To do that, merely click on on it, and click on the ‘Three Dots’ choices menu.
Then, click on on ‘Take away Pagination’.
It will routinely take away the aspect from the block.
You’ll be able to delete the dates from the posts the identical approach or depart extra put up info on your guests.
Subsequent, we’ll add hyperlinks to each the put up thumbnail and put up title.
Merely click on in your put up thumbnail and activate the ‘Hyperlink to Put up’ toggle within the right-hand choices panel.
Then, do the identical factor on your put up title.
When you’re completed, click on the ‘Replace’ or ‘Publish’ button to make your put up grid reside.
Now, you may go to your WordPress web site to see your new WordPress put up grid.
You’ll be able to add this block to any web page or put up. In case you’d like to make use of this as your weblog archive web page, then you may see our information on learn how to create a separate web page for weblog posts in WordPress.
Methodology 2. Create a WordPress Put up Grid Structure With the Put up Grid Plugin
This technique provides a easy approach so as to add a customizable put up grid that you may add anyplace in your web site.
Very first thing you should do is set up and activate the Put up Grid plugin. For extra particulars, see our information on learn how to set up a WordPress plugin.
Upon activation, you should go to Put up Grid » Add New to create your first put up grid.
Then, give your put up grid a title. This received’t seem anyplace in your web page it’s simply that can assist you keep in mind.
Under this, you’ll discover the put up grid settings divided into totally different sections with a number of tabs.
First, you should click on on the ‘Question Put up’ tab. That is the place you’ll outline the put up varieties that you simply need to show within the ‘Put up varieties’ field.
By default, it would solely show posts, however you may add pages and even customized put up varieties.
After that, you should click on on the ‘Layouts’ tab.
Then, click on the ‘Create structure’ button. It will open in a brand new window.
That you must identify your structure. Then, click on on the ‘Normal’ possibility, and it’ll open up an inventory of tags.
These tags are the knowledge that can show in your put up grid.
We’ll choose the ‘Thumbnail with hyperlink’ possibility and the ‘Put up title with hyperlink’ possibility.
Then, click on ‘Publish’ or ‘Replace’ to save lots of your structure.
Now, return to the unique put up grid editor within the earlier tab, and there can be a brand new structure possibility obtainable that you may choose.
Merely click on on the brand new structure within the ‘Merchandise layouts’ part on the backside of the display.
Subsequent, click on the ‘Merchandise type’ tab. Right here you may set the dimensions of your grid.
The default settings ought to work for many websites, but when not, then you may change them right here.
When you’re completed, click on the ‘Publish’ button on the high of the web page, and your grid can be prepared so as to add to your WordPress weblog.
Now, you should click on the ‘Shortcode’ tab after which copy the shortcode within the ‘Put up Grid Shortcode’ field.
After that, open up the web page the place you need to show your put up record and click on the ‘Plus’ add block button.
Then, seek for ‘Shortcode’ and choose the ‘Shortcode’ block.
Subsequent, paste the shortcode you copied earlier into the field.
Then, click on the ‘Replace’ or ‘Publish’ button.
Now, you may view your web page to see your WordPress put up grid structure reside.
Methodology 3. Create a WordPress Put up Grid Structure With the SeedProd Web page Builder Plugin
One other technique to create a put up grid structure is utilizing the SeedProd web page builder plugin. It’s the greatest drag and drop WordPress web page builder available in the market utilized by over 1 million web sites.
SeedProd helps you simply create customized pages and even utterly customized WordPress themes with out writing any code. You should utilize the plugin to create any type of web page you need, like 404 pages, coming quickly pages, touchdown pages, and extra.
To study extra, see our information on learn how to create a customized web page in WordPress.
Within the SeedProd builder, as you’re customizing your web page, merely click on the plus ‘Add Part’ button anyplace on the web page.
It will convey up an possibility so as to add a brand new block.
Subsequent, drag the ‘Posts’ block over to your web page, and it’ll routinely add an inventory of posts to your web page.
Now, you may customise this block with the left-hand choices panel.
First, scroll right down to the ‘Structure’ part. Right here you may set the variety of columns on your weblog put up grid and activate the ‘Present Function Picture’ and ‘Present Title’ toggles.
Subsequent, scroll right down to the ‘Present Excerpt’ toggle and the ‘Present Learn Extra’ toggles and switch them off to create a easy weblog put up grid structure.
If you wish to customise the colour scheme, textual content, and extra, then click on the ‘Superior’ tab on the high of the left-hand column.
Then, click on the ‘Textual content’ drop down and make your adjustments.
You’ll be able to proceed customizing your web page and weblog put up grid structure as a lot as you’d like.
When you’re achieved, click on the ‘Save’ button and choose the ‘Publish’ drop down on the high of the web page to make your adjustments reside.
Now, you may view your new put up grid in your web site.
Methodology 4. Create a WordPress Put up Grid Structure by Including Code to WordPress
This technique requires some fundamental understanding of learn how to add code to WordPress. In case you haven’t achieved this earlier than, then see our information on learn how to copy and paste code in WordPress.
Earlier than you add code, you should create a brand new picture dimension that you simply’ll be utilizing on your put up grid. To study extra, see our information on learn how to create further picture sizes in WordPress.
Subsequent, you’ll want to seek out the correct WordPress theme file the place you’ll be including the code snippet. For instance, you may add it to your single.php, so it seems on the backside of all your posts.
You may as well create a customized web page template and use it to show your weblog put up grid structure with thumbnails.
To study extra, see our WordPress template hierarchy cheat sheet to assist discover the correct theme template file.
When you’ve achieved that, you can begin including code to WordPress. Because the code snippet is kind of lengthy, we’ll break it down part by part.
First, add the next code snippet to your theme template file.
<?php
$counter = 1; //begin counter
$counter = 1; //begin counter
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Organising our customized question (In right here we’re setting it to indicate 12 posts per web page and get rid of all sticky posts*/
query_posts($query_string . ‘&caller_get_posts=1&posts_per_page=12’);
if(have_posts()) : whereas(have_posts()) : the_post();
?>
This code snippet units up the put up loop question. You’ll be able to change the ‘posts_per_page’ variable to show extra posts per web page when you’d like.
Then, add the next code snippet to your theme template file.
<?php
//Present the left hand aspect column
if($counter == 1) :
?>
<div class=”griditemleft”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<?php
//Present the correct hand aspect column
elseif($counter == $grids) :
?>
<div class=”griditemright”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<div class=”clear”></div>
<?php
$counter = 0;
endif;
?>
//Present the left hand aspect column
if($counter == 1) :
?>
<div class=”griditemleft”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<?php
//Present the correct hand aspect column
elseif($counter == $grids) :
?>
<div class=”griditemright”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<div class=”clear”></div>
<?php
$counter = 0;
endif;
?>
This code snippet creates two columns for our posts and can show the title and put up picture. It additionally creates a CSS class that we’ll present you learn how to type later.
It additionally references ‘postimage’, so that you’ll want to alter this to the identify of the picture dimension you created earlier.
After that, add the next code snippet on the finish.
<?php
$counter++;
endwhile;
//Put up Navigation code goes right here
endif;
?>
$counter++;
endwhile;
//Put up Navigation code goes right here
endif;
?>
This code snippet merely closes the loop. It additionally offers the choice so as to add put up navigation, however most web site house owners use a distinct plugin for this, so we didn’t embrace it to keep away from code conflicts.
Right here’s how the ultimate code snippet appears altogether.
<div id=”gridcontainer”>
<?php
$counter = 1; //begin counter
<?php
$counter = 1; //begin counter
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Organising our customized question (In right here we’re setting it to indicate 12 posts per web page and get rid of all sticky posts) */
query_posts($query_string . ‘&caller_get_posts=1&posts_per_page=12’);
if(have_posts()) : whereas(have_posts()) : the_post();
?>
<?php
//Present the left hand aspect column
if($counter == 1) :
?>
<div class=”griditemleft”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<?php
//Present the correct hand aspect column
elseif($counter == $grids) :
?>
<div class=”griditemright”>
<div class=”postimage”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
</div>
<div class=”clear”></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go right here if you would like it.
endif;
?>
</div>
Now, you’ll want so as to add the next CSS to your web site to ensure your put up grid shows properly.
In case you haven’t achieved this earlier than, then see our information on learn how to simply add customized CSS to your WordPress web site.
#gridcontainer{
margin: 20px 0;
width: 100%;
}
#gridcontainer h2 a{
shade: #77787a;
font-size: 13px;
}
#gridcontainer .griditemleft{
float: left;
width: 278px;
margin: 0 40px 40px 0;
}
#gridcontainer .griditemright{
float: left;
width: 278px;
}
#gridcontainer .postimage{
margin: 0 0 10px 0;
}
margin: 20px 0;
width: 100%;
}
#gridcontainer h2 a{
shade: #77787a;
font-size: 13px;
}
#gridcontainer .griditemleft{
float: left;
width: 278px;
margin: 0 40px 40px 0;
}
#gridcontainer .griditemright{
float: left;
width: 278px;
}
#gridcontainer .postimage{
margin: 0 0 10px 0;
}
You’ll be able to modify the totally different CSS selectors to see how they modify totally different parts of your put up loop.
We hope this text helped you discover ways to show your WordPress posts in a grid structure. You might also need to see our information on how to decide on one of the best net design software program and our knowledgeable picks of the greatest reside chat software program for small companies.
In case you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Fb.
The put up The right way to Show Your WordPress Posts in a Grid Structure first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!