Creating a WordPress Theme Options Page Without a Plugin

IMPORTANT: Before making any changes to your site’s code, it is highly recommended that you backup your website. This is especially important if you are a beginner and unfamiliar with editing code.

Creating a theme options page in WordPress allows you to easily customize various aspects of your website without having to directly edit the theme files. While there are many plugins available that can help you achieve this, you can also create a theme options page without relying on any third-party plugins. In this article, we will guide you through the process of creating a theme options page using clean PHP code.

Step 1: Setting Up the Theme Options Page

To begin, open your theme’s functions.php file and add the following code:

<?php
function wpnotch_theme_options_page() {
    add_menu_page(
        'Theme Options',
        'Theme Options',
        'manage_options',
        'theme-options',
        'wpnotch_render_theme_options_page',
        'dashicons-admin-generic',
        99
    );
}
add_action( 'admin_menu', 'wpnotch_theme_options_page' );
?>

In the above code, we have defined a function called wpnotch_theme_options_page which adds a menu page titled “Theme Options” to the WordPress admin menu. The function add_menu_page is used to create the menu page, specify the page title, capability required to access the page, callback function to render the page content, icon for the menu item, and the position of the menu item.

Step 2: Rendering the Theme Options Page

Next, add the following code to your functions.php file:

<?php
function wpnotch_render_theme_options_page() {
    ?>
    <div class="wrap">
        <h1>Theme Options</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields( 'wpnotch_theme_options' );
            do_settings_sections( 'wpnotch_theme_options' );
            submit_button();
            ?>
        </form>
    </div>
    <?php
}
?>

In the above code, we have defined a function called wpnotch_render_theme_options_page that is responsible for rendering the content of the theme options page. Inside this function, we have a HTML form that will be used to save the options, as well as the necessary functions settings_fields, do_settings_sections, and submit_button which handle the form submission and output the necessary hidden fields.

Step 3: Registering the Theme Options

Now, let’s register the theme options. Add the following code to your functions.php file:

<?php
function wpnotch_register_theme_options() {
    register_setting(
        'wpnotch_theme_options',
        'wpnotch_theme_options',
        'wpnotch_sanitize_theme_options'
    );

    add_settings_section(
        'wpnotch_general_section',
        'General Options',
        'wpnotch_render_general_section',
        'wpnotch_theme_options'
    );

    add_settings_field(
        'wpnotch_logo',
        'Logo',
        'wpnotch_render_logo_field',
        'wpnotch_theme_options',
        'wpnotch_general_section'
    );
}
add_action( 'admin_init', 'wpnotch_register_theme_options' );
?>

In the above code, we have defined a function called wpnotch_register_theme_options which is responsible for registering the theme options. We use the register_setting function to register the theme options and specify a callback function called wpnotch_sanitize_theme_options to sanitize the input data.

We also use the add_settings_section function to add a section to the theme options page. In this example, we have added a “General Options” section. The add_settings_field function is used to add individual fields to the section. In this example, we have added a “Logo” field.

Step 4: Sanitizing the Theme Options

Now, let’s add the code to sanitize the theme options. Add the following code to your functions.php file:

<?php
function wpnotch_sanitize_theme_options( $input ) {
    $sanitized_input = array();

    foreach ( $input as $key => $value ) {
        if ( isset( $input[ $key ] ) ) {
            $sanitized_input[ $key ] = sanitize_text_field( $input[ $key ] );
        }
    }

    return $sanitized_input;
}
?>

In the above code, we have defined a function called wpnotch_sanitize_theme_options which is responsible for sanitizing the input data. In this example, we are using the sanitize_text_field function to sanitize the text fields.

Step 5: Rendering the Theme Option Fields

Finally, let’s add the code to render the theme option fields. Add the following code to your functions.php file:

<?php
function wpnotch_render_general_section() {
    echo '<p>General options description goes here.</p>';
}

function wpnotch_render_logo_field() {
    $options = get_option( 'wpnotch_theme_options' );
    $logo = isset( $options['wpnotch_logo'] ) ? $options['wpnotch_logo'] : '';

    echo '<input type="text" name="wpnotch_theme_options[wpnotch_logo]" value="' . esc_attr( $logo ) . '">';
}
?>

In the above code, we have defined two functions: wpnotch_render_general_section and wpnotch_render_logo_field. The wpnotch_render_general_section function is responsible for rendering the description of the general options section, while the wpnotch_render_logo_field function is responsible for rendering the logo field.

That’s it! You have successfully created a theme options page without relying on any plugins. You can now customize the options and fields according to your requirements. Remember to test your code thoroughly before deploying it to a live website.

Creating a theme options page using clean PHP code gives you more control over the customization of your WordPress website. It also allows you to avoid relying on third-party plugins, which can sometimes introduce additional complexity and potential vulnerabilities. By following the steps outlined in this article, you can create a theme options page that is both secure and easy to use.