How to Add a Custom Message When No Custom Posts in a Loop
As a WordPress developer, you may have encountered situations where you need to display a custom message when there are no posts to show in a loop. This can be particularly useful for custom post types, where you want to provide a clear message to your users when there are no relevant posts available.
In this article, we'll walk through the steps to add a custom message when no custom posts are found in a loop, as well as address some common code structure issues that can arise in these situations.
The Problem
Let's start by looking at the code snippet you provided:
<section class="bigsection clearfix" id="joinus">
<h2><?php echo(types_render_field( 'job-section-header', array( ) )); ?></h2>
<p class="bodycopy"><?php echo(types_render_field( 'job-section-text', array( ) )); ?></p>
<?php
$args = array (
'post_type' => array( 'job' ),
'nopaging' => true,
'orderby' => 'menu_order',
'order' => 'ASC'
);
$jobs = new WP_Query( $args );
if ( $jobs->have_posts() ) : ?>
<div class="jobs">
<?php while ( $jobs->have_posts() ) : $jobs->the_post(); ?>
<div class="single-job">
<h3><?php the_title( ); ?></h3>
<p><a href="<?php echo(types_render_field( 'link-to-job-description', array('output' => 'raw' ) )); ?>">Job Specification</a></p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p>There are no current vacancies at this time</p>
<?php endif; ?>
</section>
The problem you've identified is that the endwhile
statement is missing the <?php
tag, and the .jobs
div needs to be inside the if
condition. Additionally, the wp_reset_postdata()
function should be placed immediately after the endwhile
statement, not at the end of the entire code block.
The Solution
To address these issues and add a custom message when no custom posts are found, we can update the code as follows:
<section class="bigsection clearfix" id="joinus">
<h2><?php echo(types_render_field( 'job-section-header', array( ) )); ?></h2>
<p class="bodycopy"><?php echo(types_render_field( 'job-section-text', array( ) )); ?></p>
<?php
$args = array (
'post_type' => array( 'job' ),
'nopaging' => true,
'orderby' => 'menu_order',
'order' => 'ASC'
);
$jobs = new WP_Query( $args );
if ( $jobs->have_posts() ) : ?>
<div class="jobs">
<?php while ( $jobs->have_posts() ) : $jobs->the_post(); ?>
<div class="single-job">
<h3><?php the_title(); ?></h3>
<p><a href="<?php echo(types_render_field( 'link-to-job-description', array('output' => 'raw' ) )); ?>">Job Specification</a></p>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p>There are no current vacancies at this time</p>
<?php endif; ?>
</section>
Here's what we've changed:
- Added the
<?php
tag before the endwhile
statement to properly close the PHP block.
- Moved the
.jobs
div inside the if
condition, so it's only displayed when there are posts to show.
- Moved the
wp_reset_postdata()
function immediately after the endwhile
loop, as it should be called after the loop has completed, not at the end of the entire code block.
By making these changes, the code should now work as expected, displaying a custom message when there are no custom posts to show in the loop.
Improving Code Structure
While the updated code now functions correctly, there are a few additional improvements we can make to improve the overall code structure and readability:
-
Simplify the Conditional Statement: The current if
statement checks if there are any posts before displaying the .jobs
div. We can simplify this by directly checking if the loop is empty and displaying the custom message if that's the case.
-
Separate HTML and PHP Logic: It's generally a good practice to separate HTML and PHP logic as much as possible. This makes the code more modular and easier to maintain.
-
Use Consistent Formatting: Ensure that the code is formatted consistently, with proper indentation and spacing to improve readability.
Here's the updated code with these improvements:
<section class="bigsection clearfix" id="joinus">
<h2><?php echo(types_render_field( 'job-section-header', array( ) )); ?></h2>
<p class="bodycopy"><?php echo(types_render_field( 'job-section-text', array( ) )); ?></p>
<?php
$args = array (
'post_type' => array( 'job' ),
'nopaging' => true,
'orderby' => 'menu_order',
'order' => 'ASC'
);
$jobs = new WP_Query( $args );
if ( $jobs->have_posts() ) {
?>
<div class="jobs">
<?php
while ( $jobs->have_posts() ) {
$jobs->the_post();
?>
<div class="single-job">
<h3><?php the_title(); ?></h3>
<p><a href="<?php echo(types_render_field( 'link-to-job-description', array('output' => 'raw' ) )); ?>">Job Specification</a></p>
</div>
<?php
}
wp_reset_postdata();
?>
</div>
<?php
} else {
?>
<p>There are no current vacancies at this time</p>
<?php
}
?>
</section>
In this updated version, we've made the following changes:
- Simplified the
if
statement to directly check if the loop has posts, removing the unnecessary have_posts()
check.
- Separated the HTML and PHP logic, with the HTML being generated inside the
if
and else
blocks.
- Ensured consistent formatting, with proper indentation and spacing.
This updated code should be more readable, maintainable, and efficient, while still addressing the original issues you identified.
Conclusion
In this article, we've covered how to add a custom message when no custom posts are found in a WordPress loop, as well as some best practices for improving the overall code structure and readability.
By following these guidelines, you can create more robust and maintainable WordPress code that provides a better user experience for your website visitors. Remember, clear and well-structured code not only makes it easier for you to work on, but also for other developers who may need to collaborate on or maintain your project in the future.
If you're looking for a tool that can help identify and fix technical issues like the ones we've covered in this article, consider checking out Flowpoint.ai. Flowpoint uses AI to analyze website performance and provide actionable recommendations to improve conversion rates and user experience
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.