Tag Archives: WordPress

Reflections on a little bit of open education (TL;DR: it works).⤴

from @ Sharing and learning

We are setting up a new honours degree programme which will involve use of online resources for work based blended learning. I was asked to demonstrate some the resources and approaches that might be useful. This is one of the quick examples that I was able to knock up(*) and some reflections on how Open Education helped me. By the way, I especially like the last bit about “open educational practice”. So if the rest bores you, just skip to the end.

(*Disclaimer: this really is a quickly-made example, it’s in no way representative of the depth of content we will aim for in the resources we use.)

Making the resource

I had decided that I wanted to show some resources that would be useful for our first year, first semester Praxis course. This course aims to introduce students to some of the skills they will need to study computer science, ranging from appreciating the range of topics they will study to being able to use our Linux systems, from applying study skills to understanding some requirements of academic writing. I was thinking that much of this would be fairly generic and must be covered by a hundred and one existing resources when  I saw this tweet:

That seemed to be in roughly the right area, so I took a look at the University of Nottingham’s HELM Open site and found an Introduction to Referencing. Bingo. The content seemed appropriate, but I wasn’t keen on a couple of things. First, breaking up the video in 20sec chunks I fear would mean the student spend more time ‘interacting’ with the Next-> button than thinking about the content. Second, it seems a little bit too delivery oriented, I would like the student to be a little more actively engaged.

I noticed there is a little download arrow on each page which let me download the video. So I downloaded them all and used OpenShot to string them together into one file. I exported this and used the h5p WordPress plugin to show how it could be combined with some interactive elements and hosted on a WordPress site with the hypothes.is annotation plugin, to get this:

The remixed resource: on the top left is the video, below that some questions to prompt the students to pay attention to the most significant points, and on the right the hypothes.is pop-out for discussion.

How openness helps

So that was easy enough, a demo of the type of resource we might produce, created in less than an afternoon. How did “openness” help make it easy.

Open licensing and the 5Rs

David Wiley’s famous 5Rs define open licences as those that let you  Reuse, Revise, Remix, Retain and Redistribute learning resources. The original resource was licensed as CC:BY-NC and so permitted all of these actions. How did they help?

Reuse: I couldn’t have produced the video from scratch without learning some new skills or having sizeable budget, and having much more time.

Revise: I wasn’t happy with the short video / many page turns approach, but was  able to revise the video to make it play all the way through in one go.

Remix: The video was then added to some formative exercises, and discussion facility added.

Retain: in order for us to rely on these resources when teaching we need to be sure that the resource remains available. That means taking responsibility keeping it available. Hence we’ll be hosting it on a site we control.

Redistribute: we will make our version available to other. This isn’t just about “paying forward”, it’s about the benefits that working in an open network being, see the discussion about nebulous open education below.

One point to make here: the licence has a Non-Commercial restriction. I understand why some people favour this, but imagine if I were an independent consultant brought in to do this work, and charged for it. Would I then be able to use the HELM material? The recent case about a commercial company charging to duplicate CC-licensed material for schools, which a US judge ruled within the terms of the licence might apply, but photocopying seems different to remixing. To my mind, the NC clause just complicates things too much.

Open standards, and open source

I hadn’t heard much about David Wiley’s ALMS framework for technical choices to facilitate openness (same page as before, just scroll a bit further) but it deals directly with issues I am very familiar with. Anyone who thinks about it will realise that a copy-protected PDF is not open no matter what the licence on it says. The ALMS framework breaks the reasoning for this down to four aspects: Access to editing tools, Level of expertise required, Meaningfully editable, Self sources. Hmmm. Maybe sometimes it’s clearer not to force category names into acronyms? Anyway, here’s how these helped.

Self-sourced, meaning the distribution format is the source code. This is especially relevant as the reason HELM sent the tweet that alerted me to their materials was that they are re-authoring material from Flash to HTML5. Aside from modern browser support, one big advantage of them doing this is that instead of having an impenetrable SWF package I had access to the assets that made the resource, notably the video clips.

Meaningfully editable: that access to the assets meant that I could edit the content, stringing the videos together, copying and pasting text from the transcript to use as questions.

