WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Create a Grid Display of Post Thumbnails in WordPress Themes

How to Create a Grid Display of Post Thumbnails in WordPress Themes

Last updated on December 16th, 2013 by Editorial Staff
34 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Create a Grid Display of Post Thumbnails in WordPress Themes

When creating WordPress site designs, have you ever had the urge to create a grid display of posts? The grid layout works great for media centric sites such as our WordPress gallery or another showcase type site. Theme frameworks like Genesis already has a pre-built Grid Loop system. However, if you are trying to do a grid display in your custom WordPress theme, then we are here to help. In this article, we will show you how to create a grid loop display of post thumbnails in your WordPress theme.

Note: you need to have a fair understanding of CSS and how the WordPress loop work.

Before we begin, lets take a look at what we are trying to accomplish:

Grid Post Display

If you notice, the posts on this page are being displayed in a grid. There is a border on the posts on the left hand side, but not on the right hand side. With a normal post loop, all posts follow the same styling, so you will have a right border on both posts which would look weird. Also notice, the spacing are pretty symmetric. Which is again not possible with the normal loop to do for doing something like this. Now that you can see what we are trying to accomplish, lets take a look on how to accomplish it.

First thing you need to do is make sure that your theme has WordPress post thumbnails turned on. You should also think about how you want to resize your WordPress images because you will be needing it.

Once you have got the thumbnails and sizes setup, lets get this thing started. Lets setup our loop queries:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>

The code above seems pretty straight forward because we have made inline comments. One thing that you probably would need to edit is posts_per_page variable to suit your needs. You can also add other query parameters if you so desire. Now that we got the loop started, lets look at how we want to display the posts inside it.

<?php
//Show the left hand side 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
//Show the right hand side 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;
?>

We start the code by checking to see if the counter is 1 which means to show our left grid. We simply go in and start a div with a custom css class “griditemleft”. Inside it we added the post thumbnail and the post title. You can add or subtract any loop elements (such as excerpts, dates, author info, comment count etc). Notice: In our thumbnails, we are calling an additional image size. You will probably have to replace the size-name with your own size that you created.

After the first grid, we added an elseif that looks to see if the $counter matches the number specified in our $grids (which it should because we will be on the second post). If the counter matches, then we can show our right grid which starts with a custom css class “griditemright”. Notice after we close the griditemright div, we are adding a clear class. This we will explain when we get to the CSS part.

After the loop is done with this, we reset the counter to 0, so it can start again in the next row.

We can simply end the loop that we started by adding this code:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

The code above basically is continuing the counter until it hits the limit that is specified in our query_post variable. The reason why we didn’t add the post navigation code above is because many folks use a plugin or different display method for this. So we are leaving it open for you to decide for yourself.

So our final loop code will look like this:

<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side 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
//Show the right hand side 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 here if you want it.
endif;
?>
</div>

Now that we have the PHP code ready, lets look at how we are going to style it.

Our default output would look like this:

<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

Here are the classes that you need to modify:

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #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;}

We hope that this tutorial steers you in the right direction towards making a grid loop display for your WordPress posts.

34 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

72 Comments

Leave a Reply
  1. Steve says:
    Apr 18, 2018 at 10:26 pm

    This looks promising, I do not know where all the php code is supposed to go. If you could update this article to contain more details that would be awesome. As of right now, this does not work for me.

    Reply
  2. Chris says:
    Mar 3, 2018 at 10:19 pm

    This is working except any row beyond the first is going outside of the container. This can be seen if you set a background color either in the #gridcontainer or the section I placed the code into. How can I make this not go outside of the container? I used the code as it is written here.

    Reply
  3. sam says:
    Aug 10, 2017 at 5:14 am

    Hello wpbeginner :)

    I wonder if you knew how to create a list of 3-4 columns articles like we can see on this homepage website

    thanks for your help
    Best Regards
    Sam

    Reply
    • WPBeginner Support says:
      Aug 11, 2017 at 7:21 am

      Hey Sam,

      This column layout is sometimes also called a grid based layout. Many WordPress magazine themes have grid based layouts. Many other premium themes may offer it as an optional layout for the homepage.

      Reply
  4. Lulu says:
    Jul 21, 2017 at 6:48 am

    I’ve read through your article three times now and one key piece of information still eludes me –

    where does all this code go?

    Thanks

    Reply
  5. Rachael Portier says:
    Sep 14, 2016 at 1:33 am

    I am trying to get pagination to work with this loop and I can’t get it to work for anything! It displays but page 2 and so on are all just the same posts that are displayed on page one. Please help!

    Reply
  6. Atef Raouf says:
    Sep 8, 2016 at 10:41 pm

    Thanks for the tutorial.

    I suggest you add some screenshots at the end to show the end results. this helps people visualizing the results without having to put all the code to see the results.
    thanks

    Reply
  7. Linda says:
    Jun 14, 2016 at 10:53 am

    Thank you for posting this! It was really helpful!

    Reply
  8. Rick @ The Stem says:
    Mar 24, 2016 at 8:56 pm

    Thanks for this.. it was exactly what I wanted, and so far I’ve got my tweaks working perfectly! Except one thing… I cannot seem to wrap my brain around increasing from 2 columns to three. I tried changing the $grids to 3.. but then I’m left guessing which loop to replicate… and what to do with the grids variable.

    Please, could you help me out.. do I duplicate the left or right grid? And how do I adjust the if($counter == 1) statement?

    My playing around only got me as far as repetition of the left or right column in the middle.

    Thanks in advance!

    Reply
  9. fernando says:
    Jan 14, 2016 at 10:52 am

    Kudos! Got it to work with regular posts in one category, but can’t put it to work properly with a custom post type :) The left grid shows all posts, instead of showing them in both grids. Any idea what am I missing here? All the rest is just perfect, but that little bugger is killing me.

    Reply
  10. Dejan says:
    Oct 3, 2015 at 9:12 am

    Hello! Thank you for this tutorial.

    I have problem with displaying items in grid. If post name is too long, entry that goes beneath him move to next “free” place in grid. You can view it here: On mobile, that problem becomes more obivous.

    Can you please help me to resolve this? If you have any ideas…

    Reply
    • WPBeginner Support says:
      Oct 3, 2015 at 11:33 pm

      You can try using css max and min width to control the text overflow.

      Reply
    • Dejan says:
      Oct 4, 2015 at 9:19 am

      Thank you! It works like a charm!

      Reply
  11. Atiqur says:
    Jul 8, 2015 at 1:24 am

    give me some idea how i can add staff list in Grid style

    Reply
    • WPBeginner Support says:
      Jul 8, 2015 at 12:43 pm

      You can add a simple staff list, and then use CSS to display it in a grid layout.

      Reply
  12. jlkr98 says:
    Oct 29, 2014 at 1:02 pm

    Solved. Had commented out the rewind_posts and forgot about it.

    Reply
  13. jlkr98 says:
    Oct 24, 2014 at 9:24 am

    Can’t quite make it work. Only shows the featured image of the page/post it is located on. Must be doing something wrong – anybody able to tell me what?
    Thanks

    Reply
  14. Tammy Rome says:
    Oct 23, 2014 at 1:00 pm

    I need some ideas on how to prevent my page from displaying multiple instances of the posts. I have copied this code into a test file on my server. The only modification I have made is to add

    <a href="”>…read more

    after the … tag

    Any ideas how to fix this?

    Reply
  15. abbey says:
    Oct 11, 2014 at 5:20 am

    Hi, thanks for this great tutorial, everything works as usual but the pagination is not working if you are using the code as custom post type archive. it always says page not found when you click next page. anyway to solve this?

    thanks

    Reply
  16. Andrew says:
    Sep 25, 2014 at 4:10 pm

    I tried your tutorial here (good one by the way), but I noticed an odd behavior of the masonry script (which I enqueue WP’s included version). Everything works, but if you go to another page and then go back, the blog masonry page container inline style height has changed and I get overlapping entries. So the original height value, doesn’t get restored unless you refresh the page.

    Reply
  17. Marko Jezernik says:
    Jun 16, 2014 at 8:16 am

    Great code and it works perfectly. One question though: is it possible to get posts from only a specific category? That would be awesome.

    Reply
    • mkotto says:
      Jun 27, 2014 at 11:02 am

      Duplicate the category.php and add the name of the specific category you want to use:
      category-drawings.php for example…
      And then add the code

      Reply
  18. Marko Jezernik says:
    Jun 16, 2014 at 5:27 am

    This works perfectly and it’s really easy to customize. One question though: how could one add category filter? I need the grid to display posts from specific category.

    Reply
  19. Abhishek Prakash says:
    May 27, 2014 at 12:24 am

    Can you please tell me where we have to paste these codes.

    Reply
    • Diwas says:
      Oct 16, 2014 at 5:10 am

      Put the code anywhere you would like to show the posts on grid. I kept on index.php

      Reply
  20. Vinay singh says:
    Apr 8, 2014 at 9:36 pm

    Sir Can u tell me how to implement 4 grids… just asking a simple code to implement

    Reply
  21. Dan says:
    Apr 1, 2014 at 7:46 am

    Hi,

    Thanks for this tutorial, its awesome. I have tinkered about to make a responsive two column grid using this. The only issue I am having is getting Pagination to work. I am using this grid on a category archive page. So setting the amount of blog posts to display in Settings > Reading doesn’t seem to affect this page thus my pagination isn’t working.

    Any ideas how I would get Pagination to work on an archive page so as to not display hundreds of posts on one page?

    Thanks in advance. Superb website, has really helped me get to grips with WordPress.

    Dan

    Reply
  22. Huzan says:
    Mar 5, 2014 at 2:58 am

    Is this grid responsive? I want to show this grid only on my category pages & posts pertaining to that category should reflect.

    Please advice.

    Reply
  23. Kailash says:
    Feb 25, 2014 at 3:03 pm

    Hello, I am not getting 3 & 4 grid in a row,
    i tried $counter = 1; //start counter

    $grids = 3; //Grids per row

    and then with if else i used ,if($counter == 1) , elseif($counter == 1 || $counter == 2) : , elseif($counter == 1 || $counter == 2 || $counter == 3) : but in fist column showing first post then in next column showing two post one by one.. Please help to disply 4 gid in a row !

    Reply
    • Sam Kiranga says:
      Sep 19, 2014 at 3:42 am

      I suspected just by reading through the code that it would not even work for four grids let alone grids >4. Thats because it does not have an else statement for when $counter |== $grid. So when you have $counter == 3 and your $grid == 4 what happens? Of course it slips into a new unstyled div which will simply be the next row thus distabilizing the grid system. This is a half baked post grid solution.. Try using the Genesis framework code or bootstrap

      Reply
  24. photonon says:
    Feb 18, 2014 at 6:41 am

    Hi,

    thanks for this tut!
    I used the code and modified it to show 3 posts in a row.
    Works great. There is only one problem, which may occur, because my knowledge about php programming is more ore less 0. So the problem is, that the grid is displayed over and over again, endless i think. Kind of a post page showing one post over and over again.
    I bet there is an easy solution, but i can’t see it right now.
    Thanks for any hint or even better a solution!

    Grtz!

    Reply
    • Photonon says:
      Feb 20, 2014 at 3:42 am

      Hi!

      Got it working. It was just a basic thing. I called a loop in a loop and then… Sometimes it’s better to have a break and then have a fresh look onto things. :-)

      Bye!

      Reply
  25. Gregory Rich says:
    Feb 13, 2014 at 12:51 pm

    Hello,

    Thanks so much for this. I’m creating a custom theme for my portfolio and this worked really nicely, except for some reason I can’t create a separate loop to display my posts in a non-grid format. I am probably missing something obvious. My website is http://www.gregoryrich.com and while I’ve gotten the grid to work for the homepage, I’m trying to get it so my posts are displayed in full text on http://www.gregoryrich.com/blog, and it’s just displaying the grid on both pages even though I have entered in completely different loops to the content area of the page. Any idea why this might be happening? Thank you very much, again.

    Reply
    • WPBeginner Support says:
      Feb 13, 2014 at 7:52 pm

      Hello Gregory,

      This is happening because the snippet in the tutorial does not display content. To display content you will need to add this line of code, just below the post title:

      <?php the_content(); ?>
      

      Or if you would just like to show post excerpt

      <?php the_excerpt(); ?>
      

      Hope this helps.

      Reply
      • Greg Rich says:
        Feb 14, 2014 at 10:54 am

        Awesome, thank you so much!

        Reply
    • Margo says:
      Mar 6, 2014 at 11:53 am

      Hey! I am having the same issue- my PHP knowledge is very limited. I want a portfolio grid page which shows post thumbnails in a grid, then a blog page which shows the loop like the normal blog posts stacked on top of eachother. If anyone has found a solution to this, I would really appreciate the help! Thanks for this tutorial, it made it doable for someone like me with virtually now knowledge of PHP!

      Reply
  26. bgpworld says:
    Jan 24, 2014 at 6:02 pm

    Hi, can you tell me if the same code can be used to display search result as well, i seem to have problems with it showing the pagination and the not found message as im not sure where to place the code within this code.

    Reply
  27. Dang Dinh Tuan says:
    Jan 13, 2014 at 4:55 am

    Hi,

    Thank for your post that I am looking for.
    I am new WP user and my website is http://www.maycatday.com.vn based SilverOrchide theme by Gazpo.
    In your post I see 5 code paragraphs which are 12, 25, 6, 47, 11 and 5 lines. Please guide me what code to use and where to put code in (Archive.php, single.php, style.php)?
    Hop to receive your guide!

    Thanks again,
    Dang Dinh Tuan

    Reply
  28. raanan says:
    Dec 8, 2013 at 6:23 am

    Thanks!

    Maybe Im missing a point but –
    the ………. in the main code section is missing?(only in the css)
    so it displays the columns (3) one on top of another………..
    when ive added the gridconyainer i get a margin to the right….
    ant tio what went wrong?

    thanks

    Reply
  29. Adam Stepney says:
    Sep 20, 2013 at 2:32 pm

    Excellent got it working pretty straight forward! How would I go about using this grid across multiple pages but only showing posts based on the category for that page?

    Reply
    • WPBeginner Support says:
      Sep 21, 2013 at 11:58 pm

      For that you will have to modify the query.

      Reply
    • Jim says:
      Oct 4, 2013 at 7:33 am

      Can i use this code to display custom post on a different page dedicated to that post only? if yes please elaborate.

      Thank you

      Reply
  30. Anandan says:
    Sep 19, 2013 at 2:36 am

    Hello. Is it possible to create a grid display of products using wordpress pages instead of posts?
    Thank you

    Reply
    • WPBeginner Support says:
      Sep 19, 2013 at 10:43 pm

      Yes it is possible but will require you to edit your template. Create a new WP_Query loop through post_type=page and then rest of the tutorial is the same.

      Reply
  31. webbing-in says:
    Sep 5, 2013 at 3:35 pm

    this piece of code has worked just right for me. My blogpage looking good with the grid layout.
    I made 2 rows of excerpts with 3 columns each.
    Now I need to give different background colors to each excerpt. Is it possible?
    Perhaps if I assign a category to each post and call 1 post from every category, can I have different bkground color? if possible, please help with the code…..thanks

    Reply
  32. webbing-in says:
    Sep 5, 2013 at 3:28 am

    Where exactly (in which file) do I need to add this code?
    I need to show posts in grid style on my blog page.

    Thanks

    Reply
    • WPBeginner Support says:
      Sep 10, 2013 at 6:44 pm

      It depends on where you want to show the grid. If you want to add the grid to your site’s main page then you need to find the WordPress loop in either index.php or content.php. There are so many themes, frameworks, so we can not tell you exactly where you would find it. Also look up for WordPress Loop.

      Reply
      • Adelaide says:
        Mar 13, 2014 at 4:38 pm

        Yes, but can you explain more generally where it should go? Can I add it to a custom page template, and have it work just for that page?

        Reply
  33. Cesar G says:
    Aug 28, 2013 at 2:26 am

    Hi, nice post…
    Do u think is possible to give each category a specific css with this method?
    Tks

    Reply
    • WPBeginner Support says:
      Sep 10, 2013 at 9:23 pm

      yes

      Reply
  34. Liam Hodnett says:
    May 23, 2013 at 5:45 pm

    I have replaced my current loop on a custom template with the one above, however no posts are showing, I have gone through the process a couple of times over and still no joy! I’m wondering if my twentyeleven theme is broken somehow .. any recommendations you would suggest ??

    Thanks for your time

    Liam Hodnett

    Reply
  35. Casie says:
    Apr 10, 2013 at 2:43 pm

    Hi there,

    I have a question–what if your theme doesn’t have a loop.php page? Is there still a way to make this work?

    Thanks!

    Reply
    • Editorial Staff says:
      Apr 11, 2013 at 4:07 am

      Yes. Loop.php is just one of the files where your theme can have the loop code. It really depends on how your theme is structured. It could be in the index.php, archive.php, content.php, etc.

      Reply
  36. Ayman says:
    Mar 3, 2013 at 7:56 am

    Hi,
    This is a great tut. I’m trying to apply the loop on a custom post type and so far everything is perfect.

    The only problem is that when I’m changing the ($grids = 2; //Grids per row) to a bigger number the images are hiding each other.

    If I’m leaving ($grids = 2) I’m getting 2 grids on each row and changing it to 3 is suppose to make the first image from the 2 row to swipe up to the 1 row and like that we will have 3 on each row but what is happening is that the 3 image is swiping to the first row and taking the place of the 2 image so result is 2 grids and the second grid is gone as it was replaced with the 3 one.

    Any help would be appreciated.
    Thanks

    Reply
    • Peter says:
      Mar 18, 2013 at 2:03 pm

      change if($counter == 1)

      to
      if($counter == 1 || $counter == 2)

      and as long as you have $grids = 3 it will work

      :)

      Reply
      • Angel says:
        Aug 3, 2013 at 2:34 pm

        I changed mine from

        if($counter == 1)

        to
        if($counter >= 1)

        Meaning if the counter is equal to or greater than 1, fixed it right up.

        Reply
        • Bobbles says:
          Aug 6, 2013 at 10:51 am

          Thanks Angel – your fix worked for me :)

  37. Dan Davies says:
    Aug 2, 2012 at 4:29 am

    Hi thanks for this tut, really useful but I am struggling with the pagination – what code do i need for pagination? Any ideas?

    Reply
    • Editorial Staff says:
      Aug 6, 2012 at 8:30 am

      If you are using a plugin like wp-pagenavi then insert the code they provide you (this is for numeric pagination). If you want to have next/previous link pagination, then use:

      http://codex.wordpress.org/Function_Reference/posts_nav_link

      Reply
  38. Vamsi says:
    Aug 1, 2012 at 8:59 am

    This was really helpful… I just want to know the other thing,
    How can i remove grid view from the homepage of eleven40 theme(genesis theme)??? can you help me solve this??

    Reply
    • Editorial Staff says:
      Aug 1, 2012 at 11:21 am

      Please ask that question in Genesis support forum. Its available for all paying customers.

      Reply
  39. _jamesbanks says:
    Apr 2, 2012 at 5:48 am

    I managed how to figure out how to create a 3 and 4 grid layout by copying the loop and adjusting the $grids variable. However on my 3 grid layout, the top row of posts are unclickable e.g you cannot follow the thumbnail links to the post, cannot highlight the text. Any idea why this is happening?

    Reply
    • wpbeginner says:
      Apr 2, 2012 at 8:03 am

       @_jamesbanks No idea. If you do it properly, then it should work just fine. If you email us your code, then we can perhaps take a look. 

      Reply
      • _jamesbanks says:
        Apr 2, 2012 at 9:10 am

         @wpbeginner  Thank you I will email you the code and the link to view the demo of my WordPress theme. What email address should I email it to? Thanks again. 

        Reply
        • wpbeginner says:
          Apr 2, 2012 at 9:15 am

           @_jamesbanks Use the contact form.

  40. skylos says:
    Jan 11, 2012 at 1:56 pm

    Wonderful tut, exactly what I was looking for!

    Reply
  41. _CAnet_ says:
    Oct 25, 2011 at 8:18 am

    Hi,

    in TwentyTen I can make it perfectly work if putting the code in the category-slug.php.

    But how can I accomplish the same thing on my blog page?

    I have a static page set in the Front page displays section of Settings -> Reading

    Thanks

    Reply
    • wpbeginner says:
      Oct 25, 2011 at 8:26 am

      @_CAnet_ You would have to create a custom page template for your homepage. Then follow this tutorial :)

      Reply
      • _CAnet_ says:
        Oct 25, 2011 at 9:10 am

        well, first of all, thank you for your quick response…but anyway it’s still not that easy to be done (not for a wpbeginner at least). :-/

        I need to grid-layout ONLY the post page,i.e., in SETTINGS -> READING:

        – FRONT PAGE DISPLAY = my custom static page

        – POST PAGE = the page I need to grid layout

        I’ve tryed creating a home.php and a front-page.php too, but I always got grid layout in the front page (that should not be changed).

        I’ve even tryed to apply a custom template from my post page too but it load a standard layout post page.

        What am I missing?

        Thanks for your kind help

        Reply
        • wpbeginner says:
          Oct 25, 2011 at 9:22 am

          @_CAnet_ Yes, this tutorial is not for total beginners. That is why we had a note in the article, that you must have a FAIR understanding of how CSS and the WordPress loop work.What you need to do is create a separate blog page. Follow the URL belowhttps://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/In the url above, you will be creating a custom page template for the blog page.If you cannot figure it out, then you are more then welcome to hire us. We would be able to do this for a small fee.

        • POKOFFICE says:
          Nov 7, 2011 at 2:20 pm

          How much for this function? Need it asap

        • wpbeginner says:
          Nov 7, 2011 at 2:35 pm

          @POKOFFICE Shoot us an email and we can talk.

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WP Mail SMTP logo
WP Mail SMTP
Fix WordPress email delivery issues. #1 SMTP plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Liquid Web
Liquid Web Coupon
Get 50% OFF on Liquid Web managed WordPress hosting plans for 3 months. From just $9.50.
Gator Website Builder Coupon
Get 55% OFF on Gator Drag & Drop Website Builder by HostGator.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.