1

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.

0

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.com/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.org/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.

  • This isn't what I need to know, I already implemented in past an options page, I need some help to implement a toggle switch in an option page. Something like this: getbootstrap.com/docs/4.4/components/forms/#switches – sialfa Dec 9 '19 at 16:05
  • @sialfa Apologies, thank you for clarifying. Can you post the code you are using to generate your options page? I can advise you on how to implement it from there. – Tom Dec 9 '19 at 17:08
  • I've updated the question, the code I've posted is from an old class where I was implementing some options but it uses bootstrap 4 for the fields class. Feel free to adapt it to reflect the wordpress way to style the inputs and labels. NB: the code is not perfect, this because I'm still working on it to go deeper with the sattings API knowledge and practice! – sialfa Dec 9 '19 at 19:08
  • From what I can see in your code, you need to un-comment initMenuScripts and add_action( 'load-'.$hook_suffix, [$this, 'initMenuScripts'] );. If that doesn't work, change the add action to the following: add_action( 'admin_enqueue_scripts', [$this, 'initMenuScripts'] ); – Tom Dec 9 '19 at 20:52
  • I've commented that lines because they will load the bootstrap css and js on the backend and I've opted for the usage of wordpress standard css rules so I don't need them anymore. I was implementing the toggle switch using bootstrap but I was unable to save or retrive the settings – sialfa Dec 10 '19 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.