Skip to content

Instantly share code, notes, and snippets.

@adamcrampton
Created May 3, 2019 00:55
Show Gist options
  • Save adamcrampton/7d99bdb6d07980fcdcc3c71406894f69 to your computer and use it in GitHub Desktop.
Save adamcrampton/7d99bdb6d07980fcdcc3c71406894f69 to your computer and use it in GitHub Desktop.
WordPress widget - linked image for sidebar
<?php
/**
* Steps:
* 1. Pop this in your theme's functions.php file
* 2. See the other gist for JS instructions
* 3. Profit
*/
// Register widget area.
function sidebar_widgets_init() {
register_sidebar([
'name' => 'Sidebar Banner Widget',
'id' => 'sidebar_banner_widget',
'before_widget' => '<div class="widget editorial-aside">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
]);
}
add_action('widgets_init', 'sidebar_widgets_init');
// Register widgets.
class Banner_Widget extends WP_Widget {
public function __construct() {
$widget_ops = [
'classname' => 'sidebar_banner_widget',
'description' => 'Displays a linked banner image in the sidebar'
];
// Set up widget parameters.
parent::__construct('sidebar_banner_widget', 'Banner Widget', $widget_ops);
// Add Widget scripts
add_action('admin_enqueue_scripts', array($this, 'scripts'));
}
// Enqueue scripts
public function scripts()
{
wp_enqueue_script('media-upload');
wp_enqueue_media();
wp_enqueue_script('widgets', get_template_directory_uri() . '/assets/js/widgets.js', array('jquery'));
}
// Output widget content.
public function widget($args, $instance) {
// Only echo the widget contents if all required instance parameter values are present.
if($instance['image'] && $instance['link']):
// Set alt string.
$alt_string = ! empty($instance['image_alt_text']) ? $instance['image_alt_text'] : '';
echo $args['before_widget'];
echo $args['before_title'] . apply_filters('widget_title', $instance['title'] ) . $args['after_title'];
echo '<a href="'. $instance['link'] .'"><img src="'. esc_url($instance['image']) .'" alt="'. $alt_string .'"></a>';
echo $args['after_widget'];
endif;
}
// Admin form output.
public function form($instance) {
$link = !empty($instance['link']) ? $instance['link'] : esc_html__('https://', 'text_domain');
$image = !empty($instance['image']) ? $instance['image'] : '';
$image_alt_text = !empty($instance['image_alt_text']) ? $instance['image_alt_text'] : esc_html__('', 'text_domain');
?>
<p>
<label for="<?php echo esc_attr($this->get_field_id('link')); ?>"><?php esc_attr_e('Link:', 'text_domain'); ?></label>
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('link')); ?>" name="<?php echo esc_attr($this->get_field_name('link')); ?>" type="text" value="<?php echo esc_attr($link); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php echo 'Image:'; ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('image'); ?>" name="<?php echo $this->get_field_name('image'); ?>" type="text" value="<?php echo esc_url($image); ?>" />
<button class="upload_image_button button button-primary" style="margin-top: 5px;">Upload Image</button>
</p>
<p>
<label for="<?php echo esc_attr($this->get_field_id('image_alt_text')); ?>"><?php esc_attr_e('Image Alt Text (optional):', 'text_domain'); ?></label>
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('image_alt_text')); ?>" name="<?php echo esc_attr($this->get_field_name('image_alt_text')); ?>" type="text" value="<?php echo esc_attr($image_alt_text); ?>">
</p>
<?php
}
// Process widget options on save.
public function update ($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (! empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['link'] = (! empty($new_instance['link'])) ? sanitize_text_field($new_instance['link']) : '';
$instance['image'] = (! empty( $new_instance['image'])) ? $new_instance['image'] : '';
$instance['image_alt_text'] = (! empty( $new_instance['image_alt_text'])) ? $new_instance['image_alt_text'] : '';
return $instance;
}
}
add_action('widgets_init', function() {
register_widget('Banner_Widget');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment