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!

I'm Joe Too · Accepted Answer · 2017-02-15 20:58:36Z

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' );

jh1711 · Accepted Answer · 2017-02-15 19:47:09Z

0

Afaik, you have to return the html from your shortcode function. If you include/require it, it'll be placed somewhere. For your example (untested!!):

function bierfunction() {
  $bier_maand = new WP_Query(array(
    'post_type' => 'bier_maand'
  ));

$ret = '<div class="mprm-row">';
while($bier_maand->have_posts()) $ret.=$bier_maand->the_post();
$ret.='</div>';

$ret.='<div class="mprm-category-content"><h2 class="mprm-title">';
$ret.=the_title(); 
$ret.='</h2><p class="mprm-category-description">';
$ret.=php the_field('beschrijving_bier'); 
$ret.='</p></div>';
return $ret;
}
add_shortcode('bier','bierfunction');`

answered Feb 15, 2017 at 19:47

jh1711

2,3381 gold badge14 silver badges20 bronze badges

2 Comments

VrolijkWebdesign Over a year ago

Thanks for you answer. Not sure if i follow though. it does all work fine, it's just the actual position of shortcode that is causing the issue. The Shortcode itself works fine and dandy.

jh1711 Over a year ago

When wordpress prepares a post it executes your shortcode function (amongst other things), and puts the result into the post. Then it inserts the post into the page. But your function doesn't return anything; it inserts the replacement directly into th page. That's the reason it appears before the post. All I did was edit your code to return a string.

Collectives™ on Stack Overflow

Advanced Custom Field shortcode displaying in header

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related