Divi WordPress plugin and Shortcodes

I’m running through this glitch on this page of mine that I created with the Divi page builder plugin and a shortcode:

https://kmacenter.info/faculty_staff/

This page only consists of a post title module, and then a text module right below it. The text module only contains a shortcode as well as some design customizations.

I would like the text module to appear BELOW the page’s title but that doesn’t seem to be happening. Also, the text module’s design customizations are ignored. The page looks fine when viewing it from the Divi’s visual builder.

I think something’s wrong with my shortcode’s implementation
(the comments aren’t worth reading at all):

// In functions.php:

function build_faculty_and_staff_page(){
// code here:
require(‘my-files/build-faculty-and-staff.php’);
}
add_shortcode(‘faculty_and_staff’, ‘build_faculty_and_staff_page’);

// In build-faculty-and-staff.php:

<div>
<?php

$instructors = new WP_Query(
array(
‘posts_per_page’=>-1,
‘post_type’ => ‘instructor’,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
)
);

while( $instructors->have_posts() ) {
$instructors->the_post();
$hasContent = (” !== get_the_content());

?>
<div class=”event-summary”>
<div class=”event-summary__content”>
<h5 class=”event-summary__title headline headline–tiny”>
<a href=
“<?php
if($hasContent){the_permalink();}
else{echo(‘#’);}?>”>
<?php the_title(); ?>
</a></h5>
<h6 class=”event-summary__title headline headline–tiny”>
<?php
echo(get_field(‘title’));
?>
</h6>
<p id = ‘container’ style = “color:black”>
<a class = “professor-card” style = ‘padding: 0 15px; float: left;’ href =
“<?php if($hasContent){the_permalink();}
else{echo(‘#’);}
?>”>
<img class = “professor-card__image” src = “<?php the_post_thumbnail_url(
‘thumbnail’
) ?>”>
</a>
<?php

if( has_excerpt() ){
echo get_the_excerpt();
$hasContent = true;
} else if ($hasContent) {
echo wp_trim_words( get_the_content(), 150 );
// ^^^ limit the post’s content to 18 words as its preview.

}

if( $hasContent ){
?>
<a href=”<?php the_permalink(); ?>” class=”nu gray”>Learn more</a>
<?php } ?>
</p>
</div>
</div>
<?php
//if($instructors->post_count > 0) {
echo(“<br><br><br>”);
//}
} // end while

?>
</div>

I think what’s going on is that the shortcode is getting called before anything else on the content pane appears ( such as the post title ). So now all the code in the shortcode shows up before the title. If I happen to be right, is there a way to delay this shortcode execution until the text module containing the shortcode needs to appear?

EDIT: The pictures on this website aren’t appearing because of a media library malfunction I had earlier.

Read more here:: Divi WordPress plugin and Shortcodes

Leave a Reply

Your email address will not be published. Required fields are marked *