YogeshChauhan . com

WordPress: How to setup and get values from an ACF options page?

in WordPress on May 18, 2021

Options page is only available via ACF PRO (ACF v5), or the options page add-on (ACF v4)

Options Page

When you want to add some fields that are globally accessible, meaning they are not limited to a page template, then this Options page becomes very handy. You can have tons of different fields to make your header and footer unique and beautiful.

Data saved in options fields is saved into wp_options table, making it accessible globally.

How to create an Options Page?

This is just a basic Options page creation code without passing any parameters.

Add this code to your functions.php file to to create an Options page.


//functions.php

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page();
	
}

Once you add that code and save your functions.php file, the default options page will show up on your wp-admin sidebar.

Create a customized options page

You can also create a bit advanced Options page with children.


//functions.php

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',
	));
	
}

Get values from an options page

You can use all WordPress template functions like get_field or the_field with Options page to get the values from a specific field, but with a second parameter. Which is just like passing a $post_id parameter to get metadata from a specific post object.

The second parameter required is a string with a word ‘option’ or ‘options’.

You can create multiple options page but the value retrieval is same for all of them. You still need to use the word ‘option’ or ‘options’ as the second parameter.

Give the gift of Audible

Display a field

Usually you’d get the value like this from any ACF field from a template page:



<p>
  <?php the_field('field_name'); ?>
</p>


So, all we need to do is to pass a second parameter to retrieve a value from an options page.



<p>
  <?php the_field('field_name', 'option'); ?>
</p>


Retrieve a field



<?php
$variable = get_field('field_name', 'option');
// do something with $variable
?>


Display a sub field

To get a subfield, you don’t need to pass the second parameter inside the have_rows loop.



<?php if( have_rows('repeater', 'option') ): ?>

    <ul>

    <?php while( have_rows('repeater', 'option') ): the_row(); ?>

        <li><?php the_sub_field('title'); ?></li>

    <?php endwhile; ?>

    </ul>

<?php endif; ?>


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to disable right click and drag and drop of images using jQuery?jQueryWhat’s a page re-rendering in React?ReactHow to apply style only to first child and/or only to children other than the first child?CSSTackle Accessibility in React with JSXReactHow to create a simple tab interaction using CSS?CSSHow to show confirmation alerts with OK and cancel buttons using Swift 5?Swift