$count configuration

  • Hi,

    Not being a php expert, I am having trouble trying to set up a grid of posts using the $count function.

    I would like to set my posts in the following fashion [9 posts to show on front page in total]in a grid style, of 4 rows by 3 columns:

    9 8 7 6

    5 blank 4 3

    blank blank 2 1

    I currently have this code in place [below] but it isn’t working. Can anyone help me out here or perhaps point me in the right direction?

    Thanks very much for any advice offered.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Yes sure, we’ll need to see your code please.

    Thread Starter jamesict

    (@jamesict)

    Hi WebTechGlobal,

    Ummm, sorry about that…

    Here it is.

    <?php get_header(); ?>

	<div id="content-container">

		<div id="content">

		<div class="navigation">
		<div class="nav-previous"><?php next_posts_link('&laquo; Next page') ?></div>
		<div class="nav-next"><?php previous_posts_link('Previous page &raquo;') ?></div>
		</div><!--[if !IE]>end .navigation<![endif]-->

		<?php if($paged < 2) { // front page ?>

		<?php $count = 2 ?><?php while(have_posts()) : the_post(); ?>

		<?php if($count==2 || $count==5 || $count==8) { ?>
		<div class="normal-content<?php if($count==2) { echo ' first-row'; } ?>">
		<?php } ?>

		<div id="post-<?php the_ID(); ?>" class="post-alt">

		<span class="imageLibrary"><a href="<?php the_permalink(); ?>" rel="bookmark"><p><?php echo get_post_meta($post->ID, "OVERLAY", true); ?></p><?php the_post_thumbnail(); ?></a></span>
		<?php ?>

		</div><!-- end id post -->

		<?php if($count==1) { ?>

		</div><!--[if !IE]>end .normal-content<![endif]-->

		<?php } elseif($count==4 || $count==7 || $count==10) { ?>
		<?php } ?>

		<?php $count = $count + 1; ?>

		<?php endwhile; ?>

		<?php } else { ?>

		<?php $count = 4 ?><?php while(have_posts()) : the_post(); ?>

		<?php if($count==1 || $count==4 || $count==7 || $count==10) { ?>
		<div class="normal-content<?php if($count==1) { echo ' first-row'; } ?>">
		<?php } ?>

		<?php if($count==3 || $count==3 || $count==6 || $count==9) { ?>
		</div><!--[if !IE]>end .normal-content<![endif]-->
		<?php } ?>

		<?php $count = $count + 1; ?>

		<?php endwhile; ?>

		<?php } ?>

		<div class="navigation">
		<div class="nav-previous"><?php next_posts_link('&laquo; Next page') ?></div>
		<div class="nav-next"><?php previous_posts_link('Previous page &raquo;') ?></div>
		</div><!--[if !IE]>end .navigation<![endif]-->

		</div><!--[if !IE]>end #content<![endif]-->

		</div><!--[if !IE]>end #content-container<![endif]-->

<?php get_footer(); ?>

    These is another way to do this.

    You create a div, your 9 boxes go inside that div. They automatically drop to each line or you use clear ever 3 posts. Not 100% sure.

    Look at my site https://www.webtechglobal.co.uk

    First thing that stood out as strange to me was this…

    <?php } else { ?>

		<?php $count = 4 ?>

    Is there a reason for applying a value to $count?

    I will show you the code from my theme in case it interests you. Let me play around with your code too. Below is all that is controlling the grid…

    <!-- scrollable -->
			<div class="scrollable">
				<div class="items">
					<div class="featured">
						<?php while (have_posts()) : the_post();?>
						<?php if( $postnum % 9 == 0 && $postnum !=0) : $postnum +9; ?>
						<div class="clear">&nbsp;</div>
					</div>
					<div class="featured">
						<?php endif; ?>
						<?php $postnum = $postnum + 1;?>

<!--  if movie values -->
						<?php

    My themes code outputs different boxes so it might look a little complex. If you take away the various types of box content it gets simple…

    !-- scrollable -->
			<div class="scrollable">
				<div class="items">
					<div class="featured">
						<?php while (have_posts()) : the_post();?>
						<?php if( $postnum % 9 == 0 && $postnum !=0) : $postnum +9; ?>
						<div class="clear">&nbsp;</div>
					</div>
					<div class="featured">
						<?php endif; ?>
						<?php $postnum = $postnum + 1;?>

<!--  if movie values -->
						<?php
						 $movie = get_post_custom_values("movie");
						 if (isset($movie[0])) {?>
						<div title="Click to flip" class="flip">
							<div class="flipWrap"> <img src="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'portfolio');echo $thumbnail[0]; ?>" /> </div>
							<div class="flipData">
								<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
									<?php the_title(); ?>
									</strong></a><br />
									<?php excerpt('30'); ?>
									<br />
									<a href="<?php the_permalink() ?>">more details</a></span></p>
							</div>
							<a class="zoom-mov" title="<?php the_title(); ?>" href="<?php echo get_post_meta($post->ID, "movie", $single = true); ?>" rel="prettyPhoto[gallery]"> &nbsp;</a> </div>

<!--else image values -->
						<?php }else {?>
						<?php
							$key = 'alt-thumb';
							$themeta = get_post_meta($post->ID, $key, TRUE);

							// decide style
							if( get_post_meta($post->ID, 'wtgservice', TRUE) )
							{
								$thestyle = 'wtgservice';// currently has no css setup, simple causes no icon to be displayed
							}
							else
							{
								$thestyle = 'zoom';
							}

							if($themeta != '') {?>

<!-- if alt thumb do this -->
						<div title="Click to flip" class="flip">
							<div class="flipWrap"> <img src="<?php echo get_post_meta($post->ID, "alt-thumb", true);?>" /> </div>
							<div class="flipData">
								<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
									<?php the_title(); ?>
									</strong></a><br />
									test1<?php excerpt('30'); ?>
									<br />
									<a  class="readmore" href="<?php the_permalink() ?>">more details</a></span></p>
							</div>
							<a class="<?php echo $thestyle; ?>" title="<?php the_title(); ?>" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');echo $thumbnail[0]; ?>"rel="prettyPhoto[gallery]"> &nbsp;</a> </div>
<!-- else get the image values -->
						<?php } else { ?>
						<div title="Click to flip" class="flip">
							<div class="flipWrap"> <img src="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'portfolio');echo $thumbnail[0]; ?>" /> </div>
							<div class="flipData">
								<p class="flipContent"><a href="<?php the_permalink() ?>"><strong>
									<?php the_title(); ?>
									</strong></a><br />
									test2<?php excerpt('30'); ?>
									<br />
									<a  class="readmore" href="<?php the_permalink() ?>">more details</a></span></p>
							</div>
							<a class="<?php echo $thestyle; ?>" title="<?php the_title(); ?>" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');echo $thumbnail[0]; ?>"rel="prettyPhoto[gallery]"> &nbsp;</a> </div>
						<?php } ?>
						<?php }?>
						<?php endwhile;?>
					</div>
				</div>
<!-- end items -->
				<div class="clear">&nbsp;</div>
			</div>
<!-- end scrollable -->

    You see there is an argument for movie, image, thumb.

    Reduce that and your left with something more simple than your script I think.

    Thread Starter jamesict

    (@jamesict)

    Hi WebTechGlobal,

    Thanks for providing me with your code.

    Unfortunately, not sure what I am doing wrong, but I cannot get it to work.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘$count configuration’ is closed to new replies.

Tags