How to put php created content into targeted specific div? - php

Question

Noob here! I'd like to run a simple post-loop on a wordpress homepage. If I write the loop in my functions.php file and then load the homepage, the result of the query is shown at the top of the mainpage.
Now I would like to see the result of the loop in a specific div. The reason for that is, that I would like to use a pagebuilder for most of the sites content first and then see the loop.
TLDR; How can I make the content created by a php function be displayed/loaded into a specific div container? Is it even possible?
I've tried creating the div and putting the shortcode for my function inside of it but wordpress wouldn't even allow me to save the changes.
in functions.php:
function show(){
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'post_date',
'order' => 'desc',
'posts_per_page' => '30',
'post_status' => 'inherit'
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image = wp_get_attachment_image_src( get_the_ID() );
echo'<div><div class="numbertext">1</div>';
echo $images = wp_get_attachment_image( $query_images->posts->ID, 'full' );
echo'<div class="title">';
the_title();
echo'</div></div>';
endwhile;
};
add_shortcode( 'imgshow', 'show' );
Then in Pagebuilder:
<div id="imgcontainer">[imgshow]<div>
So for each img the query finds, I expect the loop to create some div boxes with the images and their titles in it.

Answer 1

You're on the right track, but a little off on your shortcode syntax. One thing to remember with shortcodes is you always have to return content, as opposed to echoing it. I haven't tested this, but this should work.
function show(){
ob_start(); // should usually start a shortcode with an output buffer
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'post_date',
'order' => 'desc',
'posts_per_page' => '30',
'post_status' => 'inherit'
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image = wp_get_attachment_image_src( get_the_ID() ); ?>
// You don't have to echo divs you can use html tags in PHP
<div class="numbertext">1</div>
<img src="<?php echo $image; ?>" />
<div class="title">
<?php the_title(); ?>
</div>
</div>
<?php
endwhile;
// put the content in a variable creating from the output buffer
$content = ob_get_clean();
// return the content
return $content;
};
add_shortcode( 'imgshow', 'show' );