Skip to content

Instantly share code, notes, and snippets.

@krystyna93
Last active June 10, 2023 12:53
Show Gist options
  • Save krystyna93/284b35044388bed90775283127acd317 to your computer and use it in GitHub Desktop.
Save krystyna93/284b35044388bed90775283127acd317 to your computer and use it in GitHub Desktop.
Custom WordPress Widget Plugin Example: Display the Current Day, Month, and Year, w/Dropdown Option To Select Date Format
<?php
/*
Plugin Name: Date Widget
Description: A widget that displays the current date.
Version: 1.0
Author: Your Name Here
*/
// Register the widget
add_action( 'widgets_init', 'register_date_widget' );
function register_date_widget() {
register_widget( 'Date_Widget' );
}
// Define the widget class
class Date_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'date_widget',
__( 'Date Widget', 'text_domain' ),
array( 'description' => __( 'A widget that displays the current date.', 'text_domain' ) )
);
}
public function widget( $args, $instance ) {
// Output the widget code here
echo '<div class="date-widget">';
echo date( 'F j, Y' );
echo '</div>';
}
}
/*
This code registers a widget called "Date Widget" and defines a class for it.
The widget() method is where you would output the contents of the widget. In this case, we're just echoing the current date
using the date() function.
add the option list to choose the date format. We'll do this by adding a form to the widget settings in the WordPress admin area:
*/
public function form( $instance ) {
$format = ! empty( $instance['format'] ) ? $instance['format'] : 'F j, Y';
?>
<p>
<label for="<?php echo $this->get_field_id( 'format' ); ?>"><?php _e( 'Date Format:' ); ?></label>
<select id="<?php echo $this->get_field_id( 'format' ); ?>" name="<?php echo $this->get_field_name( 'format' ); ?>">
<option value="F j, Y" <?php selected( $format, 'F j, Y' ); ?>><?php _e( 'Month Day, Year (Example: January 1, 2022)' ); ?></option>
<option value="m/d/Y" <?php selected( $format, 'm/d/Y' ); ?>><?php _e( 'MM/DD/YYYY (Example: 01/01/2022)' ); ?></option>
<option value="d/m/Y" <?php selected( $format, 'd/m/Y' ); ?>><?php _e( 'DD/MM/YYYY (Example: 01/01/2022)' ); ?></option>
</select>
</p>
<?php
}
/*
This code adds a select box to the widget settings with three options for date formats.
The current format is stored in an instance variable called format, which is used to set the default option and to output
the date in the widget() method.
add validation, sanitization, and nonce to make the widget more secure:
*/
public function update( $new_instance, $old_instance ) {
// Validate and sanitize input
$instance = array();
$instance['format'] = ! empty( $new_instance['format'] ) ? sanitize_text_field( $new_instance['format'] ) : '';
// Create nonce field
$instance['nonce'] = wp_create_nonce( 'date_widget' );
return $instance;
}
public function widget( $args, $instance ) {
// Verify nonce field
if ( ! isset( $instance['nonce'] ) || ! wp_verify_nonce( $instance['nonce'], 'date_widget' ) ) {
return;
}
// Output the widget code here
echo '<div class="date-widget">';
echo date( $instance['format'] );
echo '</div>';
}
/*
In the update() method, we're validating and sanitizing the user input to make sure it's safe to use in our widget.
We're also adding a nonce field to prevent malicious users from submitting fake data.
In the widget() method, we're verifying the nonce field before outputting the widget code.
This ensures that only legitimate requests are processed and helps prevent attacks like cross-site request forgery.
Put all three blocks of code into a single plugin file, activate the plugin, and you should see the "Date Widget" in your list
of available widgets in the WordPress admin area.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment