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 } ?>

Wordpress create theme option

 Follow this code to create theme option in your theme.

functions.php:

//create theme option
function immo_add_admin_page(){
add_menu_page( 'THeme Option', 'immo88', 'manage_options', 'main_immo', 'immo_theme_create_page', '', 110 );
//sub pages
add_submenu_page( 'main_immo', 'Immo Theme Option', 'General', 'manage_options', 'main_immo', 'immo_theme_create_page' );
add_submenu_page( 'main_immo', 'Immo CSS Option', 'Custom CSS', 'manage_options', 'main_immo_css', 'immo_setting_page' );
add_submenu_page( 'main_immo', 'Immo CSS Option', 'Social Media', 'manage_options', 'main_immo_socialmedia', 'social_media' );
add_action('admin_init','immo_custom_settings');
}
add_action('admin_menu', 'immo_add_admin_page');
function immo_custom_settings(){
register_setting('immo-settings-group', 'first_name');
register_setting('immo-settings-group', 'last_name');
//register_setting('immo-settings-group', 'twitter_handler', 'immo_sanitize_twitter_handler');
register_setting('immo-settings-group', 'immo_handler');
register_setting('immo-settings-group', 'facebook_handler');
register_setting('immo-settings-group', 'linkedin_handler');
register_setting('immo-settings-group', 'insta_handler');
register_setting('immo-settings-group', 'phone_handler');
register_setting('immo-settings-group', 'emailid_handler');
add_settings_section( 'immo-sidebar-options', 'Social Media', 'immo_sidebar_options', 'main_immo' );
add_settings_field( 'sidebar-name', 'FullName', 'immo_sidebar_name', 'main_immo', 'immo-sidebar-options' );
//add_settings_field( 'sidebar-twitter', 'Twitter', 'immo_sidebar_twitter', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-immo', 'Immo', 'immo_sidebar_immo', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-facebook', 'Facebook', 'immo_sidebar_facebook', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-linkedin', 'LinkedIn', 'immo_sidebar_linkedin', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-insta', 'Instagram', 'immo_sidebar_insta', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-phone', 'Phone', 'immo_sidebar_phone', 'main_immo', 'immo-sidebar-options' );
add_settings_field( 'sidebar-emailid', 'Emailid', 'immo_sidebar_emailid', 'main_immo', 'immo-sidebar-options' );
register_setting('immo-settings-general-group', 'logo_image');
//add_settings_field( 'sidebar-logo', 'Logo', 'immo_sidebar_logo', 'main_immo', 'immo-sidebar-options' );
}
function immo_sidebar_options(){
echo "These data will display in header and footer";
}
function immo_sidebar_name(){
$firstname = esc_attr(get_option( 'first_name' ));
$lastname = esc_attr(get_option( 'last_name' ));
echo '<input type="text" name="first_name" value="'.$firstname.'" placeholder="First Name here" /> <input type="text" name="last_name" value="'.$lastname.'" placeholder="Last Name here" /> ';
}
// function immo_sidebar_twitter(){
// $twitter = esc_attr(get_option( 'twitter_handler' ));
// echo '<input type="text" name="twitter_handler" value="'.$twitter.'" placeholder="Twitter" />  <p class="description">Input your username without @ character.</p>';
// }
function immo_sidebar_immo(){
$immo = esc_attr(get_option( 'immo_handler' ));
echo '<input type="text" name="immo_handler" value="'.$immo.'" placeholder="immo" /> ';
}
function immo_sidebar_facebook(){
$facebook = esc_attr(get_option( 'facebook_handler' ));
echo '<input type="text" name="facebook_handler" value="'.$facebook.'" placeholder="Fabebook" />  ';
}
function immo_sidebar_linkedin(){
$linkedin = esc_attr(get_option( 'linkedin_handler' ));
echo '<input type="text" name="linkedin_handler" value="'.$linkedin.'" placeholder="LinkedIn" />  ';
}
function immo_sidebar_insta(){
$insta = esc_attr(get_option( 'insta_handler' ));
echo '<input type="text" name="insta_handler" value="'.$insta.'" placeholder="Instagram" />  ';
}
function immo_sidebar_phone(){
$phone = esc_attr(get_option( 'phone_handler' ));
echo '<input type="text" name="phone_handler" value="'.$phone.'" placeholder="Phone number" />  ';
}
function immo_sidebar_emailid(){
$emailid = esc_attr(get_option( 'emailid_handler' ));
echo '<input type="email" name="emailid_handler" value="'.$emailid.'" placeholder="Email ID" />  ';
}
// function immo_sidebar_logo(){
// $logo = esc_attr(get_option( 'logo_image' ));
// echo '<input type="file" name="logo_image" value="'.$logo.'" placeholder="Logo" />  <p class="description">Upload logo here.</p>';
// }
//sanitize
function immo_sanitize_twitter_handler($input){
$output = sanitize_text_field($input);
$output = str_replace('@','',$output);
return $output;
}
function immo_theme_create_page(){
require_once(get_template_directory().'/inc/template/immo-admin.php');
}
function immo_setting_page(){
//echo "Immo custom css";
require_once(get_template_directory().'/inc/template/immo-admin-css.php');
}
function social_media(){
//echo "Social Media Set here";
require_once(get_template_directory().'/inc/template/immo-admin-socialmedia.php');
}

***********************

create pages like this:inc/template/immo-admin.php, inc/template/immo-admin-css.php

now create admin page.

file path : /inc/template/immo-admin.php:-

<h1>Immo Theme Options</h1>

<h3 class="title">Manage General Options</h3>

<form action="" method="post" accept-charset="utf-8">

general page

</form>

<?php settings_errors(); ?>

<form action="options.php" method="post" accept-charset="utf-8">

<?php settings_fields('immo-settings-general-group'); ?>

<?php do_settings_sections('main_immo');?>

<?php submit_button(); ?>

</form>

*****************************