Im using wordpress and using the following to get the last 3 most recent posts:
<?php query_posts('showposts='.$latest_num.'&cat=-'.$featured_cat.','.$latest_ignore.''); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<div class="imgholder">
<a href="/wp-content/themes/twentyten/images/slide1.jpg" data-gal="prettyPhoto[featured]" title="<?php the_title(); ?>">
<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" width="275" height="145" alt="Post Image" class="postimg-s" />
</a>
</div>
<h4><?php the_title(); ?></h4>
<p><?php the_content('Read more...'); ?></p>
</li>
<?php endwhile; ?>
What I want to do is add a class named 'last' to the <li> element on the 3rd interation through the loop.
Anyone got any ideas how I could add this?
Setup a counter outside your while loop
$count = 1;
Check the modulus of that counter and output the class if required
<li <?php if(!$count % 3) echo 'class="last"; ?>>
Increment your counter before closing the loop:
$count++;
}
Or, applied to your code:
<?php
$count = 1;
while (have_posts()) : the_post();
?>
<li <?php if(!$count % 3) echo 'class="last"; ?>>
<div class="imgholder">
<a href="/wp-content/themes/twentyten/images/slide1.jpg" data-gal="prettyPhoto[featured]" title="<?php the_title(); ?>">
<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" width="275" height="145" alt="Post Image" class="postimg-s" />
</a>
</div>
<h4><?php the_title(); ?></h4>
<p><?php the_content('Read more...'); ?></p>
</li>
<?php
$count++;
endwhile;
?>
The counter-intuitive look of the modulus condition is that whenever the counter is divisible by exactly 3 it will return 0.
Replace the line
<li>
with
<li <?php print have_posts() ? '' : ' class="last"' ?>>
The have_posts() simply calls into
$wp_query->have_posts() which checks a
loop counter to see if there are any
posts left in the post array (source)
Li should be li
<li <?php $iCounterLi++; ($iCounterLi==3)?'class="last"':''; ?>>
Don't forgot to initialize the $iCounterLi before the loop
Related
I'm using Bootstrap, I have a list of posts and I want to wrap every 2 posts on a row. Each post is wrapped on a <div col>. You can see live here.
I tried with this but it wrap the row each one post:
<?php
$num = 0;
// Check if there are any posts to display
if ( have_posts() ) : ?>
<?php
// The Loop
while ( have_posts() ) : the_post();
if($num%2) {
echo "<div class='row' style='margin-bottom: 2.3em;''>";
}
?>
<div class="col-xs-12 col-sm-6 col-md-6">
<h2 class="category-encabezado">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Hace
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ''; ?>
</small>
<div class="entry">
<p>
<?php the_excerpt(); ?>
</p>
<?php
$my_shortcode = get_field('audio-field');
echo do_shortcode( $my_shortcode );
?>
</div>
</div>
<?php
if($num %2) {
echo '</div>';
}
$num++
?>
<?php endwhile; // End Loop
?>
</div>
<?php
You have to put div.row Out of the Loop while
I am relatively new to php.
I have a loop in place for my Wordpress posts page - The posts have to alternate between left and right alignments.
I have this working by assigning an even or odd class to each post, however now the latest post does not display on the posts page.
For example, if I have say 5 posts; 4 of the posts will display and the latest post will remain hidden until I make a new post - the previously hidden post will then join the others and the new "latest post" will remain hidden.
I can't figure out why my loop is skipping over the first post, I have already tried adding rewind_posts(); however this created an infinite loop of the same post.
Any help is much appreciated!
<?php
$postcount=1;
while(have_posts()) :
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
<?php
$postcount=1;
while(have_posts()) :
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php if(($postcount % 2) == 0){ ?> even <?php } else{ echo " odd"; }?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
OR
<?php echo $postcount % 2 == 0 ? ' even ': ' odd '; ?>
Please try to use the_post() first.
<?php
$postcount=1;
while(have_posts()) :
the_post();
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
Basically there is a basic loop in wordpress to make what you want to do : https://wpchannel.com/wordpress/tutoriels-wordpress/afficher-articles-recents-site-wordpress/
You can modify this one with your own properties but this is usually loop used.
I have some code here that outputs the following:
Essentially I want to use same page anchor tags so a user can click on the small logo and be taken to the larger logo and info.
As it's a Wordpress site, I have used the ACF repeater field to achieve this. This repeater field enables the user in the back end to add more clients, for each client they can add an image a company name and the paragraph text.
Then I have just repeated the repeater field above and shown only the images but made them much smaller.
As you will see in the code below, I have assigned around each smaller photo and then this: <a name="anchor1"></a> just above every larger photo..
But I need a way of the numbers counting up so when they come out they aren't all anchor1 they become anchor2, anchor3 and so on.
Any ideas?
<div class="container client-page-logos-small" >
<div class="row">
<h3>Click company to see more</h3>
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos-small">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor1">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php endwhile; ?>
</ul>
<div style="clear: both;"></div>
<?php endif; ?>
<hr>
</div>
</div>
<div class="container client-page-logos" >
<div class="row">
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor1"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
</div>
You need to add counter like below:-
<?php
$i = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor<?php echo $i;?>">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php $i++;endwhile; ?>
And
<?php
$j = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor<?php echo $j;?>"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php $j++ ;endwhile; ?>
I want to add every 3 posts in my index.php file in a row div but I would like to exclude the first post so that I can style the first post differently.
I currently have the loop working for every 3 posts but I would like to exclude the first post and style the first post differently to make it a featured post
below is my code
<div class="content post-main__content clearfix" id="post-<?php the_ID(); ?>" >
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php posted_on(); ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
There is a great answer here for creating a loop that separates out the first post from the rest: https://wordpress.stackexchange.com/questions/101096/how-to-show-one-post-different-from-the-rest
Then I'd use a grid framework or some simple css to style the remaining containers, personally I love getskeleton.com but this part is up to you using the blog loop template.
I worked it like this
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 12, 'paged' => $paged );
query_posts($args); ?>
<?php if (have_posts()) : ?>
<?php $postcount = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount++; ?>
<?php if ($postcount == 1 && $paged == 1) : // if this is the first post & first page ?>
<div class="post-main__row clearfix">
<div class="post-main__cell post-main__cell-large">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-left clearfix">
<?php the_post_thumbnail(array(691, 317,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-right">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
</div>
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
<?php endif; ?>
<?php endwhile; ?>
I have try all the functions related to print categories that the codex provide, but i havent found any way that works for me.
Im trying to print the categories slug for put it inside a class.
I want to print the category of the actual post in div with the class proyect, so then i can use it to filter with isotope.
<!-- feature posts -->
<div id="container">
<?php $the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$id = get_the_ID(); ?>
<div class="proyect <?php wp_get_post_categories($id); ?>">
<div class="view view-tenth">
<a style="display:block;" href="<?php the_permalink(); ?>">
<article> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail('', array("class" => "")); } ?></article>
</a>
<div class="mask">
<h2><?php echo substr(strip_tags(get_the_title()),0,35); ?></h2></a>
<p class="fecha-post"><?php the_time('F j, Y'); ?></p>
<?php echo substr(strip_tags(get_the_content()),0,100); ?>
<a class="info" href="<?php the_permalink(); ?>">Ver más...</a>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<!-- #feature post -->
From http://wordpress.org/support/topic/getting-category-slug-from-posts-in-the-loop:
<li class="<?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
You should be able to use:
$cats = wp_get_post_categories($post->ID);
This will be an array of the categories associated with this post. Then you can loop through them and do whatever you need.