How to make a shortcode for my WP_Query Loop? - php

Question

I'm a noob Wordpress Developer and I just created my first Custom Template Page using Advanced Custom Fields and managed to loop.
<?php
$args = array(
'post_type' => 'art',
'orderby' => 'title',
'order' => 'ASC'
);
$the_query = new WP_Query( $args );
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php get_template_part( 'content', 'art' ); ?>
<?php endwhile; endif; ?>
But I will like to use it not only inside a template page, but anywhere I want. Therefore I need to create a shortcode.
Example:
function foobar_func( $atts ){
return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );
My question would be: How can i put the loop inside my shortcode?

Answer 1

add_shortcode( 'foobar', 'foobar_func' );
function foobar_func( $atts ) {
global $post;
$output = '';
$args = array(
'post_type' => 'art',
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page' => 10,
);
$fe_query= new WP_Query( $args );
if ( $fe_query->have_posts() ) {
$output .= '<ul class="fe-query-results-shortcode-output">';
while ( $fe_query->have_posts() ) {
$fe_query->the_post();
$title = get_the_title();
$link = get_the_permalink();
$output .= "<li>{$title}</li>";
}
$output .= '</ul>';
} else {
$output .= '<div class="fe-query-results-shortcode-output-none">No results were found</div>';
}
wp_reset_postdata();
return $output;
}

Answer 2

<?php
function loop_art() {
ob_start();
get_template_part('loop_art');
return ob_get_clean();
}
add_shortcode( 'loop_art', 'loop_art' );
?>
<?php
$args = array(
'post_type' => 'art',
'orderby' => 'title',
'order' => 'ASC'
);
$the_query = new WP_Query( $args );
if ($the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post()
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta">
<p>Price: $<?php the_field('price'); ?></p>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p><img src="<?php the_field('image'); ?>" alt="Example image of <?php the_title(); ?>"></p>
</div><!-- .entry-content -->
</article>
<?php endwhile; endif; ?>