Created
October 14, 2015 18:25
-
-
Save mcmullengreg/04ed8f16a335319037a9 to your computer and use it in GitHub Desktop.
Widget for a featured area with selectable content and using WP image upload.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($) { | |
$(document).on("click", ".upload_image_button", function() { | |
jQuery.data(document.body, 'prevElement', $(this).prev()); | |
window.send_to_editor = function(html) { | |
var imgurl = jQuery('img',html).attr('src'); | |
var inputText = jQuery.data(document.body, 'prevElement'); | |
if(inputText != undefined && inputText != '') | |
{ | |
inputText.val(imgurl); | |
} | |
tb_remove(); | |
}; | |
tb_show('', 'media-upload.php?type=image&TB_iframe=true'); | |
return false; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// ADD THIS LINE TO FUNCTIONS.PHP (remove the #) | |
# require_once 'widget.php'; | |
// Custom Widget | |
/* This wouldn't be possible without the help of Paul Underwood | |
Source: http://www.paulund.co.uk/add-upload-media-library-widgets | |
Be sure to include the javascript for this! | |
/** | |
* Register the Widget | |
*/ | |
add_action( 'widgets_init', create_function( '', 'register_widget("pu_media_upload_widget");' ) ); | |
class pu_media_upload_widget extends WP_Widget | |
{ | |
/** | |
* Setup the widget name, class and description | |
**/ | |
public function __construct() | |
{ | |
$widget_ops = array( | |
'classname' => 'pu_media_upload', | |
'description' => 'Widget that uses the built in Media library.' | |
); | |
parent::__construct( 'pu_media_upload', 'Featured Image Widget', $widget_ops ); | |
# Enqueues scripts (for the uploader) | |
add_action('admin_enqueue_scripts', array($this, 'upload_scripts')); | |
add_action('admin_enqueue_styles', array($this, 'upload_styles')); | |
} | |
/** | |
* Upload the Javascripts for the media uploader | |
*/ | |
public function upload_scripts() | |
{ | |
# Enqueueing scripts again, jQuery, media-uploader and thickbox (for the uploader) | |
wp_enqueue_script('jquery'); | |
wp_enqueue_script('media-upload'); | |
wp_enqueue_script('thickbox'); | |
wp_enqueue_style('thickbox'); | |
# Ensure this link is consistent with your file structure. | |
wp_enqueue_script('upload_media_widget', get_template_directory_uri() . '/js/upload-media.js'); | |
} | |
/** | |
* Add the styles for the upload media box | |
*/ | |
public function upload_styles() | |
{ | |
# Again, for the image uploader | |
wp_enqueue_style('thickbox'); | |
} | |
/** | |
* Outputs the HTML for this widget. | |
* | |
* @param array An array of standard parameters for widgets in this theme | |
* @param array An array of settings for this widget instance | |
* @return void Echoes it's output | |
**/ | |
public function widget( $args, $instance ) | |
{ | |
# Add any html to output the image in the $instance array | |
# Declaring variables - this is all for the display side of things | |
$title = apply_filters( 'widget_title', $instance['title'] ); | |
$image = $instance['image']; | |
$description = $instance['description']; | |
$link_target = $instance['link_target']; | |
$custom_url = $instance['custom_url']; | |
$css_class = $instance['css_class']; | |
// Define the URL Location | |
$url = ''; | |
if ( !empty( $custom_url ) ){ | |
$url = $custom_url; | |
} elseif ( !empty( $link_target ) ){ | |
$url = get_the_permalink($link_target); | |
} | |
// Start writing to the screen | |
# This is the beginning of the widget. Defined at the theme level in the Sidebar Declaration. | |
echo $args['before_widget'] . '<div class="' . $css_class . '">'; | |
// If URL is NOT empty. We display the link (defined in lines 72-77) | |
if ( !empty ( $url ) ){ | |
echo '<a href="' . $url . '">'; | |
} | |
// If $image isn't empty, write it to screen | |
if ( !empty( $image ) ) { | |
echo '<img class="img-responsive" src="' . $image . '" alt="' . $title . '" />'; | |
} | |
// If $title isn't empty, write it to screen -- uses the defined before/after_title in Sidebar Declaration. | |
if ( !empty( $title ) ) { | |
echo $args['before_title'] . $title . $args['after_title']; | |
} | |
// Outputs the $description, with auto "P" (wraps it in paragraph tags) | |
if ( !empty( $description ) ) { | |
echo wpautop($description, true); | |
} | |
// Outputs the end of the link, again if not empty. (defined in lines 72-77) | |
if ( !empty ( $url ) ){ | |
echo '</a>'; | |
} | |
# Wraps it all together in a nice bow. Finishes with after_widget defined in Sidebar Declaration | |
echo '</div>' . $args['after_widget']; | |
} | |
/** | |
* Deals with the settings when they are saved by the admin. Here is | |
* where any validation should be dealt with. | |
* | |
* @param array An array of new settings as submitted by the admin | |
* @param array An array of the previous settings | |
* @return array The validated and (if necessary) amended settings | |
**/ | |
public function update( $new_instance, $old_instance ) { | |
# This updates a widget with old values to new ones. Names should match the form below | |
# We strip tags so our site can be injected with anything malicious. Including the description. | |
# No HTML allowed. Sorry. | |
$instance = $old_instance; | |
$instance['title'] = strip_tags($new_instance['title']); | |
$instance['image'] = strip_tags($new_instance['image']); | |
$instance['description'] = strip_tags($new_instance['description']); | |
$instance['link_target'] = strip_tags($new_instance['link_target']); | |
$instance['css_class'] = strip_tags($new_instance['css_class']); | |
$instance['custom_url'] = strip_tags($new_instance['custom_url']); | |
return $instance; | |
} | |
/** | |
* Displays the form for this widget on the Widgets page of the WP Admin area. | |
* | |
* @param array An array of the current settings for this widget | |
* @return void | |
**/ | |
public function form( $instance ) | |
{ | |
# This is where the vars are defined for the admin side. The widget display form | |
if ( $instance ){ | |
# If there are declarations, save them for future use in the admin area | |
# These names should match below in the "value" | |
$title = $instance['title']; | |
$image = $instance['image']; | |
$description = $instance['description']; | |
$link_target = $instance['link_target']; | |
$css_class = $instance['css_class']; | |
$custom_url = $instance['custom_url']; | |
} else { | |
# If not, they should be blank. | |
$title = ''; | |
$image = ''; | |
$textarea = ''; | |
$description = ''; | |
$link_target = ''; | |
$css_class = ''; | |
$custom_url = ''; | |
} | |
?> | |
<?php # This is the admin display form ?> | |
<?php # Widget Title ?> | |
<p> | |
<label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Feature Title:' ); ?></label> | |
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> | |
</p> | |
<?php # Image Uploader ?> | |
<p> | |
<label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Feature Image: (max 261px)' ); ?></label> | |
<input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36" value="<?php echo esc_url( $image ); ?>" /> | |
<input class="upload_image_button button right" type="button" value="Upload Image" style="margin-top:5px;" /> | |
</p> | |
<?php # Description, should you want it ?> | |
<p style="clear:both;"> | |
<label for="<?php echo $this->get_field_name('description'); ?>"><?php _e( 'Feature Description:' ); ?></label> | |
<textarea name="<?php echo $this->get_field_name('description');?>" id="<?php echo $this->get_field_id('description');?>" class="widefat" type="text" rows="8" style="resize:vertical;" value="<?php echo esc_textarea( $description ); ?>" ><?php echo esc_textarea( $description ) ?></textarea> | |
</p> | |
<?php # If you want to link to a page, use this ?> | |
<p> | |
<label for="<?php echo $this->get_field_id('link_target'); ?>"><?php _e('Link Target:'); ?></label> | |
<?php wp_dropdown_pages(array( | |
'id' => $this->get_field_id('link_target'), | |
'name' => $this->get_field_name('link_target'), | |
'selected' => $instance['link_target'] | |
)); ?> | |
</p> | |
<?php # Custom URL, should you not want to link to a page ?> | |
<p> | |
<label for="<?php echo $this->get_field_name('custom_url'); ?>"><?php _e('Custom URL (Overrides Link Target'); ?></label> | |
<input class="widefat" id="<?php echo $this->get_field_id('custom_url'); ?>" name="<?php echo $this->get_field_name('custom_url'); ?>" type="text" value="<?php echo esc_attr( $custom_url ); ?>" /> | |
</p> | |
<?php # Select box for the Bootstrap Classes ?> | |
<p> | |
<label for="<?php echo $this->get_field_name('css_class'); ?>"><?php _e('CSS Class:' ); ?></label> | |
<select name="<?php echo $this->get_field_name('css_class'); ?>" id="<?php echo $this->get_field_id('css_class'); ?>" type="text" value="<?php echo esc_attr( $css_class ); ?>"> | |
<option value="col-xs-12 col-sm-12 col-md-3" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-3')?'selected':'' ?>>1/4 Desktop - Full Mobile</option> | |
<option value="col-xs-12 col-sm-12 col-md-6" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-6')?'selected':'' ?>>1/2 Desktop - Full Mobile</option> | |
<option value="col-xs-12 col-sm-12 col-md-12" <?php echo ($css_class=='col-xs-12 col-sm-12 col-md-12')?'selected':'' ?>>Full Width Desktop and Mobile</option> | |
</select> | |
</p> | |
<?php | |
} | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment