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:

            <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>
        <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>

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.

  • I take it you're using Advanced Custom Fields?
    – mrwweb
    Apr 19, 2012 at 17:49
  • One more question. When you say "when adding a field from dashboard," do you mean creating a new field (aka metabox) or do you mean entering data into an existing field? I'm assuming the former, but I can't quite tell from your wording.
    – mrwweb
    Apr 19, 2012 at 17:51
  • yes, I am using Advanced Custom fields, sorry, forgot to mention. and I mean adding new metabox. the update is fine. Apr 19, 2012 at 17:59
  • Thanks for clarifying. I don't know of anyway you could programatically add the field (which isn't to say it's impossible, just out of the scope of my knowledge).
    – mrwweb
    Apr 19, 2012 at 18:21
  • yes same here! :( that's why stackexchange is for! Apr 19, 2012 at 18:36

4 Answers 4


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.


You may wish to try this instead;

<?php global $post; ?>
            <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>
        <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>

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).

  • nope, isn't working. the previous tabs are showing, but neither any of the content nor the new tabs are showing up. Apr 19, 2012 at 16:45
  • @Snowbell92 can you replace $post->ID with get_the_id() so in turn you would have echo get_post_meta(get_the_id(), 'staff', true);
    – Adam
    Apr 19, 2012 at 17:28
  • replaced it, still the same. just the tabs and no content. Apr 19, 2012 at 18:01
  • Are you calling this inside the loop? Outside the loop? Are you correctly referencing the "KEY" of your custom field? Is case-sensitivity an issue? If possible; goto PasteBin and paste your entire code so I can evaluate it. Thanks
    – Adam
    Apr 19, 2012 at 18:20
  • Since this question involves using advanced custom fields, I believe the code snippet in the OP is correct (although, yes, it would still need to be in the loop).
    – mrwweb
    Apr 19, 2012 at 18:23

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.