July 11, 2019

WordPress Theme Options Page without Settings API

WordPress provides us a feature to add custom pages to different sections like , theme menu , settings menu, user menu, or a custom page in main menu. Creating a Custom Theme Options page is useful when a specific data is required globally throughout the website like , website's contact info, social links etc.

Wordpress Theme Options Page without Settings API

WordPress is a free open source CMS (Content Management System) which was first designed for blogging, but it provided features like plugins architecture and theme template system to extend functionality of website and switch between different layouts. Since it was open source 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.

Today we will create custom theme options page in simplest and easiest way without using WordPress settings API. Lets see the list of top level menu pages we can add in WordPress

  • add_comments_page
  • add_links_page
  • add_management_page
  • add_media_page
  • add_options_page
  • add_pages_page
  • add_posts_page
  • add_plugin_page
  • add_theme_page
  • add_users_page

We will use add_theme_page for our custom page under theme menu. All of these pages allow use of same parameters.

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

Now lets create content for our theme options page. We shall set theme options variable global to access it anywhere without calling get_option function every time we need it, also we are going to save our options as one array so that its available in one call. Create a PHP file theme-options.php in your theme directory.


theme-options.php

<?php
// Add themes option page to "Theme" 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', 'init_theme_options');
}

// Function that contains the form content for theme options page
function init_theme_options(): void
{
    esc_url(add_query_arg(['page' => 'theme-options','_wpnonce' => wp_create_nonce('theme_options')]),
        admin_url('options.php'));

    // 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
}

Now lets add our page in functions.php and set our theme options variable before we include theme options page.

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

Home