How to Create Options Page in WordPress Using Free ACF Advanced Custom Fields Plugins?
Adding Option Page on Advanced Custom Fields is not a free feature. But following this tutorial, you will able to make a options page completely for free. This technique will help you making the “Site Settings” on your ACF fields group and you can use the option to display any kind of data.
If you know how to display data on your page using ACF, you can follow this tutorial. Because, you must need basic knowledge about Advanced Custom Fields first to follow this tutorial.
I assume you know the basic use of ACF and stuck with the options page only. For understanding the lesson, you must need to watch whole video carefully. Because, all the steps are important.
Here is the code:
Code for functions.php
// Disabling Gutenberg Editor
add_filter("use_block_editor_for_post_type", "disable_gutenberg_editor");
function disable_gutenberg_editor()
{
return false;
}
// Adding the Options Page in Admin Menu
add_action( 'admin_menu', 'linked_url' );
function linked_url() {
add_menu_page( 'linked_url', 'Options', 'read', 'post.php?post=8&action=edit', '', 'dashicons-admin-generic', 90 );
}
//Hiding the Options Page
add_filter( 'parse_query', 'exclude_pages_from_admin' );
function exclude_pages_from_admin($query) {
global $pagenow,$post_type;
if (is_admin() && $pagenow=='edit.php' && $post_type =='page') {
$settings_page = get_page_by_path("options",NULL,"page")->ID;
$query->query_vars['post__not_in'] = array($settings_page);
}
}
Code for frontend display
<div class="header-social">
<?php
$args = array(
'name' => 'options',
'post_type' => 'page'
);
$query = new WP_Query($args);
while($query->have_posts()){
$query->the_post();
?>
<?php if( have_rows('social_links') ): ?>
<ul class="social-link-class">
<?php while( have_rows('social_links') ): the_row();
$social_text = get_sub_field('social_text');
$social_link = get_sub_field('social_link');
?>
<li>
<a href="<?php echo $social_link; ?>"><?php echo $social_text;?></a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php
}
?>
</div>
Disclosure: We are affiliated with several hosting provider, WordPress Theme Developer & plugins developers. We may earn commission if you choose to purchase mentioned product at no extra cost to you!.
