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 !

WordPress Bootstrap 4 and Material Design with Understrap Child Theme

Brand Primary

I am trying to standardize on Bootstrap 4 and Material Design and am going to test the UnderStrap theme direct from Github and will use the UnderStrap child-theme for our FolkBot WordPress theme.

We create the WordPress site, salts, database, user and gitignore

We change to the themes folder and use ZIP to download the parent and child-theme and the child-theme will have its own name folkbot-understrap.

we add the themes to GIT, create a repo on Gitlab and push the entire site repo.


git add .
git status
git commit -am "Understrap and Folkbot Understrap"
git status
git remote add gitlab_com [email protected]:folkbot/folkbot_wordpress.git
git push gitlab_com master

we activate the theme using WP cli


wp theme activate understrap
Success: Switched to 'UnderStrap' theme.

we check the browser and we see with our biological eyes in our human heads we have an Understrap theme

Folkbot Understrap default
Folkbot Understrap default

we activate the new FolkBot Understrap child theme


wp theme list
+--------------------+----------+--------+---------+
| name | status | update | version |
+--------------------+----------+--------+---------+
| folkbot_understrap | inactive | none | 0.2.2 |
| twentyfifteen | inactive | none | 1.7 |
| twentyseventeen | inactive | none | 1.1 |
| twentysixteen | inactive | none | 1.3 |
| understrap | active | none | 0.5.7 |
+--------------------+----------+--------+---------+

wp theme activate folkbot-understrap/

Success: Switched to 'UnderStrap Child' theme.

Folkbot Understrap
Folkbot Understrap

All pretty standard so far, next we are going to try to bring in the Daemonite Material Design Bootstrap 4 library.

Lets try to put it /var/www/html/wp-content/themes/folkbot_understrap/sass


git clone https://github.com/Daemonite/material.git

We add this to git by deleting the material repo’s own .git git dot folder

Material repo
Material repo

Custom CSS

Understrap wants Nodejs, Bower, Gulp and Browser Sync


sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev nodejs
cd
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL
rbenv install 2.4.0
ruby -v
gem install bundler
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential
ruby -v
sudo npm install -g bower
bower --version

We change directory and install via npm install

Gulp Watch

We change the gulpfile.js so it works for our DNS and in our folder we run gulp watch

Now in folkbot-understrap/sass/theme/_child_theme_variables.scss we can change our $brand-primary: #4c4d4a; and gulp watch updates and we get a new theme color

Material Design

Next, we want to integrate Material Design


// Material Design for Bootstrap 4
@import "material/assets/sass/material";

@import "theme/child_theme_variables"; // <--------- Add your variables into this file. Also add variables to overwrite Bootstrap variables here
@import "assets/bootstrap4";// <--------- Loads Bootstrap3 or Bootstrap4. Change from /bootstrap3 to /bootstrap4 Watch out! just for testing in the moment!
@import "../src/sass/understrap/understrap/understrap";// <-------- Loads the UnderStrap defaults. Just a few classes to incorporate BS in WP
@import "../src/sass/understrap/theme/contact-form7";// <-------- Loads some basic styling for contact form 7 plugin

//Optional files - If you don´t use the corresponding scripts/fonts comment em out
@import "assets/font-awesome"; // <------- Font Awesome Icon font
@import "assets/underscores"; // <------- Underscores media styles

// Any additional imported files //
@import "theme/child_theme"; // <--------- Add your styles into this file

to modify Understrap theme settings we need to bring variables across from the theme and place them into
folkbot-understrap/sass/theme/_child_theme_variables.scss


$brand-primary: #fe9ecd;

// Basics of a navbar
$navbar-height: 60px;
$navbar-margin-bottom: 0px;
$navbar-border-radius: 0px;

we can now add the kitchen sink from Bootswatch Bootstrap 4 and we can see Material Design Bootstrap 4

we also change material design folkbot-understrap/sass/material/assets/sass/variables/_colour.scss and other variables


$brand-color: $palette-grey-500 !default;
$brand-color-dark: $palette-grey-700 !default;
$brand-color-light: $palette-grey-100 !default;
$brand-text-color: $white-primary !default;
$brand-text-color-dark: $white-primary !default;
$brand-text-color-light: $black-primary !default;

$brand-color-accent: $palette-green-a200 !default;
$brand-color-accent-dark: $palette-green-a400 !default;
$brand-color-accent-light: $palette-green-a100 !default;
$brand-text-color-accent: $white-primary !default;
$brand-text-color-accent-dark: $white-primary !default;
$brand-text-color-accent-light: $black-primary !default;

Brand Primary
Brand Primary

Obviously, this is just the start

Next, Phoenix, Elm, Angular, Sketch, Android and Swift

Getting rich quick with WordPress, or not

The Gem

As a follow-on from my WordPress/Drupal Page Builder post, I bought a license for Beaver Builder for WordPress.

I am exploring the concept of a hyper-local news, community, market site with WordPress, Beaver Builder and a Beaver Builder child theme.  I am doing the development on my home lab server, and using sshfs to access the Ubuntu server web folder share.

I wish I had time to write up more, and I plan to be doing something along these lines in a book project, but for now, I want to simply take some notes of some highlights along the way.

I setup WordPress, on Apache2, PHP7, on Ubuntu 16.04 and used sshfs to do remote shares.

I actually played around with Beaver Builder, more than I document below. It’s a great tool, and if you are in the market for a visual web-design and visual page builder for WordPress, with more flexibility around custom themes, than I recommend it.

However, for myself, I realized I just wasn’t happy. I wasn’t satisfied with Beaver Builder or Divi or the Page Builder experience. It felt like Microsoft Frontpage or Adobe Dreamweaver, it felt shallow.

Don’t get me wrong, for many projects, and many clients, possibly the great majority of the 40% of the worlds total websites, that happen to run WordPress, a Page Builder like Beaver Builder would be awesome. But for me, it felt like the same dynamic as my Page Builder Dark Magic Locked Forever post.

I should also say, I am really sure, I could of made a production grade, release ready, relatively competitive website with Beaver Builder and WordPress and Woocommerce in about a week. This would of included custom CSS, maybe some templates, a logo, banner, content and store. The whole deal. Problem is, anybody else, or maybe 3 billion people, could do the same.

I’ve been told by a tech educator that the tech choice is 1% of the business, and its other factors. I wonder what Google or Facebook or Tesla would say to that. This is a nice idea, and we all like myths and might say that in public. But internally invest massively in R&D and patents and IP.

The 1% tech choice, then becomes the secret sauce, the key ingredient. It’s not like you can just say, I won’t worry about that 1%, I’ve got 99% to work with. Let’s build the next big thing on WordPress or Drupal.

I saw a presentation at Badcamp, maybe three years ago, where Jay Batson, former co-founder of Acquia, the kind of Accenture of Drupal, had just left Acquia with a golden parachute, and was with Y Combinator and was preaching Drupal for startups. The room was full, and there where people there who agreed with him.

Personally, I think its mostly fantasy. I know of Patch.com, Examiner.com and these are basically user generated i.e. spam, sites over loaded with ads.

There is Weather.com, which is Drupal, but its really the marketing site for The Weather Channel, cable TV. It’s not really a pure web startup. Weather Underground is way better.

It might be true, like Pinterest which is based on Django, you could build an amazing startup with Drupal or WordPress, but it would be so heavily modified that it would be basically a fork. By this stage, why not use a framework like Rails or Elixir?

Compare this with Bleecher Report, which is Ruby/Elixir and a Javascript app UI.  Or any number of tech startups or SAAS. They are flat out not WordPress sites. Sure they may have blogs in WordPress, or unusually like Pinterest, numerous Drupal blogs.

On a personal level,  after almost 20 years doing websites, yes, I started in 1997, WordPress and Drupal feel really tired, the PHP Web CMS feels like the past, even if they are rock solid and super slick. You can see with the WordPress REST API in core, the WP CLI and the Calypso ReactJS UX for WordPress, the people behind it know this too.

As a web developer and hopeful tech entrepreneur, WordPress and Drupal also feels like and extremely crowded space. If I see another premium WordPress theme for sale I will literally scream profanity out loud like Al Swearengen. If I find another WordPress lead generation, get rich quick scheme I will implode.

Back to the Beaver Builder experience, in short I got a refund. I wasn’t satisfied. I am not a web designer. I stopped being that in 1998.

Beaver Builder, Divi, Carbon all felt easy today, and much, much harder tomorrow. So, I got refunds and backed out of the R&D.

I will continue to use WordPress and Drupal, but will be using them for a much narrower focus. I have plans for custom modules, themes and plugins around my new business project which I will be starting today.

Oh, and one more thing about the promise of WordPress. A WordPress site will not make you rich. A website in general will not make you rich. It’s not a money making machine that you turn on and it money pours in. Most people who claim this are actually selling what they are selling.

I mean, a super star coach selling coaching lessons on how to be a coach via website ebooks and webinars. Or, a WordPress page builder tool (DIVI and Beaver Builder are not doing this, but others do) that sells a WordPress page builder tool for selling.

Making more money than you spend makes you rich, and websites can be a tool. But believe it or not, plenty of people make money without websites. For instance, look at Renaissance Technology. If you don’t know who these people are, your really should look them up.

This is classic Ponzi scheme stuff. Its the reason I left permaculture. The system itself mostly doesn’t work commercially, and the business model is based on permaculture students selling the permaculture practice to new students.

I know you can make money as a farmer and use permaculture ideas etc. Just like you can make money and use a WordPress site. But it’s the 99% that makes the business not just the 1% tech choices.

A big BUY NOW button, wont make people buy a rubbish product, you can trick people, mis-lead people sure, and part of this might be adding a button.

A fellow traveller of WordPress get rich quick, is the dreaded acronym SEO.

Never has so much BS been written and said about a word.

Sure you need a well structured website, with complies to the basics of technical website structure. But, that’s not enough, and plenty of wonky websites are very successful.

Along with technical SEO, the website structure, is content marketing, i.e. editorial and content.

Do you have words and images and other interesting engaging and interactive content on your website that will attract and keep and convert readers into paying customers?

Finally, and most importantly, do you actually have a product to sell, that a customer will want?

Internet Death

I recently listened to a webinar by an SEO company out of Nevada, where the inevitable question was asked, I do all this SEO stuff and nothing works, I don’t get traffic, I don’t get business. The SEO company then spoke about getting paid advertising, or trying new things. They dodged the question imho.

Personally, I think that the real answer is, you are screwed. Your business is screwed, you will go under, get ready.

Doing SEO and doing advertising may well be just accelerating this fact.

I actually think this is more of a systemic thing than we like to admit.

I call it Internet Death. All across the world, thanks to Amazon, book stores are gone, and now its expanding into entire shopping malls, dead malls.

Soon it will be taxi drivers, and truck drivers. Soon it will be domestic workers replaced by robots. Soon journalists will be replaced by robots. Sorry, its Internet Death, and a WordPress SEO effort with Facebook ads and Google Adwords is not going to be enough.

Interestingly enough, the only thing that stopped some of the first “disruptive” innovations, i.e. file sharing of audio and video was legal action by media companies.

Interestingly enough again, some of the exact same people behind the illegal file sharing, yes, its theft folks, are behind companies that are somehow glorious and untouchable and leading the “disruption” today.

The Gem
The Gem

 

Set-Up Atom.io Editor

Download Atom.io, the excellent cross-platform text editor/almost IDE.

Creating a custom Beaver Builder Child Theme

Copy and customize the Beaver Build Child theme

On linux this is cp -ar bb-theme-child sonoma-speaks-bb-theme-child

change the screenshot.png and the styles.css, from the docs

/*
Theme Name: Sonoma Speaks Beaver Builder Child Theme
Theme URI: http://www.devekko.com/sonoma-speaks-com
Version: 1.0
Description: A custom theme for Sonoma Speaks
Author: Nicholas Roberts, Devekko.com
Author URI: http://www.devekko.com
template: bb-theme
*/

/* Add your custom styles here… */

now Activate your custom theme in the WordPress dashboard

Sonoma Speaks Theme Activated
Sonoma Speaks Theme Activated

Add a Custom Beaver Builder Preset

I want to try to leverage the Beaver Builder preset system and make a Preset

Possibly in the future I will want to create a second Preset for a sub-site or a different version, say the Christmas holidays, or the Fall or the Spring

In the functions.php file of my custom theme I add this block, as guided by the docs


function sonomaspeaks_custom_presets()
{
FLCustomizer::add_preset('default-sonomaspeaks', array(
'name' => 'Sonoma Speaks',
'skin' => 'default',
'settings' => array(
'fl-body-bg-color' => '#282a2e',
'fl-accent' => '#95bf48',
'fl-accent-hover' => '#95bf48',
'fl-heading-text-color' => '#95bf48',
'fl-topbar-bg-color' => '#3e4147',
'fl-topbar-text-color' => '#a6a6a6',
'fl-topbar-link-color' => '#a6a6a6',
'fl-topbar-hover-color' => '#95bf48',
'fl-header-bg-color' => '#282a2e',
'fl-header-text-color' => '#a6a6a6',
'fl-header-link-color' => '#a6a6a6',
'fl-header-hover-color' => '#95bf48',
'fl-nav-bg-color' => '#282a2e',
'fl-nav-link-color' => '#a6a6a6',
'fl-nav-hover-color' => '#95bf48',
'fl-footer-widgets-bg-color' => '#282a2e',
'fl-footer-widgets-text-color' => '#a6a6a6',
'fl-footer-widgets-link-color' => '#95bf48',
'fl-footer-widgets-hover-color' => '#95bf48',
'fl-footer-bg-color' => '#282a2e',
'fl-footer-text-color' => '#a6a6a6',
'fl-footer-link-color' => '#95bf48',
'fl-footer-hover-color' => '#95bf48'
)
));
}
add_action( 'after_setup_theme', 'sonomaspeaks_custom_presets', 11 );

now I have a preset listed in the Customizer which I can force values with code

Sonoma Speaks Presets
Sonoma Speaks Presets

I want now to be able to see easily what each of the colors are and so in atom.io I install pigments

apm install pigments
Installing pigments to /home/devekko/.atom/packages ✓

after restarting atom.io hex now has colored backgrounds making CSS much easier

Atom.io Pigment
Atom.io Pigment

lets also install Color Picker

apm install color-picker

now we can right click, choose Color Picker and change colors visually

Customize via the WordPress Customizer

Color Picker
Color Picker

Ultimately atom.io & sshfs didn’t work, atom.io processes grew to 2+GB and crashed my laptop. So, used VNC to remote into the dev VM.