A Futurist Guide to WordPress and CMS Evolution

At the point of writing this article, WordPress holds nearly 40% of the market share of businesses using a CMS to control their company website. None of the other competitors even come close but wordpress is like Burning Man, it was cool when it was still pure in intention, but later it became filled with scammers that broke the system. Is WordPress broken? What if you just want to build a WordPress website today. What should you do?

Im not just a basher, I have some credibility when it comes to WordPress and any web cms. In 1998, I started my first web design company, New Image Technologies and one of our products was a cms called Elements which was our own spin on how to put together a project management application. Back then we were working with a completely different tech. PHP was just being introduced and the web programs were dominated by Perl scripts which were freaking awesome and idiotic microsoft platform crap, I forgot the name but that shit sucked. IE was the defacto testing platform in 1999. How things have changed but still stayed the same.

I regularly council my clients on economic concepts and how the technology should not be a burden but a tool for them which fits their business size and need for tech to solve the problems that come up. Ive always thought a good rule is that it should feel like its helping you when you are analyzing new technology. If it becomes a burden, discard it and innovate something new.

Today is an amazing day, filled with goodness all around me. Outside is like roar from the fun Im missing out on. Why? Because my email is filled with messages from my server. “Failed WordPress Login Attempt by IP ……” over and over again in my email. But wait I already went through some major security steps to lock down this server on the administration level. I run each site through a security shutdown that limits everything imaginable. And still Im getting hack attempts over and over.

How much time does it cost? At what point does it become a failure of the technology? I can tell you that it is like anything that gets that much of the population involved. It becomes prone to the problems of groupthink and exploitation. WordPress lost its focus much like Apple. But so did the internet. When we started building sites, the internet was an information landscape, much like a really deep encyclopedia. Anything you wanted to know from that time was available at our fingertips. Later it became about commerce and that broke the information landscape putting content behind paywalls and regurgitating content akin to billlboard ads in Vegas to the new internet. Social media played a big part in breaking the soul of the internet.

I regularly have to check my expenses because sometimes theres something I think is going to be a benefit for me and later it turns out to be less than imagined. Since the goal of bringing any new expense into the business is to benefit the business, it makes sense that you have to regularly go through and trim any “fruitless trees”. In the days of subscription based every fucking thing, its even more important. (Fuck you adobe I already gave you 20 grand why do I still have to pay?) Back when I used to build wordpress and drupal sites circa 2000 there was only small problems with security and most sites were not vulnerable to being hacked which made them much more profitable.

Ive always loved open source applications but there is something like a virus that has taken hold of the internet. At what point does the burden created by these ridiculous over involved security burdens become too much that it outweighs the benefit of even having and maintaining a website.

Most people dont think this way, but I still hold true to the belief that the internet should be a benefit to all and not just another construct that benefits plutocracy. At this point Ive been shutting down many of my old sites that were part of old portfolio contents or other things that used to make sense and now are just security risks if they were wordpress sites. If they were static sites, no problem. Although all our old flash files dont work anymore. But still, think about it. All that time, 20 years and the technology that built the first internet, static sites is still functional and the most secure. What’s the least secure? a WordPress site!

How to use MINIML

MINIML is a Base Template Static Website Builder for GitHub Pages using UIKit and Jekyll. It is designed to work on GitHub Pages like other Jekyll sites. It’s an extensible theme Gem that can be customized easily and styled using the UIKit Framework by adding some easy to use markup. Now you can host a site for free on Github Pages and still have a ton of interactive capabilities from UIKit. To work with Miniml you should be familiar with Git and CLI administration. Using Jekyll and Miniml is a great way to get familiar with using CLI.

To start you must first download the project to your computer. Open Terminal on Mac or your preferred CLI and browse to the directory you want to develop inside. I use a directory called gitsites but it can be anything just so you remember it and can come back to it later.

cd gitsites

Got to the git repo here or use the following to download the repo to your local machine:

git clone https://github.com/st4rlab/miniml.gitCode language: PHP (php)

Now that you’ve got the files downloaded. Start editing the construct to suit your needs by going to the _config.yml file in the root directory and editing the pertinent details.

You can edit the navigation by going to the _data/navigation.yml and following that structure exactly to make up the navigation how you want. Additionally you can create create your own collections by following these instructions to create a portfolio or other custom content type.

Once you have your configuration details the way you like them run the following command in the CLI:

bundle install

This will build out the dependencies now you can run the following command to create a test dev site on your machine.

bundle exec jekyll serve

This will create a fully browsable static website and give you some feedback which you should become familiar with. As you work on your site, there are tools that can assist content management like Forestry.io.but you will want to first gain a good understanding of whatever it is you working on.

As you complete your project and are ready for deployment, just push it to Github like any other repo and set it to use Github Pages in the Settings for that particular Repository.

Particles Interactive Cellular Background

This is an easy and awesome to use pattern. It is the first code pattern to be introduced to sdg and its really frikkin cool. It’s so cool we’re using it on our homepage and still pulling an “A” speed rating… WTF?

Let’s get into into it.

It’s a combination of js/css with some very limited markup. This is great for keeping things isolated. We use this on our homepage and why would we want this to be included on every page? If we want to do this right, we separate things and make sure that our includes are only being called on the page that matters. In this case it’s the homepage of our site.

The original idea was posted here by Vincent Garreau who should receive any credit for the writing of the code. Here is his codepen:

What I did was to include an html section for the yootheme pro components and add the following code to that section:

<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
#particles-js {
  position: absolute;
  width: 100%;
  height: 800px;
  background-color: #fbf6ed;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;

<div id="particles-js"></div>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1000
    "color": {
      "value": "#111"
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ffffff"
      "polygon": {
        "nb_sides": 5
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#111",
      "opacity": 0.4,
      "width": 1
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      "onclick": {
        "enable": true,
        "mode": "push"
      "resize": true
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      "repulse": {
        "distance": 200,
        "duration": 0.4
      "push": {
        "particles_nb": 4
      "remove": {
        "particles_nb": 2
  "retina_detect": true

</script>Code language: HTML, XML (xml)

Now add a div with an id of ‘particles-js’ somewhere on the page. Once you have this in place on your site, (We use it for a background on the homepage) you can alter the html and css to suit your needs. Make sure to keep the script include for particles.js which does the heavy lifting in this although it should be called light cause it’s blazing fast, just like I like it.

In our case we had to add some extra build out in the css and markup to accommodate the new absolute positioning taking up the whole top section of the page. (Add some relative positioning)

Depending on your markup, mess around with z-index of elements to get your stacking order working correctly.

Wrap Up

So what we have here is an easy to use html snippet that can create some interesting effects like the one we used on our homepage this month. There’s really lot’s of ways you can implement this code and the variables can be played with to alter the effects. I like how it engages the user with interest about connections with the obvious connection to connecting with other users on our system or any system that simulates connections.

Follow Us

© Slo Design Group. All rights reserved. Design by IJH