Friday, May 5, 2023

Create theme option with acf in wordpress theme

Hello All.

Today I want to show you how to create theme option pages with acf. Its very easy to create and use it. It saves your time. 

Open your active theme's functions.php file and put this code:

//acf option page
if( function_exists('acf_add_options_page') ) {
    acf_add_options_page(array(
        'page_title'    => 'Theme General Settings',
        'menu_title'    => 'Theme Settings',
        'menu_slug'     => 'theme-general-settings',
        'capability'    => 'edit_posts',
        'redirect'      => false
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Header Settings',
        'menu_title'    => 'Header',
        'parent_slug'   => 'theme-general-settings',
    ));
    acf_add_options_sub_page(array(
        'page_title'    => 'Theme Footer Settings',
        'menu_title'    => 'Footer',
        'parent_slug'   => 'theme-general-settings',
    ));
    acf_add_options_sub_page(array(
        'page_title'    => 'Single Page Sidebar Settings',
        'menu_title'    => 'Single Page Sidebar',
        'parent_slug'   => 'theme-general-settings',
    ));
}
//end option page


It will create like this look in your wordpress



Now go to Custom FIelds -> Field Groups

Create new field group and set it location by set rules. Means where to display this page. 

Go to Location section, click on first field and select "Option Page"

Select "is equal to"

Select "Theme Header Setting"



Here I set theme header. I want to set header data like logo, contact number, and other header details.


If you want to use it in your theme, you can use it anywhere. But you can not use in header.php and footer.php file directly. You have to include it first like this.

<?php get_header(); ?>

In header.php file, put this above line in top. After this code, you can start html code but this get_header() is must put.


If you want to use custom option page data in anywhere, you can use like this: 

<?php 
if ( get_field('logo','option') ) {
   $logo = get_field('logo','option');
} else {
   $logo = get_template_directory_uri().'/assets/logo-1.png';
}
?>
<?php if ( get_field('updates_text','option') ) { ?>
              <p><?php the_field('updates_text','option') ?></p>
<?php } ?>


Inshort "option" is must include in get_field or the_field function.


If you want to use any acf fields in particular template, use like this:-

 <?php if ( get_field('treck_offices') ) { ?>
                 <h3><?php  the_field('treck_offices'); ?></h3>
<?php } ?>


For repeater field use this code:-

<?php if (have_rows('benifit_list')) { ?> 
    <ul class="coaching-details__benefit-points list-unstyled">
       <?php while(have_rows('benifit_list')) : the_row(); ?>
           <li>
                 <div class="icon">
                         span class="icon-check"></span>
                 </div>
                <div class="text">
                   <p><?php the_sub_field('coaching_benifit_list'); ?></p>
                </div>
              </li>
        <?php endwhile; ?> 
     </ul>
<?php } ?>




No comments:

Post a Comment