Grid of Posts

Yeah, it should ALWAYS be 100 x 100. I posted like 40 games I think, if you click one you’ll see a thumbnail.

there is a little function that grabs the first image from a post (the one that shows closest to the top):

function get_first_image() {
global $post, $posts;
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
if($output) $first_img = $matches [1] [0];
return $first_img;
}

to see if it is possible to use that for the background in the grid, can you please paste the code of loop-grid.php into the pastebin, so i have the latest version to play with?

Sounds good. Thank you!

https://pastebin.com/1CVAycYj

can you try this?

https://pastebin.com/NbR1XTLf

the change is in here:
before:

<?php $bg_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ); ?>
<?php $bg_img = esc_attr($bg_img[0]); ?>              <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php if( $bg_img ) { echo ' style="background-image: url(' . $bg_img . '); "'; } ?>>

after:

<?php $bg_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ); ?>
<?php $bg_img = esc_attr($bg_img[0]); ?>
<?php if( !$bg_img ) { $bg_img = get_first_image(); } //if there is no featured image, try to get the first image from the post ?>
             <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php if( $bg_img ) { echo ' style="background-image: url(' . $bg_img . '); "'; } ?>>

Alright, I just copied the code from the paste bin and got a fatal error.

Was I supposed to add that function in the previous post?

EDIT: ahahaha! I added the function and it worked!

Was I supposed to add that function in the previous post?

yeah – i forgot to mentin that.

well done – bingo – less work – more fun

Yep, it’s looking real good! Thanks a million. Like I said, you will definitely be receiving a good chunk of my first payment from adsense.

Hey, so now that I’ve totally messed with WordPress twentyten theme I know see all of the mistakes I made while styling it to look like my existing website. I was not going to be using any widgets, but… now I really need widgets so I found this code:
<?php get_sidebar(); ?>
And put it in my index and I get the sidebar. Thing is… they look ugly, so now I’m asking for your help if you know how to style the sidebar and how to style each sidebar widget individually…

I’m pretty decent with css now but, I don’t know If I must edit the sidebar.php or my css.

I’ve searched Google and I’ve gotten a couple of answers (seem outdated) but they don’t help. Thanks!

maybe something to start with:

.wordpresswidgetbox { background: none; width: 304px; }
#primary ul { margin:0;padding:0; list-style-type:none;}
.widget-container { margin-bottom:20px; margin-left:1px; padding:0 0 10px 0; }
.widget-container.widget_search { background: blue; }
.widget-container.widget_categories { background: green; }

h3.widget-title { padding:2px 0; text-align: center; color: #ffffff; font-size:16px; font-weight:normal;  border-bottom:10px solid #fff; }

How do you do that?
Hahaha Seems like it takes you no time at all.

Thank you.

Few questions though why is my word press widget box 304px in width?

How do I get rid of the white space between the title of the widget and the actual widgets.

the white space – remove border-bottom:10px solid #fff; from the h3.widget-title style;

you can remove this width: 304px; from .wordpresswidgetbox – i probably thought during testing it would be needed.

Any idea how to put specific widgets in specific places?

I want to put a tag cloud below the “posts” or “games”. I’m trying to put the tag cloud as the “footer” widget and then “call” the footer widget but it wasn’t working. I tried this:

<?php get_sidebar-footer(); ?>

https://codex.www.ads-software.com/Function_Reference/get_sidebar

try <?php get_sidebar('footer'); ?>

Genius. Site keeps shapin’ up. Thanks again.

Hi alchymyth,
first i have to say i was reading through this and although i certainly understand how difficult it is sometimes for people who have no idea and have to ask, i honestly admire your patience. i don’t see that very often that someone helps it that much and this constantly as you did. WOW!!! Saying this, i also promise right away that i hopefully won’t need that much assistance. ??
I was trying to use the grid of posts (like you have on https://www.transformationpowertools.com/wordpress/grid-posts) in my twentyten adaption as a page template and not as start page / index.php. Unfortunately i get totaly lost within all three posts of you about posts in grids and can’t figure it out. I also tried to follow the steps here, created the loop-grid template, added the css parts, but this doesnt work like this. so as more i try without getting any closer it feels like i am even more lost as when i started. i am confused what i actually have to do and which snippet to paste where? i also tried to paste the given snippet (https://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style) into my template (mygallery.php), but this either crashes the site, or did nothing to it at all and the posts still where all underneath each other. even the given css didnt changed a thing about it.
i post photo album and have created a template to post them alltogether (mygallery.php). i already use a function to only display the featured thumbnail and not the whole album. now i wanted to have them appear in a grid, but can’t get it run. what did i missed or which of your three methods would be the right one for me? How do i start? Thanks alot!!