Category Archives: Wordpress

oEmbed Additions in WordPress

freedom

One of the minor hassles of running WordPress Multisite is dealing with the rules about HTML cleansing- mainly the removal of iframe elements. You could install unfiltered MU but the plugin itself warns you that’s end-of-the-world dangerous and the plugin hasn’t been updated in two years. The combination might make one a bit nervous.

In this particular case, I have a group who wants to use videos from dotsub.com. Turns out it’s a good site for captioning and other things that make the video more accessible. This group is working on universal design so dotsub makes doubly good sense.

WordPress supports a number of sites using oEmbed. That’s the magic that allows you to paste in a YouTube URL and the embed codes are taken care of without you having to do anything. WordPress essentially run off a white list of sites that it accepts off the bat.

It turns out that oEmbed lists a bunch of sites that support the API and dotsub.com ended up being one of them.1 That means I just have to add dotsub.com to the WordPress install’s whitelist. The ever handy WordPress codex lets me know that I do that using wp_oembed_add_provider and further down on that page you’ll see that lives wp-includes/media.php.

I could have done it this way but I don’t like editing the core WordPress files for all sorts of reasons. One of them would be that I’d have to redo this every time WordPress updates. Another would be that I stand a much greater chance of seriously breaking something.

I figured I could write a plugin to do something similar. I have never written a plugin so I wandered around a bit looking for oEmbed plugins to use as an example. I found Codepen oEmbed relatively quickly.2 It is a dead simple plugin. It simply says (I left out the non-action stuff that says the name etc.) -

wp_oembed_add_provider( 'http://codepen.io/*/pen/*', 'http://codepen.io/api/oembed' );

That’s all there is to it. Who knew?3 Somehow I thought it’d be much harder and more involved.

All I had to do was replace the codepen url structure with the dotsub url structure, like so.

 wp_oembed_add_provider( 'http://dotsub.com/view/*', 'http://dotsub.com/services/oembed' );

dotsub.com had a handy page to help me get the structure straight. The first chunk is the URL structure and the second is the API endpoint on the site.

I haven’t done it yet but it seems like it’d be easy to keep adding URLS to this plugin to add additional oEmbed sites and it’d be fairly seamless. If wiser folk than I have better ways to do this, I’m all eyes, ears etc.


1 Another option is to view the page source and search for oembed.

2 You should checkout Code Pen. It is full of cool things.

3 Probably lots of people but still . . .

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.

Directions

  • 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
 *
 */
get_header('sort'); 
?>

  <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(); ?>
		  </div>
		
<?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
		  }
		?>
	  </div>
	  
	  <?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 http://wordpress.org/plugins/auto-post-thumbnail/ 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>';
			  }
			}
	?>

Diigo + FeedWordPress & WordPress Snap Workflow

These last few posts are an attempt to document both how things I post on this blog come back up and help me do new things and an attempt to document how I come to solutions for things that I don’t understand how to do. Then there’s an attempt to explain what I did in case anyone else wants to do the same. I hope that it’s a narrative on my learning process as much as it is a tutorial on the particular topic.

The Past

So I’m fairly focused on making things easier for myself for the simple fact that if they don’t make sense/work with my current life then I tend not to keep them up. A good examples is that way back in 20111 I modified the WordPress “Press This” bookmarklet in combination with the WordPress Snap plugin to allow me to auto generate screenshots of pages.

I used it a few times after that but it didn’t fit my workflow. It solved one problem- I wanted visuals of these websites to make the posts more engaging but I didn’t want to take screenshots, upload them etc.2 So one problem solved but the fact remained that I didn’t use “Press This” to bookmark pages. I used Diigo for that kind of thing so despite solving one workflow problem the “solution” died a relatively quick death. It’d be easy to write it off as a waste of time and a failure but it planted the seed in my head that I can modify bookmarklets to better do my bidding and it just required that I tweak it a bit more. I just needed a more pressing need to drive me to figure it out.

Enter the Need