Level of expertise required: I have found all the tools and services used (OpenShot, H5P, hypothes.is, WordPress) relatively easy to use, however some experience is required, for example to be familiar with various plugins available for WordPress and how to install them. Video editing in particular takes some expertise. It’s probably something that most people don’t do very often (I don’t).  Maybe the general level of digital literacy level we should now aim for is one where people are familiar with photo and video editing tools as well as text oriented word processing and presentation tools. However, I’m inclined to think that the details of using the H264 video codec and AAC audio codec, packaged in a MPEG-4 Part 14 container (compare and contrast with VP9 and ogg vorbis packaged in a profile of Matroska) should remain hidden from most people. Fortunately, standardisation means that the number of options is less than it would otherwise be, and it was possible to find many pages on the web with guidance on the browser compatibility of these options (MP4 and WebM respectively).

Access to editing tools, where access starts with low cost. All the tools used were free, most were open source, and all ran on Ubuntu (most can also run on other platforms).

It’s notable that all these ultimately involve open source software and open standards, and work especially well when then “open” for open standards includes free to implement. That complicated bit around MP4 & WebM video formats, that comes about because royalty requirements for those implementing MP4.

Open educational practice: nebulous but important.

Open education includes but is more than open education resources, open content, open licensing and open standards. It also means talking about what we do. It means that I found out about HELM because they were openly tweeting about their resources. I think that is how I learnt about nearly all the tools discussed here ina similar manner. Yes, “pimping your stuff” is importantly open. Open education also means asking questions and writing how-to articles that let non-experts like me deal with complexities like video encoding.

There’s a deeper open education at play here as well. See that resource from HELM that I started with? It started life in the RLO CETL, i.e. in a publicly funded initiative, now long gone. And the reason I and others in the UKHE know about Creative Commons and David Wiley’s analysis of open content, that largely comes down to #UKOER, again a publicly  funded initiative. UKOER and the stuff about open standards and open source was supported by Jisc, publicly funded. Alumni from these initiatives are to be found all over UKHE, through which these initiatives continue to be crucially important in building our capability and capacity to support learners in new and innovative settings.


The post Reflections on a little bit of open education (TL;DR: it works). appeared first on Sharing and learning.

Shared WordPress archive for different post types⤴

from @ Sharing and learning

In a WordPress plugin I have custom post types for different types of publication: books, chapters, papers, presentations, reports. I want one single archive of all of these publications.

I know that the theme template hierarchy allows templates with the pattern archive-$posttype.php, so  I tried setting the slug for all the custom post types to ‘presentations’. WordPress doesn’t like that.  So what I did was set the slug for one of the publication custom post types to ‘presentations’, that gives me a /presentations/ archive for that custom post type(1). I then edited the archive.php file to use a different  template parts for custom post types(2):

