Creating custom theme options in WordPress involves a combination of coding and utilizing the WordPress Theme Customization API. Below, I’ll provide a step-by-step guide to help you create custom theme options for your WordPress theme:

1. Create a Theme Options Page

First, you need to create a theme options page where users can customize settings. Create a file named theme-options.php and include it in your theme’s directory.

// theme-options.php

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

function theme_options_init() {
    add_settings_section('general_section', 'General Settings', '__return_false', 'theme_options');

    add_settings_field('site_title', 'Site Title', 'site_title_callback', 'theme_options', 'general_section');
    register_setting('theme_options', 'site_title');
}

function site_title_callback() {
    $value = get_option('site_title');
    echo '<input type="text" name="site_title" value="' . esc_attr($value) . '" />';
}

add_action('admin_menu', 'theme_options_menu');
function theme_options_menu() {
    add_menu_page('Theme Options', 'Theme Options', 'manage_options', 'theme_options', 'theme_options_page');
    add_action('admin_init', 'theme_options_init');
}

2. Enqueue Styles and Scripts

In your theme’s functions.php file, enqueue the necessary styles and scripts for the theme options page.

// functions.php

function enqueue_theme_options_scripts() {
    wp_enqueue_style('theme-options', get_template_directory_uri() . '/theme-options.css');
}

add_action('admin_enqueue_scripts', 'enqueue_theme_options_scripts');

3. Style the Theme Options Page

Create a theme-options.css file in your theme directory and add your styles.

4. Display Custom Options in the Theme

Use the options you created in your theme templates.

// In your theme templates
$site_title = get_option('site_title');
echo '<h1>' . esc_html($site_title) . '</h1>';

Important Notes:

  • Make sure to customize the code according to your specific needs.
  • Always sanitize and validate user inputs to ensure security.
  • Document your code well for future reference.

This is a basic example, and you can expand it based on your theme’s requirements.