LET’S BUILD OUR FIRST PLUGIN!

 

WordCamp Denver 2020

Ongoing WordPress

Maintenance and Support

Web Hosting Platform

CRAFTED FOR EASY WEBSITE MANAGEMENT

Plugin Folder & File

website.tld

↳ wp-content

      ↳ plugins

            ↳ notification-bar

                  ↳ notification-bar.php


<?php
/*
Plugin Name: Notification Bar
Plugin URI: https://fixupfox.com/
Description: Display a notification for 
    visitors on the frontend of your site!
Version: 1.0
Author: wolfpaw
Author URI: https://davidwolfpaw.com/
*/

Add SubMenu Item

/**
 * Creates a link to the settings page under 
 * the WordPress Settings in the dashboard
 */
add_action( 'admin_menu', 'wnb_general_settings_page' );
function wnb_general_settings_page() {
	add_submenu_page(
		'options-general.php',
		__( 'Notification Bar', 'notification-bar' ),
		__( 'Notification Bar', 'notification-bar' ),
		'manage_options',
		'notification_bar',
		'wnb_render_settings_page'
	);
}

Render Settings Page

//* Creates the settings page
function wnb_render_settings_page() {
  ?>
  <!-- Create a header in the default WordPress 'wrap' container -->
  <div class="wrap">
    <h2>
      <?php esc_html_e( 'Notification Bar Settings', 'notification-bar' ); ?>
    </h2>
    <form method="post" action="options.php">
      <?php
      // Get settings for the plugin to display
      settings_fields( 'wnb_general_settings' );
      do_settings_sections( 'wnb_general_settings' );
      // Form submit button
      submit_button();
      ?>
    </form>
  </div><!-- /.wrap -->
  <?php
}

create settings section, fields, and registers fields

/**
 * Creates settings for the plugin
 */
add_action( 'admin_init', 'wnb_initialize_settings' );
function wnb_initialize_settings() {
  add_settings_section(
    // ID used to identify this section and with which to register options
    'general_section',
    // Title to be displayed on the administration page
    __( 'General Settings', 'notification-bar' ),
    // Callback used to render the description of the section
    'general_settings_callback',
    // Page on which to add this section of options
    'wnb_general_settings'
  );
	
add_settings_field(
  // ID used to identify this field
  'notification_text',
  // Title to be displayed for this field
  __( 'Notification Text', 'notification-bar' ),
  // The function that creates this field
  'text_input_callback',
  // The page that this setting goes under
  'wnb_general_settings',
  // The section that this setting goes under
  'general_section',
  // Arguments that describe this field
  array(
    'label_for'    => 'notification_text',
    'option_group' => 'nb_general_settings',
    'option_id'    => 'notification_text',
    )
);
add_settings_field(
  'display_location',
  __( 'Where will the notification bar display?', 'notification-bar' ),
  'radio_input_callback',
  'wnb_general_settings',
  'general_section',
  array(
    'label_for'          => 'display_location',
    'option_group'       => 'nb_general_settings',
    'option_id'          => 'display_location',
    'option_description' => 'Display notification bar 
      on bottom of the site',
    'radio_options'      => array(
      'display_none'   => 'Do not display notification bar',
      'display_top'    => 'Display notification bar on the 
      top of the site',
      'display_bottom' => 'Display notification bar on the 
      bottom of the site',
    ),
  )
);
  // Register the settings to the field section  
  register_setting(
    'wnb_general_settings',
    'nb_general_settings'
  );
}

Create Header for
Settings Section

/**
 * Displays the header of the general settings
 */
function general_settings_callback() {
	esc_html_e( 'Notification Bar Settings', 'notification-bar' );
}

Render Text Boxes
and Radio Buttons

/**
 * Text Input Callbacks
 */
function text_input_callback( $text_input ) {
  // Get arguments from setting
  $option_group = $text_input['option_group'];
  $option_id    = $text_input['option_id'];
  $option_name  = "{$option_group}[{$option_id}]";
  // Get existing option from database
  $options      = get_option( $option_group );
  $option_value = 
    isset( $options[ $option_id ] ) ? $options[ $option_id ] : '';
  // Render the output
  echo "<input type='text' size='50' id='{$option_id}'
    name='{$option_name}' value='{$option_value}' />";
}
function radio_input_callback( $radio_input ) {
  // Get arguments from setting
  $option_group  = $radio_input['option_group'];
  $option_id     = $radio_input['option_id'];
  $radio_options = $radio_input['radio_options'];
  $option_name   = "{$option_group}[{$option_id}]";
  // Get existing option from database
  $options      = get_option( $option_group );
  $option_value = 
    isset( $options[ $option_id ] ) ? $options[ $option_id ] : '';
  // Render the output
  $input = '';
  foreach ( $radio_options as $radio_option_id => $radio_option_value ) {
    $input .= "<input type='radio' id='{$radio_option_id}' 
      name='{$option_name}' value='{$radio_option_id}' "
      . checked( $radio_option_id, $option_value, false ) . ' />';
    $input .= "<label for='{$radio_option_id}'>{$radio_option_value}</label><br />";
  }
  echo $input;
}

