WordPress Reflection Plugin – Step 1 – Counting Links

The idea that technology ought to help students reflect on their use of technology seems to make sense. As we have more and more students engaging in online writing little things come to light. Take the humble/magical hyperlink for example. We often look at the use of hyperlinks as a marker for progress in digital fluency. Are students using the thing that makes the web so webby? Can we help make that a point of reflection for them?¹ I had a conversation with Laura a while back about pulling out URLs and looking at the their use over time by students.² Clearly, these aren’t pure quantitative things. You’ll never say “Six links? Failure!” or even “Seventy four links? That’s an A+.” Not that I would ever think that about you but this is on the Internet and I don’t want anyone tying hyperlink numbers to Bloom’s levels and then linking to me. But it would be interesting to look back over your writing and see when you use lots of links and when you don’t. So, at the moment, that’s what this plugin does. It’ll do some more tricks in the future but these are early days.

The plugin as it sits now (below) will do three things. It’ll run a regex on the post and store all the URLs it finds as an array in a custom field named URL_array. It’ll count how many links are in that array and store that number as a custom field named URL_count. Finally, it’ll also count how many words are in the post and store that number in a field named word_count. I threw that last one in there because I thought the word/link ratio might be worth looking at at some point.

Right now, the plugin is triggered anytime a post is saved/edited/published. That works fine going for posts that haven’t been written yet but isn’t great for applying to sites that already have lots of content. I don’t believe it’ll be a big deal to figure how to run it against already published posts but I’ve yet to do it. My temporary workaround as I’ve demo’d it on my own site was to bulk edit posts and add a tag. I did that on two pages worth of posts to get around 40 posts with the plugin data. I then deleted the tag. Not pretty but it works- which may become my motto.³

So, now what we’ve attached these three chunks of data to a post what can we do? Well, lots of stuff.

This particular example is built around a few things.

• The JSON V2 API WP plugin – you could do this in lots of other ways but since JSON is the future/now, I’m trying to get a better handle on it
• Rest API Enabler WP plugin – allows you to make custom fields visible in the JSON easily. I had to modify the plugin a bit to make it work.
• Angular javascript framework – Mark got me started messing with Angular and I’ve continued. This could all be done in PHP or anything else you wanted.

Here is the raw4 JSON with the API enabler making the custom fields visible. Now that we’ve made the data accessible (for 30 posts) anyway, we can start to manipulate it.

Angular lets us pull in the feed – http://bionicteaching.com/wp-json/wp/v2/posts/?filter[posts_per_page]=30 – and then loop through it pretty simply. The CSS to make stuff into bars is directly from here which I borrowed from Alan based on an earlier unrelated Twitter conversation. The full page is here if you want it. I’ll be either integrating it into the plugin or making it a tool that’ll fill with your data via URL parameters in the next few days.

Get It

var app = angular.module('myApp', ['ngSanitize']);
$gURL = "http://bionicteaching.com/wp-json/wp/v2/posts/?filter[posts_per_page]=30";
app.controller('SuperCtrl', function($scope, $http) {
    $http.get($gURL)
    .success(function(response) {$scope.entries = response;});
});

Loop Through It

<ul class="skill-list">

 <div ng-repeat="entry in entries | filter: search | orderBy:'date' : 'reverse'"  class="col-md-10 col-md-offset-2">
      <div ng-bind-html="entry">
    	  <li class="skill">
   			 <h3><a href="{{ entry.link }}"><span ng-bind-html="entry.title.rendered">{{ entry.title.rendered }}</span></a> - {{ entry.URL_count[0] }} URLs & {{ entry.word_count[0] }} words</h3>
    			<progress class="skill-1" max="100" value="{{ entry.URL_count[0] }}"><!-- these get stored as arrays even though they're one item, which might be my mistake, adding [0] just displays it as a string -->
    		 		 <strong> URLs: {{ entry.URL_count[0] }}%</strong>
    			</progress>
  </li>

      </div>
  </div>
</ul>  

Next Steps

The next steps are going to be integrating and improving the data visualization elements. I’d like it to be much more explorable and will probably look at integrating a javascript charting library of some kind. I’m also going to work at paring the URLs down to their core and counting/displaying that data. Something like – You’ve linked to http://stackoverflow.com 13 times over 8 posts. I’m also going to see how hard an admin interface for the plugin would be that would enable a few different options like CSV downloads, striking img URLs etc.

The Plugin

<?php
/*
Plugin Name: URL counter
Plugin URI:  http://URI_Of_Page_Describing_Plugin_and_Updates
Description: This describes my plugin in a short sentence
Version:     .54
Author:      Tom Woodward
Author URI:  http://bionicteaching.com
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages
Text Domain: my-toolset

*/

defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

add_action('save_post', 'countURLs');
add_action('draft_to_publish', 'countURLs');
add_action('pending_to_publish', 'countURLs');
function countURLs ($post_id){
		$new_post = get_post($post_id);
		$content = get_post_field( 'post_content', $new_post->ID );
		//get word count
   		$word_count = str_word_count( strip_tags( $content ) );
   		//regex to get URLS
		$pattern = '"\"https?:\/\/([^\"]*)\""';
		preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);
		//counts the items in the URL array
		$count = (count($matches));
		//actions below write the variables to the various custom fields
		update_post_meta($new_post->ID, 'URL_count', $count);
		update_post_meta($new_post->ID, 'word_count', $word_count );
		update_post_meta($new_post->ID, 'URL_array', $matches );
}