Automatically Updating Giveaway Sidebar Widget

Posted by on in Blogging / 0 comments


Automatically Updating Giveaway Sidebar Widget

Consider checking out the Ultimate Book Blogger Plugin. It comes with this widget already integrated, plus much more!

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, a generic message will be displayed (“None right now! Check back soon. :)”). Of course, you could also just manually remove the widget when you have no giveaways to advertise.

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: http://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: Ashley Evans
Version: 1.0
Author URI: http://www.nosegraze.com/
*/
 
 
class giveawaysWidget extends WP_Widget {

	function giveawaysWidget() {
		$widget_ops = array(
			'classname'		=>	'giveawaysWidget',
			'description'	=>	'Showcases your current and future giveaways'
		);
		
    	$this->WP_Widget('giveawaysWidget', 'Giveaways', $widget_ops);
	}
 
	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'giveaway_text' => '' ) );
		$title = $instance['title'];
		$giveaway_text = $instance['giveaway_text'];
?>

  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
  
  <p><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 echo attribute_escape($giveaway_text); ?></textarea></p>
  
<?php
	}
 
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = $new_instance['title'];
		$instance['giveaway_text'] = $new_instance['giveaway_text'];
		return $instance;
	}
 
	function widget($args, $instance) {
		extract($args, EXTR_SKIP);
	 
		echo $before_widget;
		$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
		$giveaway_text = empty($instance['giveaway_text']) ? ' ' : apply_filters('widget_text', $instance['giveaway_text']);
	 
		// WIDGET CODE BEGINS ========================================
		global $wp_query;
		$args = array(
				'cat'				=> 149,
				'order'				=> 'DESC',
				'posts_per_page'	=> -1
		);
		$posts = query_posts( $args );
		$is_posts = 0;
		
		if($posts) {
			foreach($posts as $post) {
				$giveaway_end_date = get_field('giveaway_end_date', $post->ID);
				if(time() < strtotime($giveaway_end_date)) {
					$is_posts = 1;
				}
			}
		}
		
		if($is_posts >= 1) {
			echo $before_title . "Current Giveaways" . $after_title;
			echo '<ul>';
		 
			foreach($posts as $post)
			{
				$giveaway_prize = get_field('giveaway_prize', $post->ID);
				$giveaway_image = get_field('giveaway_image', $post->ID);
				$giveaway_end_date = get_field('giveaway_end_date', $post->ID);
				$giveaway_winner = get_field('giveaway_winner', $post->ID);
				
				if(time() < strtotime($giveaway_end_date)) {
					echo '<li><a href="' . get_permalink($post->ID) . '">' . $giveaway_prize . ' &mdash; Ends ' . $giveaway_end_date . '</a></li>';
				}
			}
		 
			echo '</ul>';
		}
		
		if ($giveaway_text != ' ') {
			echo $before_title . "Upcoming Giveaways" . $after_title;
			echo $giveaway_text;
		}
		
		if (($giveaway_text == ' ') && ($is_posts < 1)) {
			echo $before_title . "Giveaways" . $after_title;
			echo '<p>None right now!  Check back soon. :)</p>';
		}
		
		?>
		<p class="subtext right"><a href="/giveaways">View all giveaways &raquo;</a></p>
		<?php 
		
		wp_reset_query();
		// END WIDGET CODE ========================================
	 
		echo $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:
    <p class="subtext right"><a href="/giveaways">View all giveaways &raquo;</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:
    echo '<li><a href="' . get_permalink($post->ID) . '">' . $giveaway_prize . ' &mdash; Ends ' . $giveaway_end_date . '</a></li>';
    And change it to something like this:
    echo '<li><a href="' . get_permalink($post->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! :)

Leave a Reply

CommentLuv badge