Learn CSS in style

Creating A WordPress Plugin Part 8 – Updating The Plugin Code

So in part 7 we updated the readme.txt to build our plugin page on wordpress.org and to give users some documentation on how to use our software.

It’s been over a year since I’ve worked on the plugin and it’s time to make a quick update. This is going to be more about making the updates and less about the actual programming behind it, if you find yourself stuck or if you have any questions please send us a message or leave a comment.

Starting at version 1.0, we had very limited features. So the first thing we’ll want to do is create a list of new features we want to ad.

currently we can specify image url,link, height and width. So let’s ad the ability to specify the alt, nofollow, and target of the link.

We have 3 files we have to edit, the widget, template tag, and the short code. We’ll start with boss_banner_ad/includes/widget.php

Inside the form function, we need to declare the new variables we’re going to use for the instance.

if ( isset( $instance[ 'newwindow' ] ) ) { $boss_newwindow = $instance[ 'newwindow' ]; } else { $boss_newwindow = __( 'checked' , 'text_domain' ); }
if (isset($instance['alt'])) { $boss_alt = $instance['alt']; } else { $boss_alt = __('','text_domain'); }
if ( isset( $instance[ 'nofollow' ] ) ) { $boss_nofollow = $instance[ 'nofollow' ]; } else { $boss_nofollow = __( 'checked' , 'text_domain' ); }

we are using check boxes for new window and no follow attributes, and a text area for the ALT to allow our users to type what they want the alt text to be. This sets the defaults to checked and leaves the ALT blank for you to fill out.

now we need to insert the actual form HTML for the widget. we’re going to extend the current form and just add

				<label for="<?php echo $this->get_field_id( 'alt' ); ?>"><?php _e( 'Image Alt Text:' ); ?></label> 
				<input class="widefat" id="<?php echo $this->get_field_id( 'alt' ); ?>" name="<?php echo $this->get_field_name( 'alt' ); ?>" type="text" value="<?php echo esc_attr( $boss_alt ); ?>"/>
				<label for="<?php echo $this->get_field_id( 'newwindow' ); ?>"><?php _e( 'Open In New Window:' ); ?></label> 
				<input id="<?php echo $this->get_field_id( 'newwindow' ); ?>" name="<?php echo $this->get_field_name( 'newwindow' ); ?>" type="checkbox" value="<?php echo esc_attr( $boss_newwindow ); ?>" <?php checked( (bool) $boss_newwindow, true ); ?> />
				<label for="<?php echo $this->get_field_id( 'nofollow' ); ?>"><?php _e( 'No Follow:' ); ?></label> 
				<input id="<?php echo $this->get_field_id( 'nofollow' ); ?>" name="<?php echo $this->get_field_name( 'nofollow' ); ?>" type="checkbox" value="<?php echo esc_attr( $boss_nofollow ); ?>" <?php checked( (bool) $boss_nofollow, true ); ?> />

Now that we can insert our data we need to make sure that we can save it. So in the update function we need to ad the same variables for the instance.

So before we “return $instance” we need to ad

			$instance['alt'] = strip_tags( $new_instance['alt'] );
			$instance['nofollow'] = ( isset( $new_instance['nofollow'] ) ? 1 : 0 );
			$instance['newwindow'] = ( isset( $new_instance['newwindow'] ) ? 1 : 0 );

Bam, now all our options are getting saved. Let’s put them all to use in the actual output by updating the widget function.

we’ll first pull the data from the $instance variable and define some new variables to work with.

			if ( $instance['newwindow'] == 1 ) { $newwindow = 'target="_blank"'; } else { $newwindow = ''; }
			if ( $instance['nofollow'] == 1 ) { $nofollow = 'rel="nofollow"'; } else { $nofollow = ''; }
			if ( $instance['alt'] != '' ) { $alt = $instance['alt']; }

So we are going to take

<a href="<?php echo $link_url; ?>"><img src="<?php echo $image_url; ?>" height="<?php echo $image_height; ?>" width="<?php echo $image_width; ?>" alt="" /></a>

and changing it to

<a href="<?php echo $link_url; ?>" <?php echo $nofollow . $newwindow; ?>><img src="<?php echo $image_url; ?>" <?php echo $image_height . $image_width; ?> alt="'.$alt.'" /></a>

The alt tag should *always* be defined on an image tag, so that’s why I chose to hardcode alt=”” into the html instead of the variable, so that way wether you define ALT or not, the alt=”” shows up. Seriously though, you should set the alt tag to something descriptive.
Screen shot 2013-07-16 at 12.31.05 PM

So now that the widgets done, lets tackel the shortcode. Open up /boss_banner_ad/includes/shortcode.php

First thing we’ll need to do is define the new attributes we want to get. So we’ll add these to the extract() array

			'newwindow' => 'yes',
			'alt' => '',
			'nofollow' => '',

I set the default for newwindow to yes, and I named it newwindow so that it was easier to remember instead of having to remember target=”_blank”.

Now we just update the output to include the new attributes

return '<a href="'.$url.'" '. $boss_target . $boss_nofollow.'><img src="'.$image.'" '.$boss_height . $boss_width .' alt="'.$boss_alt.'"/></a>';

and bam there we go!

Let’s tackle the template tag and update this beast… open up /boss_banner_ad/includes/template_tag.php

The first thing we’ll check to see if the variables are set, if they are we need to set the html and if they are not we need to define the default value.

	if ( isset( $nofollow )) { $nofollow = 'rel="'.$nofollow.'"'; } else { $nofollow = ''; }
	if ( isset( $target )) { $target = 'target="_blank"'; } else { $target = ''; }
	if ( isset( $alt )) { $alt = $alt; } else { $alt = ''; }

Then we place the variables inside the output where we want them, like so

return '<a href="' . $link . '" ' . $target . $nofollow . '><img src="' . $image . '" alt="' . $alt . '"' . $width . $height . ' /></a>';

Okay so we’ve updated all the functionality, now it’s time for us to go and update the documentation! Open the readme.txt

we’ll update the change log with what we did,

== Changelog ==
= 2.0 =
added alt, target and nofollow attributes to use for the widget, template tag, and shortcode. 

Pretty simple update, so let’s tell our users how to use our new features. I’ve updated the documentation to reflect the new features like :

3. For the template tag you need to supply a list of attributes in this order : ( $image, $link, $target, $alt, $width, $height, $nofollow ), example: <?php boss_banner('images/cssboss_logo.png','cssboss.com','newwindow','CSSBoss.com is the best','100','100','nofollow'); ?>
4. For the widget, simply drag and drop the widget into a sidebar, and configure the attributes to how you'd like. 
5. For the shortcode, simply put [banner_ad link="//www.cssboss.com" image="//cssboss.com/wp-content/uploads/2012/02/cssbosslogo.png" width="100" height="100" newwindow="yes" alt="CSSBoss.com is the best!" nofollow="yes"]

At the time of writing this blog post, the latest version of WordPress is 3.5.2 so i updated the requires / tested up to versions to that. I always use the latest versions, that’s all i want to support, you’re free to use any version you see fit.

Requires at least: 3.5.2
Tested up to: 3.5.2

then we update the stable tag from 1.0 to 1.1

Part 9 will be pushing the update to WordPress’ SVN!