asked on

Wordpress Theme Developement

I am working on a template that displays all the featured images from recent posts on one page. And the images link to that particular post. So far I have got it to work and it looks like this:

As of now it stacks on top of one another but I would like to add php code similar to this: //settings
$column = 9;

so I can decide how many columns of images to display in a row.

This is my code so far:

 
  <?php
  
global $post;
$myposts = get_posts ();
foreach( $myposts as $post ) : setup_postdata($post); ?>

			<div class="post" id="post-<?php the_ID(); ?>">
				<h3 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>



 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('feat_image'); ?></a>
<?php endforeach; ?>

Open in new window

Could someone add php to set columns in my code for me?

PortletPaul

Just dropped in - sorry not a Wordpress guru - but I don't see from that code snippet where the image is provided (is it inside the_permalink() perhaps?)

Wouldn't this be a combination of .css as well as php logic?
both <div class="post" and <h3 class="title" will influence the presentation.

from what I can understand you would need another "for each" loop (e.g. for columns 1 to 9), however how is this to affect <div> positioning? This is unclear to me. Would you need different classes for each column? (unless you want to use a table?)

ps: nice screen already

Pancake_Effect

ASKER

<?php the_post_thumbnail('feat_image'); ?> This is what provides the image, It's a featured image from each post. I've been trying to incorporate this piece of code in with no luck:

$c = 1; //init counter
$bpr = 3; //boxes per row
$args=array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => -1,
  'caller_get_posts'=> 1
);

Open in new window

Tables could be an option too.

ASKER CERTIFIED SOLUTION

dmgroom

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pancake_Effect

ASKER

You are an internet wizard thank you so much! didn't work at first and then closed a div so final code was:

                <?php
  
global $post;
$myposts = get_posts ();
$counter = 0;
foreach( $myposts as $post ) : setup_postdata($post); 
if ($counter == $column) {
	$counter = 0;
	$otherclass = " floatclearer";
} else {
	$otherclass ='';
}

?>

			<div class="floatleft <?php echo $otherclass;?> " id="post-<?php the_ID(); ?>">
				<span class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></span>

 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('feat_image'); ?></a>
  </div>
<?php 
$counter ++;
endforeach; ?>

Open in new window

and your css worked well to just to have it one place incase someone else would like it was:

.floatleft {
	float:left;
	height: 200px;
	width: 200px;
	
	margin:5px;
	background-color: #00CC99;
}
.floatclearer {
	clear:left;
}

Open in new window

Pancake_Effect

ASKER

so happy with how this worked!