The Context

Building a responsive site with wordpress.

The Problem

I have a loop that spits out posts. the site must be responsive. I must use markup to designate columns. However, simply taking the loop content and wrapping it in a div isn’t good enough. I need to intersperse the output of a loop with columnar markup. Say I want two columns, and I must divide the posts between two columns. I’ll have to “inject” markup into my loop output to create my ideal section of code. I could do this with js. But that’d kinda suck. I mean, I wouldn’t hold it against a dev to take the js approach. But I grimace at the thought.

A Hypothetical Solution

Lets get the loop content and put it into an array. Then we’ll split the original array into two “blocks”. We will then print these blocks, wrapping markup around them. That markup will be then targeted by CSS to create columns when the viewport width hits a target breakpoint.

Getting The Loop As An Array

Thanks to the magic powers of google I discovered get_posts. The first sentence of the doc tells us that we are on the right track: “The most appropriate use for get_posts is to create an array of posts…”. That’s great! From that point I can manipulate the array and do what I want. Here is where we can start.

 $args= array( 'post_type' => 'my_cpt' ) ;
 $posts_array = get_posts($args) ;

An Awesome Discovery

It turns out that putting the post output into an array gives us a lot of control over how we choose to publish the posts that we got. Most of the time a mixure of template tags and markup will do what we want. But with get_posts we can replace the usual approach with… anything we want.

If we know some basic PHP then we have a lot more control. Specifically, it helps to know how to do really basic object and array manipulation.

The logic I wanted to impliment was this:

For each post: for two particular custom fields: wrap the custom field in my markup.

And this is how I did it:

foreach ($posts_array as $o ) {
 // get the meta array for the current post
 $meta = get_post_meta( $o->ID ) ;
// get the quote
 echo "<blockquote><p>" . $meta['_cmb_testimonial_text']['0'] . "</p></blockquote>" ;
 // get the attribution
 echo "<p class='attribution'>" . $meta['_cmb_attribution']['0'] . "</p>" ;
 }

Viola! Post content! Now to generate my columnar markup!

Lets take the array, split it into two other arrays, and wrap the two output arrays in markup…

/*
 * how many posts do we put in the first column
 */
 $els = count($posts_array) ;
 $half = round(($els / 2 ));
$arrOne = array_slice($posts_array, 0, $half ) ;
 $arrTwo = array_slice($posts_array, $half) ;
/**
 * output first half of our testimonials
 */
?>
 <div id="stb-testimonials" class="group">
 <div class="testimonial-col col1">
 <?php
 foreach ($arrOne as $o ) {
 // get the meta array for the current post
 $meta = get_post_meta( $o->ID ) ;
 // get the quote
 echo "<blockquote><p>" . $meta['_cmb_testimonial_text']['0'] . "</p></blockquote>" ;
 // get the attribution
 echo "<p class='attribution'>" . $meta['_cmb_attribution']['0'] . "</p>" ;
 }
 ?>
 </div> <!-- ENDS testimonial-col col1 -->
 <?php
 /**
 * output second half of our testimonials
 */
 ?>
 <div class="testimonial-col col2">
 <?php
 foreach ($arrTwo as $o ) {
 // get the meta array for the current post
 $meta = get_post_meta( $o->ID ) ;
 // get the quote
 echo "<blockquote><p>" . $meta['_cmb_testimonial_text']['0'] . "</p></blockquote>" ;
 // get the attribution
 echo "<p class='attribution'>" . $meta['_cmb_attribution']['0'] . "</p>" ;
 }
 ?>
 </div> <!-- ENDS testimonial-col col2 -->
 </div>
<?php
}

Done.

The complete chunk of code is here. It’s part of a bundle of files that constitutes a plugin for publishing testimonials, and is in use on the Stalking The Boogeyman website. (I’m helping to maintain this beautiful site, which was built by Chris Van Patten for DRT Advertising). If anyone actually wants the full plugin, just ask me and I’ll put it on github.

At first I didn’t understand the point of Aesop Story Engine.

I installed it in a local test instance of wordpress, and started using it. Initially all I could see that it let me add blocks of content via the editor. But members of the wordpress design and development community whose opinion I really trust are quoted as saying that it’s the best thing since sliced bread.

A couple of things helped me to ‘click’. First I read this article in the documentation. About halfway through reading it, I started to get it.

 The Niche

The marriage of digital storytelling and longform journalism has some produced some remarkable, and remarkably compelling pieces of online content. Here’s a famous example from the New York Times. Wired magazine produces some masterful pieces as well, including this one Edward Snowden.

The examples linked to above represent the state of the art, produced by a team of people fulfilling the roles of designer, developer and art director.

Can a wordpress plugin help you craft beautiful pieces of masterfully designed digital storytelling?

Probably not. Masterful craftsmanship takes more then a plugin. But Aesop Story Engine can give you a start in that direction. And in my opinion, if you channel skill, focus, time and digital resources into it, then maybe with ASE you an create something that approaches the state of the art.

 How Aesop Story Engine Is Being Used Today

The showcase has a mixed bag of examples that is, overall, inspiring. The showcased sites use themes available from ASE. Some of the uses are really great. In terms of presenting content all of the examples are at least pretty good. I think the ASE developers should be really proud of the possibilities that they’ve enabled for content producers.

The Ecosystem

aesop homepage

ASE can be downloaded for free. It’s available from the wordpress plugin repository and from github. Once enabled from the wordpress backend, it can be used straight easily and immediately from the wordpress editor for posts and pages. Although that probably isn’t what you want to do (more on that in a bit).

