July 11, 2019

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 Theme Options Page without Settings API

WordPress is a free open source CMS (Content Management System) which was first developed as blogging platform. Over the years WordPress improved and added support for plugins with a plugin architecture and theme template system to extend functionality of website and switch between different layouts. 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 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 pages hooks WordPress supports:

  • 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_plugin_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.

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 provided 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 function "theme_options_page".
  • Add hook "add_theme_page" in that 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 function we provided which is "render_theme_options".
  • Add bootstrap CSS and JS using "wp_enqueue_style" and "wp_enqueue_script". 
  • 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="<?=$theme_options['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. You can retrieve theme options data using the function get_option().

global $theme_options; // Set theme options global
$theme_options = get_option('theme_options'); // Get theme options
include('theme-options.php');
Theme Options Page
Home