Do you need to show WordPress posts in a grid structure?
A grid structure provides you extra flexibility when displaying your posts in WordPress. This may be useful when creating customized pages.
On this article, we’ll present you methods to simply show your WordPress posts in a grid structure anyplace in your web site.
When Do You Want a Grid Format for WordPress?
Each WordPress theme helps the normal vertical structure of weblog posts, and this works effectively for many varieties of internet sites. Nonetheless, this structure can take up lots of area, particularly you probably have lots of posts.
For those who’re making a customized homepage in your web site, then it’s possible you’ll need to use the grid structure to show your current posts.
This gives you extra space so as to add different parts to your private home web page.
Plus, your submit grid will spotlight your featured pictures, so it’s visually interesting and clickable. You may also use the submit grid to point out off your artistic portfolio and different kinds of customized content material.
Many journal themes and images themes already use the grid-based structure to show posts. Nonetheless, in case your theme doesn’t assist this performance, you then’ll want so as to add it.
With that mentioned, let’s present you methods 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 editor
- Create a grid structure with Submit Grid plugin
- Create a grid structure utilizing SeedProd web page builder
- Create a grid structure by including code to WordPress
Technique 1. Create a WordPress Submit Grid Format with Block Editor
This methodology allows you to merely show your posts and thumbnails in a submit grid structure utilizing the WordPress block editor. There’s a built-in submit grid block that allows you to create your personal 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 submit loop to your web page.
Then, click on the ‘Begin Clean’ possibility on the prime of the block to create a submit grid.
This provides a number of totally different decisions relying on the kind of info you need to show along with your submit grid.
We’ll choose the ‘Picture, Date, & Title’ possibility, however you possibly can select no matter you want.
After that, hover over the picture and choose the ‘Grid View’ possibility.
This turns your record right into a submit grid.
Subsequent, you possibly can 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 possibly can delete the dates from the posts the identical means or go away extra submit info in your guests.
Subsequent, we’ll add hyperlinks to each the submit thumbnail and submit title.
Merely click on in your submit thumbnail and activate the ‘Hyperlink to Submit’ toggle within the right-hand choices panel.
Then, do the identical factor in your submit title.
When you’re completed, click on the ‘Replace’ or ‘Publish’ button to make your submit grid reside.
Now, you possibly can go to your WordPress web site to see your new WordPress submit grid.
You possibly can add this block to any web page or submit. For those who’d like to make use of this as your weblog archive web page, then you possibly can see our information on methods to create a separate web page for weblog posts in WordPress.
Technique 2. Create a WordPress Submit Grid Format With the Submit Grid Plugin
This methodology provides a easy means so as to add a customizable submit grid that you may add anyplace in your web site.
Very first thing it’s good to do is set up and activate the Submit Grid plugin. For extra particulars, see our information on methods to set up a WordPress plugin.
Upon activation, it’s good to go to Submit Grid » Add New to create your first submit grid.
Then, give your submit grid a title. This received’t seem anyplace in your web page it’s simply that will help you keep in mind.
Under this, you’ll discover the submit grid settings divided into totally different sections with a number of tabs.
First, it’s good to click on on the ‘Question Submit’ tab. That is the place you’ll outline the submit varieties that you just need to show within the ‘Submit varieties’ field.
By default, it should solely show posts, however you possibly can add pages and even customized submit varieties.
After that, it’s good to click on on the ‘Layouts’ tab.
Then, click on the ‘Create structure’ button. It will open in a brand new window.
You have to title 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 submit grid.
We’ll choose the ‘Thumbnail with hyperlink’ possibility and the ‘Submit title with hyperlink’ possibility.
Then, click on ‘Publish’ or ‘Replace’ to avoid wasting your structure.
Now, return to the unique submit grid editor within the earlier tab, and there will probably be a brand new structure possibility out there 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 model’ tab. Right here you possibly can set the dimensions of your grid.
The default settings ought to work for many websites, but when not, then you possibly can change them right here.
When you’re completed, click on the ‘Publish’ button on the prime of the web page, and your grid will probably be prepared so as to add to your WordPress weblog.
Now, it’s good to click on the ‘Shortcode’ tab after which copy the shortcode within the ‘Submit Grid Shortcode’ field.
After that, open up the web page the place you need to show your submit 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 possibly can view your web page to see your WordPress submit grid structure reside.
Technique 3. Create a WordPress Submit Grid Format With the SeedProd Web page Builder Plugin
One other solution to create a submit grid structure is utilizing the SeedProd web page builder plugin. It’s the finest 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 methods 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 deliver 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 possibly can customise this block with the left-hand choices panel.
First, scroll all the way down to the ‘Format’ part. Right here you possibly can set the variety of columns in your weblog submit grid and activate the ‘Present Function Picture’ and ‘Present Title’ toggles.
Subsequent, scroll all the way down to the ‘Present Excerpt’ toggle and the ‘Present Learn Extra’ toggles and switch them off to create a easy weblog submit grid structure.
If you wish to customise the colour scheme, textual content, and extra, then click on the ‘Superior’ tab on the prime of the left-hand column.
Then, click on the ‘Textual content’ drop down and make your modifications.
You possibly can proceed customizing your web page and weblog submit grid structure as a lot as you’d like.
When you’re performed, click on the ‘Save’ button and choose the ‘Publish’ drop down on the prime of the web page to make your modifications reside.
Now, you possibly can view your new submit grid in your web site.
Technique 4. Create a WordPress Submit Grid Format by Including Code to WordPress
This methodology requires some fundamental understanding of methods to add code to WordPress. For those who haven’t performed this earlier than, then see our information on methods to copy and paste code in WordPress.
Earlier than you add code, it’s good to create a brand new picture dimension that you just’ll be utilizing in your submit grid. To study extra, see our information on methods to create extra picture sizes in WordPress.
Subsequent, you’ll want to search out the correct WordPress theme file the place you’ll be including the code snippet. For instance, you possibly can add it to your single.php, so it seems on the backside of your entire posts.
You may also create a customized web page template and use it to show your weblog submit 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 performed that, you can begin including code to WordPress. For the reason that 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
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Establishing our customized question (In right here we're setting it to point out 12 posts per web page and eradicate 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 submit loop question. You possibly can change the ‘posts_per_page’ variable to show extra posts per web page if you happen to’d like.
Then, add the next code snippet to your theme template file.
<?php
//Present the left hand facet 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 facet 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 submit picture. It additionally creates a CSS class that we’ll present you methods to model later.
It additionally references ‘postimage’, so that you’ll want to vary this to the title of the picture dimension you created earlier.
After that, add the next code snippet on the finish.
<?php
$counter++;
endwhile;
//Submit Navigation code goes right here
endif;
?>
This code snippet merely closes the loop. It additionally provides the choice so as to add submit navigation, however most web site homeowners use a unique plugin for this, so we didn’t embody 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
$grids = 2; //Grids per row
international $query_string; //Want this to make pagination work
/*Establishing our customized question (In right here we're setting it to point out 12 posts per web page and eradicate 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 facet 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 facet 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'd like it.
endif;
?>
</div>
Now, you’ll want so as to add the next CSS to your web site to ensure your submit grid shows properly.
For those who haven’t performed this earlier than, then see our information on methods to simply add customized CSS to your WordPress web site.
#gridcontainer{
margin: 20px 0;
width: 100%;
}
#gridcontainer h2 a{
colour: #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 possibly can modify the totally different CSS selectors to see how they alter totally different parts of your submit loop.
We hope this text helped you discover ways to show your WordPress posts in a grid structure. You may additionally need to see our information on how to decide on the most effective internet design software program and our professional picks of the finest reside chat software program for small companies.
For those who favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Fb.
The submit Find out how to Show Your WordPress Posts in a Grid Format first appeared on WPBeginner.