Official themes for ASE are available for download at cost from the ASE website. They aren’t as cheap as most themes, but I have no doubt that they are worth it: wordpress themes generally are underpriced and I’ve got faith that the team behind ASE produce great themes. My only reservation was that I’d love to be able to take an “official” theme for a test run and dig into the code.

However, there is this: a minimal example sample theme on github, offered for free by the developers.

It was pondering the way that the example theme worked that made me click to the “why” of ASE’s existence.

Now, there do not seem to be any free themes made for Aesop. But I suspect that they may come. Personally, I find this empty niche interesting. I can see third-party developers creating themes in the future and I’m tempted to build one myself.

The ASE site offers a bunch of inexpensive plugins, none of which I’ve tried. I’m sure they could save some development time for coders and non-codey site operators. Personally I couldn’t justifying shelling out for any while just test-driving ASE. Besides, I’d probably want to buy them all.

Why And How I Want To Use ASE

Digital multimedia storytelling can look beautiful and be really compelling. I’m dying for an excuse to use ASE.

Personally I think that multimedia digital storytelling can be more powerful if the content has some kind of contrast against it’s immediate context.

Here is what I mean by that:

Articles in this style in Wired magazine online look different from other articles in wired. They contrast. And that contrast adds to the character of those articles.

So for a website focussed on text content, I would like take either a few or none of the default styles and create specific articles with ASE using the minimal sample theme on github. I’d use something like  this plugin to deploy the custom theme for a specific post. (Thanks to an article in wpmudev for making me aware of that plugin).

Now some developers would wonder why I would use ASE if I’m going to code for that article anyway. My answer is “pure curiousity”. I might be able to achieve the same thing in roughly the same amount of time if I can do it by hand. I really don’t know if this is the case but I’d like to find out.

— edit —

Taking a slightly closer look at some of the features and add-ons to ASE, I can definitely see how building a story with ASE can be faster then doing it all by hand.

Update December 2016

http://thestocks.im/

Update May 16 2016

http://www.elegantthemes.com/blog/resources/free-creative-commons-images-for-business-websites

New Old Stock

Update August 30 2015

pixabay: thousands of large, high quality images image available for free.

stocksnap: “Hundreds of high resolution images added weekly”. Nicely designed homepage too.

Isorepublic: Photographer Tom Eversley’s site. Contains lots of  Urban or Architecture pictures. Also has a lot of great images that can be used for textures.

Realistic Shots: lots of CC licensed images. Not so many categories or images: but fewer choices means less time sucked into searching. Besides, the images are great.

Update June 27 2015

Gratisography: Free high-resolution pictures you can use on your personal and commercial projects. Updated weekly.

Little Visuals: No longer updated due to the death of the curator. However it has great resources. The blog maintainer requests that if you use images from the site, then kindly donate to Hands On Heart.

Ruamrot: categorized images.

Refe: beautiful images captured on mobile devices. Free images with an alternative paid subscribtion plan. Refe also has a marketplace.

Magdeleine: Daily updated free images.

Picography: Free hi-resolution photos.

Imcreator: Categorized high-resolution images.

New Old Stock: Vintage photographs from public archives. Free of known copyright restrictions.

wptavern publishes posts on all things wordpress. I’m sub’ed to their newsletter. One recent newsletter linked to this post:
“13 Sources For Free Public Domain and CC0-Licensed Images”

update Feb 8 2015

Some more sources:

Little Visuals: hi-res images zipped up in your inbox every

Picjumbo: Large collection of images free to use. Mixed quality, but lots of great usable images.

imcreator: Large collection of catagorized images.

isorepublic: another large collection, loosely catagorized.

So, I decided to spend a little time improving my PHP skills. I’ve been building hacking wordpress templates and building plugins for a while, but I’ve been feeling like I need to improve my mastery of object-oriented development in PHP. I picked up a copy of William Sanders “Learning PHP Design Patterns” and started working through it. As I began working with the examples, I felt the urge to test concepts really quickly. Having a REPL handy is basic necessity for testing things out quickly in any language. Getting a REPL to run inside emacs makes driving your REPL of choice even faster and a great deal more pleasurable. My php repl of choice is boris, simply because I’ve got some familiarity with it. To get it to run inside emacs I installed php-boris and php-boris-minor-mode. php-boris needs the highlight library. My config ended up looking like this:

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;
;; boris
;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(require ‘highlight)

(add-to-list ‘load-path (expand-file-name “~/.emacs.d/lisp/php-boris”))
(require ‘php-boris)

(add-to-list ‘load-path “~/.emacs.d/lisp/php-boris-minor-mode”)

(require ‘php-boris-minor-mode)
(add-hook ‘php-mode-hook ‘php-boris-minor-mode)
(add-hook ‘web-mode-hook ‘php-boris-minor-mode)

Once all the libraries were installed, I evaluated my conf file and ran a test: I created a simple php file and passed it to boris. It worked!

Another pane opened in my emacs window, showing PHP’s evaluation of my test.

boris-repl

Putting the pieces together was easy enough. Now I can quickly test ideas from within emacs.

Aaaaand… new website!

I’m great at making excuses. And for far too long I’ve been putting off a website rebuild. And when I was rebuilding, I was always finding a reason why the rebuilt site wasn’t good enough to go live. I finally decided that it’s better to have an imperfect site rather then not having any live site at all. So here we are.

As far as the technical details are concerned, I’ve decided to build my site as a child of woothemes theme called ‘hub’. There’s a bunch of reasons to like it, and one of the things that I find most appealing about it is the readability. I’m always pretty surprised when I come across sites that have been designed and built recently and yet the type setting aren’t up to scratch. Hub, however, provides pretty excellent type settings.

It’s nicely responsive too! It looks great on my phone.