How to Create theme option Setting For Wp backend.

  • Step 1 – Create File themeOption.php
  • Step 2 – Past copy code to themeOption.php
  • Step 3 – Open your Function.php inside the theme
  • Step 4 – include file themeOption.php in function.php

-Code paste in themeOption.php

<?php
/**
 * Class themeOption
 */

class themeOption
{
    public function __construct()
    {
        add_action('admin_menu', [$this, 'themeOptionMenu']);
        add_action("admin_init", [$this, 'display_theme_panel_fields']);
    }

    /**
     * Register a custom menu page.
     */
    function themeOptionMenu()
    {
        add_menu_page(
            __('NHCPS Theme Option', 'savealife'),
            'Theme Option',
            "manage_options",
            "theme-panel",
            [$this, 'theme_settings_page'],
            null,
            99);

    }

    function theme_settings_page()
    {
        ?>
        <div class="wrap">
            <h1>Theme Panel</h1>
            <form method="post" action="options.php">
                <?php
                settings_fields("section");
                do_settings_sections("theme-options");
                submit_button();
                ?>
            </form>
        </div>
        <?php
    }

    function displayMetaInfo()
    {
        ?>
        <input type="checkbox" name="metaInfo" id="metaInfo"
               value="1" <?php checked(1, get_option('metaInfo'), true); ?> />
        <?php
    }

    function displayRelatedPosts()
    {
        ?>
        <input type="checkbox" name="relatedPost" id="relatedPost"
               value="1" <?php checked(1, get_option('relatedPost'), true); ?> />
        <?php
    }

    function displayComments()
    {
        ?>
        <input type="checkbox" name="showComment" id="showComment"
               value="1" <?php checked(1, get_option('showComment'), true); ?> />
        <?php
    }

    function displaySocialShare()
    {
        ?>
        <input type="checkbox" name="socialShare" id="socialShare"
               value="1" <?php checked(1, get_option('socialShare'), true); ?> />
        <?php
    }

    function display_theme_panel_fields()
    {
        add_settings_section("section", "All Settings", null, "theme-options");
        $themeOptions = [
            'metaInfo' => [
                'title' => 'Display Meta Info',
                'callback' => 'displayMetaInfo'
            ],
            'relatedPost' => [
                'title' => 'Display Related Post',
                'callback' => 'displayRelatedPosts'
            ],
            'showComment' => [
                'title' => 'Display Comments',
                'callback' => 'displayComments'
            ],
            'socialShare' => [
                'title' => 'Display Social Share',
                'callback' => 'displaySocialShare'
            ]
        ];
        foreach ($themeOptions as $key => $option) {
            add_settings_field($key, $option['title'], function ($keyOption) {
                ?>
                <input type="checkbox" name="<?php echo $keyOption[0]; ?>" id="<?php echo $keyOption[0]; ?>"
                       value="1" <?php checked(1, get_option($keyOption[0]), true); ?> />
                <?php
            }, "theme-options", "section", array(
                $key
            ));
            register_setting("section", $key);

        }
    }

}

new themeOption();

-After include file themeOption.php in function.php

You found the theme option in the backend of WordPress.

NOTE : you can add theme option according to your need in themeoption.php and add checks in your file accoring to themeoption setting you add in backed.

Leave a Comment

Your email address will not be published. Required fields are marked *