Requirements
- Must be using a self-hosted WordPress blogging platform.
- Must be able to upload new plugin files.
- Must have the Advanced Custom Fields plugin installed, and understand how to use it to create new fields.
- Coding knowledge is highly encouraged. You will probably have to go digging through a bit of code and modify what I give you to suit your needs. Some knowledge of PHP would be helpful.
Other Helpful/Related Tutorials
What We’ll Be Creating
Do you have a lot of giveaways? Do you get sick of having to constantly update your giveaway advertisements on your sidebar? Never fear, automatically updating sidebar widget is here!
This was my very first time creating a widget so I honestly don’t know how sloppy my work is (if it is). All I know is that this widget works, I’ve been using it for a few weeks, and I find it to be useful! So I thought I’d share. 🙂
This widget has two main features:
- It will automatically go through all your giveaway posts. It will determine which ones have not yet ended, and will display those giveaways in the sidebar widget. If none are still open, none will be displayed.
- You have the option to manually type in “Upcoming Giveaways.” So you can advertise giveaways that have not yet been posted but will soon be available! Get your readers excited!
- If you have no giveaways currently running and do not have any Upcoming Giveaways typed in, the widget will not appear (yay for saving space!).
The best part is that Advanced Custom Fields makes this widget completely customizable (provided you’re willing to dig into some code). You can choose how you want your current giveaways to be displayed. You can display an image for that giveaway, or just the text, or the text plus the end date, and so on. It’s up to you!
Sound good? YES! So let’s get started! 🙂
Step 1: Advanced Custom Fields
Make sure you have the Advanced Custom Fields plugin installed and that you understand how to use it. If not, check out my tutorial here: How to Use Custom Fields for Entering Book Information. The tutorial is centered around using the plugin for entering in book information, but it also goes through the steps of how to set up and use the plugin.
You don’t have to follow this part of the guide exactly. It’s up to you to decide what fields you want to include for each giveaway post. Here’s how I have mine set up:
For each giveaway post, I have field options for:
- Giveaway Prize – what book(s) I’m giving away
- Giveaway Winner – to be filled out at the end of the giveaway
- Giveaway End Date – when the giveaway ends
- Giveaway Image – I don’t currently use images to advertise giveaways, but I thought I might in the future, so I have left myself an option to upload a banner or graphic to advertise my giveaway
So create a new field group called “Giveaways” or something similar, then create whatever fields you want for your giveaways. Giveaway End Date is necessary for this widget to work properly!! I would also encourage Giveaway Prize if you’re not doing a Giveaway Image, so it’s clear what your giveaway is for.
Step 2: The Scary Code
Okay you’ll probably want to open some sort of text edit application for this. Here is the code for the widget (I’ll explain more in a minute):
<?php
/*
Plugin Name: Giveaway Widget
Plugin URI: https://www.nosegraze.com/automatically-updating-giveaway-sidebar-widget
Description: This widget automatically showcases your current giveaways and gives you the option to manually type in future giveaways.
Author: Nose Graze
Version: 1.0
Author URI: https://www.nosegraze.com/
*/
class giveawaysWidget extends WP_Widget {
/**
* Sets up the widget's name, etc.
*/
public function __construct() {
parent::__construct(
'giveawaysWidget', // Base ID
__( 'Giveaways', 'giveaways' ), // Name
array( 'description' => __( 'Automatically showcases your current and future giveaways', 'giveaways' ), ) // Args
);
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array(
'title' => __( 'Current Giveaways', 'giveaways' ),
'giveaway_text' => '',
) );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'giveaways' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php esc_attr_e( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id( 'giveaway_text' ); ?>"><?php _e( 'Upcoming Giveaways:', 'giveaways' ); ?></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id( 'giveaway_text' ); ?>" name="<?php echo $this->get_field_name( 'giveaway_text' ); ?>"><?php esc_attr_e( $instance['giveaway_text'] ); ?></textarea>
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['giveaway_text'] = $new_instance['giveaway_text'];
return $instance;
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
$title = empty( $instance['title'] ) ? '' : apply_filters( 'widget_title', $instance['title'] );
$giveaway_text = empty( $instance['giveaway_text'] ) ? ' ' : apply_filters( 'widget_text', $instance['giveaway_text'] );
echo $args['before_widget'];
// WIDGET CODE BEGINS ========================================
$args = array(
'cat' => 149,
'order' => 'DESC',
'posts_per_page' => - 1
);
$giveaways = get_posts( $args );
$giveaway_list = '';
// Loop through each giveaway.
foreach ( $giveaways as $giveaway ) {
$giveaway_end_date = get_field( 'giveaway_end_date', $giveaway->ID );
// This giveaway has ended, skip it.
if ( time() > strtotime( $giveaway_end_date ) ) {
continue;
}
$giveaway_prize = get_field( 'giveaway_prize', $giveaway->ID );
$giveaway_image = get_field( 'giveaway_image', $giveaway->ID );
$giveaway_winner = get_field( 'giveaway_winner', $giveaway->ID );
$giveaway_list .= '<li><a href="' . get_permalink( $giveaway->ID ) . '">' . $giveaway_prize . ' — Ends ' . $giveaway_end_date . '</a></li>';
}
// If we actually have giveaways in the list, display the widget title and that list.
if ( ! empty( $giveaway_list ) ) {
// Widget title.
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// Current giveaways.
echo $giveaway_list;
// Upcoming giveaways.
if ( ! empty( $giveaway_text ) ) {
echo $giveaway_text;
}
} elseif ( ! empty( $giveaway_text ) ) {
echo $giveaway_text;
}
echo '<p class="subtext right"><a href="/giveaways">' . __( 'View all giveaways »', 'giveaways' ) . '</a></p>';
// END WIDGET CODE ========================================
echo $args['after_widget'];
}
}
add_action( 'widgets_init', create_function( '', 'return register_widget("giveawaysWidget");' ) );
Yeeeeks! That’s a bit scary. Let me point out a few things:
- Look for where it says “WIDGET CODE BEGINS =====” – you need to edit something here! Look for this code:
$args = array( 'cat' => 149, 'order' => 'DESC', 'posts_per_page' => -1 );
See where it says ‘cat’ => 149 ? Well you’ll have to change that! It’s basically pointing to the ID of your Giveaway category. The ID for my Giveaway post category is 149. So you need to change it to yours! 🙂 Otherwise the widget will not work!
- Next, you’ll have to make sure that your field IDs exactly match mine. If not, you’ll have to change them in the code. My IDs are giveaway_prize, giveaway_image, giveaway_end_date, and giveaway_winner. So if yours are named differently, you can just do a “Find and Replace” to fix them.
- A few lines from the bottom, look for this bit of code:
echo '<p class="subtext right"><a href="/giveaways">' . __( 'View all giveaways »', 'giveaways' ) . '</a></p>';
This URL is pointing to my giveaway page. If you have your own giveaway page you can change the URL so it points to yours. Also keep in mind that “subtext” and “right” are CSS classes I use with my theme. You’ll probably have to edit/change those to style it how you want. If you have your own giveaway page, you can remove that line entirely.
- As I said earlier, I’m not actually using graphics in this code. I’m only displaying text (the prize and end date). It’s set up to grab images though. If you’d rather display images, then find this line of code:
$giveaway_list .= '<li><a href="' . get_permalink( $giveaway->ID ) . '">' . $giveaway_prize . ' — Ends ' . $giveaway_end_date . '</a></li>';
And change it to something like this:
$giveaway_list .= '<li><a href="' . get_permalink($giveaway->ID) . '"><img src="' . $giveaway_image . '" alt="' . $giveaway_prize . '"></a></li>';
If that doesn’t work or if you need more help with it, just let me know!
So, once you have everything all sorted out, save the file as something like giveaway-widget.php
Step 3: Uploading & Activating the Widget
Once you’ve saved the file, you need to upload it to the /wp-content/plugins directory. Once you do that, go to your plugins page, look for the Giveaways Widget plugin, and Activate it. Then, you can go to Appearance » Widgets and drag the widget over to your sidebar! If you want to advertise some upcoming giveaways, add your HTML into the text box and click Save. All done!
Questions?
As I said, this was my first time ever coding a widget, and there might be a lot you have to change to make it fully compatible with your own site. So if you have any questions, don’t hesitate to let me know in the comments! 🙂