Im working in WP and basically what I've got set up is some logic to create a separate carousel for each category of my blog.
For each carousel im displaying the top viewed posts for each category. Each Item in the carousel has a post thumbnail, author name and author avatar.
My problem(if you scroll down to the bottom of the home screen pst"meet the community") the posts are showing the right post names and thumbnails but something funky is going on with the author names and avatars. The first post in the shelf looks correct but after that each post is showing the wrong author.I really dont know how to handle this. Ive been mashing they keys for a week already. Any thoughts?
<!-- A shelf for each category by most posts and posts by highest view count-->
<?php
$cat_args = array(
'number' => 5,
'orderby' => 'count',
'post_type' => 'post',
'order' => 'DESC',
'child_of' => 0
);
$categories = get_categories($cat_args);
foreach($categories as $category) {
echo '<div class="shelf_holder">';
echo '<div class="shelf_title"> <h1> <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" )) . '" ' . '> View All</h5></div>';
echo '<div class="shelf_prev"><div class="backwards_icon"></div></div>';
echo '<div class="shelf_next"><div class="forward_icon"></div></div>';
echo '<div class="display-posts-listing grid">';
$post_args = array(
'numberposts' => 8,
'category' => $category->term_id,
'meta_key' => 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
$posts = get_posts($post_args);
foreach($posts as $post) {
?>
<div class="listing-item">
<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium');
list($url, $width, $height, $is_intermediate) = $thumbnail;
?>
<div class="media-wrapper">
<?php $post_views = get_post_meta( get_the_ID(), 'post_views_count', true );?>
<div class="counter"><div class="views_icon"></div><?php echo $post_views; ?></div>
<div class="save_card"> <?php the_favorites_button($post_id);?></div>
<div class="media-gradient" style="height:196px;"></div>
<div class="media" style="height:196px;width:<?php echo $width; ?>px;background-image:url(<?php echo $url; ?>);background-size:cover;overflow: hidden;background-position: center;width: 100%;left:0px;"></div>
</div>
<div class="tiny_head"><?php echo get_avatar( get_the_author_meta( 'ID' ), 32 );?> </div>
<div class="card_content">
<h3><?php the_title(); ?></h3>
<div class="entry-meta">
<?php
global $post;
$author_id=$post->display_name;
?>
<?php
the_author_meta( 'display_name', $author_id );
?>
<?php wp_reset_query(); ?>
</div>
</div>
</div> <!-- listing item -->
<?php
}
echo '</div class="display-posts-listing grid">';
echo '</div class="shelf_holder">';
} ?>
Replace your foreach with this:
foreach($posts as $post) : ?>
<div class="listing-item">
<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium');
list($url, $width, $height, $is_intermediate) = $thumbnail;
$author_id=$post->post_author;
?>
<div class="media-wrapper">
<?php $post_views = get_post_meta( $post->ID, 'post_views_count', true );?>
<div class="counter"><div class="views_icon"></div><?= $post_views; ?></div>
<div class="save_card"> <?php the_favorites_button($post_id);?></div>
<div class="media-gradient" style="height:196px;"></div>
<div class="media" style="height:196px;width:<?= $width; ?>px;background-image:url(<?= $url; ?>);background-size:cover;overflow: hidden;background-position: center;width: 100%;left:0px;"></div>
</div>
<div class="tiny_head"><?= get_avatar( get_the_author_meta( 'ID' ), $author_id );?> </div>
<div class="card_content">
<h3><?= get_the_title($post); ?></h3>
<div class="entry-meta">
<?= get_the_author_meta( 'display_name', $author_id ); ?>
</div>
</div>
</div> <!-- listing item -->
<?php
endforeach;
You had some errors in the way you were using get_the_author_meta. It needs the author ID and you tried getting it using display_name. The one you used for the avatar is hardcoded. (That's only going to return the meta that belongs to ID 32).
There are a lot of inconsistencies in your code. Try to understand what is happening. Look up the functions you're using and what they do exactly. The PHP documentation and WordPress documentation both are excellent resources.
Related
i have a problem when trying to show a current 4 post using WP_Query.
But, the older post (The very first post) also shown in the first loop.
This is my code:
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => '3'
);
$query = new WP_Query( $args ); //show 4 post
if ( $query->have_posts() ){
/* Start the Loop */
while ( $query->have_posts() ) {
$query->the_post();?>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card ">
<?php if (has_post_thumbnail()) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<img class="miniimg" src="<?php echo $featured_img_url; ?>" width="auto" height="200px">
<?php } ?>
<div class="card-body">
<h4><a href="<?php the_permalink(); ?>">
<?php the_title();
$post_date = get_the_date( 'j F Y' );
?>
</a></h4>
<p class="card-text"><?php the_excerpt();?></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary">Read More</button>
</div>
<small class="text-muted"><?= $post_date; ?></small>
</div>
</div>
</div>
</div>
<?php
$counter++; }
}
?>
This is the result =>
How to fix this problem? is there any problem with my code?
Thankyou.
If specifying 'posts_per_page' => 3 gives back 4 posts, it is almost 100% sure that the first post is a sticky post. Use the option ignore_sticky_posts to ignore them.
$args = array(
'post_type' => 'post',
'posts_per_page' => 4,
'ignore_sticky_posts' => 1,
);
...
A Sticky Post is the post will be placed at the top of the front page of posts. This feature is only available for the built-in post type post and not for custom post types.
Source # https://developer.wordpress.org/themes/functionality/sticky-posts/
I'm pretty sure you applied is sticky to your post from 2012.
To verify you can just add the following to your loop inside the while statement:
<?php //...
while( have_posts() ): the_post();
if( is_sticky() ):
echo 1;
else: echo 0;
endif;
endwhile;
//... ?>
Or go to you post in the admin console, and verify that you didn't check the "is sticky" checkbox on the right side in the publish panel.
<?php
$args = array( 'post_type' => 'movies');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?><div class="movie-content" >
<?php
echo '<a href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( $post->post_title ) . '">' ?>
<h2><?php echo the_title(); ?></h2>
<div><?php the_post_thumbnail('thumbnail'); ?></div>
<div class="excerpt"><?php the_excerpt(); ?></div>
<?php
the_content();
echo '<div class="entry-content">';
echo '</div>';
echo "</div></a>";
endwhile;
?>
Working on a WordPress theme issue, I have an archive page that has a featured post at the top that displays a featured image, post date, and excerpt along with other posts below it.
Running into an issue where the featured post has the correct title, correct image, but incorrect excerpt. It pulls in a different post's text instead.
Any clue as to what is incorrect with the code below?
<?php
$args = array(
'numberposts' => '1' ,
'post_type' => 'post',
'meta_key' => 'post_featured',
'meta_compare' => '=',
'meta_value' => 1
);
$recent_posts = wp_get_recent_posts( $args );
$fID = 0;
foreach( $recent_posts as $recent ) : ?>
<?php $fID = $recent["ID"]; ?>
<div class="blog-listing featured_post">
<a class="blog-image-lg" href="<?php echo get_permalink($recent["ID"]); ?>" style="background-image: url('<?php echo get_the_post_thumbnail_url( $recent["ID"], 'full' ); ?>');">
<span>FEATURED POST</span>
<?php echo get_the_post_thumbnail( $recent["ID"], 'post-thumbnails-big' ); ?>
</a>
<div class="blog-info pull-left">
<h3 class="blog-title"><?php echo $recent["post_title"]; ?></h3>
<span class="blog-date"><?php echo strtoupper(get_the_date('F j, Y')); ?></span>
<p><? echo the_excerpt(); ?></p>
<p class="readmore-wrapper"><a class="readmore" href="<?php echo get_permalink($recent["ID"]); ?>">READ MORE »</a></p>
</div>
</div>
Change <? echo the_excerpt(); ?> to <?php echo get_the_excerpt($recent["ID"]); ?>.
the_excerpt() does not work in your case as you are not inside a WP Loop, just a regular for loop.
I have a working '$related = get_posts' masonry on a single.php page. I also added a hover overlay, so that when the user hovers on the thumbnail, a transparent overlay appears as well as the descriptions (title name, category and nickname).
The problem I am facing is that when I hover on one related post thumbnail, the overlay appears for every post (the overlay is stretched, it is not appearing individually). I've also attempted to call out the descriptions, but it's only calling the current post I am viewing (e.x. the current single.php header says Snow, when I hover the first related post, it also calls out the description for Snow), however, if you click on the first related post thumbnail, it takes you to a different article (it is not calling the description for the different article).
<div class="related">
<h3>Related</h3>
<div class="js-masonry">
<div class="overlay">
<?php $related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'orderby' => 'rand', 'numberposts' => 3, 'post__not_in' => array($post->ID) ) );
if( $related ) foreach( $related as $post ) { setup_postdata($post); ?>
<?php the_post_thumbnail(array(300,300)); ?>
<?php } wp_reset_postdata(); ?>
<div class="posts">
<?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>
<h1><?php the_title();?></h1>
————
<h4><?php the_author();?></h4>
</div>
</div>
</div>
</div>
As the title says, how do I pull the correct description and overlay for one post via hover for ' $related = get_posts' on the single.php page in WordPress?
I resolved the issue by reorganizing the code correctly.
<div class="js-masonry">
<?php $args = array(
'category__in' => wp_get_post_categories( get_queried_object_id() ),
'posts_per_page' => 3,
'orderby' => 'rand',
'post__not_in' => array( get_queried_object_id() )
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item-masonry overlay">
<a href="<?php the_permalink();?>">
<div class="posts">
<?php foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>
<h1><?php the_title();?></h1>
————
<h4><?php the_author();?></h4>
</div>
<?php the_post_thumbnail(array(300,300)); ?>
</div>
</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
Taxonomy image
page image
Here, I have categorized my page with different page. In that, I categorized with taxonomy and slug. All the title have different taxonomy as shown in the image. But here I am getting multiple image because it have multiple taxonomy.
So, I just want 8 images as the Business theme are as shown in images and have to display as per the taxonomy.
As you can see the taxonomy count that is 4,4 and 5, So I am getting record like that, but I want to get record as per Business theme, as they are eight but as per taxonomy.
Here what I have tried:
<div class="portfolio-items">
<?php
$terms = get_terms('portfolio_cat');
foreach($terms as $row)
{
$args = array('post_type' => 'portfolio','tax_query' => array(
array(
'taxonomy' => 'portfolio_cat',
'field' => 'slug',
'terms' => array( $row->slug ),
)
));
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
$i=1;
?>
<div class="portfolio-item <?php echo $row->slug; ?> col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<?php $large_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'large' ); ?>
<img class="img-responsive" src="<?php echo $url; ?>" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><?php the_title(); ?></h3>
<?php $content = get_the_content(); ?>
<p><?php echo $content; ?></p>
<a class="preview" href="<?php echo $large_url; ?>" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<?php
// End of the loop.
$i++;
endwhile;
endif;
WP_Reset_Query();
}
?>
</div>
I'm very new to WordPress, and I've been pulling hair trying to figure this one out.
I have a custom theme, the theme is very simple, which contains an image carousel built up from a collection of images in a gallery.
If I remove the carousel include file, the post ID on the rest of the page returns correctly, as soon as I add the carousel back, it uses the ID of the last category pulled in the code.
I removed all 'global' references, as I assumed this will override the ID for the rest of the page, but it's still wrong.
The code from the carousel.php file:
<div id="carousel">
<?php
$args = array(
'post_type' => 'gallery',
'post_status' => 'publish',
'name' => $wp_query->query_vars['name'],
'posts_per_page' => 1
);
$second_query = new WP_Query($args);
$gllr_options = get_option('gllr_options');
$gllr_download_link_title = addslashes(__('Download high resolution image', 'gallery'));
if ($second_query->have_posts()) : while ($second_query->have_posts()) : $second_query->the_post(); ?>
<div class="carousel-holder">
<?php
the_content();
$galleries = get_posts(array(
'showposts' => -1,
'what_to_show' => 'posts',
'post_status' => 'inherit',
'post_type' => 'attachment',
'orderby' => $gllr_options['order_by'],
'order' => $gllr_options['order'],
'post_mime_type' => 'image/jpeg,image/gif,image/jpg,image/png',
'post_parent' => $post->ID
));
if (count($galleries) > 0) { ?>
<ul id="carousel-gallery">
<?php foreach ($galleries as $attachment) {
$key = 'gllr_image_text';
$link_key = 'gllr_link_url';
$alt_tag_key = 'gllr_image_alt_tag';
$image_attributes = wp_get_attachment_image_src( $attachment->ID, 'photo-thumb' );
$image_attributes_large = wp_get_attachment_image_src( $attachment->ID, 'large' );
$image_attributes_full = wp_get_attachment_image_src( $attachment->ID, 'full' );
if ( 1 == $gllr_options['border_images'] ) {
$gllr_border = 'border-width: ' . $gllr_options['border_images_width'] . 'px; border-color:' . $gllr_options['border_images_color'] . '';
$gllr_border_images = $gllr_options['border_images_width'] * 2;
} else {
$gllr_border = '';
$gllr_border_images = 0;
}
if (($url_for_link = get_post_meta($attachment->ID, $link_key, true)) != "") { ?>
<li>
<img alt="<?php echo get_post_meta($attachment->ID, $alt_tag_key, true); ?>" title="<?php echo get_post_meta( $attachment->ID, $key, true ); ?>" src="<?php echo $url_for_link; ?>" />
</li>
<?php } else { ?>
<li rel="gallery_fancybox<?php if ( 0 == $gllr_options['single_lightbox_for_multiple_galleries'] ) echo '_' . $post->ID; ?>">
<img alt="<?php echo get_post_meta($attachment->ID, $alt_tag_key, true); ?>" title="<?php echo get_post_meta( $attachment->ID, $key, true ); ?>" src="<?php echo $image_attributes_large[0]; ?>" />
</li>
<?php }
$count_image_block++;
} ?>
</ul>
<div class="clearfix"></div>
<div id="arrows" class="arrows">
<a id="prev" class="prev" href="#"></a>
<a id="next" class="next" href="#"></a>
</div>
<div id="paginator" class="paginator"></div>
<?php } ?>
</div>
<?php endwhile; else: endif;?>
</div>
The code that is returning the erroneous ID:
<div class="left sidebar">
<?php echo the_ID(); ?>
</div>
This is within a template page, that looks like this:
<?php
/**
* Template Name: 2 Column Left
*/
get_header();
?>
<div id="maincontent">
<div id="content" class="site-content" role="main">
<div class="left sidebar">
<?php
echo the_ID();
?>
</div>
</div>
</div>
<?php get_footer(); ?>
Carousel.php is defined within header.php, and then gets called when get_header(); is called.
So, assuming I'm on the About page, with an ID of 16, and the carousel calls a gallery with page ID of 8, the echo in left-sidebar always returns 8.
I'm at a loss here, I've search high and low for an answer to this problem, but I've come up with nothing.
Try resetting the loop using the wp_reset_query() method.
Place this right after your carousel loop ends.
<?php wp_reset_query(); ?>