WordPress loop output print is wrong

Question

I wrote a short code for wordpress but the outputs that will be printed is somehow weird so this is my loop code

function events_accordion_shortcode($category){
// WP_Query arguments
$args = array (
    'post_type'              => array( 'event' ),
    'post_status'            => array( 'publish' ),
    'nopaging'               => true,
    'order'                  => 'ASC',
    'orderby'                => 'menu_order',
    'meta_query' => array(
         array(
                'key' => 'custom_page_category',
                'value' => $category,
            )
        ),
);
// The Query
$events = new WP_Query( $args );
echo '<div class="container">';

// The Loop
$first = true;
if ( $events->have_posts() ) {
    echo '<ul class="responsive-table">
            <li class="table-header">
              <div class="col col-3">Event</div>
              <div class="col col-6">date</div>
              <div class="col col-6"> location</div>
              <div class="col col-6">FOCUS</div>
            </li>';
    while ( $events->have_posts() ) {
        $events->the_post();
        $post_id=get_the_ID();
        $mydate = get_post_meta($post_id, 'date', true);
        $mylocation = get_post_meta($post_id, 'location', true);
        $myfocus = get_post_meta($post_id, 'focus', true);


        echo '<li class="table-row accordion">' .
                '<div class="col col-3" data-label="title">' . the_title() . '</div>' .
                '<div class="col col-6" data-label="date">'. $mydate .'</div>' .
                '<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
                '<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
                '<div class="col col-6" data-label="plus">
                    <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
                </div>' .
            '</li>';
        echo '<li class="panel"></li>';

    }
} else {
    // no posts found
}
echo '</ul></div>';
}

the problem is that the "the_title()" value gets printed outside the li tag, this is the weird output I get:

<div class="container">
<ul class="responsive-table">
    <li class="table-header">
    <div class="col col-3">Event</div>
        <div class="col col-6">date</div>
        <div class="col col-6"> location</div>
        <div class="col col-6">FOCUS</div>
    </li>
    event 1
   <li class="table-row accordion">
       <div class="col col-3" data-label="title"></div>
       <div class="col col-6" data-label="date">13/6/2019</div>
       <div class="col col-6" data-label="location"></div>
       <div class="col col-6" data-label="focus">brain</div>
       <div class="col col-6" data-label="plus">
            <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
        </div>
    </li>
    <li class="panel"></li>
</ul>
</div>

as you can see the post title(event 1) has been copied outside the li tag what am I doing wrong?I dont know what to do

Parthavi Patel · Accepted Answer · 2019-12-12 13:10:26Z

1

 echo '<li class="table-row accordion">' .
            '<div class="col col-3" data-label="title">' . get_the_title() . '</div>' .
            '<div class="col col-6" data-label="date">'. $mydate .'</div>' .
            '<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
            '<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
            '<div class="col col-6" data-label="plus">
                <i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
            </div>' .
        '</li>';
    echo '<li class="panel"></li>';

you have to write get_the_title(), Because you have already written echo at the beginning of li tag. Read the difference here between get_the_title() and the_title()

answered Dec 12, 2019 at 13:10

Parthavi Patel

76713 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parthavi Patel Over a year ago

glad that it works, Please accept the answer for future developers

salman rezaie molood Over a year ago

I will dude , stack over flow made me wait

Collectives™ on Stack Overflow

WordPress loop output print is wrong

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related