Beginner SeriesPlugin Development

WordPress Plugin Development Tutorial for Beginners – Part 3

By December 18, 2018 No Comments

WordPress Plugin Development Tutorial for Beginners Part 3

Welcome! This is part 3 of the new plugin development tutorial for beginners series. In the last section (part 2) I talked about the plugin header content, disclaimer, class declarations and construct function and how they relate to the plugin template. In this tutorial I will be going over the plugin template functions that are associated with the classes we did in the previous tutorial. That may not seem like a lot of content but believe me, it is. I’ll be going over each function and what they do, there are 7 of them so hold on tight.

Let’s Dive in!

WordPress Plugin Template Functions

The first function we have in this plugin template is the function deactivate_plugin_actions() {} , function setup_plugin(){} and function admin_notices(){} functions. As seen below.

function deactivate_plugin_actions(){
  // TODO: add any deactivation actions here
}

/*********************************
 * NOTICES & LOCALIZATION
 */
 
 function setup_plugin(){
 	load_plugin_textdomain( $this->ns_plugin_slug, false, $this->path."lang/" ); 
 }

function admin_notices(){
  $message = '';	
  if ( $message != '' ) {
    echo "<div class='updated'><p>$message</p></div>";
  }
}

These functions have specific tasks that they need to execute. The function deactivate_plugin_actions (){} is setup so the plugin can be deactivated and more importantly, what happens during the deactivation. For example the removal of a database from the host computer.

The next function is the function setup_plugin (){}which  executes a load_plugin_textdomain command for the languages I think that is connected to the previous plugins_loaded action in the previous section.

The third function in this set is the function admin_notices (){} function which executes the message if/once the plugin is updated.

Now we dive into the admin assests function called function admin_assets (){}.

function admin_assets($page){
 	wp_register_style( $this->ns_plugin_slug, plugins_url("css/ns-custom.css",__FILE__), false, '1.0.0' );
 	wp_register_script( $this->ns_plugin_slug, plugins_url("js/ns-custom.js",__FILE__), false, '1.0.0' );
  if( strpos($page, $this->ns_plugin_ref) !== false  ){
    wp_enqueue_style( $this->ns_plugin_slug );
    wp_enqueue_script( $this->ns_plugin_slug );
  }		
}

The action wp_register_style (); is next and this action is used to register the CSS for the plugin.

The action wp_register_script (); is next and this action is used to register the javascript files (there are none in this plugin)

Next is a statement: if( strpos($page, $this->ns_plugin_ref) !== false ){} which means if the previous CSS and JS scripts/styles were not registered, register and enqueue them.

Setting up the Settings Page

The next section of code is designed to setup the settings page including registering the fields, adding settings field, adding settings section and registering setting. The code is below.

/**********************************
 * SETTINGS PAGE
 */

function register_settings_fields() {
  // TODO: might want to update / add additional sections and their names, if so update 'default' in add_settings_field too
  add_settings_section( 
    $this->ns_plugin_ref.'_set_section', 	// ID used to identify this section and with which to register options
    $this->ns_plugin_name, 					// Title to be displayed on the administration page
    false, 									// Callback used to render the description of the section
    $this->ns_plugin_ref 					// Page on which to add this section of options
  );
  // TODO: update labels etc.
  // TODO: for each field or field set repeat this
  add_settings_field( 
    $this->ns_plugin_ref.'_field1', 	// ID used to identify the field
    'Setting Name', 					// The label to the left of the option interface element
    array($this,'show_settings_field'), // The name of the function responsible for rendering the option interface
    $this->ns_plugin_ref, 				// The page on which this option will be displayed
    $this->ns_plugin_ref.'_set_section',// The name of the section to which this field belongs
    array( 								// args to pass to the callback function rendering the option interface
      'field_name' => $this->ns_plugin_ref.'_field1'
    )
  );
  register_setting( $this->ns_plugin_ref, $this->ns_plugin_ref.'_field1');
}

Registering the Settings Fields

The main function used in this section is the function register_settings_fields() {} that will hold three new action hooks called:

add_settings_section ();
add_setings_field ();
register_setting ();