<?php $cpargs = array('_builtin' => False,
				  'exclude_from_search' => False);
	$custom_post_types = get_post_types( $cpargs, 'names', 'and' );
	if ( is_post_type_archive( $custom_post_types ) ) {
		get_template_part( 'archive-publication' );
	} else {
		get_template_part( 'archive-default' );

See anything wrong with this approach? Any comments on how better to do this would be welcome.

  1. 1 could edit the .htaccess file to redirect the /books/, /chapters/ …etc archives to /publications/, which would be neater in some ways but would make setting up the theme a bit of a faff.
  2. Yes, the code gives all the custom post types with an archive the same archive. That’s fixable if you make the array of post types for which you want a shared archive manually.

The post Shared WordPress archive for different post types appeared first on Sharing and learning.

Organising Pupil Content on Blogs⤴

from @ John's World Wide Wall Display

This is hopefully a useful tip for organising pupil created content on WordPress blogs like Glow Blogs.

Most of the content posed to blogs consists of posts or pages. Posts join the stream, pages are static generally accessed from menus.

This is another way to organise content that can be useful. Especially if several pupils are posting similar content at the same time. It helps organise that content and the early posters don’t get pushed away down the stream.

An Example Banton Birds

At school we are trying to pay attention to the local birdlife. We took part in the BIG BBC Bird watch with local Bird watchers, Mr & Mrs Carter. We started feeding the birds and trying to get some photos.

The pupils are doing a bit of research on the birds we saw (not too many it was a windy hour) and I hope they will continue over time adding other birds seen in the playground and around.

I want to organise these bits of research automatically collecting them together. To do this the pupils create, not posts or pages but a custom post type, project.

How it is done

This is just one way to do this but it is, at least on Glow Blogs, the most straightforward. It uses the JetPack Custom Content Types module and the unfortunately 1 named Portfolio Projects.

These projects are like pages in that they are out of the flow but like posts have Project Types (like categories) and Project Tags (like tags) that can be used to organise them. The also have a shortcode that can be used to create an index of the projects by type or tag2.

  1. Activate the Jetpack plugin.
  2. In Jetpack Settings Activate Custom Content Types.
  3. In Settings-> Writing Enable Portfolio Projects for this site
  4. Pupils create Projects for each item, add a project type (in this case Birds).

To create an index of these projects I add a page Banton Birds and add a shortcode to the page:

[portfolio include_type=birds display_types=false]

To make the index more visual the pupils make sure they have added a featured image to their posts. That automatically creates a thumbnail.

I’ve used this technique several times on blogs myself, including the Projects page on this blog. I’ve used it too to provide and organise photos and links on the Biggies blog for the pupils.

1. For Glow Blogs where we have a lot of pupil e-portfolios through a custom plugin.

2. You could do the same with pages using the hierarchy and the Display Posts Shortcode plugin, but not as easily.

WordPress twitter card idea⤴

from @ John's World Wide Wall Display

A little blue sky thinking, or borrowing some ideas from @davewiner & @mrkrndvs

I wonder if a WordPress plugin could ape pngWriter and create images for twitter cards with the text from the excerpt on the image used by twitter.
Like this, but with less fireworks.

I’ve been thinking about twitter again.

I think I’d have preferred twitter to be just text rather than being expanded to include all the media and ‘twitter cards’. I’d rather the reading flow would be twitter for short stuff and link to more visual or longer material out on your blog. That would perhaps make reading a little deeper and avoid the problem of folk just seeing the main point of an article and reacting to that 1.

But that cat left the bag a while ago. Now when I look at my twitter stream it is full of images. I occasionally use OneShot to grab and crop out interesting bits of text to share and surmount the 140 char limitation too.

I am not sure if this is a great idea

Recently I’ve watched Dave Winer experimenting with pngWriter (see the about page: About pngWriter). This creates images of blocks of text and sends them out in a tweet. It also creates an RSS feed of the text (pngWriter is not open for use at the moment).

This reminded me of how Aaron uses featured images in his blog: Creative Commons Starts with Making – A Reflection on Creating and Sharing – Read Write Respond

So I am kicking round a couple of ideas.

  1. If you used pngWriter you could pull the rss into your blog. You could do it in WordPress with the FeedWordPress plugin.
  2. A plugin could be made that would do the same sort of thing in WordPress, take the except text from a post and make an image for twitter from that.

Here is how I imagine that working

  1. Using an html5 canvas to automatically create an image of the post’s excerpt.
  2. Auto upload that to WordPress media library.
  3. Make it the featured image of the post

Alternatively (better?) make it the content of the twitter:image metatag for the post, that means that the featured image on the post would not have the text, visitors could read the post.

Or make a copy of the posts featured image, add the text and make that the twitter card image (I can imagine that might be different to get the text readable.).

For a couple of minutes I imagined that my babysteps php & JavaScript could put something like this together. Then reality kicked in. So I though I’d post it out here maybe someone else would think it would be a good idea.

    Three resources for custom metadata in WordPress⤴

    from @ Sharing and learning

    When developing WordPress for use as a CMS one approach I have used is to create a custom post type for each type of resource and custom metadata boxes for relevant properties of those types.  I’ve used that approach when exploring the possibility of using WordPress as a semantic web platform to edit schema.org metadata, when building course information pages for students and am doing so again in updating some work I did on WordPress as a lightweight repository.  Registering a custom post type is pretty straightforward, follow the example in the codex page, I found handling custom metadata boxes a little more difficult. Here are three resources that helped.

    Doing it long hand

    It’s a few years old, but I found Justin Tadlock’s Smashing Magazine article How To Create Custom Post Meta Boxes In WordPress really useful as a clear and informative tutorial. It was invaluable in understanding how metaboxes work. If I had only wanted one or two simple text custom metadata fields then coding them myself would be an option, but I found a couple of problems. Firstly, I was repeating the same code too many times. Secondly when I thought about wanting to store dates or urls or links to other posts, with suitable user interface elements and data validation, I could see the amount of code needed was only going to increase. So I looked to see whether any better programmers than I had created anything I could use.

    Using a helper plugin

    I found two plugins that promised to provide a framework to simplify the creation of metaboxes. These are not plugins that provide anything that the end user can see directly, rather they provide functions that can be used in theme an plugin development. They both reduce the work of creating a metabox down to creating an array with the properties you want the metabox to have. They both introduce a dependency on code I cannot maintain, which is something I am always cautious about in using third-party plugins, but it’s much more viable than the alternative of creating such code from scratch and maintaining it myself.

    CMB2 is “a metabox, custom fields, and forms library for WordPress that will blow your mind.” It is free and open source, with development hosted on GitHub.  It seems quite mature (version 1.0 was in Nov 2013), with a large installation base and decent amount of current activity on github.

    Meta Box is “a powerful, professional developer toolkit to create custom meta boxes and custom fields for WordPress.” It too is free and released under GPL2 licence, but there are paid-for extensions (also GPL2 licensed) and I don’t see any open source development (I may not have looked in the right place).  Meta box has been around for a couple of years, is regularly updated and has a very large user base. The paid-for extensions give me some hope that the developers have a sustainable business model, but a worry that maybe ‘free’ doesn’t include the one function that at sometime I will really need. Well, developers cannot live on magic beans so I wouldn’t mind paying.

    In the end both plugins worked well, but Meta Box allows the creation of custom fields for a link from one post to another, which I didn’t see in CMB2. That’s what I need for a metadata field to say that the author of the book described in one post is a person described in another.

    The post Three resources for custom metadata in WordPress appeared first on Sharing and learning.

    Cloning WordPress sites for development⤴

    from @ Sharing and learning

    I do just enough theme and plugin development on WordPress to need an alternative to using a live WordPress site for development and testing, but at the same time I want to be testing on site as similar to the live site as possible. So I set up clones of WordPress sites either on my local machine or a server for development and testing. (Normally I have clones on the localhost server of couple of machines I use for development and another clone on a web accessible testing or staging server for other people to look at.) I don’t do this very often, but each time I do it I spend as much time trying to remember what it is I need to do as it actually takes to do it. So here, as much as an aide-memoire for myself as anything, else I’ve gathered it all in one place. What I do is largely based on the Moving WordPress information in the codex, but there are a couple of things that doesn’t cover and a couple of things I find it easier to do differently.

    Assuming that the pre-requisites for WordPress are in place (i.e. MySQL, webserver, PHP), there are three stages to creating a clone. A. copy the WordPress files to the development site; B. clone the database; C. fix the links between WordPress and the database for the new site. A and B are basically creating backup copies of your site, but you will want to make sure that whatever routine backups you use are up to date and ready to restore in case something goes wrong. Also, this assumes that you are notwant to clone just one site on a WordPress Multisite installation.

    Copying the WordPress files

    Simply copy all the files from the folder you have WordPress installed in, and all the sub-folders to where you want the new site to be. This will mean that all the themes, plugins and uploaded media will be the same on both sites. Depending on whether the development site is on the same server as the main site I do this either with file manager or by making a compressed archive and ftp. Make sure the web server can read the files on the dev site (and write to the relevant folders if that is how you upload media, plugins and themes).

    Cloning the database

    First I create a new, blank database on for the new site, either from the command line or using something like MySQL Database Wizard which my hosting provider has on CPanel. I create a new user with full access to that data base–the username and password for this user will be needed to configure WordPress with access to this database. If you have complete control of over the database name and user name then use the same name username and password as is in the wp-config.php file of the site you are cloning. Otherwise you can change these later.

    Second, I use PHP MyAdmin to export the data base from the original site and import it to the one on which you are making a clone.

    phpMyAdmin Export screen

    Fix all the bits that break

    All that remains is to reconnect the PHP files to the database and fix a few other things that break. This is where it get fiddly. Also, from now on be really careful about which site you are working on: they look the same and you really don’t want to set up your public site as a development server. Make all these changes on the new development site.

    In wp-config.html (it’s in the top of the WordPress folder hierarchy) find the following lines and change the values to be those for your new development server and database.

    define( 'WP_CONTENT_URL', 'http://example.org/blog' );
    define( 'WP_CONTENT_DIR', 'path/to/wp-content' );
    define('DB_NAME', 'databaseName');
    /** MySQL database username */
    define('DB_USER', 'databaseUserName');
    /** MySQL database password */
    define('DB_PASSWORD', 'password');

    You might also need to change the value for DB_HOST

    Then you need to change the options that WordPress stores in the database. Normally you do this through the WordPress admin interface, but this is not yet available on your new site. There are various ways you can do this, I change the url directly in the data base with PHPMyAdmin, either by direct editing as described in the codex page or from the command line as described here.

    mysql -u root -p
    USE databaseName
    SELECT * FROM wp_options WHERE option_name = 'home';
    UPDATE wp_options SET option_value="http://example.org/blog" WHERE option_name = "home";
    SELECT * FROM wp_options WHERE option_name = 'siteurl';
    UPDATE wp_options SET option_value="http://example.org/blog" WHERE option_name = "siteurl";

    You should now have access to the new cloned site, though some things will still be misbehaving.

    You will probably have the old site’s URL in various posts and GUIDs. I use the better search replace plugin to fix these.

    iesiesIf you do any fancy redirects with .htaccess, make sure that these are written in such a way that works for the new URL.

    If you are using Jetpack you will need to use it in safe mode if the development server is connected to the web or development mode if running on localhost. (This is a bit of a pain if you want to test Jetpack settings.)

    On a development site you’ll probably want to add this to wp-config.php:

    define('WP_DEBUG', true);

    If you are running a development or testing server on a web accessible site you probably want to restrict who has access to it. I use the My private site plugin so that only site admins have access.

    Keeping in sync

    While it’s not entirely necessary that a development or testing site be kept completely in sync with the main one, it is worth keeping them close so that you don’t get unexpected issues on the main site. You can manually update the plugins and themes, and use the wordpress export / import plugins to transfer new content from the live site to the clone. Every now and again you might want to re-clone the site afresh. Something I find useful for development and testing of new plugins and themes is to have the plugin or theme directory that I am developing in set up as a git repository linked to github and keep files in sync with git push and git pull.

    Anything else?

    I think that is it. If I have forgotten anything or if you have tips on making any of this easier please leave a comment.

    The post Cloning WordPress sites for development appeared first on Sharing and learning.

    Multi Blog Search⤴

    from @ John's World Wide Wall Display

    Veering off into territories where I am out of my depth a bit of fun in the last days of the holiday.

    I’ve been playing with the new WordPress REST API using ideas from API Nirvana – Functional Details, then I remembered CogDog’s WordPress search javascript bookmarklet.

    Multi WP Blog search allows you to search across a few blogs.

    I doubt if this is actually a practical way to do things but it hints of ways of joining different blogs, small parts loosely joined?

      Echo into Eternity⤴

      from @ John's World Wide Wall Display


      It’s also example of doing something that only I would want to do and yet having that thing echo into eternity without any additional effort.

      from: API Nirvana – The Content – Bionic Teaching

      Tom Woodward writing about his love of APIs, one of a series of posts. I love the idea of playing with things that do something that only I would want to do.

      If you have a slightly geeky interest in technology & edu tech Bionic Teaching is a great blog to read.

      I’ve a long term casual interest in playing with APIs, and love trying out some of the stuff Tom blogs about. In a timely fashion wordPress 4.7 came out today, including:

      WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.

      from: WordPress 4.7 “Vaughan”.

      This is the same API that Tom blogged about (I guess he was using a plugin). The opening up of WordPress sites via an API that an amateur like myself can use it welcome. Over the past few years several sites with interesting APIs move to make them harder to access with out a deeper knowledge than I have (twitter, instagram…).

      I had a quick play with the WordPress api making a page that lists recent posts on 3 of my blogs, including this one. 1


      I guess this sort of thing is a minority interest, but I find it enjoyable and although I am never going to be a programmer, helpful in getting a better understanding of how technology can work.

      Featured image on this post, one of my own turned up in a search for echo. test1-echo.tif | Using Image Bending in Audacity – CogDogBlo… | John Johnston | Flickr


      1. I added the Better REST API Featured Images WordPress Plugin to et the images following a hint on Tom’s post.

        iOS Workflows for WordPress 1⤴

        from @ John's World Wide Wall Display


        Posting to WordPresss is pretty simple on the go. Recent versions of WordPress have a fairly good performance on Mobile Safari. the WordPress app performs a little better the body field is less ‘jumpy’ and uploading photos a little simpler.

        There are a few other blogging apps but I’ve not stuck with any.

        I tend to write posts in drafts as there is even less chrome and more space to type. It also has some clever shortcuts, helps with markdown and can do cleaver stuff with text and scripts.

        A while back I noticed that the new version of Workflow had actions for posting to WordPress. I made some quick tests sand it seemed to do the trick.

        Today I started thinking about it again. Workflow allows you to make posts, pages and media. When I tried uploading media I was disappointed that uploading an image returns the url to the attachment webpage rather than the attachment itself.

        I’ve tried to extract the url form the page but the best I have is to extract all of the urls on the page and present this as a list to choose from. This is copied to the clipboard.

        image upload

        So I have an workflow that is an action extension. This allow me to pick a photo then run the workflow. It is presented as a document picker in other apps, for example pixelmator. When this workflow runs it resizes the image and uploads it to my blog. It then grabs the attachment page and pulls a list of links out of that. I can pick a link to copy to the clipboard.

        Making a post

        The next workflow I have is one for making a post. This runs from drafts.
        It first set a variable to the draft. Then it shows the photo library. When a phot is picked it uploads the photo to the blog. As in the first script it downloads the attachment page, extracts the urls and let’s me pick one. This time the one picked is put in another variable.

        The workflow then get the first variable, and posts it to the blog as a draft. It asks for a title and used the url to the uploaded image as the posts featured image.

        It also asks for tags when it runs.

        The featured image for this post is a couple of screenshots taken on my phone. They were stitched together with workflow and the result edited a bit in snapseed.

        Tinkering with WordPress Features⤴

        from @ John's World Wide Wall Display

        Image by  anika ready to sew  public domain

        Since I changed themes here I’ve been using featured images a lot more on posts. 1

        There are a couple of things that bother me about WordPress featured images, the fact they do not show up in an RSS feed and that any attribution needs to go in the body of the post.

        This morning I read Transforming Photo Attribution from Credit to Stories on Alan’s blog, which mentioned these problems while discussion a much more important one.

        I though I’d see if it was easy enough to find a fix and headed to google.

        First I found a few plugins but also some DIY advice. I decided that these looks simple enough for me.

        Featured Images in RSS

        How to Show Featured Image in WordPress RSS Feed shows how to do just that. You need to edit the functions.php file in your blogs theme 2.

        All I needed to do was copy the code suggested from that site and add it to the bottom of my functions.php file which I already had in my child theme. The post shows how to edit this file via the WordPress dashboard. I do this with my ftp application.

        A quick look at my feed in Forefox (Safari dos not show RSS any more :-( )
        http://johnjohnston.info/blog/feed/ or http://feeds.feedburner.com/johnjohnston
        Looks good.

        Captions for featured images

        Again there are plugins for this, but I found:
        How to add caption to the featured images in WordPress which had done the trick.

        This uses the built in caption from the media library. To do this I needed to copy the content-single.php file from the theme to my child themes folder. I then edited that one.

        My theme’s code was slightly different to the example but it was easy enough to figure out where the code for the featured image/thumbnail was and add:

        <?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
            <p class="featuredcaption"><?php echo $caption; ?></p>
        <?php endif; ?>

        After it. I also added a bit of css to the child themes styles.css file to align the text right. I’ll think about how to make that better looking….

        What I particularly like is that this approach uses the built in WordPress caption for the image. When I started thinking about it I was thinking about adding a custom field and complexity. I keep finding that WordPress is already half way to do what I want, if only I knew where to look. Until I do google will keep me right.

        1. I choose the theme because it supports indyweb features I wanted to test. I’ve still not got my head round many of them.
        2.  This just works if you can edit your theme, so you would need a self hosted blog. I use a child theme here which should avoid changes being overwritten if the them is updated.Child Themes « WordPress Codex covers the details