Recoding a Wordpress Widget with PHP/Javascript

routeFour · June 20, 2013

I am currently working off of a Wordpress template from Gavick. Here is the website: earthcharterfest.com/wordpress Within the homepage of the site, there is a widget that displays five circular containers under the header "Venues". The containers hold images that move one by one from the right to the left every few seconds or so. The content within the containers is determined by Wordpress "posts" within the Widget. So for every post I create, a new container is also created. What I would like to do is, instead of having the containers move left to right one by one, to make them move five containers at a time. This way I can have images all related to a single venue, and have other sets of images for various venues. I was told that in order to do this that these files must be edited:

/wp-content/themes/Fest/gavern/widget.speakers.php

is the file that generates content,
/wp-content/themes/Fest/js/widgets/speakers.js
is a jQuery file that creates animation.

However, I have very little experience with both Javascript and PHP. Can anyone be of assistance? Below are the two files that deal with the Circular Container Widget. Gavick calls this widget the Speakers Widget.

Website: earthcharterfest.com/wordpress

/wp-content/themes/Fest/js/widgets/speakers.js:

//
// GK Speakers Widget
//

jQuery(window).load(function(){
	jQuery(document).find('.widget_gk_speakers').each(function(i, widget) {	
		new GK_Speakers(jQuery(widget));
	});
});

function GK_Speakers(widget) {
	this.$G = null;
	this.current_offset = 0;
	this.anim_interval = 0;
	this.current = 0;
	this.total = 0;
	this.items = [];
	this.availableItems = null;
	this.hover = false;
	
	this.$G = {
		'animation_speed': 500,
		'animation_interval': 5000,
	};
	this.current_offset = 0;
	this.anim_interval = this.$G['animation_interval'];
	this.current = 4;
	this.total = widget.find('.gkw-rest-speakers .gkw-speaker').length;
		
	// if there is more than 5 slides
	if(this.total > 5) {
		// prepare handlers
		this.items[0] = widget.find('.gkw-speakers-small-left .gkw-speaker-small').first();
		this.items[1] = widget.find('.gkw-speakers-small-left .gkw-speaker-small').first().next();
		this.items[2] = widget.find('.gkw-speakers .gkw-speaker-big').first();
		this.items[3] = widget.find('.gkw-speakers-small-right .gkw-speaker-small').first();
		this.items[4] = widget.find('.gkw-speakers-small-right .gkw-speaker-small').first().next();
		// 
		this.availableItems = widget.find('.gkw-rest-speakers .gkw-speaker'); 
		//
		var $this = this;
		//
		jQuery(this.items).each(function(i, el) {
			jQuery(el).removeClass('speaker-hide');
		});
		// run the animation
		setTimeout(function() {
			$this.gkChangeSpeakers();		
		}, this.anim_interval + 400);
		
		jQuery(this.items).each(function(i, el) {
			jQuery(el).mouseenter(function() {
				$this.hover = true;
			});
			
			jQuery(el).mouseleave(function() {
				$this.hover = false;
			});
		});
	}
}

GK_Speakers.prototype.gkChangeSpeakers = function() {
	//
	var $this = this;
	//
	if(!this.hover) {
		// hide speakers
		jQuery(this.items).each(function(i, el) {
			jQuery(el).addClass('speaker-hide');
		});
		
		if(this.current < this.total - 1) {
			this.current += 1;
		} else {
			this.current = 0;
		}
		
		setTimeout(function() {
			var IDs = [0, 0, 0, 0, 0];
			IDs[4] = $this.current;
			totalOffset = $this.total;
			
			IDs[3] = ($this.current - 1 < 0) ? --totalOffset : $this.current - 1;
			IDs[2] = ($this.current - 2 < 0) ? --totalOffset : $this.current - 2;
			IDs[1] = ($this.current - 3 < 0) ? --totalOffset : $this.current - 3;
			IDs[0] = ($this.current - 4 < 0) ? --totalOffset : $this.current - 4;
			
			jQuery($this.items[0]).html(jQuery($this.availableItems[IDs[0]]).html());
			jQuery($this.items[1]).html(jQuery($this.availableItems[IDs[1]]).html());
			jQuery($this.items[2]).html(jQuery($this.availableItems[IDs[2]]).html());
			jQuery($this.items[3]).html(jQuery($this.availableItems[IDs[3]]).html());
			jQuery($this.items[4]).html(jQuery($this.availableItems[IDs[4]]).html());
		}, 600);
		
		// show speakers
		setTimeout(function() {
			jQuery($this.items).each(function(i, el) {
				jQuery(el).removeClass('speaker-hide');
			});
		}, 750);
	}
	//
	setTimeout(function() {
		$this.gkChangeSpeakers();		
	}, this.anim_interval + 800);
};

