I want to display 5 images of custom post type 'project' and 1 standard post in the front-page. I have tried to merge both queries in one, however its not working.
FYI: I have set the theme support for thumbnail.
This is what I have so far on my front-page, but its not displaying them:
<div class="content lg-grid">
<?php
$query1 = new WP_Query(array(
'project' => array(
'posts_per_page' => 5,
'post_type' => 'project'
)
));
$query2 = new WP_Query(array(
'post' => array(
'posts_per_page' => 1,
'category' => 'art'
)
));
$result = new WP_Query();
$result->posts = array_merge($query1->posts, $query2->posts);
while ($result->have_posts()) : $result->the_post(); ?>
<div class="project-item">
<a href="<?php the_permalink(); ?>">
<img src="<?php the_post_thumbnail(); ?>" />
<h5 class="title"><?php the_title(); ?></h5>
</a>
</div>
<?php endwhile;
endif; ?>
</div>
I want to display 5 images of custom post type 'project' and 1 standard post in the front-page. I have tried to merge both queries in one, however its not working.
FYI: I have set the theme support for thumbnail.
This is what I have so far on my front-page, but its not displaying them:
<div class="content lg-grid">
<?php
$query1 = new WP_Query(array(
'project' => array(
'posts_per_page' => 5,
'post_type' => 'project'
)
));
$query2 = new WP_Query(array(
'post' => array(
'posts_per_page' => 1,
'category' => 'art'
)
));
$result = new WP_Query();
$result->posts = array_merge($query1->posts, $query2->posts);
while ($result->have_posts()) : $result->the_post(); ?>
<div class="project-item">
<a href="<?php the_permalink(); ?>">
<img src="<?php the_post_thumbnail(); ?>" />
<h5 class="title"><?php the_title(); ?></h5>
</a>
</div>
<?php endwhile;
endif; ?>
</div>
Share
Improve this question
edited Oct 11, 2020 at 12:24
Krys
asked Oct 11, 2020 at 9:32
KrysKrys
1353 silver badges9 bronze badges
1 Answer
Reset to default 1Your query args contains a nested array, so it won't work that way — the items like posts_per_page
belongs in the main array (e.g. new WP_Query( array( 'posts_per_page' => 5 ) )
). So it should be like this:
Note that the 'category' => 'art'
won't work. Instead, use the category_name
parameter to query posts by the category slug.
$query1 = new WP_Query( array(
'posts_per_page' => 5,
'post_type' => 'project',
) );
$query2 = new WP_Query( array(
'posts_per_page' => 1,
'category_name' => 'art',
) );
$posts = array_merge( $query1->posts, $query2->posts );
Secondly, you don't need the third WP_Query
instance (i.e. $result
). Instead, you could use a foreach
loop in place of while
, then use setup_postdata()
to setup the global post variable ($post
) so that functions like the_permalink()
and the_title()
would work as expected.
And note that the_post_thumbnail()
doesn't return the post thumbnail's URL; instead, it displays the post thumbnail, i.e. echo
an <img>
tag, hence you can't use the function in the image's src
attribute.
foreach ( $posts as $post ) : setup_postdata( $post ); ?>
<div class="project-item">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h5 class="title"><?php the_title(); ?></h5>
</a>
</div>
<?php endforeach;
Now that should work.
But I don't think it's necessary to merge the posts, and I would likely use a template part for querying and displaying the standard post, and then load the template part from the front-page.php
template:
front-page.php
<?php // Query 5 "project" posts. $projects = new WP_Query( [ 'posts_per_page' => 5, 'post_type' => 'project', ] ); $i = 0; // post counter while ( $projects->have_posts() ) : $projects->the_post(); // Displays the default post before the first "project". if ( 0 === $i ) { get_template_part( 'my-template-part' ); // no .php } ?> your code <?php $i++; endwhile; wp_reset_postdata(); ?>
my-template-part.php
:<?php // Query 1 standard post. $art_posts = new WP_Query( [ 'posts_per_page' => 1, 'category_name' => 'art', ] ); while ( $art_posts->have_posts() ) : $art_posts->the_post(); ?> your code <?php endwhile; wp_reset_postdata(); ?>