functions - PHPCSS: Shortcode won't display correctly, and only displays in the head (before content)

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; }

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; }

• php
• functions
• shortcode
• css
• advanced-custom-fields

Share Improve this question asked Dec 20, 2018 at 11:58 re-bootre-boot 4799 bronze badges 2

• Where are you putting ob_start() it needs to go before any output. The whole point is to capture the output and return it. – Jacob Peattie Commented Dec 20, 2018 at 12:18
• I added ob_start() right below function my_function(){ and return ob_get_clean(); right before wp_reset_postdata();. – re-boot Commented Dec 20, 2018 at 12:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As we can see on the Codex, all strings produced in a Shortcode must be returned instead of echoing them.