Display Notification Bar
On Frontend

/**
 * Displays the notification bar on the frontend of the site
 */
add_action( 'wp_footer', 'wnb_display_notification_bar' );
function wnb_display_notification_bar() {
  if ( null !== get_option( 'nb_general_settings' ) ) {
    $options = get_option( 'nb_general_settings' );
    ?>
    <div class="notification-bar 
      <?php echo $options['display_location']; ?>">

      <div class="notification-text">
        <?php echo $options['notification_text']; ?>
      </div>

    </div>
    <?php
  }
}

Create and Load Stylesheet

/**
 * Loads plugin scripts and styles
 */
add_action( 'wp_enqueue_scripts', 'wnb_scripts' );
function wnb_scripts() {
  wp_enqueue_style(
    'notification-bar-css',
    plugin_dir_url( __FILE__ ) . 'notification-bar.css',
    array(),
    '1.0.0'
  );
}
.notification-bar {
    position: relative;
    width: 100%;
    background: #000;
    color: #FFFFFF;
    text-align: center;
}
.notification-bar.display_top {
    top: 0;
    position: absolute;
}
.notification-bar.display_bottom {
    bottom: 0;
    position: relative;
}

.notification-text {
    padding: 10px
}

.admin-bar .notification-bar.display_top {
    top: 46px;
}

Add Sticky Display

add_settings_field(
  'display_sticky',
  __( 'Will the notificaton bar be sticky?', 'notification-bar' ),
  'radio_input_callback',
  'wnb_general_settings',
  'general_section',
  array(
    'label_for'          => 'display_sticky',
    'option_group'       => 'nb_general_settings',
    'option_id'          => 'display_sticky',
    'option_description' => 'Make display sticky or not',
    'radio_options'      => array(
      'display_sticky'   => 'Make the notification bar sticky',
      'display_relative' => 'Do not make the notification bar sticky',
    ),
  )
);
// Replace in wnb_display_notification_bar function
<div class="notification-bar 
  <?php echo $options['display_location']; ?>
  <?php echo $options['display_sticky']; ?>">



// Add to notification-bar.css
.notification-bar.display_top.display_sticky {
    position: fixed;
}

.notification-bar.display_bottom.display_sticky {
    bottom: 0;
    position: sticky;
}

Bonus: Change from Settings Page to customizer Settings

// Original Code - Settings Page
<div class="notification-bar 
        <?php echo $options['display_location']; ?>
        <?php echo $options['display_sticky']; ?>">
  <div class="notification-text">
    <?php echo $options['notification_text']; ?>
</div>


// Updated Code - Customizer
<div class="notification-bar 
        <?php echo get_theme_mod( 'display_location' ); ?> 
        <?php echo get_theme_mod( 'display_sticky' ); ?>">
  <div class="notification-text">
    <?php echo get_theme_mod( 'notification_text' ); ?>
</div>
add_action( 'customize_register', 'wnb_customize_register' );
function wnb_customize_register( WP_Customize_Manager $wp_customize ) {
  $wp_customize->add_section(
    'notification_bar',
    array(
      'title' => __( 'Notification Bar', 'notification-bar' ),
    )
  );
  $wp_customize->add_setting(
    'display_location',
    array(
      'capability' => 'edit_theme_options',
      'default'    => 'display_none',
    )
  );
  $wp_customize->add_control(
    'display_location',
    array(
      'type'        => 'radio',
      'section'     => 'notification_bar',
      'label'       => __( 'Display Location' ),
      'description' => __( 'Choose where the notification bar is displayed' ),
      'choices'     => array(
        'display_none'   => __( 'Do not display notification bar', 'notification-bar' ),
        'display_top'    => __( 'Display notification bar on the top of the site', 'notification-bar' ),
        'display_bottom' => __( 'Display notification bar on the bottom of the site', 'notification-bar' ),
      ),
    )
  );

Workshop - Let's Build Our First Plugin!

By david wolfpaw

Workshop - Let's Build Our First Plugin!

If you’ve ever wanted to build your own plugin for WordPress, this is the session for you. We’re going to start from scratch and work our way up. First, we’ll take a look at the basic requirements of a plugin. Next we’ll take our example plugin idea and break it into the various components and steps that we’ll need. We’ll code up the plugin together and install it on our sites, debugging any problems that arise. Finally, we’ll look at ways that we could further extend our plugin. This tutorial assumes some HTML and CSS knowledge, but you don’t already need to be familiar with writing PHP or JavaScript.

  • 1,972