Grid of Posts

thanks for pointing this out.

which post in particular?

if you mean ‘Multi-Column Grid-Style Posts in WordPress’, there are simpler methods to create posts in columns or grids, also pointed out in my latest edit of the post.

if you have an example template, where you want to integrate some of the code, i can possibly talk you through in the forum.

you could describe your problem in more details, and paste the code of your template (what you have so far) into a https://pastebin.com/ and post the link to it here; also a link to your site.

I have absolutely no code for this. I’m just using a default twentyten theme.

When you click that link, I want to do exactly what he has. A predefined size grid where my posts fall into. Does that help at all?

EDIT: I see it’s your website. Hahaha. Nice to meet you. But yes, I would like to recreate what you have going on when you click Here exactly as you have it.

You have 3? articles about it and I don’t know which one to use. Also, whenever I try to use any of your tutorials, you don’t say where exactly to put what code so as a very very very new person to wordpress I get confused. Like I said before, any help is greatly appreciated.

actually, this post ‘Playing with columns – stacking posts in a grid’ refers directly to Twenty Ten, and has links to example files for use with Twenty Ten.

you might need to read the docu about:

page templates
https://codex.www.ads-software.com/Pages#Page_Templates

and possibly:
the loop
https://codex.www.ads-software.com/The_Loop
query_posts
https://codex.www.ads-software.com/Function_Reference/query_posts
post thumbnail
https://codex.www.ads-software.com/Function_Reference/the_post_thumbnail
themes in general
https://codex.www.ads-software.com/Theme_Development

and you will need quite an understanding of css to get the formatting done.

if you get stuck in details, it will help if you can post a link to your site (work in progress).

So all I have to do is follow the steps after “addendum”?
“addendum:
this method can be implemented into the Twenty Ten theme, using the new ‘get_template_part()’ function to use custom loops.
for the code see:
loop-grid.php;
page template;
css styles.”
Or do I have to do anything above “addendum” aswell?

you can use the files after ‘addendum’ to work with;
as far as i remember, there is no code from above the ‘addendum’ needed for the use in twenty ten.

because of the very ‘spacious’ design of twenty ten, the first result might look a bit odd.

Well, to be totally honest. I made a website. And I “integrated” it into wordpress later on. Basically, I changed the header.php index.php and footer.php files to match my website. That was a while ago. I didn’t touch the theme at all after that.
Now that I want this grid layout I took the code for loop-grid.php and I created my own loop-grid.php file and added it successfully.

Next, I took the code for “page template” and totally copied over Page template (page.php)

Finally, I took the code from css style and added it to the very top of my style sheet (style.css)

Now, it still gives me my posts going straight down… so it’s not working. I’m doing this for a small flash game site/project. Hence every post is a “game”.

https://www.milkshakestudybreak.com/games
T

Next, I took the code for “page template” and totally copied over Page template (page.php)

with what you have done, now every static page should use the template.
but i don’t see any static pages in your site.

the front page is (normally) generated by index.php.

if you want to change the front page to grid layout, you have to apply the code to index.php;

or you could possibly create a static front page: https://codex.www.ads-software.com/Creating_a_Static_Front_Page

otherwise, re-read the concept of page templates.

Oh! Alright, so the page template code goes into index.php.

Alright, I did that now, but I just get a list…

I feel as though the loop-grid.php isn’t working. Do I have to add any special functions or anything?

Is there anyway to test that loop-grid.php is working?

EDIT: I removed the code for “Leave a comment” in “loop-grid.php” and it updated. Any other ideas?

EdIT 2: Yeah, loop-grid.php definitely works. But something has to be stopping it from working. I removed all of my personal code for the website, just to make sure it wasn’t interfering but, it didn’t work either. Something in loop-grid.php must not be working. What do you think?

At the end of all of this I think I owe ya a few beers… what’s the price of one of those?

main thing: the styles to make the columns work, were missing:

/* styles for stacking grid posts
* set the width to allow the chosen number of columns to fit into the available space, incl. margins  */
.col { float:left; width: 145px; padding:5px;
margin-right: 10px; margin-bottom: 20px;
overflow:hidden; }       

/*optional style for first column*/
#col-1 { margin-left:0px; }       

/*optional style for last column - set the number to your chosen number of columns*/
#col-4.col { margin-right:0px; clear:right; }

next task – to get a fixed height for each post, …

oh my gosh! It worked! It worked! Ugh. So happy right now. If you could stick it through to just help me with the rest it would be beyond appreciation from me. Thank you.

SO next, height…?

SO next, height…?

start be redefining what you want to show in the post, how large the fonts are going to be, if you want a thumbnail, if you want to have the same fixed height for each post ….

to see where your posts are, try and add this style to the others:

.col .post { height:350px; overflow:hidden; border: 1px dotted #fff; margin-bottom: 10px; }

if you leave height:350px; away, the posts will stack like ‘tetris’ …

!!! alright. It looks like I got a nice border and a fixed height.

I would like to copy right off of yours though. As in (image in background) 100 x 100. And I would like the title to appear in smaller text in a box on top of (overlaying) the image. Basically…

How do I get from this to this?

start by adapting the size of the fonts;

add a post tumbnail image to the post;
this thumbnail will be used as a background image:
related article: https://wpengineer.com/2123/use-wordpress-post-thumbnail-as-background-image/

Alright, I inserted the code directly at the bottom of functions.php. I’m not sure how I set the thumbnail for each post. Do I just set a featured image? And in which file should I play around with the font size?

EDIT: Yeah, I don’t think the code I inserted worked. A little clarification on where that goes please?

And I guess, once you tell me where to change the font… that should be it! So close!!! Thanks!

A little clarification on where that goes please?

the link was not meant to take the code for ‘copy/paste’; it is for inspiration ?? that comes later; first, get a post thumbnail image into the posts.

where to change the font

is all in style.css;

add these new to style.css (as example only, use as many formats as you like):

.col h2.entry-title a { font-size: 18px; } /*title*/

.col .entry-meta { font-size: 12px; } /*posted on, etc*/
.col .entry-meta a { font-size: 11px; } /*links in posted on*/

.col .entry-summary { font-size: 16px; } /*excerpt, content*/

.col .entry-utility { font-size: 12px; } /*posted in, comment*/
.col .entry-utility a { font-size: 11px; } /*posted in, comment links*/

general tutorial:
https://www.w3schools.com/css/
https://www.w3schools.com/css/css_font.asp

intro into featured images / post thumbnails:
https://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/