I am using advance custom fields plugin recommended by Developers on this forum. I also followed all the old threads and understand i need to edit loop-single.php to display custom fields. But, my main focus is to display custom fields in a tab inside post. I learned how to create tabs using visual composer. Now, all i need some guidance on how can i display my custom fields inside “Tab 2”. If once setup i will copy the template and will be implent it each time i need it.
The Purpose of Tabs is to display “Description” of product in Tab1 and Specs in Tab2. Please guide me so that i can handle it properly. I also purchased a plugin that can handle everything but because the plugin uses custom post type thus is not incorporating it as i need it.
Thanks
I’m not a PHP expert, but I did just do some tabs with ACF and VC, so here goes. It will look like this:
// Set up your row, column, and tabs element
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Simplest possible example of getting ACF data, sub in yours
$data_1 = the_field('my_custom_field_1');
$data_2 = the_field('my_custom_field_2');
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title="The first tab" tab_id="tab_1"];
$to_echo .= $data_1;
$to_echo .= '[/vc_tab]';
$to_echo .= '[vc_tab title="The second tab" tab_id="tab_2"];
$to_echo .= $data_2;
$to_echo .= '[/vc_tab]';
// (You could wrap each block in an if to skip a tab if the data is empty)
// When you have all your tabs, close the elements
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Do whatever
echo $to_echo;
Thanks a lot. That’s exactly what i am looking for. Can you please guide me where should i place this code in loop-single?
And for tab id should i change it or it will work automatically?
You’re welcome! Where you put it depends where you want it in the post. You could have it between header and content, after content, after footer, after comments… etc.
If you open up loop-single.php or loop-single-1.php you will easily see the blocks where the header, content, and footer parts are prepared and echoed. For loop-single-2 through loop-single-5 it’s a little more complicated because the header block is located in single_template_2.php through single_template_5.php instead.
Just throw this code between a <?php tag and a ?> tag into one of those handily titled blocks.
And if you’re not using one already, don’t forget that these files should be modified in a child theme so they will survive theme updates.
The tab ID is okay as it is. As far as I can tell, it just needs to be unique and have no spaces.
P.S. If you know some CSS you could also add classes to your $to_echo string around your content and style that in the Custom CSS section of the theme panel. Wrapping the tabs is probably going to mess with them a little, but the content inside the tabs can be styled freely.
Note! I should have used get_field, not the_field, up there. the_field echoes it right away but get_field gives you the data so you can put it in a tab.
One last thing is that if you’re going to use this in all your templates, you should probably just go to your child theme’s functions.php and turn the code into a function. You have to pass the post ID to that function as well. It should look like this:
function my_custom_field_tabs($post_id) {
// all the code I posted above, indented
...
}Except that instead of echo $to_echo; you’ll have return $to_echo;, and instead of $data_1 = get_field('field_1');, you'll have$data_1 = get_field(‘field_1’, $post_id);`.
Then, wherever you want to insert the tabs in a template, you would just use this one line:
<?php echo my_custom_field_tabs($post->ID); ?>Thanks very much for such detailed answers. Can you please come to skype for just few minutes. I tried to add it up but making mistakes. If you don’t mind 🙂
I want to implement as you described it in the last post. But as i am not expert of PHP, i am making some mistakes. I want to insert groups and wants the output in the second tab like this page is displaying features of mobiles.
But this is displaying straight away i want to put these features using advance custom fields in tabs like first tab is for Text that i will put inside text box and second will be for Custom fields.
I think i already took a lot of your time and support from you. If you can help me in finishing it, it will be really helpful for me.
Thanks
No problem. I’d love to help but prefer not to share contact info for the time being… Can you describe the steps you’re taking? Do you have a child theme set up and activated? Do you have FTP access to your site?
Thanks for reply, I previously activated child theme but synthesis allows me to activate one theme at a movement and therefore whenever i activate it, it throws an error in the dashboard.
I first created a number of fields like here under one group as you can see here.
Then i am inserted the code you provided in loop-single.php
// Set up your row, column, and tabs element
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Simplest possible example of getting ACF data, sub in yours
$data_1 = the_field('2g_network');
$data_2 = the_field('3g_network');
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title="The first tab" tab_id="tab_1"];
$to_echo .= $data_1;
$to_echo .= '[/vc_tab]';
$to_echo .= '[vc_tab title="The second tab" tab_id="tab_2"];
$to_echo .= $data_2;
$to_echo .= '[/vc_tab]';
// (You could wrap each block in an if to skip a tab if the data is empty)
// When you have all your tabs, close the elements
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Do whatever
echo $to_echo;
But now i don’t know what to do here on this screenshot.
I entered the custom fields on the post page but it’s not showing up.
And yes, i have FTP access of my site. Infact, i don’t have access to edit themes within dashboard due to my hosting strict security policy. That’s why, i was not able to take screenshot of code itself on the edit page of single loop.
Thanks again for support.
As, i told you before i am not a PHP expert and may be I am messing something wrong with your code.
It looks like you’ve done it almost exactly right. But I have these notes:
1. I made a mistake when I said to use the_field — change all instances to get_field in the code.
2. If you can’t activate a child theme, your code modifications won’t survive a theme update anyway and you’ll have to redo it each time you update. 🙁 Still, it should work. And it’s fine if you use that block of code instead of the functions.php way I quoted.
3. Once you have that code in your template files, you don’t need to do anything from the post editing page besides enter those custom fields.
4. If you’re not seeing anything show up when you view the post, you might be putting your code in the wrong single post template file. There are seven of those in this theme: loop-single.php, loop-single-1.php, single_template_2.php, single_template_3.php, single_template_4.php, and single_template_5.php. You could put the above code in whichever template file you’ve picked in Theme Panel -> Post Settings, or you could put it in every template file.
5. Just to make sure, where are you putting the code in the template file? (Which lines come right before and after it?)
I tried to implement as per your instructions. Please check this screenshot it was with the_field.
I don’t know where i am making a mistake. I again changed the code to get_field and it still remains the same. Here you can see it.
Here is the full code of loop-single-1.php in which i am inserting.
<?php
/**
* The single post loop for post template 1
**/
if (have_posts()) {
the_post();
$td_mod_single = new td_module_1($post);
//show the breadcrumb
if (get_post_type($post) == 'post') {
echo td_page_generator::get_single_breadcrumbs($td_mod_single->title);
} else {
echo td_page_generator::get_page_breadcrumbs($td_mod_single->title);
}
?>
<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class());?>" <?php echo $td_mod_single->get_item_scope();?>>
<header>
<?php echo $td_mod_single->get_title();?>
<div class="meta-info">
<?php echo $td_mod_single->get_category();?>
<?php //echo $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_date(false);?>
<?php echo $td_mod_single->get_commentsAndViews();?>
</div>
</header>
<?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?>
<p class="td-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p>
<?php } ?>
<?php
// override the default featured image by the templates (single.php and home.php/index.php - blog loop)
if (!empty(td_global::$load_featured_img_from_template)) {
echo $td_mod_single->get_image(td_global::$load_featured_img_from_template);
} else {
echo $td_mod_single->get_image('art-big-1col');
}
?>
<div class="td-post-text-content">
<?php echo $td_mod_single->get_content();?>
// Set up your row, column, and tabs element
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Simplest possible example of getting ACF data, sub in yours
$data_1 = get_field('2g_network');
$data_2 = get_field('3g_network');
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title="The first tab" tab_id="tab_1"];
$to_echo .= $data_1;
$to_echo .= '[/vc_tab]';
$to_echo .= '[vc_tab title="The second tab" tab_id="tab_2"];
$to_echo .= $data_2;
$to_echo .= '[/vc_tab]';
// (You could wrap each block in an if to skip a tab if the data is empty)
// When you have all your tabs, close the elements
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Do whatever
echo $to_echo;
</div>
<div class="clearfix"></div>
<footer>
<?php echo $td_mod_single->get_post_pagination();?>
<?php echo $td_mod_single->get_review();?>
<?php echo $td_mod_single->get_source_and_via();?>
<?php echo $td_mod_single->get_social_sharing();?>
<?php echo $td_mod_single->get_social_like_tweet();?>
<?php echo $td_mod_single->get_next_prev_posts();?>
<?php echo $td_mod_single->get_author_box();?>
<?php echo $td_mod_single->get_item_scope_meta();?>
</footer>
</article> <!-- /.post -->
<?php echo $td_mod_single->related_posts();?>
<?php
} else {
//no posts
echo td_page_generator::no_posts();
}?>I think the code is not executing. Am i placing it in the wrong way?
That’s a good sign, it means it’s doing something. 😉
I just skimmed the code and the mistake is mine. I forgot a close quote on the new tab strings. Here it is fixed:
// Set up your row, column, and tabs element
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Simplest possible example of getting ACF data, sub in yours
$data_1 = get_field('2g_network');
$data_2 = get_field('3g_network');
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title="The first tab" tab_id="tab_1"]';
$to_echo .= $data_1;
$to_echo .= '[/vc_tab]';
$to_echo .= '[vc_tab title="The second tab" tab_id="tab_2"]';
$to_echo .= $data_2;
$to_echo .= '[/vc_tab]';
// (You could wrap each block in an if to skip a tab if the data is empty)
// When you have all your tabs, close the elements
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Do whatever
echo $to_echo;Thanks a lot for your continuous support. I tried it. But the results are same again. Although i know we are too close to achieve this. Can you please check the code again. I think there is something missing.
The exact same result? Even if the above doesn’t parse the tabs as it should, it would at least stop echoing the comments. If it’s the exact same make sure you saved the file and cleared your browser cache / cache plugin if you use one.
Hello dear, Sorry for late reply, I was not available online for 2 days. Yes, I am using a cache plugin but i cleared my cache twice. Also notice the code shown in the tabs is the same i put in the loop-single.php. It means i saved the file.
The code is just coming out with out any results.
I hope there is some little mistake i am doing. Kindly check it again.
Thanks
Yes, just checked your file and the problem is in the context — you forgot to wrap the new code in a <?php> tag. Hence it’s being treated as HTML. Your whole file should look like this:
<?php
/**
* The single post loop for post template 1
**/
if (have_posts()) {
the_post();
$td_mod_single = new td_module_1($post);
//show the breadcrumb
if (get_post_type($post) == 'post') {
echo td_page_generator::get_single_breadcrumbs($td_mod_single->title);
} else {
echo td_page_generator::get_page_breadcrumbs($td_mod_single->title);
}
?>
<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class());?>" <?php echo $td_mod_single->get_item_scope();?>>
<header>
<?php echo $td_mod_single->get_title();?>
<div class="meta-info">
<?php echo $td_mod_single->get_category();?>
<?php //echo $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_date(false);?>
<?php echo $td_mod_single->get_commentsAndViews();?>
</div>
</header>
<?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?>
<p class="td-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p>
<?php } ?>
<?php
// override the default featured image by the templates (single.php and home.php/index.php - blog loop)
if (!empty(td_global::$load_featured_img_from_template)) {
echo $td_mod_single->get_image(td_global::$load_featured_img_from_template);
} else {
echo $td_mod_single->get_image('art-big-1col');
}
?>
<div class="td-post-text-content">
<?php echo $td_mod_single->get_content();?>
<?php
// Set up your row, column, and tabs element
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Simplest possible example of getting ACF data, sub in yours
$data_1 = get_field('2g_network');
$data_2 = get_field('3g_network');
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title="The first tab" tab_id="tab_1"]';
$to_echo .= $data_1;
$to_echo .= '[/vc_tab]';
$to_echo .= '[vc_tab title="The second tab" tab_id="tab_2"]';
$to_echo .= $data_2;
$to_echo .= '[/vc_tab]';
// (You could wrap each block in an if to skip a tab if the data is empty)
// When you have all your tabs, close the elements
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Do whatever
echo $to_echo;
?>
</div>
<div class="clearfix"></div>
<footer>
<?php echo $td_mod_single->get_post_pagination();?>
<?php echo $td_mod_single->get_review();?>
<?php echo $td_mod_single->get_source_and_via();?>
<?php echo $td_mod_single->get_social_sharing();?>
<?php echo $td_mod_single->get_social_like_tweet();?>
<?php echo $td_mod_single->get_next_prev_posts();?>
<?php echo $td_mod_single->get_author_box();?>
<?php echo $td_mod_single->get_item_scope_meta();?>
</footer>
</article> <!-- /.post -->
<?php echo $td_mod_single->related_posts();?>
<?php
} else {
//no posts
echo td_page_generator::no_posts();
}?>No words to say you thankyou. Previously to achieve this i had to buy plugins but all in vain. Now it started working out of the box. Thanks.
It worked after closing it in PHP tags.
Now it’s only displaying the fields meta. Can it display the field name as well? You can check this image for better understanding.
You’re very welcome.
The docs for getting the label of a field as well as the value are here: http://www.advancedcustomfields.com/resources/get_field_object/
This means that for the lines like this:
$data_1 = get_field('2g_network');
That returns only the value. So you would now have
$data_1 = get_field_object('2g_network');
Which returns an object with various keys, including “label” and “value”.
Once you have that object, you could change lines like this:
$to_echo .= $data_1;
to lines that use specific parts of that object.
$to_echo .= $data_1["label"] . ': ' . $data_1["value"];
Have fun!
But this leads me to ask whether you really want the label there or whether you’re thinking of renaming the tabs. I see that it still says “The first tab”, “The second tab” like I put in. To have the labels on the tabs, the tab block would look like this:
// Repeat these lines for each tab, making sure each tab has a unique id
$to_echo .= '[vc_tab title=" . $data_1['label'] . " tab_id="tab_1"]';
$to_echo .= $data_1['value'];
$to_echo .= '[/vc_tab]';And a final note, but this is just because I’m a little obsessive:
If you’re going to have a lot of these tabs, you could automate the adding of each field. You would replace from // Simplest possible example of getting ACF data, sub in yours to // (You could wrap each block in an if to skip a tab if the data is empty) with the following code:
// Update this list using the same format for all the field names you want
$field_names = ['2g_network', '3g_network'];
// Loop through the fields
foreach ($field_names as $field_name) {
$data = get_field_object($field_name);
// Set up tab
$to_echo .= '[vc_tab title=" . $data["label"] . " tab_id=" . $field_name . "]';
// Check if we have a value
if ($data['value'] {
$to_echo .= $data["value"];
// Default message if no value entered for the field
} else {
$to_echo .= 'No information on record.';
}
// Close the tab
$to_echo .= '[/vc_tab]';
}Then whenever you want to change a field, you would just change the $field_names list and it would be much simpler. For example, if you had a field named ‘4g_network’, it becomes $field_names = ['2g_network', '3g_network', '4g_network'];
Hope that helps :p
Thanks a lot for providing me support that is actually not supported on this forum. 🙂
Actually What i want to achieve this i can explain you in detail.
I want to display a number of fields “labels” along with their data in a column format. Like this image.
But i want to display these all fields,labels, groups( almost 44 fields) under one tab that may be named as Features.
In the second tab i want to display Content that can be named as “Review”. In the Third tab i want to display a gallery. And in the Fourth tab there is a purchase guide named as “buy now”.
Previously i tried a lot to get these working. But failed. And one more thing, i want to create a custom post type “Phones” with a taxonomy “Brands” for it. So, that each time, i don’t have to choose a template for executing these functions. Further whenever there is no content in a field it will not display, If there is no content in a field label, the field label will not show.
Can you please also tell me if i can create a comparison page using these fields. Like if i want to compare iPhone 5 features with iPhone 6. Is it possible with ACF?
Thanks again the most awesome and brilliant guy on TagDiv.
Hello Friend, I am still waiting for your reply. Thanks
Haven’t forgotten, don’t worry. Will get to this in a day or two. It just requires that I have a few minutes to sit down and type the response, and weekends are actually my busiest time. :p
Thanks for responding. I was thinking of weekends that’s why i messaged you today. 🙂
Heya,
First of all, I’m far from the most brilliant guy on tagDiv. If I were, we wouldn’t have spent have a dozen posts correcting my tiny mistakes 😉 I’ll give that title to Chris to avoid favouritism among the actual staff…
Your ideal setup definitely requires some custom work that I don’t have time to provide at the moment. I would go to http://studio.envato.com, as tagDiv recommends — or you could do some learning, just like I did, and do it yourself 😀 But I will make a few comments:
Having content in these tabs that differs from post to post means you’ll either need to make extensive use of custom fields, or you could use Visual Composer settings to build the post itself. The question is what are you using the regular post content for? A comment on the phone, for example?
The first option would mean that you’d insert code similar to what I’ve been giving you, and have it appear on every template, using custom fields to determine the content. For example, as you probably know, ACF has a WYSIWYG editor field that you could use for your review. The buy now would not be as easy to automate through such a field, in my opinion (but you may already have a solution and just be looking for how to use tabs for it?).
The second option is that you’d construct these posts in the editor itself using Visual Composer, and then perhaps use custom shortcodes to display the content of your fields.
Or a real developer might suggest some much more sensible solution. :p
But I will give you one last thing, namely a basic tweak of my above code just for your “Features” tab.
The idea is the same. You’re opening up a vc_tabs, you’re opening up a tab, and then you’re looping through features-related fields. It could look like this, with lots of extra comments and line breaks to make it clear for you:
// Update this list using the same format for all the field names you want
$field_names = ['2g_network', '3g_network'];
// Set up tabs
$to_echo = '[vc_row][vc_column width="1/1"][vc_tabs]';
// Set up features tab
$to_echo .= '[vc_tab title="Features" tab_id="features"]';
// Begin a list
$to_echo .= '<ul class="features_list">';
// Loop through the fields
foreach ($field_names as $field_name) {
$data = get_field_object($field_name);
// Check if we have a value and set to a default if not
if ($data['value']) {
$value = $data['value'];
} else {
$value = 'No information on record.';
}
$to_echo .= '<li>' . '<span class="features_label">' . $data["label"] . ': </span>';
$to_echo .= '<span class="features_value">' . $value . '</span></li>';
}
// Close the list
$to_echo .= '</ul>';
// Close the tab
$to_echo .= '[/vc_tab]';
// Close the tab group etc.
$to_echo .= '[/vc_tabs][/vc_column][/vc_row]';
// We have to filter the whole string to make WP interpret the shortcodes
$to_echo = wpb_js_remove_wpautop($to_echo);
// Output
echo $to_echo;My note above about only needing to change $field_names applies to this as well.
If you were going to put other tabs in, you would modify the lines that open and close the tab groups, and use those in a similar way. I realize that this is just a simple list and not a table like you wanted — more research would be needed for me to construct a way of getting the label of the field group and such…
Hope that helps. I do think what you need isn’t just “support” but custom work, although it will be fantastic if you can figure the rest out by research, trial and error.
Best of luck!