The add_settings_section (); is first and requires:

$this->ns_plugin_ref. ‘_set_section’,   the ID the used to identify this section and with which to register options

$this->ns_plugin_name,  Title to be displayed on the administration page

false, Callback used to render the description of the section

$this->ns_plugin_ref  Page on which to add this section of options

 

Next is the add_settings_field (); and is requires:

$this->ns_plugin_ref.’_field1′,   ID used to identify the field

‘Setting Name’,     The label to the left of the option interface element

array($this,’show_settings_field’),     The name of the function responsible for rendering the option interface

$this->ns_plugin_ref,   The page on which this option will be displayed

$this->ns_plugin_ref.’_set_section’,   The name of the section to which this field belongs

array(  ‘field_name’ => $this->ns_plugin_ref.’_field1′)  args to pass to the callback function rendering the option interface

Last is the register_setting( $this->ns_plugin_ref, $this->ns_plugin_ref.'_field1');

Showing the Settings Fields

Next is the function show_settings_field($args){} action hook that is initialize in case there are no existing options

function show_settings_field($args){
  $saved_value = get_option( $args['field_name'] );
  // initialize in case there are no existing options
  if ( empty($saved_value) ) {
    echo '<input type="text" name="' . $args['field_name'] . '" value="Setting Value" /><br/>';
  } else {
    echo '<input type="text" name="' . $args['field_name'] . '" value="'.$saved_value.'" /><br/>';
  }
}

Registering the Settings Page

Next is the function register_settings_page(){} with the action hook add_submenu_page() to create our page for the plugin to function off of.

function register_settings_page(){
  add_submenu_page(
    'options-general.php',								// Parent menu item slug	
    __($this->ns_plugin_name, $this->ns_plugin_name),	// Page Title
    __($this->ns_plugin_menu, $this->ns_plugin_name),	// Menu Title
    'manage_options',									// Capability
    $this->ns_plugin_ref,								// Menu Slug
    array( $this, 'show_settings_page' )				// Callback function
  );
}

Showing the Settings Page

The last part in this section is the function show_settings_page(){} which uses the standard wordpress css wrap and a bit of css to break down the two columns in the left and right.

function show_settings_page(){
    ?>
    <div class="wrap">
      
      <h2><?php $this->plugin_image( 'banner.png', __('ALT') ); ?></h2>
      
      <!-- BEGIN Left Column -->
      <div class="ns-col-left">
        <form method="POST" action="options.php" style="width: 100%;">
          <?php settings_fields($this->ns_plugin_ref); ?>
          <?php do_settings_sections($this->ns_plugin_ref); ?>
          <?php submit_button(); ?>
        </form>
      </div>
      <!-- END Left Column -->
            
      <!-- BEGIN Right Column -->			
      <div class="ns-col-right">
        <h3>Thanks for using <?php echo $this->ns_plugin_name; ?></h3>
        <?php ns_sidebar::widget( 'subscribe' ); ?>
        <?php ns_sidebar::widget( 'share', array('plugin_url'=>'http://neversettle.it/buy/wordpress-plugins/ns-fba-for-woocommerce/','plugin_desc'=>'Connect WordPress to Google Sheets!','text'=>'Would anyone else you know enjoy NS Google Sheets Connector?') ); ?>
        <?php ns_sidebar::widget( 'donate' ); ?>
        <?php ns_sidebar::widget( 'featured'); ?>
        <?php ns_sidebar::widget( 'links', array('ns-fba') ); ?>
        <?php ns_sidebar::widget( 'random'); ?>
        <?php ns_sidebar::widget( 'support' ); ?>
      </div>
      <!-- END Right Column -->
        
    </div>
    <?php
  }

wordpress-plugin-tutorials-for-beginnerswordpress-plugin-tutorials-for-beginners2

Final thoughts

As you can see this section starts to give you a visual of the content for the plugin and how it will look along the way. Remember, this plugin is supposed to be a template to show you how you can start to create your own plugin from a reference/example. This plugin is by no means perfect of the only way but a solution to get some of your questions answered.

Leave a Reply