/wp-content/themes/Fest/gavern/widget.speakers.php:

<?php

/**
 * 
 * GK Speakers Widget class
 *
 **/

class GK_Speakers_Widget extends WP_Widget {
	/**
	 *
	 * Constructor
	 *
	 * @return void
	 *
	 **/
	function GK_Speakers_Widget() {
		$this->WP_Widget(
			'widget_gk_speakers', 
			__( 'GK Speakers', GKTPLNAME ), 
			array( 
				'classname' => 'widget_gk_speakers', 
				'description' => __( 'Use this widget to show rotator with speakers', GKTPLNAME) 
			)
		);
		
		$this->alt_option_name = 'widget_gk_speakers';

		add_action( 'save_post', array(&$this, 'refresh_cache' ) );
		add_action( 'delete_post', array(&$this, 'refresh_cache' ) );
		add_action('wp_enqueue_scripts', array('GK_Speakers_Widget', 'add_scripts'));
	}
		
	static function add_scripts() {
		wp_register_script( 'gk-speakers', get_template_directory_uri() . '/js/widgets/speakers.js', array('jquery'));
		wp_enqueue_script('gk-speakers');
	}

	/**
	 *
	 * Outputs the HTML code of 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
	 *
	 **/
	function widget($args, $instance) {
		$cache = get_transient(md5($this->id));
		
		// the part with the title and widget wrappers cannot be cached! 
		// in order to avoid problems with the calculating columns
		//
		extract($args, EXTR_SKIP);
		
		$title = apply_filters('widget_title', empty($instance['title']) ? __( 'Speakers', GKTPLNAME ) : $instance['title'], $instance, $this->id_base);
		
		echo $before_widget;
		echo $before_title;
		echo $title;
		echo $after_title;
		
		if($cache) {
			echo $cache;
			echo $after_widget;
			return;
		}

		ob_start();
		//
		$category = empty($instance['category']) ? '' : $instance['category'];
		$anim_speed = empty($instance['anim_speed']) ? 500 : $instance['anim_speed'];
		$anim_interval = empty($instance['anim_interval']) ? 5000 : $instance['anim_interval'];
		//
		$gk_loop = new WP_Query( 'category_name=' . $category . '&post_type=gavern_speakers');
		$speakers = array();
		
		while($gk_loop->have_posts()) {
			$gk_loop->the_post();
			
			array_push($speakers, array(
				'title' => get_the_title(),
				'img' => wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ),
				'url' => get_permalink()
			));
		}
		
		wp_reset_postdata();
		
