ACF Option Pages: 6 Ideas to Get You Started

In this post, I'll go through 6 clever things you can accomplish, and impress someone with ACF(Advanced Custom Fields) option pages.

There are some short guides, and code provided on how to set fields up, and output them.

Getting Started with ACF Option Pages

First, you've got to add some code to your fuctnction.php file, code snippets plugin or use your custom plugin to enable the main options page & sub-pages.

if( function_exists('acf_add_options_page') ) { // check if ACF V5+ activated
	
    // holds our contact information, social media information
    acf_add_options_page(array(
		'page_title' 	=> 'Website Settings',
		'menu_title'	=> 'Website Settings',
		'menu_slug' 	=> 'website-settings',
		'capability'	=> 'edit_posts',
		'redirect'		=> false,
                'icon_url'      => 'dashicons-admin-settings'
	));
	
    // holds our tags, and only admin allows to access it
    acf_add_options_sub_page(array(
		'page_title' 	=> 'Website Tags',
		'menu_title'	=> 'Tags',
		'parent_slug'	=> 'website-settings',
                'capability'	=> 'administrator'
    
    ));
	
    // holds website styles
    acf_add_options_sub_page(array(
		'page_title' 	=> 'Website Styles',
		'menu_title'	=> 'Styles',
		'parent_slug'	=> 'website-settings',
	));

    // Settings page for Custom Post Type Cars
    acf_add_options_sub_page(array(
		'page_title' 	=> 'Settings',
		'menu_title'	=> 'Settings',
		'parent_slug'	=> 'edit.php?post_type=cars', // we have changed this slug, to match the CPT slug
	));
	
}

Now in your WordPress admin dashboard, you will see a new options menu "Website Options" with sub-menu items, and a sub-menu "Settings" in the Cars CPT, which you may want to use for your CPT or not.

They will be empty, and we will be adding custom fields to options pages, and then outputting them back on the website where required.

6 Ideas to get you started with ACF Option Pages

1. Add, and manage contact information

This is a great way to manage all of your contact information in one place and display it anywhere on your website.

With ACF, you can add fields for each piece of information you want to include, such as email addresses and phone numbers.

You can then have the contact information on any part of your website, for example, the same contact information in your header, menu, contact pages, individual pages, footer and anywhere else you would the contact information to be displayed.

Adding a new field group

We need to create a field group and assign them to the Website Settings options page.

This is done by going to Custom Fields > Add New.

Add a title, a new tab field, called "Contact Information", and underneath add the "Phone Number" number field, "Email Address" email field, and "Dealership Address" as a text field.

Assign it to "Options" which is equal to "Website Settings", and press the "Publish" button.

Head over to Website Settings and you will see new fields in your options with a tab "Contact Information".

Let's put in some information, and update it.

Outputting the values

Normally you would have to add a code something like to output the information for each piece of information you are going to provide:

if( get_field('phone_number', 'option') ):
    ?> <a class='coontact-info' hreff='<?php esc_html(the_field('phone_number', 'option')); ?>' target='__blank'>'<?php esc_html(the_field('phone_number', 'option')); ?></a> <?php
endif;

I am going to create a function inside the functions.php file or your custom plugin, and then call the fields where we require them with less code, so we don't have to rewrite the above code everywhere else where we need it.

We will be using PHP match expression which is supported with PHP 8+, to reduce the if, elseif and else code, instead, you can use PHP Switch Expression if you are running a lower version of PHP.

function acf_field($field_name, $field_type) {

    $get_field = get_field($field_name, 'option'); // Read field
    $the_field = esc_html(the_field($field_name, 'option')); // Output field, and format HTML characters to HTML code

    // field types
    $phone = "<a class='coontact-info' hreff='$the_field' target='__blank'>$the_field</a>";
    $text  = "<p class='contact-info'>$the_field</p>";

    if($get_field && $field_type) {
        $return_field = match ($field_type) {
            'link'     => $link,
            'text'      => $text,
            default     => null,
        };
        return $return_field;
    };

    //if there is no value added it will return nothing
    return null;
};

This is particularly handy if we want to add more field types there at a later stage and work with an organised/preferred workflow.

To simply return the values on the website you just use:

Phone Number: <?= acf_field('phone_number', 'link'); ?>

Email Address: <?= acf_field('email_address', 'link'); ?>

Address: <?= acf_field('dealship_address', 'link'); ?>

We can expect a result like this:

If you need the address field to break after the comma the way we added above in the text field, return back to custom fields and change the "New Lines" from "No Formatting" to "Automatically add <br>" on the address field.

2. Add, and manage social media information

Just like with the contact information, you can use ACF to manage all of your social media links in one place.

Your social media links will be managed in one place, and you can easily update them from the WordPress dashboard.

We will continue to use the "General Settings" group field in ACF custom fields, and add a new tab called "Social Links", and add social links to Facebook, Twitter, LinkedIn, Instagram, YouTube & Pinterest fields with an URL field type, add more social networks as required.

