Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How to

HI,

How can i do this code here

<div class="col-md-6 tabs">
                        <div class="panel with-nav-tabs panel-default">
                            <div class="panel-heading">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab1default" data-toggle="tab">Business in Mind</a></li>
                                    <li class=""><a href="#tab2default" data-toggle="tab">Web Developement</a></li>
                                    <li class=""><a href="#tab3default" data-toggle="tab">Web Design</a></li>
                                </ul>
                            </div><!-- pnael-heading -->

                            <div class="panel-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade active in" id="tab1default">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna alsstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irutrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute iruiqua. Ut enim ad minim veniam,
                                    quis , sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </div>

                                    <div class="tab-pane fade" id="tab2default">
                                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla paristrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute iruatur. Excepteur sint occaecat cupidatat non
                                    proident
                                    </div>

                                    <div class="tab-pane fade" id="tab3default">
                                    strud exerstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irucitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute iru
                                    </div>
                                </div>
                            </div><!-- panel-body -->
                        </div><!-- panel -->
                    </div><!-- col-md-6 -->

Into a dynamic wordpress condition? So what i mean is that the user can add tabs and delete them whenever he wants, i dont have a repeater from ACF.

How can i make this dynamic so if the user want 10of them he can adds them and if he wants three he can add?

1 Answer

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

If you don't have the option to use ACF repeater fields then you could always use the built in custom fields that WordPress has by default. There are also ways to create a repeater style field using some custom WordPress functions, which is how ACF works in the background.

To get the custom fields from WordPress:

<?php

  $custom_fields = get_post_custom();
  $my_custom_field = $custom_fields['my_custom_field'];
  foreach ( $my_custom_field as $key => $value ) {
    echo $key . " => " . $value . "<br />";
  }

?>

You could use the count of these items to build the tabs, and then use that number in the href as well (a href="tab-<?php echo $count; ?>">), as well as in the id of the tab that should open with it. Then you'd just loop through the data to build the boxes out.

Hopefully that gives you an idea of one method you could do it.