<?php
$featured_posts = get_field('director');
if( $featured_posts ): ?>
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo get_the_post_thumbnail_url($featured_post->ID, 'thumbnail');?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Guys how to output like this.
If has thumbnail then post thumbanil
else if no thumnail then print this this image (no image)
You want to check if the thumbnail is empty, and if there is no thumbnail, display a default image.
So you use get_the_post_thumbnail_url() and check if it is empty.
if ( empty(get_the_post_thumbnail_url( $featured_post->ID)) ):
echo 'https://your-default-image_url.jpg';
else:
echo get_the_post_thumbnail_url( $featured_post->ID, 'thumbnail' );
endif;
If you like it a bit more readable, your code can look like:
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<?php $featured_image = get_the_post_thumbnail_url($featured_post->ID, 'thumbnail') ?: 'https://your-default-image_url.jpg'; ?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo $featured_image;?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
Here is your working code:
<?php
$featured_posts = get_field('director');
if( $featured_posts ): ?>
<ul>
<?php foreach( $featured_posts as $featured_post ):?>
<div class="movies-series-director">
<a class="movies-series-director-thumbnails" href="<?php echo get_page_link($featured_post->ID);?>"> <img src="<?php echo get_the_post_thumbnail_url($featured_post->ID, 'thumbnail');?>"></a>
<div class="movies-series-director-title">
<h4> <?php echo $featured_post->post_title;?> </h4>
<b>Director</b>
</div>
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
.... here your code for "else"
<?php endif; ?>
why comments isn't appear on my theme although I confirmed showing comments! can anyone help please
these are screenshots
https://1drv.ms/u/s!AjjUt5PVIDDuklSRItYU-MAfSzP7?e=2tUhsi
https://1drv.ms/u/s!AjjUt5PVIDDuklV3poojMWiK6lAG?e=3nnult
this is my single post page
<?php get_header(); ?>
<div class="container">
<div class="row">
<?php
if(have_posts()){
while(have_posts()){
the_post(); ?>
<div class="post p-3 m-3 bg-light">
<?php edit_post_link('<span class="float-right">Edit <i class="fa fa-edit"></i></span>'); ?>
<h3>
<a href="<?php the_permalink() ?>">
<?php the_title() ?>
</a>
</h3>
<small class="post-author text-secondary mx-2"><i class='fa fa-user mx-1'></i><?php the_author_posts_link(); ?></small>
<small class="post-date text-secondary mx-2"><i class="fa fa-calendar mx-1"></i><?php the_time('F j, Y') ?></small>
<small class="post-comments text-secondary mx-2"><i class="fa fa-comments mx-1"></i><?php comments_popup_link('no comments', 'one comment', '% comments', 'comment-url', 'commenting is disabled'); ?></small>
<?php the_post_thumbnail('', ['class' => 'img-fluid img-thumbnail d-block']); ?>
<?php the_content(); ?>
<hr>
<span class='post-tags'>
<i class='fa fa-tags'></i>
<?php the_category(', ') ?>
</span>
<span class='d-block'>
<?php
if(has_tag()){
the_tags();
} else{
echo 'Tags: no Tags';
}
?>
</span>
</div>
<?php
}
}
echo '<div class="clearfix"></div>';
echo'<div class="post-pagination py-3 my-2 mx-auto">';
echo '<span class="mx-3">';
previous_post_link();
echo '</span>';
echo '<span class="mx-3">';
next_post_link();
echo '</span>';
echo '</div>';
?>
</div>
<?php
echo '<hr>';
comments_template('/comments.php',true);
?>
</div>
Can you help me to find the right code for pagination with this loop?
Here is my loop:
<?php query_posts('showposts=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=2&offset=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=6&offset=3&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ?>
...
<?php endif; ?>
EDIT
This was my old loop, how can I convert it to the new one? Unfortunately I don't know how php works..
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<?php query_posts('showposts=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
<?php rewind_posts(); ?>
<?php query_posts('showposts=2&offset=1&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
</div><!-- /.row -->
<div class="row">
<?php rewind_posts(); ?>
<?php query_posts('showposts=6&offset=3&post_type=post'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, there are no posts to display</p>
<?php endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link(‘|’, ‘Prossimo’, ‘Precedente’); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>
As I have stated last night, you can do this in one query, and without a custom query.
I would like to enforce the fact that you should never use query_posts. query_posts breaks paginations, rerun queries slowing your page performance and breaks the main query object which is needed by many plugins or custom functions. It is truely an evil way to run custom queries which should be avoided at all costs. If you ever need to run custom queries, use WP_Query for paginated queries and get_posts for non paginated queries.
You should also never replace the main query with a custom one on the home page and any archive type page, this breaks page functionalities. Custom queries should only be run for secondary posts like sliders, featured content, related and popular posts and on page templates and static front pages to display custom posts. If you ever need to alter the main query on the homepage or and archive page, use pre_get_posts
Now, to solve your issue, you need one loop from the main query and a counter, in this case we will use the build in main query counter $wp_query->current_post (one note, this counter starts at 0, so post one in the loop will be 0, post two will be 1, etc).
From what I read from your code, the first code needs to be different from post two and three, and these are different from the next six
Lets put that into code
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
/*
* Display different outlay for post one
*/
if ( $wp_query->current_post === 0 ) {
// Do what needs to be done for post one
} elseif ( $wp_query->current_post >= 1 && $wp_query->current post <= 2 ) {
/*
* Do something for posts 2 and 3
*/
} elseif ( $wp_query->current_post >= 3 ) {
/*
* Do something for the rest of the posts
*/
}
}
}
EDIT
You can convert your code to
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if ( $wp_query->current_post === 0 ) { ?>
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 1 && $wp_query->current post <= 2 ) { ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 3 ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php }
endwhile;
endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link(‘|’, ‘Prossimo’, ‘Precedente’); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>
I don't know if it is the right way, but I got it:
<?php
if (is_front_page() ) {
get_header( 'front' );
} else {
get_header();
}
?>
<section id="content" class="container">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if (!is_paged() && $wp_query->current_post === 0 ) { ?>
<div class="col-md-7 col-sm-7">
<article class="thumbnail thumbnail-principale expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<div class="destacado"><h3>Destacado</h3></div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<?php comments_template(); ?><!-- da sistemare -->
</header>
</article>
</div>
<?php
} elseif (!is_paged() && $wp_query->current_post >= 1 && $wp_query->current_post <= 2 ) { ?>
<div class="col-md-5 col-sm-5">
<article class="thumbnail thumbnail-destra expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive')); ?>
</div>
<header class="testo-articolo-destra expand-image">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('0', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
</header>
<div class="badge1"></div>
</article>
</div>
<?php
} elseif ( $wp_query->current_post >= 3 ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php
//new request for all the rest of post from page 2 onwards
} elseif ( is_paged() ) { ?>
<div class="col-md-4 col-sm-4">
<article class="thumbnail distanza expand-image">
<div class="featured-image">
<?php echo get_the_post_thumbnail($post_id, 'large', array('class' => 'img-responsive ingrandire-img')); ?>
</div>
<header class="testo-articolo">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<p class="text-muted resume"><span><i class="fa fa-calendar"></i><?php the_time('j M y'); ?></span><span><i class="glyphicon glyphicon-user"></i><?php the_author(); ?></span><span><i class="fa fa-comment-o"></i><?php comments_popup_link('Ningún comentario', '1 Comentario', '% Comentarios'); ?></span></p>
</div>
<p><?php the_excerpt(); ?></p>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php _e( 'Lee más', 'katartika' ); ?></a></p>
</header>
</article>
</div>
<?php }
endwhile;
endif; ?>
</div><!-- /row -->
<div style="text-align:center;">
<?php posts_nav_link('|', 'Prossimo', 'Precedente'); ?>
</div>
</section>
</div><!-- /sezione -->
<?php get_footer(); ?>
I'm using a custom post type on my WP website and also using bootstrap.
I want to list 5 custom post type entries on my home page, and I want the first 3 to have class col-md-4 in one row and in the next row 2 cpt entries to have the class col-md-6
At the moment I have a class col-md-4 and 2 items in the 2nd row are not centered nicely.
This is my current code:
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC'));
if ($projects) { ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) { setup_postdata( $post ) ?>
<li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Any suggestions how to fix this?
This sort of issue is usually solved by adding a count to foreach loop and adding 1 each time. Then within the loop you can check what the count is and apply specific classes. e.g.
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(
array(
'post_type'=>'project',
'posts_per_page'=>5,
'order'=>'ASC'
)
);
if ($projects) { $count = 1; ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) {
setup_postdata( $post );
if( $count >= 4 ) { $extra_class = 'col-md-6'; }
else { $extra_class = 'col-md-4'; }
?>
<li class="<?php echo $extra_class; ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php $count++; } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Give that a go...
Regards
Dan
<?php
$i = 0;
foreach ($projects as $post) { setup_postdata( $post )
?>
<li class="<?php echo ($i>2):'col-md-6'?'col-md-4' ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php
$i++;
}
wp_reset_postdata();
?>
Here is my code currently. I would like to only show the next and previous controls when there is more than one related post thumbnail. I have tried a few things but nothing gets me to where I want to be. Please help:
$recent_posts_query = new WP_Query($args);
if($recent_posts_query->have_posts()):
echo '<div class="recipes-slider-widget cs">
<h2 class="w-bot-border">';
echo $title;
echo '</h2>
<ul class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-timeout=0 data-cycle-slides="li" data-cycle-next=".n'.$widget_idc.'" data-cycle-prev=".p'.$widget_idc.'">';
while($recent_posts_query->have_posts()):
$recent_posts_query->the_post();
?>
<?php
if(has_post_thumbnail())
{
?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('recipe-slider-widget'); ?>
</a>
<p class="info-box"><?php the_title() ?></p>
</li>
<?php
}
?>
<?php
endwhile;
echo ' </ul>
<span class="prev p'.$widget_idc.'"></span>
<span class="next n'.$widget_idc.'"></span>
</div>';
echo $after_widget;
endif;
}