New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Create Custom Theme Options with WordPress ACF

Are you looking to build a WordPress website and customize its theme options using WordPress ACF? In this tutorial, I will guide you step-by-step on how to design custom theme options for your WordPress website. By following these steps, you can easily create a unique and personalized website without touching any code.

Let’s learn how to design custom theme options with WordPress ACF for your WordPress website.

Step 1: Register a New Page in the WordPress Dashboard

1. Register a new page in the WordPress dashboard by adding code to the functions.php file or creating a sub-menu.

if (function_exists('acf_add_options_page')) {
	acf_add_options_page(array(
		'page_title' => 'Theme Options',
		'menu_title' => 'Theme Options',
		'show_in_graphql' => true,
		'icon_url' => 'dashicons-menu'
	));
}

Alternatively, you can create a sub-menu. Here’s how to do that:

if (function_exists('acf_add_options_page')) {
	acf_add_options_sub_page(array(
		'page_title' => 'Theme Options',
		'menu_title' => 'Theme Options',
		'parent_slug'   => 'themes.php',
	));
}

2. Create a new Field Group named “Theme Options” to manage the custom theme options.

Create a new field groups for custom theme options with WordPress ACF
Create new field groups for custom theme options with WordPress ACF

3. Refresh the dashboard page and check the Appearance menu to verify the presence of the custom theme options page.

Register as Sub-menu inside Appearance
Register as Sub-menu inside Appearance

Step 2: Create Tabs for Grouping Options

1. Create tabs for grouping the custom theme options, such as “General,” “Header,” and “Footer.”

Create Tabs for Grouping Options
Create Tabs for Grouping Options

2. Use the Group field inside each Tab-field without a label to create nested tabs.

To make nested tabs work, we'll need to put the tabs inside the "Theme Options" field group. Here's how to do that:
Nested Tab using Group

Step 3: Create Fields for Each Tab

1. Create fields for each tab, such as a text field for the “Copyright” tab and a repeater field for the “Socials” tab in the “Footer” section.

Create Copyright tab with Copyright Text
Create a Copyright tab with Copyright Text
Create a Socials tab with Repeater Social Field

2. Set the placement of the nested tab as top-aligned for a better visual layout.

3. Verify the appearance of the custom theme options with the created fields.

Results
Results

Conclusion

To design custom theme options with WordPress ACF, you need to register a new page, create tabs for grouping options, and add fields for each tab. By following these steps, you can easily customize the look and functionality of your WordPress website without coding knowledge. Take your website to the next level by creating a custom theme that aligns with your unique style and brand.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment