WordPress Customization for Open Planet Culture

I am just wrapping-up a second sprint for a customized WordPress site called Open Planet Culture: Re-Thinking Globalization.

The code is on Gitlab and unfortunately I had to make private the theme as its got hard-coded Mapbox API keys.

It’s been an interesting experience pushing the envelope for myself and WordPress and I’ve tried to use a lot of the latest trends (for better or worse) in web-development.

Roots.io

The site is developed and hosted in the Roots.io WordPress devops platform. Overall I must say this platform is super impressive. The list of Roots.io features is long.

I wrote a long detailed post about my Composer and GIT repo based workflow for Roots. I am dev’ing on Mac Sierra.

  • Composer for PHP package management, including WordPress itself
  • Ansible, Vagrant and NFS for local virtual machine dev environment, staging and production
  • Ansible for staging and production server deployment and possibility to add more environments
  • Ability to add multiple sites within a single repo
  • Deployment versions and ability to roll-back
  • Yarn for npm package management
  • Browsersync for live-reload in development between devices
  • GIT based code workflow
  • Sage 9 theme is based on Bootstrap 4
  • Blade template engine from Laravel
  • Awesome Discourse support forums
  • Ansible Vault encrypted secrets

If I do more with Roots.io I’d actually try to contribute a back-up Ansible play / role. i.e. use WP CLI to do a backup/export of the live database, and rsync that back to a backup. This might be combined or separated into a second role that makes a kind of hot-spare live site on a low-spec server.

Bootstrap 4 for Material Design by Daemonite

I used the Bootstrap 4 for Material Design SASS framework for the styling. This allowed me to use some of the Material Design niceties like the Wave Javascript effects for buttons i.e. that organic ripple effect. Of course the cards are nice also and becoming a kind of UI standard.

It also allowed for using Bootstrap 4 conventions such as flex-box. On the homepage and video template pages, the narrow screen display doesn’t include the video. No need to download a 100+ mb mp4 or mov file when on a mobile. This was handled by Bootstrap breakpoints and the extensive classes handling responsiveness.

Custom WordPress Post Types

Having worked a lot with Drupal I wanted to explore the WordPress custom post type features. I wanted to do as much from code and use as few plugins. I created 6 custom post types i.e. Solutions, Problems, Actions, Learnings, Nation States and Places. I also created two custom taxonomies i.e. Scale and Topics.

These custom post type definitions are in a WordPress plugin on Gitlab.

CMB2 for Custom Metaboxes and custom fields

ACF is great, but the developer experience is via the web UI and then you export to JSON. I wanted a code first approach. I found CMB2 Custom Meta Boxes 2 via a blog post by Bill
Erikson (creator of the WordPress Genesis Framework) and used that to create custom metaboxes and custom fields for Places.

I created another sub-plugin, within the plugin package, for Metaboxes and Custom fields.

Automated Data Feeds

I started work on a few different ways to programmatically create posts from JSON and CSV.

In a raw stage of development, in dev, I enabled a plugin that on cron every hour takes Earthquake news and creates posts from a JSON feed.

I have another experiment taking REST Countries JSON feed and auto creating Nation State posts.

In production, is a plugin that programmatically creates Place post types from the City List from Open Weather Map.

This custom code is still raw, but inserts a new post and also updates the meta fields for Long and Lat and also Country Code.

I need to do more helper functions i.e. check if post exists and if so update and not insert etc.

I think also it needs to be batched so it can handle imports of 200,000 places. I think its timing out.

Custom Mapbox Maps

The Places custom post type uses the Long/Lat data to call the Mapbox API via their Javascript widget and each place has its own map.

I tried to make the map style kind of bold and abstract like the overall style of the site.

Each Place also calls the Mapbox Static API and has a PNG image of the place from a regional perspective.

I’d like to make my own map server. Ultimately I think I need to if I am going to do anything at scale. Otherwise I will end up spending quite a bit of $ on Mapbox.

Video

Its becoming very common to see the use of the video tag. Palantir, Paypal, Cloudflare, Globalchange.gov etc etc.

Through quite a bit of trial and error I implemented a custom full width WordPress video template for the front-page and Pages, that displays a static image for mobile devices. The front-page also has a large rotating planet video which is visually stunning. Thanks NASA!

I must admit for the first few days I was kind of mesmerized by this effect.

Transparent Megamenu

I used the WordPress Megamenu fremium plugin and made it transparent and integrated with the jumbotron image and video header.

There is a lot that can go into the megamenu, I started on the Earth megamenu section. A megamenu can become a key element of a site.

Animated CSS

I used animate.css, but backed out of that for now, I was getting awkwards sideways scrolling-off-screen side-effects.

I will implement some kind of CSS animation with either that jQuery or perhaps CSS keyframes or SVG animation. Maybe D3.js.

Ideas

Not sure when I will next get a chance to work on this again. But I’d like to add the custom fields for Places to the REST API and then use the Ember WordPress library to create a rich interface to places. Perhaps I will implement the interactive App aspect of the site with Ember JS.

I’ve been searching around and doing some small experiments and have decided that Ember JS and jQuery are good bets. React JS is fragile and fragmented and I don’t like the Patent additions. AngularDart looks great but again I don’t want to deal with Patent additions. Elm is interesting, and I’ll maybe try something with it, but there are no big commercial free software examples. Whereas Ember has Discourse and a number of projects.

Hosting by Prgmr.com

The VPS is a XEN vm by Prgmr.com is Santa Clara. They ROCK !

Self hosting the Drupal web content management system with Aegir

Serious Drupal hosting SaaS such as Pantheon starts at 25$USD per site, Acquia is something like 100$+ per site.

With the FLOSS Aegir Hosting System this cost per site can be greatly reduced. Of course total cost of ownership may still be high, when technical ability and Linux admin time are factored in.

Let’s self-hosted Aegir on an LXD/LXC container and migrate off an OVH VPS using Aegir’s built-in Remote Import feature.

I’ve worked with Ansible for Aegir in the past and there are a few Ansible roles and example playbooks on github.

As far as I can tell, none are official, so, I’ll use the Debian packages on Ubuntu Trusty 14.04 with Php5 from the official docs.

Php7 on Xenial is reportedly twice as fast and is supported, but I had errors and had no time to work through the issues.

UPDATE: I did actually get Aegir 3.9 with PHP7 on Ubuntu 16.04, but not without issues, I would say there are still issues

 

 

vi /etc/hosts

127.0.0.1 aegir.demo.io aegir-server localhost
94.84.199.93 aegir.demo.io aegir-server
10.1.10.125 aegir.demo.io aegir-server
::1 aegir.demo.io aegir-server ip6-localhost ip6-loopback

lets do an update and upgrade

sudo apt update && sudo apt upgrade

I also add the server to Debops inventory. I want unattended upgrades of Ubuntu security releases and firewall via ferm etc.

install Postfix, choose Internet site

sudo apt install postfix

 

add the Debian official repositories

echo "deb http://debian.aegirproject.org stable main" | sudo tee -a /etc/apt/sources.list.d/aegir-stable.list

 

add the archive key to the servers keyring

wget -q http://debian.aegirproject.org/key.asc -O- | sudo apt-key add - sudo apt-get update

 

install the Aegir 3 package

sudo apt install aegir3

 

the installation proceeds and you need to manually enter a mysql password (make it secure, record it in an encrypted password manager and avoid special characters)

verify URL of hostmaster frontend

re-enter mysql password

Aegir is installed and offers a login link, change username and password and email.

More parts to follow