show custom field content in jquery tabs

Question

I am trying to make a post which will contain several custom fileds. the custom fields should show within jqery tabs. I have already made it in here: http://algodonesdentistreview.com/ahmad/dentists/a-test-dentist-post but the problem is, the tabs aren't dynamic, that is, if I'm adding a field from dashboard, it won't show up in the page. instead, I have to modify the code every time. here's my code:

        <ul>
            <li><a href="#tabs-1">Profile</a></li>
            <li><a href="#tabs-2">Staff</a></li>
            <li><a href="#tabs-3">Treatments & Prices</a></li>
        </ul>
        <div id="tabs-1"><?php the_field('Profile'); ?></div>
        <div id="tabs-2"><?php the_field('Staff'); ?></div>
        <div id="tabs-3"><?php the_field('treatments_&_prices'); ?></div>
    </div>

right now, every time i have to add a new field, I need to go back to my single.php and add the html for it. I don't want to do it. I want to just add the custom field and be done with it without going back to my single file.

I know what I'm doing wrong, but I'm not much of a coder, so can't find a way to correct it. any help will be much appreciated.

BTW, don't know if it's relevant,but the post is also a custom-post.

I'm also using the Advanced Custom Post plugin.

Answer 1

I think the answer is that there is no easy way to achieve what you're looking for because nobody would want that behavior. Custom/meta fields get added to posts for all kinds of reasons, plugins do it all the time to store things you'd never want the public looking at both because it might be private and because it's probably super-boring and/or incomprehensible.

Custom fields need to be added to your theme manually for a reason: only those you specifically choose make sense.

Remember, you only have to do all this while you're setting up the site. Once the site is live you will probably not be adding custom fields to the theme very often (or at least you shouldn't be).

That said there are ways you could lessen the burden for yourself by writing some PHP code that semi-automates the process. This would be especially useful if you were defining the fields inside PHP already, in which case you could mix together the metabox definitions (using something like http://wordpress.org/extend/plugins/custom-metadata/ ) and the list of fields you want to show up in tabs.

For example, you could make an array of $fields_to_show_in_tabs, with labels, postmeta-names and field_types for all the different tabs, then you could go through the array and register each custom field with Custom Metadata Manager. You could then reference the same array (probably good to put it in a Global variable: global $fields_to_show_in_tabs) in your theme, and do a foreach ($fields_to_show_in_tabs) where you loop through the array and display each one as a tab.

That's what I would do if I had a seriously long list of fields that were likely to change a lot. Honestly though that's likely to be overkill. If I were you I'd just update the theme while it's in development and tell the client that they need your help to add any new tabs. That is totally reasonable and protects them from lots of potential nightmares that could happen from them creating strange new fields you never thought of.

ONE MORE THING: In your example you are showing the tab and tab content whether the postmeta exists or not. This means there might be an empty tab if the content wasn't filled out. If you don't want that behavior you should probably first check if the postmeta was set using something like:

<?php if (get_post_meta($post->ID, 'profile', true)): ?>
     <li><a href="#tabs-1">Profile</a></li>
<?php endif;?>

The same goes for the div tags. This is also a good argument in favor of creating a function that loops through an array of fields and displays them, that way you only need one copy of the HTML and PHP checking, and it can handle your various fields for you.

Answer 2

You may wish to try this instead;

<?php global $post; ?>
        <ul>
            <li><a href="#tabs-1">Profile</a></li>
            <li><a href="#tabs-2">Staff</a></li>
            <li><a href="#tabs-3">Treatments & Prices</a></li>
        </ul>
        <div id="tabs-1"><?php echo get_post_meta($post->ID, 'profile', true);?></div>
        <div id="tabs-2"><?php echo get_post_meta($post->ID, 'staff', true);?></div>
        <div id="tabs-3"><?php echo get_post_meta($post->ID, 'treatment_&_prices', true);?></div>
    </div>

For reference when dealing with custom fields please see:

get_post_meta @ the WordPress Codex (or any of the subsequent, related functions noted at the bottom of that URL).

Answer 3

I don't know that plugin but what your asking for it not very hard using the built in wordpress get_post_custom function.

Simply loop through it and create your html tabs on the fly.

   $custom_fields = get_post_custom($post_id);
      $my_custom_field = $custom_fields['my_custom_field'];
      foreach ( $my_custom_field as $key => $value )
        echo `<div id="whatever">`. $key . " => " . $value . "</div>";

Two things to note:

You should create a custom ID string when you echo each <div id="whatever"> so it become <div id="whatever-1">, <div id="whatever-2">, etc

I do this in the loop with something like $div_id = $displayposts->current_post + 1;

-

If you need the title in a separate div (like in your example), you just need to use rewind_posts http://codex.wordpress.org/Function_Reference/rewind_posts

Answer 4

a bit late I know, One approche is to export a csv with post-content and all fields into columns, then combine them into post content but separate fields with customized tab tags and tab titles, then try import back to see how it looks like, this way you can keep fields in other uses or even ignore fields if don't needed anymore