I want to add odd and even class in pairing. So how can i do it with php.
<div class="root">
<div class="odd">
</div>
<div class="odd">
</div>
<div class="even">
</div>
<div class="even">
</div>
</div>
I want to create structure in wordpress post loop.
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 1
);
$html = '';
// The Query
$query = new WP_Query( $args );
if( $query->have_posts()){
while ( $query->have_posts() ) {
}
}
So how can i do it. Please suggest me some ideas.
Use counter to check how many row you have printed and reset it when you want to start over:
<?php
if ($query->have_posts()) {
$count = 0;
while ($query->have_posts()) {
if($count < 2){
// add <div class="odd"> block here
}else{
// add <div class="even"> block here
}
$count++;
if($count == 4){
$count = 0;
}
}
}
?>
Use This
$class = 'even';
echo '<div class="root">';
while ($query->have_posts()) {
$class = $class != 'even' ? 'even' : 'odd';
echo "<div class='{$class}'></div>";
echo "<div class='{$class}'></div>";
}
echo "</div>";
Related
Using the get_posts() method, I get and display the last 5 posts. They are displayed as a slider. Each slide is a different color. Only 3 colors: yellow, green and blue. How can I add a class to each of the 5 slides to give a different background? The first 3 slides should be yellow, green and blue, and the rest should be yellow and green. How can i do this? Now I tried to implement this functionality, but the class on each slide is yellow-slide
My Code:
<?php
$last_posts = get_posts(array(
'numberposts' => 5,
'orderby' => 'date',
'post_type' => 'post',
));
global $post;
$bgcolor = '';
if ($counter == 0) {
$bgcolor = 'yellow-slide';
} else if ($counter == 1) {
$bgcolor = 'green-slide';
} else if ($counter == 2) {
$bgcolor = 'blue-slide';
} else if ($counter == 3) {
$bgcolor = 'yellow-slide';
} else {
$bgcolor = 'green-slide';
}
?>
<div class="swiper">
<div class="swiper-wrapper">
<?php $counter = 0;
foreach ($last_posts as $post) :
setup_postdata($post); ?>
<div class="swiper-slide <?php echo $bgcolor ?>"></div>
<?php $counter++ ?>
<?php endforeach;
wp_reset_postdata(); ?>
</div>
</div>
Your PHP code is executed in the order it's written in, so your if-statements will be executed before you've even started the foreach-loop (and before the variable $counter even exist). It should actually throw a bunch of "Undefined variable: $counter"-warnings/notices.
There is an easier way though.
Put the class names in an array
Fetch the class from the array on each iteration that matches the array index
Something like this:
$bgcolors = [
'yellow-slide',
'green-slide',
'blue-slide',
'yellow-slide',
'green-slide',
];
Then after you've defined that array, you can do:
$counter = 0;
foreach ($last_posts as $post) :
setup_postdata($post);
?>
<div class="swiper-slide <?php echo $bgcolors[$counter] ?>"></div>
<?php $counter++ ?>
<?php endforeach;
Please try this and check again.
<?php
$last_posts = get_posts(array(
'numberposts' => 5,
'orderby' => 'date',
'post_type' => 'post',
));
?>
<div class="swiper">
<div class="swiper-wrapper">
<?php
foreach ($last_posts as $key => $post) :
setup_postdata($post);
$bgcolor = '';
if ($key == 0) {
$bgcolor = 'yellow-slide';
} else if ($key == 1) {
$bgcolor = 'green-slide';
} else if ($key == 2) {
$bgcolor = 'blue-slide';
} else if ($key == 3) {
$bgcolor = 'yellow-slide';
} else {
$bgcolor = 'green-slide';
}
?>
<div class="swiper-slide <?php echo $bgcolor ?>"></div>
<?php endforeach;
wp_reset_postdata();
?>
</div>
</div>
i've created a colophon for my website in which i post all the logos of the different sponsors i have. I add all the sponsors via custom post type. i also added a specific custom taxonomy to distinguish between the different typologies of sponsorships.
I use this code in the footer.php to display them:
<?php $terms = get_terms('sponsor_tipology');
$count = count( $terms );
if ( $count > 0 ) {
foreach ( $terms as $term ) { ?>
<div class="col-xs-12 <?php echo $term->slug ;?>">
<h3><?php echo $term->name;?></h3>
<?php $arg = array (
'post_type' => 'colophone',
'post_per_page' => -1,
'sponsor_edition' => 'current',
'sponsor_tipology' => $term->slug,
);
$pesca_post = new WP_Query ($arg);
$quanti_post = $pesca_post->post_count;
if(have_posts()){
while ($pesca_post->have_posts()) : $pesca_post->the_post();
$featured = get_the_post_thumbnail_url(get_the_ID(),'large');
if ($quanti_post == 5){
$classe_bootstrap = 15;
}elseif ($quanti_post > 5){
$classe_bootstrap = "2 text-center";
}elseif($quanti_post < 5){
$classe_bootstrap = 12/$quanti_post;
}
echo '<div class="col-md-' . $classe_bootstrap . '">';
if (isset($featured)){
$img = $featured;
}else{
$img = get_template_directory_uri() . '/img/placeholder.png';
} ?>
<a href="<?php echo esc_attr(get_permalink($msd_settings['partner_page'])); ?>" title="<?php echo get_the_title($post->ID);?>" >
<div class="col-xs-12" style="background-image:url(<?php echo esc_url($img); ?>); height:100px;background-size:contain;background-repeat:no-repeat;background-position:center center;"></div>
</a>
<?php echo '</div>';
endwhile;
}?>
</div>
<?php }
}?>
my problem is that this code is completely working just on some pages, on other it shows the contents avoiding the ones belonging to the first term, no matter which it will be.
I have noticed that it works in pagaes where i use other queries.
What am i doing wrong?
i changed it in this way and now it's working!
$terms = get_terms('sponsor_tipology');
$count = count( $terms );
if ( $count > 0 ) {
foreach ( $terms as $term ) { //per ogni termine presente
$nome = $term->slug;?>
<div class="col-xs-12 <?php echo $term->slug ;?>">
<h3><?php echo $term->name;?></h3>
<?php $arg = array (
'post_type' => 'colophone',
'post_per_page' => -1,
'sponsor_edition' => 'current',
'sponsor_tipology' => $nome,
);
$elementi = get_posts($arg);
$quanti_post = count( $elementi );
if ($quanti_post == 5){
$classe_bootstrap = 15;
}
elseif ($quanti_post > 5){
$classe_bootstrap = "2 text-center";
}
elseif($quanti_post < 5){
$classe_bootstrap = 12/$quanti_post;
}
foreach($elementi as $elemento){
$featured = get_the_post_thumbnail_url($elemento->ID,'large');
if (isset($featured)){
$img = $featured;
}
else{
$img = get_template_directory_uri() . '/img/placeholder.png';
} ?>
<div class="col-md-<?php echo $classe_bootstrap; ?>">
<a href="<?php echo esc_attr(get_permalink($msd_settings['partner_page'])); ?>" title="<?php echo get_the_title($elemento->ID);?>" >
<div class="col-xs-12" style="background-image:url(<?php echo esc_url($img); ?>); height:100px;background-size:contain;background-repeat:no-repeat;background-position:center center;"></div>
</a>
</div>
<?php }?>
</div>
<?php }
}?>
I want two column related thumbnail like this screenshotI Want To create two-column thumbnail related posts like in screenshot I have linked to:
This is the code so far:
<!---Related Posts --->
<div class="singlerelated">
<div class="headingbig"><div class="shortcode-unorderedlist fa fa-hand-o-right"> Lees meer over <span class="headingorange"><?php the_category(', ') ?></span></div>
</div>
<div class="relatedentry">
<?php
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category)
$category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 8,
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while($my_query->have_posts()) {
$my_query->the_post();
?>
<ul>
<li class="even">
<?php the_post_thumbnail(array(100,100), array('class' => 'relatedthumb')); ?>
<p class="title">
<?php the_title(); ?>
</p>
</li>
</ul>
<?
}
}
$post = $orig_post;
wp_reset_query();
?>
</div>
</div>
<!---Related Posts --->
I want it to be displayed in 2 columns, By Creating li class either even or odd generated alternatively so I can put even class in left side and other in right side. Please Help me.
Try using an $i auto-increment value in your loop. You probably want to do a for with a count and round up incase you have an odd number of posts. May not put an end </ul> on it if you don't do a count. This is the idea though:
$i = 1;
while($my_query->have_posts()) {
$my_query->the_post();
// If $i equals 1, start the <ul>
if($i == 1)
echo '<ul>'.PHP_EOL;
?> <li class="even">
<?php the_post_thumbnail(array(100,100), array('class' => 'relatedthumb')); ?>
<p class="title">
<?php the_title(); ?>
</p>
</li>
<?php
// end on the second loop
if($i == 2) {
echo '</ul>'.PHP_EOL;
// Reset the count back to 0 so it starts
// back at 1 after incrementing
$i = 0;
}
$i++;
}
EDIT To do even and odd, you can use a modulus calculation:
for($i = 0; $i < 10; $i++)
echo (($i % 2) == 0)? 'even:'.$i.'<br />' : 'odd: '.$i.'<br />';
I am wrapping every 3 elements in my loop in a wrapper div like this:
$query = array(
'post_type' => 'post',
);
$i = 1;
$posts = new WP_Query( $query );
$out = '<div class="wrapper">';
if ($posts->have_posts()){
while ($posts->have_posts()){
$posts->the_post();
$out.= '<div class="content">
//content here
</div>';
if($i % 3 == 0) {
$out .= '</div><div class="wrapper">';
}
$i++;
}
}
$out .= '</div>';
wp_reset_postdata();
return '<section>'.$out.'</section>';
Which creates a good wrapping html minus one little thing that's bothering me:
<section>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="wrapper"></div>
</section>
If I have exactly 6 posts (or any multiple of 3, and modulo is doing this like it should) I'll get an extra empty wrapper. Which is really not needed.
So what conditional should I include in my query to ensure that I don't get empty wrappers?
Add the wrapper inside:
$query = array(
'post_type' => 'post',
);
$i = 1;
$posts = new WP_Query( $query );
$out = '';
$endingNeeded = false;
if ($posts->have_posts()){
while ($posts->have_posts()){
if($i % 3 == 1) {
$out .= '<div class="wrapper">';
$endingNeeded = true;
}
$posts->the_post();
$out.= '<div class="content">
//content here
</div>';
if($i % 3 == 0) {
$out .= '</div>';
$endingNeeded = false;
}
$i++;
}
}
if($endingNeeded) {
$out .= '</div>';
}
wp_reset_postdata();
return '<section>'.$out.'</section>';
Currently my image gallery has 4 images per row. If the screen is minimized below the width of those 4 images, one image will drop to the next line and there will be a line break before the next row. Is there any way to make gallery continuous instead of having the break in images when the screen is resized? Ideally, I would like to start with 5 images per row, then if the viewer has a smaller screen, it will automatically adjust the number of images per row to fit whatever size window they are using.
Here is a link to the gallery: http://rabbittattoo.com/?gallery=gallery
And the PHP:
$pp_gallery_style = get_option('pp_gallery_style');
if($pp_gallery_style == 'f')
{
include_once(TEMPLATEPATH.'/gallery-f.php');
exit;
}
if(!isset($hide_header) OR !$hide_header)
{
get_header();
}
$caption_class = "page_caption";
$portfolio_sets_query = '';
$custom_title = '';
if(!empty($term))
{
$portfolio_sets_query.= $term;
$obj_term = get_term_by('slug', $term, 'photos_galleries');
$custom_title = $obj_term->name;
}
else
{
$custom_title = get_the_title();
}
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if(!isset($hide_header) OR !$hide_header)
{
?>
<div class="wrapper_shadow"></div>
<div class="page_caption">
<div class="caption_inner">
<div class="caption_header">
<h1 class="cufon"><?php echo the_title(); ?></h1>
</div>
</div>
</div>
</div>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div id="gallery_wrapper" class="inner_wrapper portfolio">
<div class="standard_wrapper small">
<br class="clear"/><br/>
<?php
}
else
{
echo '<br class="clear"/>';
}
?>
<?php echo do_shortcode(html_entity_decode($page->post_content)); ?>
<!-- Begin portfolio content -->
<?php
$menu_sets_query = '';
$portfolio_items = 0;
$portfolio_sort = get_option('pp_gallery_sort');
if(empty($portfolio_sort))
{
$portfolio_sort = 'DESC';
}
$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => $portfolio_sort,
'orderby' => 'date',
);
$all_photo_arr = get_posts( $args );
if(isset($all_photo_arr) && !empty($all_photo_arr))
{
?>
<?php
foreach($all_photo_arr as $key => $portfolio_item)
{
$image_url = '';
if(!empty($portfolio_item->guid))
{
$image_id = $portfolio_item->ID;
$image_url[0] = $portfolio_item->guid;
}
$last_class = '';
$line_break = '';
if(($key+1) % 4 == 0)
{
$last_class = ' last';
if(isset($page_photo_arr[$key+1]))
{
$line_break = '<br class="clear"/><br/>';
}
else
{
$line_break = '<br class="clear"/>';
}
}
?>
<div class="one_fourth<?php echo $last_class?>" style="margin-right:24px;margin-bottom:24px;margin-top:-20px">
<a title="<?php echo $portfolio_item->post_title?>" href="<?php echo $image_url[0]?>" class="one_fourth_img" rel="gallery" href="<?php echo $image_url[0]?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?src=<?php echo $image_url[0]?>&h=370&w=350&zc=1" alt=""/>
</a>
</div>
<?php
echo $line_break;
}
//End foreach loop
?>
<?php
}
//End if have portfolio items
?>
</div>
<!-- End main content -->
<br class="clear"/><br/>
</div>
<?php
if(!isset($hide_header) OR !$hide_header)
{
?>
</div>
<!-- End content -->
<?php get_footer(); ?>
<?php
}
?>
Thank you in advance for you help!