WordPress - How to create a shortcode that outputs a CPT - wordpress

Question

There are a handful of things I'd like to do with this shortcode I'm working on. My knowledge about this isn't the best, but I'm trying to learn.
/**
* Recent Project Shortcode
*/
function project_query() {
$args = array(
'posts_per_page' => 1,
'post_type' => 'projects',
'order' => 'ASC',
);
$projects_query = new WP_Query( $args );
if ( $projects_query->have_posts() ) :
// var_dump(the_post_thumbnail_url("full")); exit;
$html_out = '<article class="recent-project" style="background: url(' . $featured_img . ') no-repeat center center; background-size: cover;">';
while ( $projects_query->have_posts() ) :
$projects_query->the_post();
// Do stuff with each post here
$title = get_the_title();
$link = get_the_permalink();
$featured_img = get_the_post_thumbnail_url( $post->ID, 'full' );
$html_out .= '<h5>Latest Project</h5>' . '<h2>' . $title . '</h2>' . '<a class="btn btn-lg btn-tertiary" href="' . $link . '">' . 'Discover' . '</a>';
endwhile;
$html_out .= '</article>';
else : // No results
echo "Nothing to show";
endif;
wp_reset_query();
return $html_out;
}
add_shortcode( 'show_project', 'project_query' );
There are a few issues here. What does work is that on the front-end it pulls the project name, which is sweet, and the button links to the appropriate page.
Here's how I'd like the shortcode to look when using it: [show_projects posts_per_page="3" order="ASC"] I want to make it "easy" for the user to modify the $args. The second thing that isn't working is the background url I'm trying to do. Right now in the front end everything is outputting except that background url.

Answer 1

Hey Darren the problem is that you create the $featured_img variable after you use it. It should be in while loop.
Please try this code
/**
* Recent Project Shortcode
**/
function project_query($atts) {
$atts = shortcode_atts(
array(
'example_attribute' => 'example_value',
),
$atts, 'example'
);
//if you want to use the attribute you should use $atts['example_attribute'] for example
$args = array(
'posts_per_page' => 1,
'post_type' => 'projects',
'order' => 'ASC',
);
$posts = get_posts( $args );
if ( !empty( $posts ) ) :
$post = array_shift( $posts );
$title = get_the_title($post->ID);
$link = get_the_permalink($post->ID);
$featured_img = get_the_post_thumbnail_url( $post->ID, 'full' );
$html_out = '<article class="recent-project" style="background: url(' . $featured_img . ') no-repeat center center; background-size: cover;">';
// Do stuff with each post here
$html_out .= '<h5>Latest Project</h5>' . '<h2>' . $title . '</h2>' . '<a class="btn btn-lg btn-tertiary" href="' . $link . '">' . 'Discover' . '</a>';
$html_out .= '</article>';
else : // No results
echo "Nothing to show";
endif;
return $html_out;
}
add_shortcode( 'show_project', 'project_query' );