Wordpress Theme Options Page without Settings API

Worpress gives 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 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 everytime 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 Theme Options Page to Theme Menu -----------//
add_action("admin_menu", "theme_options_page");
function theme_options_page() {
    add_theme_page("Theme Options", "Theme Options", "manage_options", "theme-options", "init_theme_options");
}
//---------------- Function that contains the form content for theme options page ----------------//
function init_theme_options(){

    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>Facebook</label>
                    <input class="form-control" name="theme_options[facebook_link]" value="<?=@$theme_options['facebook_link']; ?>" />
                </div>
                <div class="col-sm-6">
                    <label>Twitter</label>
                    <input class="form-control" name="theme_options[twitter_link]" value="<?=@$theme_options['twitter_link']; ?>" />
                </div>
                <div class="col-sm-6">
                    <label>Linked In</label>
                    <input class="form-control" name="theme_options[linkedin_link]" value="<?=@$theme_options['linkedin_link']; ?>" />
                </div>
                <div class="col-sm-6">
                    <label>Pinterest</label>
                    <input class="form-control" name="theme_options[pinterest_link]" value="<?=@$theme_options['pinterest_link']; ?>" />
                </div>
            </div>
            <?php submit_button("Save Theme Options");?>
    </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");