		if (count($speakers)) {			
			if(count($speakers) >= 5) {
				echo '<div class="gkw-speakers">
					<div class="gkw-speaker-big speaker-hide">
						<div>
							<a href="'.$speakers[2]['url'].'">
								<img src="'.$speakers[2]['img'].'" alt="'.$speakers[2]['title'].'" />
							</a>
						</div>
						<h4>
							<a href="'.$speakers[2]['url'].'" title="'.$speakers[2]['title'].'">'.$speakers[2]['title'].'</a>
						</h4>		
					</div>
				
					<div class="gkw-speakers-small-left">
						<div class="gkw-speaker-small speaker-hide">
							<div>
								<a href="'.$speakers[0]['url'].'">
									<img src="'.$speakers[0]['img'].'" alt="'.$speakers[0]['title'].'" />
								</a>
							</div>
							<h4>
								<a href="'.$speakers[0]['url'].'" title="'.$speakers[0]['title'].'">'.$speakers[0]['title'].'</a>
							</h4>
						</div>
					
						<div class="gkw-speaker-small speaker-hide">
							<div>
								<a href="'.$speakers[1]['url'].'">
									<img src="'.$speakers[1]['img'].'" alt="'.$speakers[1]['title'].'" />
								</a>
							</div>
							<h4>
								<a href="'.$speakers[1]['url'].'" title="'.$speakers[1]['title'].'">'.$speakers[1]['title'].'</a>
							</h4>
						</div>
					</div>
				
					<div class="gkw-speakers-small-right">
						<div class="gkw-speaker-small speaker-hide">
							<div>
								<a href="'.$speakers[3]['url'].'">
									<img src="'.$speakers[3]['img'].'" alt="'.$speakers[3]['title'].'" />
								</a>
							</div>
							<h4>
								<a href="'.$speakers[3]['url'].'" title="'.$speakers[3]['title'].'">'.$speakers[3]['title'].'</a>
							</h4>
						</div>
						
						<div class="gkw-speaker-small speaker-hide">
							<div>
								<a href="'.$speakers[4]['url'].'">
									<img src="'.$speakers[4]['img'].'" alt="'.$speakers[4]['title'].'" />
								</a>
							</div>
							<h4>
								<a href="'.$speakers[4]['url'].'" title="'.$speakers[4]['title'].'">'.$speakers[4]['title'].'</a>
							</h4>
						</div>
					</div>
				</div>
			
				<div class="gkw-rest-speakers">';
				
				for($i = 0; $i < count($speakers); $i++) {
				
					echo '<div class="gkw-speaker">
						<div>
							<a href="'.$speakers[$i]['url'].'">
								<img src="'.$speakers[$i]['img'].'" alt="'.$speakers[$i]['title'].'" />
							</a>
						</div>
						<h4>
							<a href="'.$speakers[$i]['url'].'" title="'.$speakers[$i]['title'].'">'.$speakers[$i]['title'].'</a>
						</h4>
					</div>';
				}
					
				echo '</div>';
			}
		}
		// save the cache results
		$cache_output = ob_get_flush();
		set_transient(md5($this->id) , $cache_output, 3 * 60 * 60);
		// 
		echo $after_widget;
	}

	/**
	 *
	 * Used in the back-end to update the module options
	 *
	 * @param array new instance of the widget settings
	 * @param array old instance of the widget settings
	 * @return updated instance of the widget settings
	 *
	 **/
	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['category'] = strip_tags( $new_instance['category'] );
		$instance['anim_speed'] = strip_tags( $new_instance['anim_speed'] );
		$instance['anim_interval'] = strip_tags( $new_instance['anim_interval'] );
		$this->refresh_cache();

		$alloptions = wp_cache_get('alloptions', 'options');
		if(isset($alloptions['widget_gk_speakers'])) {
			delete_option( 'widget_gk_speakers' );
		}

		return $instance;
	}

	/**
	 *
	 * Refreshes the widget cache data
	 *
	 * @return void
	 *
	 **/

	function refresh_cache() {
		delete_transient(md5($this->id));
	}
	
	/**
	 *
	 * Limits the comment text to specified words amount
	 *
	 * @param string input text
	 * @param int amount of words
	 * @return string the cutted text
	 *
	 **/
	
	function comment_text($input, $amount = 20) {
		$output = '';
		$input = strip_tags($input);
		$input = explode(' ', $input);
		
		for($i = 0; $i < $amount; $i++) {
			$output .= $input[$i] . ' ';
		}
	
		return $output;
	}

	/**
	 *
	 * Outputs the HTML code of the widget in the back-end
	 *
	 * @param array instance of the widget settings
	 * @return void - HTML output
	 *
	 **/
	function form($instance) {
		$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
		$category = isset($instance['category']) ? esc_attr($instance['category']) : '';
		$anim_speed = isset($instance['anim_speed']) ? esc_attr($instance['anim_speed']) : '';
		$anim_interval = isset($instance['anim_interval']) ? esc_attr($instance['anim_interval']) : '';
	
	?>
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:', GKTPLNAME ); ?></label>
			<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>
		
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'category' ) ); ?>"><?php _e( 'Category slug:', GKTPLNAME ); ?></label>
			<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'category' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'category' ) ); ?>" type="text" value="<?php echo esc_attr( $category ); ?>" />
		</p>
		
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'anim_speed' ) ); ?>"><?php _e( 'Animation speed (in ms):', GKTPLNAME ); ?></label>
			<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'anim_speed' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'anim_speed' ) ); ?>" type="text" value="<?php echo esc_attr( $anim_speed ); ?>" />
		</p>
		
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'anim_interval' ) ); ?>"><?php _e( 'Animation interval (in ms):', GKTPLNAME ); ?></label>
			<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'anim_interval' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'anim_interval' ) ); ?>" type="text" value="<?php echo esc_attr( $anim_interval ); ?>" />
		</p>		
	<?php
	}
}

// EOF

trq · June 20, 2013

Sounds like your looking for a developer. We have a freelance section for such requests.

Sign In

Recoding a Wordpress Widget with PHP/Javascript

Recommended Posts

routeFour

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Browse

Activity

Important Information