Advanced Custom Field shortcode displaying in header

Question

Hope some of you can help me with this as i'm really lost! This is hard to explain but here it goes. And i'm recently new to ACF (advanced custom fields), so please forgive me.

The setup:

1. I've created a new shortcode in my functions.php file (called [bier])

`    function bierfunction() {
require_once trailingslashit( REDGOTGRILL_THEME_DIR ) . 'bier-page.php';
}
add_shortcode('bier','bierfunction');`

2. Then I created the php file "bier-page.php" as imported as above. And added some calls :

`    <?php $bier_maand = new WP_Query(array(
'post_type' => 'bier_maand'
)); ?>`

`    <div class="mprm-row">
      <?php while($bier_maand->have_posts()) : $bier_maand->the_post();?>     </div>`

`     <div class="mprm-category-content">
                     <h2 class="mprm-title"><?php the_title(); ?></h2>
                             <p class="mprm-category-description">
                            <?php the_field('beschrijving_bier'); ?></p>
                        </div>`

3. I then hoped I could just use the shortcode in any page and it will insert my created php page! Well it works! Really nice even... Except for one thing!

Issue: The shortcode i've created is being displayed at the very top under my header. No matter what else i do!! Or whatever i place above it! It will continue to be displayed at the top of the page below the header.

• LINK TO MY PAGE (ISSUE) : http://wapen.2-t.one/testing-issue/ (the beers shown is the shortcode)

• Screenshot of the page set up in wordpress: http://prntscr.com/e96l1t

Conclusion: I'm about to trow myself out the window! What am i doing wrong?? Is this a CSS Styling issue? Because i have the feeling this has to do with the ACF call :
<?php $bier_maand = new WP_Query(array( 'post_type' => 'bier_maand' )); ?>

Any help will be greatly appreciated!

Answer 1

You're close and @jh1711 is on track. Your shortcode is displaying at the very top of your while( have_posts() ) : the_post(); call because it's printing your markup, not returning it as a variable to be displayed at the point of the shortcode. The shortcode is working, but it's not being spit out at the right place. You need to change it to:

<?php
function bierfunction(){
  // No need for WP_Query - use get_posts when you can
  $bier_maand = get_posts( array(
    'post_type' => 'bier_maand'
  ) );
  $ret = '<div class="mprm-row">';
  foreach( $bier_maand as $bier ){
    $ret .= '<div class="mprm-category-content"><h2 class="mprm-title">';
    // Not the_title() which prints the title. Use get_the_title() to pass it to your variable.
    $ret .= get_the_title( $bier->ID );
    $ret .='</h2><p class="mprm-category-description">';
    // Don't use the_field() which prints the field value. Use get_field() to pass the value to your variable;
    $ret .= get_the_field( 'beschrijving_bier', $bier->ID ); 
    $ret .= '</p></div>';
  }
  $ret .= '</div>';
  // Return the value of the above output so WordPress puts in on screen at the location of your shortcode.
  return $ret;
}
add_shortcode( 'bier', 'bierfunction' );