Skip to main content

Advanced Custom Fields and Bootstrap Tabs

Advanced Custom Fields (ACF) for WordPress makes it really easy for a you to add customisations to a website. I had a client wanting to use bootstrap tabs on their website and also have the ability to add or remove new tabs and content through their editor. I used the ACF repeater field to do this.

You will need to import this custom fields json file (unzip it first) into your ACF plugin to create the fields, you will then need to place the below code into your template.




<div class="container text-center">


<!-- TAB BUTTONS -->

<?php $row = 1; if(get_field('front_tabs')): ?>

<ul class="nav nav-tabs" id="frontTabs">
 		 <?php while(has_sub_field('front_tabs')): ?>

				<?php $title = get_sub_field('title'); $content = get_sub_field('content'); $link = get_sub_field('link'); ?>


<li class="<?php if($row == 1) { echo 'active'; } ?>"><a href="#<?php echo str_replace(' ', '', $title); ?>" data-toggle="tab"><?php echo $title;?></a>

	   			 <?php $row++; endwhile; ?>
	</ul>

 <?php endif; wp_reset_query();?>


<!-- TAB CONTENT -->

<div class="col-sm-10 col-sm-push-1">
	<?php $row = 1; if(get_field('front_tabs')): ?>

<div id="content" class="tab-content">
  			<?php while(has_sub_field('front_tabs')): ?>


				<?php $title = get_sub_field('title'); $content = get_sub_field('content'); $link = get_sub_field('link'); ?>



<div class="tab-pane <?php if($row == 1) { echo 'active'; } ?> fade in" id="<?php echo str_replace(' ', '', $title); ?>">

					<?php echo $content;?>

						<?php if($link):?><a class="btnsk" href="<?php echo $link;?>">Read More</a><?php endif?>
						
                 </div>

	
	   			 <?php $row++; endwhile; ?>

		</div>

    

  <?php endif; wp_reset_query(); ?>

</div>

Leave a Reply