In your example this
$output = '<a class="w-portfolio-item-anchor" href="javascript:void(0);" data-id="'.$post->ID.'">' . $output;
would create this $output
:
<a class="w-portfolio-item-anchor" href="javascript:void(0);" data-id="'.$post->ID.'"><div class="w-portfolio">
<div class="w-portfolio-h">
<div class="w-portfolio-list">
<div class="w-portfolio-list-h">
Tip: Use var_dump($output)
or echo $ouput
in your code so you can see what's stored in the $output variable. As it seems with your current code you will have a messed HTML structure.
EDIT:
You are initializing the $output
variable outside of the loop on line 35. I'm writing now some pseudocode how your code should work:
//line 34
$output = '<div class="w-portfolio">
<div class="w-portfolio-h">
<div class="w-portfolio-list">
<div class="w-portfolio-list-h">';
foreach( $posts as $post ) { // Note: This is the while loop in your example
$output .= '<a href="javascript:void(0);" data-id="'.$post->ID.'">'; //notice the .= which appends the string to variable declared on line 35
}
$output .= '</div>
</div>
</div>
</div>';
return $output;
Don't use $output .= $output
or $output = 'bla bla' . $ouput
anywhere here. That would break the HTML structure you want to create with your code. Be conscious your $output variable starts with $output = '<div class="w-portfolio">
.
Please remove the . $output;
from </div>'. $output;
on line 105 in your code.
Try this PasteOfCode