Frontend display in table form

• alina

• August 21, 2017 at 5:12 am

Hi,

I would like to display the custom fields in the frontend in table form.

I want to hide empty fields and I want to have all fields to be automatically shown, even new once.

This is what I have right now (I have to codes):

1. Code example

<?php

$fields = get_field_objects();

if( $fields )
{
foreach( $fields as $field_name => $field )
{
echo ‘<table>’;

echo ‘<tr>’;
echo ‘<td>’ . $field[‘label’] . ‘</td>’;
echo ‘<td>’ . $field[‘value’] . ‘</td>’;
echo ‘</tr>’;

echo ‘</table>’;
}
}

?>

This one shows all new edit custom fields automatically, but the output is a bit strange (https://www.screencast.com/t/rYvsVqXr2). The rows and columns are not in line and there somehow is an empty row. Also, it shows all fields even if there are empty.

2. Code example

<table class=”ACFTable”>
<col width=”40%”>
<col width=”60%”>
<tbody>
<tr>
<td>Datum</td>
<td><?php the_field( ‘datum’ ); ?></td></tr>
<tr>
<td>Land</td>
<td><?php the_field( ‘land’ ); ?></td></tr>
</tbody>
</table>

The 2. code shows up in the frontend exactly as I want it to (https://www.screencast.com/t/UZDQX4ZDV), but I have to edit all new custom fields every time and it shows all fields even if they are empty.

Is there a way to get the best of both in one code and hide empty fields?

I’m very much looking forward to hearing from you.

Best regards,
Alina

• John Huebner

• August 22, 2017 at 10:27 am

$fields = get_field_objects();
if( $fields ) {
  ?>
    <table>
      <?php 
        foreach ($fields as $field_name => $field) {
          if ($field['value]) {
            ?>
              <tr>
                <td><?php echo $field['label']; ?></td>
                <td><?php echo $field['value']; ?></td>
              </tr>
            <?php 
          } // end if value
        } // end foreach field
      ?>
    </table>
  <?php 
} // end if fields

• majd.kouifi

• September 25, 2018 at 10:32 am

Hi,

Where to add this code to display custom fields in single product page.

Thanks in advance,

• boabjohn

• January 7, 2019 at 10:57 pm

Thanks @hube2 for the code sample. As a rabid non-coder, I agree with the comment above: what/where is the best way to deploy this code?

And (curiously) why do you suppose this “trivial” bit of display logic has not already been wrapped in a nice configuration interface so that we can pick and place ACF fields into a basic tabular display…skipping the manual PHP altogether?

Thanks!

• John Huebner

• January 8, 2019 at 7:33 am

I’m not a developer of ACF, just another user.

I’m not exactly sure what you mean the second part, but ACF is a plugin that requires the modification of templates and the use of PHP on the front of the site. It is an admin tool for developers that aims to reduce the work involved in creating the admin for custom fields and simplifies the getting and displaying of those fields.

The code I posted would go in your template file where you want to show the field values on the front of the site.

• boabjohn

• January 9, 2019 at 1:41 pm

Thanks for the reply. I’m doing the best I can with ACF and Elementor at the moment. It looks to me like there is not much support in the WordPress ecosystem for the *display* of tabluar data (or fields in my case). This is very different to the Drupal approach which provides a clean separation of content-structure-style.
Cheers…

• John Huebner

• January 10, 2019 at 2:42 am

No, there isn’t any real support in WP for tables, there never has been.

No, In WP the template files are a mix of PHP code and HTML, not separation. I personally like it this way.

Unfortunately, I can’t give you any pointers on elementor, I don’t use these types of tools and prefer coding. ACF is really a tool that’s built for people that like to code the templates themselves. There are other custom field plugins that do more and can remove the need to code and also supply templating features for those that do not do coding https://wordpress.org/plugins/types/