david wolfpaw
WordPress Maintenance at fixupfox.com On the Internet, everyone knows I'm a dog. They/Them/Woof
website.tld
↳ wp-content
↳ plugins
↳ wc-notification-bar
↳ wc-notification-bar.php
<?php
/*
Plugin Name: WCMontclair 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/
*/
/**
* 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',
__( 'WCMontclair Notifications Bar', 'wc-notifications' ),
__( 'Notifications Bar', 'wc-notifications' ),
'manage_options',
'wc_notifications',
'wnb_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( 'WC Notification Bar Settings',
'wc-notifications' ); ?></h2>
<form method="post" action="options.php">
<?php
// Get settings for the plugin to display in the form
settings_fields( 'wnb_general_settings' );
do_settings_sections( 'wnb_general_settings' );
// Form submit button
submit_button();
?>
</form>
</div><!-- /.wrap -->
<?php
}
/**
* 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', 'wc-notifications' ),
// Callback used to render the description of the section
'general_settings_callback',
// Page on which to add this section of options
'wnb_general_settings'
);
/**
* Displays the header of the general settings
*/
function general_settings_callback() {
esc_html_e( 'WC Notification Settings', 'wc-notifications' );
}
add_settings_field(
// ID used to identify this field
'notification_text',
// Title to be displayed for this field
__( 'Notification Text', 'wcmia-notifications' ),
// 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' => 'wcmia_general_settings',
'option_id' => 'notification_text',
)
);
add_settings_field(
'display_location',
__( 'Where will the notification bar display?', 'wc-notifications' ),
'radio_input_callback',
'wnb_general_settings',
'general_section',
array(
'label_for' => 'display_location',
'option_group' => 'wcmia_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',
'wc_general_settings'
);
}
/**
* 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( 'wc_general_settings' ) ) {
$options = get_option( 'wc_general_settings' );
?>
<div class="wcmia-notification-bar
<?php echo $options['display_location']; ?>">
<div class="wcmia-notification-text">
<?php echo $options['notification_text']; ?>
</div>
</div>
<?php
}
}
/**
* Loads plugin scripts and styles
*/
add_action( 'wp_enqueue_scripts', 'wnb_scripts' );
function wnb_scripts() {
wp_enqueue_style(
'wcmia-notification-bar-css',
plugin_dir_url( __FILE__ ) . 'wcmia-notifications.css',
array(),
'1.0.0'
);
}
.wc-notification-bar {
position: relative;
width: 100%;
background: #000;
color: #FFFFFF;
text-align: center;
}
.wc-notification-bar.display_top {
top: 0;
position: absolute;
}
.wcmia-notification-bar.display_bottom {
bottom: 0;
position: relative;
}
.wc-notification-text {
padding: 10px
}
.admin-bar .wc-notification-bar.display_top {
top: 46px;
}
add_settings_field(
'display_sticky',
__( 'Will the notificaton bar be sticky?', 'wc-notifications' ),
'radio_input_callback',
'wnb_general_settings',
'general_section',
array(
'label_for' => 'display_sticky',
'option_group' => 'wc_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',
),
)
);
<div class="wcmia-notification-bar
<?php echo $options['display_location']; ?>
<?php echo $options['display_sticky']; ?>">
.wc-notification-bar.display_top.display_sticky {
position: fixed;
}
.wc-notification-bar.display_bottom.display_sticky {
bottom: 0;
position: sticky;
}
// Original Code - Settings Page
<div class="wcmia-notification-bar
<?php echo $options['display_location']; ?>
<?php echo $options['display_sticky']; ?>">
<div class="wcmia-notification-text">
<?php echo $options['notification_text']; ?>
</div>
// Updated Code - Customizer
<div class="wcmia-notification-bar
<?php echo get_theme_mod( 'display_location' ); ?>
<?php echo get_theme_mod( 'display_sticky' ); ?>">
<div class="wcmia-notification-text">
<?php echo get_theme_mod( 'notification_text' ); ?>
</div>
add_action( 'customize_register', 'wc_customize_register' );
function wc_customize_register( WP_Customize_Manager $wp_customize ) {
$wp_customize->add_section(
'wc_notification_bar',
array(
'title' => __( 'Notification Bar', 'wc-notifications' ),
)
);
$wp_customize->add_setting(
'display_location',
array(
'capability' => 'edit_theme_options',
'default' => 'display_none',
)
);
$wp_customize->add_control(
'display_location',
array(
'type' => 'radio',
'section' => 'wc_notification_bar',
'label' => __( 'Display Location' ),
'description' => __( 'Choose where the notification bar is displayed' ),
'choices' => array(
'display_none' => __( 'Do not display notification bar', 'wc-notifications' ),
'display_top' => __( 'Display notification bar on the top of the site', 'wc-notifications' ),
'display_bottom' => __( 'Display notification bar on the bottom of the site', 'wc-notifications' ),
),
)
);
By david wolfpaw
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.
WordPress Maintenance at fixupfox.com On the Internet, everyone knows I'm a dog. They/Them/Woof