Don’t display html if custom field is empty

The question:

I’m using the plugin WP UI on my custom post type to display the content in tabs. I’m doing this in the template for the custom post type not using the shortcode provided by the plugin. I’m also using Advanced Custom Fields for the fields on the custom post type.

However sometimes there won’t be any content for the custom fields. The page will then display the tab but it will be empty.

In my template i have divs that are used to display the content in tabs. So in my template i have the div for the tab and then the custom field.

                <!-- Videos Tab -->

  <h3 class="wp-tab-title">Videos</h3>

  <div class="wp-tab-content">

        <?php the_field('videos'); ?>

   </div><!-- Close Videos --> 

Is it possible to hide the tab if there is no content in the custom field? i.e. not output the div so therefore it won’t display the tab.

Thanks

So there’s no confusion, the_field is a function used by advanced custom fields to display the contents of the custom field.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

I have no experience with WP UI, but the following code might do the trick:

            <!-- Videos Tab -->

<h3 class="wp-tab-title">Videos</h3>

<?php if (get_field('videos') && get_field('videos') != "") { ?>

    <div class="wp-tab-content">

        <?php the_field('videos'); ?>

    </div><!-- Close Videos --> 

<?php } ?>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment