php - Implement toggle switch for theme options in settings API

admin管理员组

文章数量:1287882

I love to work with bootstrap for the forntend part of my projects, but this time I need to create a theme settings page to manage the activation of some template parts of a custom theme. I want to use a switch to enable or disable the features, but I don't know how to implement it in the wordpress way. Can anyone provide me a sample of the implementation, I was thinking to use bootstrap but it will be not a pretty choice because wordpress has it's own css rules set to manage the styling of the various inputs and text area on the backend. Thanks for the help.

<?php

class BSSMenu {

  public function registerSettings()
  {
    add_settings_section(
      'swiper-settings',
      'Swiper slider settings',
      [$this, 'SwiperOptions'],
      $menu_slug
    );

    add_settings_field(
      'swiper-autoload',
      'Auto init slider',
      [$this, 'sliderSettings'],
      $menu_slug,
      'swiper-settings'
    );

    register_setting( 'bs-shortcodes', 'bs-slider' );

  }

  public function initOptionsMenu()
  {
    extract([
      'page_title' => 'Bootstrap Shortcodes - Settings',
      'menu_title' => 'Bootstrap Shortcodes',
      'capability' => 'manage_options',
      'menu_slug' => 'bs-shortcodes',
      'function' => [$this, 'renderOptionsMenu'],
    ]);
    $hook_suffix = add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function );
    //add_action( 'load-'.$hook_suffix, [$this, 'initMenuScripts'] );
  }


  // public function initMenuScripts()
  // {
  //   wp_enqueue_script('popper-js', PLUGIN_DIR.'/js/popper.min.js', ['jquery'] );
  //   wp_enqueue_script('bootstrap-js', PLUGIN_DIR.'/js/bootstrap.min.js', ['jquery'] );
  //   wp_enqueue_style('bootstrap-css', PLUGIN_DIR.'/css/bootstrap.min.css' );
  // }

  public function renderOptionsMenu()
  {
    ?>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <h1>Bootstrap Shortcodes - Swiper settings</h1>
          </div>
          <div class="col-12">
            <form action="options.php" method="POST">
              <!-- Swiper auto init -->
              <?php
                settings_fields('bs-shortcodes');
                do_settings_sections('bs-shortcodes');
                $options = get_option('bs-shortcodes');
              ?>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" name="bs-slider" id="customSwitch1" value="0" <?php checked($options['bs-slider'], 1); ?>/>
                  <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
                </div>

              <?php
                submit_button();
              ?>
            </form>
          </div>
        </div>
      </div>
    <?php
  }

  // public function sliderSettings()
  // {
  //   echo '
  //   <div class="custom-control custom-switch">
  //     <input type="checkbox" class="custom-control-input" name="bs-slider" id="customSwitch1" value="'. get_option('bs-slider') .'">
  //     <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
  //   </div>
  //   ';
  // }

}
?>

NB: I'm still doing practice with the settings API, this because I had some difficult to understand how correctly add sections and fields, I'm sorry if there are errors in my code! It use bootstrap 4 but I will rework the code to reflect the default wordpress css backend classes.

I love to work with bootstrap for the forntend part of my projects, but this time I need to create a theme settings page to manage the activation of some template parts of a custom theme. I want to use a switch to enable or disable the features, but I don't know how to implement it in the wordpress way. Can anyone provide me a sample of the implementation, I was thinking to use bootstrap but it will be not a pretty choice because wordpress has it's own css rules set to manage the styling of the various inputs and text area on the backend. Thanks for the help.

<?php

class BSSMenu {

  public function registerSettings()
  {
    add_settings_section(
      'swiper-settings',
      'Swiper slider settings',
      [$this, 'SwiperOptions'],
      $menu_slug
    );

    add_settings_field(
      'swiper-autoload',
      'Auto init slider',
      [$this, 'sliderSettings'],
      $menu_slug,
      'swiper-settings'
    );

    register_setting( 'bs-shortcodes', 'bs-slider' );

  }

  public function initOptionsMenu()
  {
    extract([
      'page_title' => 'Bootstrap Shortcodes - Settings',
      'menu_title' => 'Bootstrap Shortcodes',
      'capability' => 'manage_options',
      'menu_slug' => 'bs-shortcodes',
      'function' => [$this, 'renderOptionsMenu'],
    ]);
    $hook_suffix = add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function );
    //add_action( 'load-'.$hook_suffix, [$this, 'initMenuScripts'] );
  }


  // public function initMenuScripts()
  // {
  //   wp_enqueue_script('popper-js', PLUGIN_DIR.'/js/popper.min.js', ['jquery'] );
  //   wp_enqueue_script('bootstrap-js', PLUGIN_DIR.'/js/bootstrap.min.js', ['jquery'] );
  //   wp_enqueue_style('bootstrap-css', PLUGIN_DIR.'/css/bootstrap.min.css' );
  // }

  public function renderOptionsMenu()
  {
    ?>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <h1>Bootstrap Shortcodes - Swiper settings</h1>
          </div>
          <div class="col-12">
            <form action="options.php" method="POST">
              <!-- Swiper auto init -->
              <?php
                settings_fields('bs-shortcodes');
                do_settings_sections('bs-shortcodes');
                $options = get_option('bs-shortcodes');
              ?>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" name="bs-slider" id="customSwitch1" value="0" <?php checked($options['bs-slider'], 1); ?>/>
                  <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
                </div>

              <?php
                submit_button();
              ?>
            </form>
          </div>
        </div>
      </div>
    <?php
  }

  // public function sliderSettings()
  // {
  //   echo '
  //   <div class="custom-control custom-switch">
  //     <input type="checkbox" class="custom-control-input" name="bs-slider" id="customSwitch1" value="'. get_option('bs-slider') .'">
  //     <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
  //   </div>
  //   ';
  // }

}
?>

NB: I'm still doing practice with the settings API, this because I had some difficult to understand how correctly add sections and fields, I'm sorry if there are errors in my code! It use bootstrap 4 but I will rework the code to reflect the default wordpress css backend classes.

• php
• theme-development
• settings-api

Share Improve this question edited Dec 9, 2019 at 19:10 sialfa asked Dec 9, 2019 at 15:30 sialfasialfa 3291010 silver badges2929 bronze badges 1

• I would look at using the customizer instead of a custom options page if possible. WordPress gives you options for different types of input and this sounds like it just needs a checkbox. – Robert Went Commented May 12, 2021 at 1:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

There are several ways to implement an options page. You can implement a quick and easy options page via Advanced Custom Fields Pro (find out more here: https://www.advancedcustomfields/resources/options-page/)

To do things the WordPress way(without the help of plugins), you will want to follow this guide here: https://developer.wordpress/plugins/settings/custom-settings-page/

Once implemented, you should be able to save options via a custom options page. To get the value out, you can use get_option("YOUR_OPTION_KEY");.

In regards to styling, you are correct - WordPress does have their own CSS to support administration pages. I would recommend leveraging those instead of using Bootstrap.

本文标签： phpImplement toggle switch for theme options in settings API