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) which was first developed as blogging platform. WordPress offers to extend the functionality of website with support for plugins, built-in hooks and filters allowing to switch between different layouts with custom theme support, and a lot more. Since it was open source project and allowed developers to create their own plugins and themes. It has gained much popularity over past few years and has become the mostly 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 website footer.

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

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

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

How to Create a Theme Options Page in Admin Menu 

We will add an admin menu page without using Settings API or any plugin. We will save data in options table in database. We will render regular HTML form to save and display our data in form fields. We use add_theme_page hook to add a page to 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 title of page.
• menu_title: String to show in menu.
• capability: The capability of user required to access this page.
• menu_slug: A unique slug for this menu to identify.
• callback_function: A function to render HTML content of page.

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

• Add a hook for admin_menu with theme_options_page function.
• Add hook add_theme_page in this function to add a page under "Appearance" menu.
• Add the parameters for "Page title", "Menu title", "Capability", "Slug" and "Callback function".
• Render HTML form in callback render_theme_options function we provided.
• Add bootstrap CSS and JS using 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 global variable and add theme-options.php to 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');