Now you will see in the "Website Settings" we have a new tab "Social Links" where we can add some links too, like the example below:

Then we need to add icons, I will download the SVG icons from SVG Repo for free, and add them to a plugin folder into assets/icons/social in my custom plugin, you can add those in your theme and also in the preferred location.

Now let's add additional code to our acf_field function.

Added new condition to avoid the previous contact information, to make sure it skips that part if we are working with social icons and links.

   if($get_field && $field_type && $field_type !== "social") {
        $return_field = match ($field_type) {
            'phone'     => $phone,
            'email'     => $email,
            'text'      => $text,
            default     => null,
        };
        return $return_field;
    };

Added some icon code with conditions to detect that we are going to be taking value for an icon, which has the URL of all icons which previously added to the plugin folder, escaping the URL for extra security, added $html variable with the output we want to see in the browser.

   // icon fields
    if ($the_field != null && $field_type == "social" ) {
        $icon_url = [
            "facebook"  => "assets/icons/social/facebook.svg",
            "twitter"   => "assets/icons/social/twitter.svg",
            "linkedin"  => "assets/icons/social/linkedin.svg",
            "instagram" => "assets/icons/social/instagram.svg",
            "youtube"   => "assets/icons/social/youtube.svg",
            "pinterest" => "assets/icons/social/pinterest.svg",
        ];
        $icon_dir           = plugins_url( $icon_url[$field_name], dirname(__FILE__) );
        $esc_link           = esc_url(get_field($field_name, 'option'));
        $html               = "<a class='social-icon' href='$esc_link' target='__blank'><img src='$icon_dir' alt='$field_name social icon' /></a>";
        return $html;
    }; 

Lastly, we can output all the social icons in the required places with a code something like this:

<div class="social-icons">
<?php 
echo acf_field('facebook', 'social'); 
echo acf_field('twitter', 'social'); 
echo acf_field('linkedin', 'social'); 
echo acf_field('instagram', 'social'); 
echo acf_field('youtube', 'social'); 
echo acf_field('pinterest', 'social'); 
?>
</div>

And that's the output, with clickable icons that bring users to the correct social media account page.

Some simple CSS is used to get the icon sizes and horizontal style.

.social-icons {
	display: flex;
	gap: 5px;
}

.social-icon {
	width: 40px;
	height: 40px;
}

3. Add, and manage tags

This is a great way to manage all of your tags such as Google Analytics, Facebook Pixel, Hotjar and more in one place and have them everywhere on your website, this saves from adding additional plugins, and bloat to your website.

Just be careful about who has access to the website, anyone with authorised access can add scripts that can harm your website, for that specific reason in Getting Started with ACF Option Pages I had added only admin access to do change scripts.

We will add a new "Group Field" called "Tags", and inside add a repeater called "Scripts", and inside sub-fields add "Script Name" text field which is used purely for admin reference, and another add "Script" with text area field.

Assign it to "Options Page" with "is equals to" "Website Tags".

Now you will see in the "Website Tags" options page new fields.

For example, you need to add a Google Tag Manager, and a Meta Pixel(a New name for Facebook Pixel) to the website, and add them to the head.

We need to insert all tags from here to our website document head which we can do with WordPress add_action() hook and then fire scripts into the head with the wp_head action.

I will call the function "acf_analytics", and run the foreach to irritate over the repeater field 'scripts', and include all sub-fields which is 'script'.

function acf_analytics () {
    if( have_rows('scripts', 'option') ):
        while( have_rows('scripts', 'option') ) : the_row();
            the_sub_field('script');
        endwhile;
    else :
    endif;
}

add_action( 'wp_head', 'acf_analytics', 10 );

That's it, now you can inspect your WordPress website code on the front end and you should see the tags inside your head:

4. Add Google event listeners

This is a great way to manage all of your Google event listeners such as clicks, pages, forms and more, and with some set-up and configurations, we can easily manage it after for specific clicks, and pages.

With ACF, you can add fields for each event you want to track, such as a name for reference, an ID of a specific page, and the code to paste.

An example is to add an event listener to s specific page

We will continue working in the "Group Field" called "Tags", and inside add a new tab "Tags", add "Events" tab, add a repeater called "Events", and inside sub-fields add the "Event Name" text field which is used purely for admin reference, add "Script", and add Page as a post ID with a return format "Post ID", and click "Update".

Now you will see a new tab "Events" inside "Website Tags", and let's add the tag to where we need to fire the script in the Thank You Page.

Lastly, we need to include some code that will only output the script on our specific page, and we will add it to the acf_analytics() a function that I created earlier.