At VCU we’re looking to aggregate a variety of interesting use cases of WordPress as a course website, open education projects, and other neat things. I’ve, once again, built things like this a number of times (mainly in Exhibit) in the past both at the Univ. of Richmond3 and HCPS. They are always well intended and start strong but quickly die, even with multiple authors, because they aren’t part of a workflow and episodic hurculean efforts are not a good way to get things like this done. You want them to live and grow and for that to happen it has to fit in the way people work.

Details

My goal was to use Diigo to post sites with the tag “item” to a blog. I wanted those posts to have a preview image of the page.

Step One

Install the FeedWordPress plugin
in the WordPress blog I was going to use. I decided on the highly creative tag of “item” to indicate the posts I wanted to go to this blog. Now in Diigo I just had to use the URL https://www.diigo.com/rss/user/bionicteaching/item to get that stuff into FeedWP and thus into the blog. So now anything I tag “item” becomes a blog post on that site and the tags from Diigo are tags in WordPress. Nice and seamless.

Adding Images- Snag #1

I installed WordPress Snap (it still works). I was going to have to come back and hand enter the shortcode but figured it was more likely to happen than taking screenshots. This didn’t quite work. Even when I could add information after allowing the syndicated copy to be modified the shortcode was still non-functioning. I was also missing the Visual/Text tabs in the editor which confused me. I went to Twitter for help.


This of course, prompted me to search more and figure it out.

Turns out that under Syndication>Posts & Links>Formatting you need to turn ON formatting filters. Which is pretty much the opposite of what I would have thought. At this point I decided to test and see if writing the shortcode in the Diigo bookmark would work and surprise, surprise it did.

My Memory- Snag #2

I couldn’t remember the shortcode for more than a few hours at a time. I’d change it to all sorts of things that were close but not close enough. Plus I didn’t do a good job remember the numbers etc. Granted I could have made a note somewhere and referenced it but this is the kind of things computers are for. I don’t want to have to do a repetitive thing or remember something boring and standardized. This sparked my memory of the previous bookmarklet.

The Revised Diigo Bookmark

I knew that the Chrome extension was likely to be overkill for what I wanted but I figured the lower weight Diigo bookmark would meet my needs and keep things simple enough to parse out quickly. I found a simple Diigo bookmarks someplace. Once you drag it to your bookmark bar you can right click on it and select edit. That got me this code.

