Jump to content

need idea for wordpress code


mraza

Recommended Posts

hi :) i am trying to make something like this

http://www.elegantthemes.com/preview/eGallery/

means, in wordpress blog all posts are displaying in one row, i wants to display them in 3 rows and 4 coulmns, i am not sure where to find this thing, here is the actual code which display posts on blog

<div class="">
    				<div class="article-rel-wrapper"></div>
    																									
    						<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
							query_posts('paged='.$paged.'&orderby='.$option['blog_orderby'].'&cat=-'.$option['showcase_cat'].',-'.$option['newsflash_cat'].',-'.$option['feature_cat'].',-'.$option['footer_cat']); ?>

					<?php while (have_posts()) : the_post(); ?>
    																									
    						<!-- Begin Blog Post -->
    																									
										<div <?php post_class('mc-wrapper'); ?> id="post-<?php the_ID(); ?>">
									<div class="mc">

									<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
								<?php if($thumb == '' && $option['catch_first_image'] == 'true') {
																													  
								$thumb = catch_that_image();

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

									<div class="mc-img">
								<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
							</div>

								<?php } ?> 

							<?php } elseif ($thumb != '') { ?>

									<div class="mc-img">
										<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
										</div>

										<?php } ?>
								<div class="mc-text">
					<div class="mc-subheader">
						<div class="componentheading">
										<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
										</div>
										</div>																												
									<div class="mc-content">
											<?php the_content(false); ?>
													</div>

											<?php if($option['blog_post_meta'] == 'true') { ?>

										<div class="mc-header">
										<div class="componentheading">
									<div class="blog-post-info">
								<?php _re('Category:'); ?> <?php the_category(', ') ?>
							</div>
								<div class="views">
									<?php if(function_exists('the_views')) { the_views(); } ?> 
							</div>
					<div class="ratingbox">
					<div style="clear: both;"></div>
					<?php if(function_exists('the_ratings')) { the_ratings(); } ?>  
							</div>

									</div>
								</div>

										<?php } ?>

									<div class="clr"></div>

									</div>
								</div>
							<div class="roknewspager-div"> </div>
						</div>

	<!-- End Blog Post -->

				<?php endwhile;?>

			<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>

				<div class="nav">
			<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 
				else { ?>
		<p class="pagination"><?php next_posts_link('« Previous Entries') ?> <?php previous_posts_link('Next Entries »') ?></p>
		<?php } ?>
	</div>

<?php } ?>

</div>

 

i really applicate for any help. thanks

 

Link to comment
https://forums.phpfreaks.com/topic/200304-need-idea-for-wordpress-code/
Share on other sites

here one code i found for dual column,

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

 

i need to make it work with above code for 3 coulmns how can i do that any help please, here is the link to post i found

http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order/

 

ok i have tried the above code and this what i did :

<!-- first column -->
																											<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

    																									<!-- Begin Blog Post -->
    																									<div id="left-column">
																										<div <?php post_class('mc-wrapper'); ?> id="post-<?php the_ID(); ?>">
																											<div class="mc">
																												<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
																												<?php if($thumb == '' && $option['catch_first_image'] == 'true') {
																												$thumb = catch_that_image();
																													if ($thumb != '') { ?>
																													<div class="mc-img">
																														<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
																													</div>
																													<?php } ?>
																												<?php } elseif ($thumb != '') { ?>
																												<div class="mc-img">
																													<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
																												</div>
																												<?php } ?>
																												<div class="mc-text">
																													<div class="mc-subheader">
																														<div class="componentheading">
																															<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
																														</div>
																													</div>
																													<div class="mc-content">
																														<?php the_content(false); ?>
																													</div>
																													<?php if($option['blog_post_meta'] == 'true') { ?>
																													<div class="mc-header">
																														<div class="componentheading">
																															<div class="blog-post-info">
																																 <?php _re('Category:'); ?> <?php the_category(', ') ?>
																															</div>
																															<div class="views">
																															<?php if(function_exists('the_views')) { the_views(); } ?>
																															</div>
																															<div class="ratingbox">
																															<div style="clear: both;"></div>
																															<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
																															</div>
																														</div>
																													</div>
																													<?php } ?>
																													<div class="clr"></div>
																												</div>
																											</div>
																											<div class="roknewspager-div"> </div>
																										</div>
																										<!-- End Blog Post -->
																										</div>
																										<?php endif; endwhile; else: ?>

																											<?php endif; ?>
																											<!-- End of first column -- >
																											<?php $i = 1; rewind_posts(); ?>
																										<!-- Start of Second Column -->
																										<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

    																									<!-- Begin Blog Post -->
    																									<div id="right-column">
																										<div <?php post_class('mc-wrapper'); ?> id="post-<?php the_ID(); ?>">
																											<div class="mc">
																												<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
																												<?php if($thumb == '' && $option['catch_first_image'] == 'true') {
																												$thumb = catch_that_image();
																													if ($thumb != '') { ?>
																													<div class="mc-img">
																														<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
																													</div>
																													<?php } ?>
																												<?php } elseif ($thumb != '') { ?>
																												<div class="mc-img">
																													<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb ?>&w=<?php echo $option['thumb_w']; ?>&h=<?php echo $option['thumb_h']; ?>&zc=1&q=<?php echo $option['timthumb_quality']; ?>" alt="<?php the_title(); ?>" />
																												</div>
																												<?php } ?>
																												<div class="mc-text">
																													<div class="mc-subheader">
																														<div class="componentheading">
																															<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
																														</div>
																													</div>
																													<div class="mc-content">
																														<?php the_content(false); ?>
																													</div>
																													<?php if($option['blog_post_meta'] == 'true') { ?>
																													<div class="mc-header">
																														<div class="componentheading">
																															<div class="blog-post-info">
																																 <?php _re('Category:'); ?> <?php the_category(', ') ?>
																															</div>
																															<div class="views">
																															<?php if(function_exists('the_views')) { the_views(); } ?>
																															</div>
																															<div class="ratingbox">
																															<div style="clear: both;"></div>
																															<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
																															</div>
																														</div>
																													</div>
																													<?php } ?>
																													<div class="clr"></div>
																												</div>
																											</div>
																											<div class="roknewspager-div"> </div>
																										</div>
																										<!-- End Blog Post -->
																										</div>
																										<?php endif; endwhile; else: ?>

																											<?php endif; ?>

 

and in css

div#left-column {
width: 333px;
float: left;
clear: none;
}
div#right-column {
width: 333px;
float: right;
clear: none;
}

 

now the problem is it is showing two columns but they are not in one line, means one row is on top and when finish the second is at bottom, i wants something like this http://perishablepress.com/press/wp-content/images/2008/horiz-order/horizontal-order_css.gif but with three columns in above code, please help me

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.