PHP/CSS: Shortcode won't display correctly, and displays in the head (before content) on every page

Question

Trying to create a shortcode to be implemented to a popup. I'm trying to display four images in a 2x2 grid at the center of the page.

The problem is that this shortcode now floats everything left and the images display vertically on top of each other instead of 2x2 at the center of the page.

Also, the contents displayed on the top of every page (before page content) when I implement the shortcode in the popup, it doesn't display in the popup though.

I've tried:

ob_start();
return ob_get_clean();

That stops it from displaying in the head of every page, but it doesn't output anything else either.

What am I doing wrong?

Adding my shortcode function here and the CSS for the 2x2 grid layout underneath.

Shortcode Function:

<?php
function my_function() {

$args = array (
'post_type'              => 'my_cpt',
'nopaging'               => false,
'posts_per_page'         => '4',
'order'                  => 'ASC',
'orderby'                => 'rand',
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
    $query->the_post();

$image = get_field('my_image_field');
$size = 'medium';?>

<div class="grid2x2">
    <div class="thegridbox">
    <div>'  
            ?><a href="<?php the_field('my_image_link'); ?> ">
                <img src="<?php wp_get_attachment_image( $image, $size ); ? 
>" />
            </a>                
    </div>  
</div>
</div>

<?php

}

} else {

echo 'Oops! Nothing found.';

}

wp_reset_postdata();    

}
add_shortcode( 'my_shortcode', 'my_function' );
?>

CSS for the 2x2 frid layout:

.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.thegridbox { margin: 20px; }

score 1 · Accepted Answer · answered Dec 20 '18 at 14:31

Hi there It looks like it is the problem with closing and opening bit of grid2X2 class div.

Can you try following code and see if it works. Also my editor shows syntax error when I copy pasted your code(extra space near img tag). Just to let you know I have not tested the code so there is no guarantee it will work.

<?php
function my_function() {

$args = array (
'post_type'              => 'my_cpt',
'nopaging'               => false,
'posts_per_page'         => '4',
'order'                  => 'ASC',
'orderby'                => 'rand',
);

$query = new WP_Query( $args );
$i=0;
ob_start();
if ( $query->have_posts() ) {

while ( $query->have_posts() ) {
    $query->the_post();

$image = get_field('my_image_field');
$size = 'medium';
?>
  <?php if($i==0 || $i ==2): ?>
<div class="grid2x2">
<?php endif;?>
    <div class="thegridbox">
    <div>  
        <a href="<?php the_field('my_image_link'); ?> ">
                <img src="<?php wp_get_attachment_image( $image, $size ); ?>" />
            </a>                
    </div>  
</div>
<?php if($i==1 || $i ==3): ?>
</div>
<?php endif; ?>

<?php
$i++;
}

} else {

echo 'Oops! Nothing found.';

}

wp_reset_postdata();    
return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );
?>

This worked perfectly! Thank you. I'm also trying to add a paragraph that i want to display at the center on top of the grid. Like a headline "the 4 most popular posts" sort of thing. But my paragraph outputs on top of each post individually, instead of just one time on top of the grid it self. How would you approach that? @Santosh Sapkota — re-boot, Dec 20 '18 at 20:18

Intelligent Web Solution · Answer 2 · 2018-12-20T16:18:38.530

It's because you used add_shortcode() function in wrong way. Please check this.

"Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from."

function my_function() {
    $retVal = '<div>Lorem ipsum dolor sit amet</div>';
    return $retVal;
}
add_shortcode( 'my_shortcode', 'my_function' );

And there is another trick with ob_start()/ob_get_clean() (php output buffering function). In this case you have to use ob_start(); before the start of writing in your my_function() and call return ob_get_clean(); at the end of the function.

<?php
function my_function() {
    ob_start(); ?>

    <div>Lorem ipsum dolor sit amet</div>
    <?php echo '<div>Another Lorem ipsum dolor sit amet</div>';?>

<?php
    return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );

PHP/CSS: Shortcode won't display correctly, and displays in the head (before content) on every page

2 Answers2