Biology Field Journal Continues

I think this is kind of a neat WordPress theme trick. You can download/fork it here if you want or go over here and try it out.

Screen Shot 2014-04-10 at 10.35.04 PM

I took the mixitup child theme from a little while back and modified it a bit. This new page template uses posts rather than attachments and adds the page text above the images. It is also smarter about removing some of the sorting categories it displays for the posts.


  • create a page
  • name that page the same name as one of your category posts
  • apply the template (Featured image sort by page name/category)
  • now all the posts from that category show up under the body of that post in sortable format

The Changes

I’m trying out the Syntax Highlighter plugin given how much more often I’m posting code lately. I also really commented up the page. I am still struggling to find a decent way to do this kind of exposition about code and the process it took to figure out the code.

 * Template Name: Featured image sort by page name/category

  <div id="primary" class="content">
	<div id="content" role="main">

		<?php get_template_part( 'content', 'page' ); ?>
		<?php if (have_posts()) : while (have_posts()) : the_post(); //this chunk displays the page text ?>
		  <div class="entry-content">
			<?php the_content(); ?>
<?php endwhile; endif; ?>

	  <div class="controls">
		<button class="filter" data-filter="all">All</li>
		<?php  //this sets up the filtering buttons based on categories and removes all categories that are the same as page titles
		    $pages = get_pages(); //what pages exist?
		    	  $idcat = array(); //make them a list
		    	  foreach ( $pages as $page ) { //for each page
		    		$option = $page->post_title; //get the name of the page
		    		$idObj = get_category_by_slug($option); //make that name into the slug (essentially add the dashes)
		    		$idcat[] = $idObj->term_id; //Take that name and change it into the ID of the category so it can be removed from the sorting diplsay below. I also now know the square brackets build an array thanks to Alan Levine (@cogdog). 
		     $args = array('exclude' => implode(",", $idcat)); // takes $idcat list from above to exclude the categories that are the same as the page names from the filter list. Implode changes it from an array into a string which get_categories needs. You can also add agruments here of other types.
		 	$categories = get_categories($args);
		  	foreach ($categories as $category) {
			echo '<button class="filter" data-filter="'. $category->slug .'">'. $category->name .'</button>'; // more category stuff to create the filter buttons- sets the class to the slug and displays the actual category name
	  <?php global $post;
	  			$slug = get_post( $post )->post_name; // this gets the name of the page
	  		 	$idObj = get_category_by_slug($slug);  // this takes the name and makes it a slug
	  		 	$include = $idObj->term_id; //this turns the slug into a category number so it can be used to pull in all the posts with the same category as the page name. A page named 'Bob' will pull in all posts with the category 'Bob'
			<ul id="mixer">
		  <?php //this is where the thumbnails are generated
			$args = array('cat' => $include,'post_type' => 'post', 'posts_per_page' => 40);//I limited display to 40 posts out of performance fears. You could add other arguments here.
			$thumbnails = get_posts($args);
			if ($thumbnails) {
			  foreach ($thumbnails as $thumbnail) { //generates the thumbnails in a loop
				$post_id = $thumbnail; 
				$post_cat = get_the_category($post_id);
				$post_title = get_the_title($post_id);
				$categories = get_the_category($post_id);
				$separator = ' '; //makes a space between categories but you could change it to other stuff
				$output = '';
				if ($categories){ //loops through the categories per post
					foreach ($categories as $category ) {
						$output .= $category->slug.$separator;

				echo '<li class="mix '.$output.'">'; // adds the categories as class elements 
				echo '<a href="'. get_permalink ($thumbnail) .'">';
				echo get_the_post_thumbnail($thumbnail->ID, 'thumbnail'); // get and display thumbnail based on the featured image- use the to generate them automatically based on the first image in the post
				echo '<p>';
				echo $post_title .'<br />'; // post title which is probably obvious
				echo '</p></a></li>';

Weekly Web Harvest (weekly)

Posted from Diigo. The rest of my favorite links are here.

OER Presentation

I gave a variation of a talk I’ve given before about all the stuff on the web that ought to be considered both educational and open. My rather blurry definition of open is that I can link to it on the Internet without a password- from there it’s degrees of openness towards Nirvana.

I may be getting towards some elements that I think matter in the selfies series of links and with the Shorpy photo becoming a writing prompt randomizer thanks to interactions with Luke Neff. They both start to grow and change based on input, then interaction, and then creation.

Anyway, there may be some stuff that’s useful to someone and since I went to all the trouble of writing it down I might as well make it visible.

Screen Shot 2014-04-03 at 8.51.24 PM

Biology Field Journal – Gravity Forms + Google Maps for WordPress

Turns out this won’t work for what I originally planned but the pattern is sound. You can see the form here and examples of the form submissions here.

You’ll need Gravity Forms (pay but well worth it) and Google Maps for WordPress but the idea should work for all kinds things.

The original goal was to have structured posts from students and the ability to associate those posts with a point on Google Maps.

After turning on the plugins, all the work is done in Gravity Forms.

Initially, make a text entry fields for latitude and separate text field for longitude. Add all the other fields you want in the mix. In this case we added some categories to do with the environment, plant descriptions etc.

Gravity Forms is fairly unique in that it has post elements for WP built in. I added the Post Body and Post Title fields at the bottom. Now we just need to create the content template that’ll mix our variables into the body of the post.

Screen Shot 2014-04-03 at 8.51.24 PM


You’ll notice in the image above that when  you mouse over an element it displays the Field ID – in this case 2. That’s important as to add this field you’ll need to reference both the title and the field ID like so {Latitude:2}.

The image below blends the form entries and the shortcode for the Google Map plugin in a way that’s transparent to the user.

Screen Shot 2014-04-03 at 8.51.53 PM


It’s important to then flip over to the advanced properties of the post form entry and change the visibility to Admin Only. That will keep users from seeing this element in the form.

Screen Shot 2014-04-03 at 8.52.15 PM

Oh yeah, the cheaters way to get latitude/longitude is to go to Google maps and either enter the address or move the map until the place you want is about in the middle. In the URL, highlighted in blue below, you’ll see the lat/long for the Hebrides ( between the @ and the first comma - 56.97835,-7.4873145).

Also, here’s the export of my  Gravity Form if you want to use it as a starting point. gravityforms-export-2014-04-04.xml