0

So, I am creating a shortcode to return some ACF content.

The following code works:

function howitworks() {
    $page = get_page_by_title('shop');
    if (have_rows('steps', $page->ID)) :
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $i = '<div class="col">
                    <img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" />
                    <h2>'.the_sub_field('step').'</h2>
                    <p>'.the_sub_field('description').'</p>
                </div>';
        endwhile;
    endif;
    return $i;
}
add_shortcode('howitworks', 'howitworks');

The problem I am having is I'd like to add a div container in-between the if and the while. I have tried multiple ways. I tried another variable like $j = '<div class="test">' then added another return return $i, $j...but then I have a syntax error. If I add a semi-colon the error goes away, but the div doesn't get returned. If I wanted the div inside the while, I'd be fine. But it seems like I'm having issues because I'm trying to put it outside the while.

The other thing I tried was just to return the outer div like: return '<div class="test">'; which will return the div, but then my original return doesn't return anything.

Any ideas?

Thanks,
Josh

0

Try this:

<?php

function howitworks() {
    $page = get_page_by_title('shop');
    $html = '';
    if (have_rows('steps', $page->ID)) :
        $html .= '<div class="test">';
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $html .= '<div class="col">
                    <img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" />
                    <h2>'.get_sub_field('step').'</h2>
                    <p>'.get_sub_field('description').'</p>
                </div>';
        endwhile;
        $html .= '</div>';
    endif;
    return $html;
}
add_shortcode('howitworks', 'howitworks');
?>

EDIT: I change up my code for replace the_sub_field by get_sub_field

  • This almost worked to a "T", the h2 and p tags return empty, but the content appears above the <div class="test"> on the page - the image appears right where it should be. – Josh Rodgers Nov 22 '19 at 18:49
  • You need change all your "the_sub_field()" by "get_sub_field()" – Sam Nov 22 '19 at 18:54
  • Sam - That definitely worked! Posted by full code below...thanks for the help! – Josh Rodgers Nov 22 '19 at 19:00
0

So, I wanted to give Sam credit, he solved the issue, so his answer is the right one...I just made a little tweak to get it 100% working. I made get_sub_field variables instead of calling them inline, which helped them display properly (instead of above my div container) My final code looks like:

function howitworks() {
    $page = get_page_by_title('shop');
    $html = '';
    if (have_rows('steps', $page->ID)) :
        $html .= '<div class="test">';
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $step = get_sub_field('step');
            $desc = get_sub_field('description');
            $html .= '<div class="col"><img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" /><h2>'.$step.'</h2><p>'.$desc.'</p></div>';
        endwhile;
        $html .= '</div>';
    endif;
    return $html;
}
add_shortcode('howitworks', 'howitworks');

Thanks,
Josh

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.