How Can We Use The ACF Pro Plugin in Our Website

The Advanced custom fields(ACF) pro plugin is very useful for creating the dynamic page without interfering the design of the page. Advanced custom fields pro plugin allows adding the custom extra fields. We can easily use the plugin in WordPress. After installing the plugin in your WordPress theme. Activate the ACF pro plugin in your theme. 

The Advanced Custom Field’s pro plugin makes it very easy to display field data in your theme. There are many functions available in ACF pro plugin and all are well documented on the resources page. You can easily read it and apply on the pages. 

For creating the dynamic page first go to the Custom fields option in admin panel. Click on the Add new option under Custom fields and type the name in the field group text field. Select the page template form the Location section and save it. After save it add the fields which you want to add like Title, Image etc. Any name you can type in the field. After entering the name and save it. Go to the Page section admin panel and Create the new page. Select the template from the template option and save it. You can see that you have the field in the bottom section of the page. In that field, enter the content. For access content in the template page. Use the name value form the custom fields to show the value in front page .

<section class="hero is-primary is-bold top-hero">
   
            <div class="column is-6">
               <div>
                  <h2 class="title is-size-2-mobile has-text-white wow fadeIn"><?php the_field('banner_title'); ?></h2>
                  <h1 class="subtitle m-b-30 m-t-20 has-text-white wow fadeIn" data-wow-delay=".4s"><?php the_field('banner_content'); ?></h1>

                 <button class="button is-link glow" data-toggle="modal" data-target="#myModal">Watch the video</button>
                 
               </div>
            </div>
            <div class="column is-1 is-hidden-touch"></div>
            <div class="column">
               <?php 
                  $image = get_field('banner_image');
                  
                    if( !empty($image) ): ?>
               <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['title']; ?>"   class="is-banner-2 image m-t-40 wow fadeIn" data-wow-delay=".4s"/>
               <figcaption><?php echo $image['caption']; ?></figcaption>
               <?php endif; ?>
              
           

</section>

In the above code you can see that banner_title is the name value in custom field and label is Banner Title. the_feild() is used for show the value in front page.  For show the image get_feild('feild_name')  is used.

If you want to show the data by the use of loop, you use the below code for it. As you can see that "Second List" is the label and second_list is the name value for showing the data in front page. 

  <?php if( have_rows('second_list') ): ?>
                        <?php while( have_rows('second_list') ): the_row(); 

                           $content = get_sub_field('content');  ?>
                              <li >
                              <?php echo  $content ?>   
                              </li>                             

                         <?php endwhile; ?>
                         <?php endif; ?>