WordPress Theme Options Page in Admin Menu

WordPress comes with a feature to add a custom page in WordPress admin menu for various purposes we might need a custom page for. Creating a custom theme settings page can be useful when you want to store some data that is available and accessible throughout the website.

WordPress is a free, open-source CMS (Content Management System) that was first developed as a blogging platform. WordPress offers to extend the functionality of websites with support for plugins, built-in hooks, and filters allowing users to switch between different layouts with custom theme support, and a lot more. Since it was an open source project and allowed developers to create their own plugins and themes. It has gained much popularity over the past few years and has become the most used Content Management System.

Why Create a Custom Theme Options Page?

You will need to create an admin menu page in WordPress when you want to save some data, like social links, contact number, address location or social links for the website footer.

In this post, we will create an admin options page for our theme options in the simplest and easiest way without using WordPress Settings API. Let's take a look at the list of other menu page hooks WordPress offers:

• add_comments_page: Adds a page under the "Comments" menu.
• add_dashboard_page: Adds a page under the "Dashboard" menu.
  
• add_links_page: Adds a page under the "Links" menu.
• add_management_page: Adds a page under the "Tools" menu.
• add_media_page: Adds a page under the "Media" menu.
• add_options_page: Adds a page under the "Settings" menu.
• add_pages_page: Adds a page under the "Pages" menu.
• add_plugins_page: Adds a page under the "Plugins" menu.
  
• add_posts_page: Adds a page under the "Posts" menu.
• add_theme_page: Adds a page under the "Appearance" menu.
• add_users_page: Adds a page under the "User" menu.

For more details about each page, you can visit WordPress's Administration Menus page.

How to Create a Theme Options Page in The Admin Menu 

We will add an admin menu page without using the Settings API or any plugin. We will save data in the options table in the database. We will render an HTML form to save and display our data in form fields. We use the add_theme_page hook to add a page to the Appearance menu in WordPress admin sidebar.

add_theme_page('page_title', 'menu_title', 'capability', 'menu_slug', 'callback_function');

Understand the function parameters:

• page_title: String to show the title of page.
• menu_title: String to show in menu.
• capability: The capability of the user required to access this page.
• menu_slug: A unique slug for this menu to identify.
• callback_function: A function to render the HTML content of the page.

We will create a theme-options.php file that will contain code to add the page to the sidebar. We will include this file in the theme's functions.php file. Steps to add a sub-menu page under the "Appearance" main menu.

• Add a hook to admin_menu with the theme_options_page function.
• Add a hook to add_theme_page in this function to add a page under the "Appearance" menu.
• Add the parameters for "Page title", "Menu title", "Capability", "Slug" and "Callback function".
• Render the HTML form in the callback render_theme_options function we provided.
• Add bootstrap CSS and JS using the wp_enqueue_style and wp_enqueue_script hooks.
• Add wp_nonce_field to our form.

theme-options.php

<?php
// Add themes option page to "Appearance" menu item
add_action('admin_menu', 'theme_options_page');
function theme_options_page(): void
{
    add_theme_page(__('Theme Options', 'text-domain'), __('Theme Options', 'text-domain'), 'manage_options', 'theme-options', 'render_theme_options');
}

// Function that contains the form content for theme options page
function render_theme_options(): void
{
    // Adding Bootstrap for our form styling
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/path-to-bootstrap-directory/css/bootstrap.min.css');
    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/path-to-bootstrap-directory/js/bootstrap.min.js');
    ?>
    <div class="wrap">
        <h1>Theme Options</h1>
        <form method="post" action="options.php" class="form form-horizontal">
            <?php
            wp_nonce_field('update-options');
            global $theme_options;
            ?>
            <input type="hidden" name="action" value="update"/>
            <input type="hidden" name="page_options" value="theme_options"/>
            <div class="form-group">

                <div class="col-sm-6">
                    <label><?php _e('Facebook', 'text-domain'); ?></label>
                    <input class="form-control" name="theme_options[facebook_link]"
                           value="<?= $theme_options['facebook_link'] ?? null; ?>"/>
                </div>
                <div class="col-sm-6">
                    <label><?php _e('Twitter', 'text-domain'); ?></label>
                    <input class="form-control" name="theme_options[twitter_link]"
                           value="<?= $theme_options['twitter_link'] ?? null; ?>"/>
                </div>
                <div class="col-sm-6">
                    <label><?php _e('LinkedIn', 'text-domain'); ?></label>
                    <input class="form-control" name="theme_options[linkedin_link]"
                           value="<?= $theme_options['linkedin_link'] ?? null; ?>"/>
                </div>
                <div class="col-sm-6">
                    <label><?php _e('Pinterest', 'text-domain'); ?></label>
                    <input class="form-control" name="theme_options[pinterest_link]"
                           value="<?= ['pinterest_link'] ?? null; ?>"/>
                </div>
            </div>
            <?php submit_button(__('Save Theme Options', 'text-domain')); ?>
        </form>
    </div>
    <?php
}

Set $theme_options as a global variable and add theme-options.php to the functions.php file. You can retrieve theme options data using the get_option() function.

global $theme_options; // Set theme options global

$theme_options = get_option('theme_options'); // Get theme options

include('theme-options.php');