Add Custom Theme Options in WordPress Easily

How to add custom theme options in wordpressCreate custom theme options page wordpressWordpress custom theme options tutorialAdd options to wordpress theme customizerWordpress theme options page creationCustomize wordpress theme optionsWordpress settings api theme optionsCreate theme options panel wordpressAdd custom options to wordpress themeWordpress custom theme settings page

Explanation

To add custom theme options to your WordPress site, you're essentially creating a new settings page in the WordPress admin area. Here's a simple breakdown of how this works:

Add a Menu Page: The code uses a function to add a new page to the WordPress admin menu. This page is titled "Custom Theme Options" and can be accessed by users with the right permissions.
Display the Options Page: A callback function is used to display the content of this new page. It includes a form where users can input their settings.
Register Settings: The code registers a new settings group and a text field. This is where the actual data input by users will be stored.
Sanitize Input: Before saving any data, the input is sanitized to ensure it's safe and clean. This helps prevent any unwanted code from being saved.

When you implement this code, you'll have a new "Theme Options" page in your WordPress admin area. Here, you can add more fields and sections as needed to customize your theme further. Just remember to keep your inputs sanitized for security!

Code
<?php
// Hook to add a custom theme options page to the WordPress admin menu
add_action('admin_menu', 'wp_dudecom_add_theme_options_page');

function wp_dudecom_add_theme_options_page() {
    add_menu_page(
        'Custom Theme Options', // Page title
        'Theme Options',        // Menu title
        'manage_options',       // Capability
        'wp-dudecom-theme-options', // Menu slug
        'wp_dudecom_theme_options_page', // Callback function
        'dashicons-admin-generic', // Icon
        61 // Position
    );
}

// Callback function to display the theme options page
function wp_dudecom_theme_options_page() {
    ?>
    <div class="wrap">
        <h1>Custom Theme Options</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('wp_dudecom_theme_options_group');
            do_settings_sections('wp-dudecom-theme-options');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// Hook to register settings, sections, and fields
add_action('admin_init', 'wp_dudecom_register_theme_options');

function wp_dudecom_register_theme_options() {
    register_setting('wp_dudecom_theme_options_group', 'wp_dudecom_theme_options', 'wp_dudecom_sanitize_options');

    add_settings_section(
        'wp_dudecom_main_section',
        'Main Settings',
        'wp_dudecom_main_section_callback',
        'wp-dudecom-theme-options'
    );

    add_settings_field(
        'wp_dudecom_text_field',
        'Custom Text Field',
        'wp_dudecom_text_field_callback',
        'wp-dudecom-theme-options',
        'wp_dudecom_main_section'
    );
}

// Callback function for the main section
function wp_dudecom_main_section_callback() {
    echo '<p>Main settings for the theme.</p>';
}

// Callback function for the text field
function wp_dudecom_text_field_callback() {
    $options = get_option('wp_dudecom_theme_options');
    ?>
    <input type="text" name="wp_dudecom_theme_options[wp_dudecom_text_field]" value="<?php echo isset($options['wp_dudecom_text_field']) ? esc_attr($options['wp_dudecom_text_field']) : ''; ?>" />
    <?php
}

// Sanitize options before saving
function wp_dudecom_sanitize_options($input) {
    $sanitized_input = array();
    if (isset($input['wp_dudecom_text_field'])) {
        $sanitized_input['wp_dudecom_text_field'] = sanitize_text_field($input['wp_dudecom_text_field']);
    }
    return $sanitized_input;
}
?>

Instructions

File Location: Add the provided code to your theme's functions.php file or a custom plugin file.

Prerequisites: Ensure you have access to your WordPress theme files and the ability to edit them. No additional plugins are required.

Implementation Steps:

Access Your Theme Files:
- Log in to your WordPress admin dashboard.
- Navigate to Appearance > Theme Editor.
- In the right sidebar, locate and click on functions.php.
Add the Code:
- Copy the provided code snippet.
- Paste it at the end of your functions.php file.
- Click Update File to save your changes.
Verify the Theme Options Page:
- Go back to your WordPress admin dashboard.
- Look for a new menu item labeled Theme Options in the admin menu.
- Click on it to access the custom theme options page.
Test the Functionality:
- On the Theme Options page, enter some text in the Custom Text Field.
- Click Save Changes to store your input.
- Ensure the data is saved and displayed correctly.

If you need assistance with this implementation or require more advanced functionality, consider reaching out to the experts at wp-dude.com for professional help.