javascript:javascript:(function()
{var url = location.href;var title = document.title || url;
var desc = (window.getSelection ? window.getSelection().toString() : document.getSelection ? document.getSelection()  : document.selection.createRange().text);
window.open('https://www.diigo.com/post?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '&desc=' + encodeURIComponent(desc)+'&client=simplelet#main','_blank','menubar=no,height=580,width=608,toolbar=no,scrollbars=no,status=no');
})();

Essentially, I wanted to wrap the url variable with the Snap shortcodes in the desc variable. I had to review some concatenation rules for javascript but it worked out alright. If you look below, on the 3rd line you’ll see all I added was[code]]czo2MzpcIiArXCdbc25hcCB1cmw9XCJcJyt1cmwrXCdcIiB3aWR0aD1cIjYwMHB4XCIgaGVpZ2h0PVwiMzUwcHhcIiBsaW5rPVwib25cIl1cJ1wiO3tbJiomXX0=[[/code] which seems pretty simple now. I used single quotes to enclose the string so that I could freely use double quotes. The plus signs allow me to stick string together and get what I want.

javascript:javascript:(function()
{var url = location.href;var title = document.title || url;
var desc = (window.getSelection ? window.getSelection()+'[snap url="'+url+'" w="600px" h="350px" link="on"]'.toString() : document.getSelection ? document.getSelection()  : document.selection.createRange().text);
window.open('https://www.diigo.com/post?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '&desc=' + encodeURIComponent(desc)+'&client=simplelet#main','_blank','menubar=no,height=580,width=608,toolbar=no,scrollbars=no,status=no');
})();

So if you wanted to use this, you can create a bookmark for any page and then edit it and replace the URL with the code above.

Further Work

I remain unable to get tags to auto enter through the bookmarklet. That whole section of the created URL seems to get ignored but I decided it wasn’t that big a deal for this use.


1 Nothing wrong with letting an idea ripen.

2 I’m lazy I guess.

3 It still LIVES! Or rather rots in obscurity. Although I still like the Bestiary themed presentation.

A WordPress Child Theme with MixItUp

Earlier, I attempted to integrate a slick javascript sorting library called MixItUp into a WordPress theme. It didn’t go all that well despite a series of tutorials from different people. After a decent amount of effort-

You can see a working example at this link. Click on “Moo” and it’ll sort. Click on “All” and it’ll revert to state. Some categories have no images attached so you’ll get nothing.1

The following is mainly based around this karine.do tutorial that I couldn’t quite get to work properly. Alan Levine saved me2 after I backed myself in a corner where the “tiles” would sort . . . and then immediately unsort. I’d get into the the details of the issues but essentially, be careful what you name you CSS elements (#gallery, for instance, will likely have conflicts) and call jquery by its name not by $. Anyway, I hope having all this together will help someone down the line.

Step one was seeing what WordPress suggested regarding child themes. I’ve never done it before but it seems pretty straight forward. Essentially, name your folder whatevertheme-child, in this case twentytwelve-child. All you need to make a child is one style.css file. In this case, we’re going to need a bit more.

Overview Notes

  • style.css – This will have the extra CSS to format the image grid and hide the elements that aren’t selected
  • full-width-sort.php – This gives us a page template we can apply to any page. I just copied the basics of the full-width-page.php template in the original theme and then added elements from the karine.do tutorial.
  • functions.php – I still don’t quite get this. You’re enqueing the MixItUp script. There are ways to do this more selectively (like only load if it’s page whatever) but I failed to get them to work and, in the end, I decided it was ok to move on and I’d take the minor performance hit.
  • header-sort.php – I’m still not entirely straight on this piece as I’m not sure the difference between enqueing the script and instantiating it. In any case, the header is used to instantiate it. I made a custom header for this particular page based on the WP codex advice. That seemed like a reasonable way to keep any possible issues to a minimum.
  • js – This directory just holds the MixItUp script.

Here are all the files. You can just put it in the wp-content/themes directory and then select it under Appearance. I’m also pretty sure you could rename this and apply it as a child to other themes pretty easily.

Below are two places you can easily change variables on the full-width-sort.php page.
full width comments.


1 I could fix that with some more effort and probably will at some point.

2 This is yet another reason to get to know people on the Internet. I have yet to be kidnapped but many good things have come from meeting strangers on the Internet.

Some Interesting WP Landing Pages

The link bait title should have been something like “5 Must See Themes for WordPress Multisite” but in any case, I’m wandering around the Internet looking for interesting/useful looking examples1 (educational and otherwise). I started by browsing this old Google spreadsheet of WordPress in education examples2 and then moved on to the WordPress showcase but focusing on BuddyPress and multisite flavors.

Tufts Roundtable Commons
Clean layout with some links out to multimedia elements (Roundtable Radio). This is a nice additional example to show that while DS106 is undeniably great, there are other people in education pushing at the transmedia publishing.

Milwaukee School of Engineering Slick graphic design and lots of content without feeling too overwhelming. I think it’s a good balance of static/activity. The WordPress inclusion write ups are also interesting reading.

NY Times Blog Index Interesting to see how they display 60 some odd blogs.

Sites at Penn State
A different focus/look but one worth considering for example browsing. I’d consider randomizing the examples on refresh and possibly adding some method for drilling down to site based on some level of categorization.

Her Royal Majesty
A literary magazine with a varied layout. It feels a bit busy to me but they have put a lot of pieces together in a way that’s worth looking at.

An Aside

Mozilla Blog
Mozilla’s site runs on WordPress. I flipped to view source to see what theme they were using out of curiosity and with a quick Google search found they have it up on GitHub. Just a little piece of open Internet beauty.


1 I’m assuming most people who read this blog are already aware of UMW, CUNY Commons, and DS106.

2 It is interesting to see which have stayed and which have folder as the spreadsheet is being updated but is also several years old.