function acf_analytics() {
    //code for global tags
    if( have_rows('scripts', 'option') ):
        while( have_rows('scripts', 'option') ) : the_row();
            the_sub_field('script');
        endwhile;
    else :
    endif;

    //code for the event listeners
    global $post;
    $page_id = $post->ID;

    if( have_rows('events', 'option') ):
        while( have_rows('events', 'option') ) : the_row();
            $page_id_acf =  get_sub_field('page');
            if ( $page_id_acf == $page_id ):
                echo "\n";
                the_sub_field('script');
                echo "\n";
            endif;
        endwhile;
    else :
    endif;
}

add_action( 'wp_head', 'acf_analytics', 10 );

Now on your page, where you want the tag to run you can check it with the page source/inspect tool and will see that that specific page has the required script added to it, while others don't.

5. Change styles

You can use ACF to change the styles of your website dynamically.

This is a great way to manage all of your style settings in one place, and you can easily update any setting from the ACF backend.

Some examples of style settings you can manage with ACF include logos, colours, fonts, sizes, etc.

You can also use ACF to change the styles of specific elements on your website, such as the header, footer, sidebar, etc.

The possibilities are endless!

In order to do this, you will need to add a field for each style set you want to include, and then add some code to your website.

Let's add for example a logo, and main website colours, by creating a new group field with ACF, calling it "Global Styles", and assigning it to the "Website Styles" options page.

Inside the "Global Styles", will include the "Website Logo" image field with the "URL Output", and "Main Colour" with a colour picker field, setting them both to 50% width.

In your newly created "Website Styles" options page, add a logo, and set a new main colour.

Format the logo in acf_field() function for the output with some more code:

// Escape the URL
$img_field = esc_url(get_field($field_name, 'option')); // Ensure that we only using an URL for the img

//Asign a new variable with the logo html code
$logo  = "<a class='logo' href='$img_field' target='__blank'><img src='$img_field' alt='Pluto Cars Logo' /></a>";

// add new alteranative to the match experessions
'logo'      => $logo, 
 'number'    => $the_field,

The complete code looks like this:

function acf_field($field_name, $field_type) {

    $get_field      = get_field($field_name, 'option'); // Read field
    $the_field      = esc_html(get_field($field_name, 'option')); // Output field, and format HTML characters to HTML code
    $img_field      = esc_url(get_field($field_name, 'option')); // Ensure that we only using an URL for the img

    // field types
    $phone  = "<a class='contact-info' hreff='tel:$the_field' target='__blank'>$the_field</a>";
    $email  = "<a class='contact-info' hreff='mailto:$the_field' target='__blank'>$the_field</a>";
    $text   = "<p class='contact-info'>$the_field</p>";
    $logo   = "<a class='logo' href='$img_field' target='__blank'><img src='$img_field' alt='Pluto Cars Logo' /></a>";

    if($get_field && $field_type && $field_type !== "social") {
        $return_field = match ($field_type) {
            'phone'     => $phone,
            'email'     => $email,
            'text'      => $text,
            'logo'      => $logo,
            'number'    => $the_field,
            default     => null,
        };
        return $return_field;
    };

    // icon fields
    if ($the_field != null && $field_type == "social" ) {
        $icon_url = [
            "facebook"  => "assets/icons/social/facebook.svg",
            "twitter"   => "assets/icons/social/twitter.svg",
            "linkedin"  => "assets/icons/social/linkedin.svg",
            "instagram" => "assets/icons/social/instagram.svg",
            "youtube"   => "assets/icons/social/youtube.svg",
            "pinterest" => "assets/icons/social/pinterest.svg",
        ];
        $icon_dir           = plugins_url( $icon_url[$field_name], dirname(__FILE__) );
        $esc_link           = esc_url(get_field($field_name, 'option'));
        $html               = "<a class='social-icon' href='$esc_link' target='__blank'><img src='$icon_dir' alt='$field_name social icon' /></a>";
        return $html;
    }; 

    // do nothing
};

Now we can call the logo, anywhere on the website with the following code:

<?= acf_field('website_logo', 'logo'); ?>

And the main colour we can add somewhere into inline style for example as background menu colour, with the following code:

<?= acf_field('main_color', 'number'); ?>

An example of the result:

6. Add settings to custom post types

You can use ACF to add settings to any custom post type you create.

This is a great way to manage all of your post-type settings in one place, and you can easily update any setting from the ACF backend.

Using the settings that you need to include the same text across the specific custom post type allows everyone to edit the text easily, for example, a call to action in a specific area.

Let's add a new "CPT Settings" field group with a "CTA Text", and assign it to our CPT settings page, and publish it.

In the CPT Settings Page, we can add some random text and publish it.

To output anywhere in your CPT template you can use the following code:

<?= acf_field('cta_text', 'text'); ?>

And you should have a result something like this:

Few more comments

There are more possibilities you can do with the ACF Options Pages, for example creating a global popup across the website, with the function to activate it, and deactivate it, duration, text inside of it with a CTA link, and much more.

Let us know if you used the ACF options page for something else.