Going out with a bang!

We’re already halfway into the month of October, so this post is a little later than planned. I’ve just got back from a short break with my family and I’m recharged and ready to create new blog posts and plugins (or complete existing ones) until the end of the year. I thought it might be fun to post a little about what I have in store for what’s left of 2016.

Elegant Forms

I haven’t touched Elegant Forms since I blogged about it but I am recommitted to completing and releasing the plugin before 2016 ends. The one area that Divi is sorely lacking in is a better form module so I hope to bring this to the community as soon as possible.

Admin Title

On of the great ideas that came out of the Divi Theme Users group was a plugin that automatically updates the admin title of a module based on a specific field in the module itself. I coded up a proof of concept on the night of the discussion but it pretty much stayed there, so I want to revisit and release this little plugin as soon as possible, specifically for all the site builders out there.

New Directions

I want to start moving into Divi Layout and Child Theme creation. As I am not a designer I have to rely on the work of others to help fuel this, so today Atlantic Wave released a bunch of Elegant Themes inspired layouts for Divi. I have a few child themes I am working on that I also plan to release in the very near future, also inspired by the Elegant Themes demo designs, but with a little Atlantic Wave development twist.


As always, I constantly on the lookout for new ideas and new areas of development. If you have a plugin or theme development idea you would like to work on, feel free to get in touch.

Taking the pain out of self managed cloud hosting with ServerPilot

(Disclaimer, links to ServerPilot and Digital Ocean contain referral codes, if you use them and make a purchase you’ll be putting a few extra $’s in my pocket)

As the web and it’s associated technologies move ever forward, the solutions available for hosting your website are about as abundant as the options available for creating it.

One of my favourite advances in hosting options has been the advent of Virtual Private Servers or VPS. What I like about VPS is that it gives you the same level of control to the base system as a physical server, but at a fraction of the cost, and with similar performance to a physical server. Over the years services like Amazon AWS, Digital Ocean and Linode have really reduced the cost of creating and managing your own web server using VPS technology. The only problem with using a VPS is that you need to have a level of understand of server technology, software and server administration to be able to setup and manage such a server, something which most web designers, developers and builders do not.

With this in mind I was quite pleasantly surprised when someone pointed out ServerPilot to me. ServerPilot provides a fast, managed and secure way to manage your VPS without needing too much technical knowledge. On installing ServerPilot on your newly purchased VPS, you are given tools which allow you to create and manage multiple PHP apps on your server. What is even better is that ServerPilot supports WordPress straight out of the box, so setting up a new blank WordPress site is a simple matter of clicking a few buttons.

Without a doubt one of the things I love about ServerPilot is the technology stack. It’s built using Nginx in front of Apache, comes pre installed with PHP-FPM and supports PHP 5.4, 5.5, 5.6, 7.0, and 7.1, all on the same server. It even installs and configures a firewall on your server as well as SecureFTP access, automatically updates itself and supports LetsEncrypt SSL, giving you the option to install and configure free SSL certificates for all your sites. Finally, depending on the package you choose, it provides various levels of server monitoring, from basic server CPU and Memory usage, all the way up to slow script reporting.

ServerPilot is about the best tool for web professionals who would like a little more control of their (and their client’s) hosting options. At $10 for the ‘Coach’ version, you can install and manage as many servers as you like. It’s designed to use Digital Ocean servers, but supports the majority of the VPS services out there (Amazon AWS, Rackspace, Linode, Microsoft Azure, Google Cloud).

If you are currently using VPS based services or are looking for alternatives to your current hosting provider, I highly recommend to try out the free version of ServerPilot. If you don’t want to spend any money on the VPS to try it out, you can use my Digital Ocean referral link for a $10 credit, which is enough for a 512MB droplet for two months, more than enough time to test out the service.

New challenges

A short while about (July to be exact) I published a post about why I got into software development. At the time I was dealing with a bit of a personal crisis. I had reached a point (for the second time) of burning the candles at both ends so much that I was probably not thinking straight. So I had this daft idea to launch a Patreon account to try and crowd fund my goals. No prizes for guessing how that turned out.

What that post did however do for me is define why and more importantly how I want to make my living as a freelance developer. It also helped me realise that perhaps the tools I need to be using are out there and I just need to take the proverbial bull by the horns. So, with that in mind, I am very happy to announce that I am, as of September, one of the newest experts at Codeable.

If you have never heard of Codeable, it is the worlds #1 WordPress specific outsourcing platform. The founders, Per and Tomaz, are WordPress experts themselves and their business model and making huge inroads into bringing expert WordPress developers in contact with realistic clients who appreciate and understand the value of paying a fair price for excellent work. I’m happy to say that I’ve already completed my first few tasks at Codeable and collected a couple of great reviews.

Working at Codeable does mean that (for now at least) I have a little less free time for blog writing and replying to comments. If you were one of the people who commented on my articles during September, this is where I apologise for my lack of replies. Going forward I’m going to try and focus on publishing at least one web development specific blog post a month, so bear with me. I don’t have an army of writers like the guys at Elegant Themes.

Oh, and if you want to hire me to work on your project, just use the ‘Hire Me’ link over on the menu.

A friendly challenge to all WordCamp Cape Town 2016 Workshop Speakers

It’s Sunday morning 11 September and I am still coming off of the high that is WordCamp.

However, one thing makes me sad. Due to constraints the day 1 workshops were not filmed. While I do understand the logistics of this and why it was not possible, I gets me thinking that it would be amazing if there was some way to still capture this information for those who attended, or better yet, those who could not make it.

And then it hit me. We live in a digital age. There is nothing stopping each and every workshop speaker from taking an hour of our their day, recording their own session and uploading it to YouTube.

So, if you were a workshop speaker on day 1 of WordCamp, I challenge you to redo your workshop in the comfort of your home or office, record it and share it with the world. If your workshop was fairly seamless ( we’re looking at you Konstantin 😉 ) then it will be really easy. If, like me, there were things you could improve to help fit it into 1 hour, then make those changes and record your session.

I’m letting Steve and Danielle off the hook, I’m not sure they could record their talk and recreate the magic without an actual audience. 😉

I also already know Chris Muller is off the hook, as his team filmed his talk for him. So Chris, you are first up, upload the video, share it and inspire the rest of the community to record theirs.

You can expect mine by the end of the week!


UPDATE: Just for fun I’ve uploaded a preparation recording of my talk, recorded in my car during the drive to day 2 of WordCamp. There are some minor errors in the recording as well as some background noises. Also some parts of the talk changed on the day, but the general gist is the same.

Listen on SoundCloud.

Slides from my Day 2 lightning talk at WordCamp Cape Town 2016


WordCamp Cape Town – Day 1

So day one of Word Camp Cape Town is over. It was quite a whirlwind of a day, but I thoroughly enjoyed every moment of it.

My WordCamp experience actually started on Wednesday night, at the VIP dinner. Here I got to meet and chat with a bunch of folk from the local WordPress community who I had only ever ‘met’ online. It’s quite a thing to already have a relationship with someone and then only meet them in person for the first time (I wonder if this is how new Automattic employees feel at their first company meetup?) The vibe was great and I had some amazing discussions with some awesome people.

Today kicked off (after the obligatory 1 hour 20 minute drive from the outskirts of town) with my ‘Extending WordPress’ workshop. It went pretty well, there are some things I could have done better and some things that I nailed, but all in all I had good feedback. It’s always great hearing that people finally understood a specific concept because of your talk and one or two people mentioned that to me, which was amazing.

After that I sat in on Seagyn’s advanced talk on Continuous Integration, Unit Testing and Integration testing. I got to play with Travis-CI and I am excited to start implementing this knowledge into my development work flow

After lunch I decided to stay on the advanced developer track and thoroughly enjoyed Konstantin Obenland’s Settings API workshop. Being able to watch an expert at work is an amazing thing, and Konstantin ‘live coded’ his Settings API example with only one bug (which he fixed in record time) causing him a few moments of quiet contemplation. And I do really mean moments, in the time that it would have taken me to figure out the problem, he’d already figured out the problem and the solution. Amazing stuff.

The day ended with a really fun and interesting talk from Steve and Danielle. I really enjoyed the way that made the entire workshop interactive and interesting. I would have easily listened to a workshop on how to increase your site speed, but they presented it in such a way that they actually made me excited to just go and learn how to do it myself. Well done guys.

Other things that stood our where how many of the local Divi community were present, where ever we ran into each other the obvious topic of conversation was Divi 3.0. I even had the chance to speak to some non Divi users and discuss the theme and its merits with them. I am definitely looking forward to meeting all the Divi Users that are at WordCamp tomorrow at our unofficial Divi Meetup.

All in all day one was pretty special. What inspired me the most was  how full the three different tracks were, I’m looking forward to seeing and interacting with everyone in the single regular sessions track tomorrow


Adding the cart button to your Divi shop pages.

As is always the case with these code snippets, this one comes from a question by a user in the Divi Theme Users group on Facebook.

Leif Ottosson asked about the ‘Add to Cart’ button on the Divi/WooCommerce shop page. When adding the Divi Shop Module to a page via the Page Builder, the list of products on that page does not include an ‘Add to Cart’ button. The idea being that the user should first view the product before adding it to their cart.

Sometimes, however, it may be quicker or better (from a UX  perspective) to allow your user to add to their cart, straight from the product list page.

This can be achieved by using the following PHP code snipped, either in the functions.php file of your child theme, or in a plugin.

// register add to cart action
function dac_add_cart_button () {
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'after_setup_theme', 'dac_add_cart_button' );

Replace the ‘dac’ prefix with any prefix of your own and you should now see the ‘Add to Cart’ button underneath the products on any page where you have used the Shop module.

Making child themes part of your business development best practice.

In part one of this series on child themes, I discussed the hows and whys of child themes. Hopefully you understand what they are and why you should use them. In part two I want to discuss the various ways you can access or create child themes as well as show you some cool things you can do with a child theme.

A quick note to the reader, this article is aimed at Divi designers and developers. If you don’t use Divi most of this article will still be relevant, but some of it will be very Divi specific. Also, before we continue, I would like to point out that I wrote a supplementary article to part one discussing the basics of a WordPress theme. If you don’t know how a WordPress theme works I recommend you read that article first before continuing with this one.

Everybody caught up? Right, let’s crack on then shall we…

There are three ways you can get a child theme, buy one off the shelf (from any of the Divi related marketplaces), roll your own using a number of child theme makers available, or create one yourself from scratch (DIY). Lets look at all three options.

Off the shelf

Off the shelf child themes are great. You get a pre built child theme customised with the developer’s choice of style and functionality included. What is quite unique about most Divi child themes is that you also get demo content included with the theme. The ease at which child theme developers can create demo content using the Divi builder and the recently upgraded portability system means you literally get a fully functioning website out of the box. All you need to do is update the content, replace images and tweak some styles here and there and your site is ready to fly. If you want to get a website up and running quickly, these off the shelf child themes are just what you need.

Roll your own

What I like to call a ‘roll your own’ child theme is one that you create using one of the online child theme creators. There are a few options available out there, just Google ‘divi child theme’. These are a pretty cool intermediary step. What the child theme creator does is ask you to input a few fields and it will generate a child theme archive for you to download. This child theme has the most basic of functionality (mostly just rewriting the Elegant Themes footer credits) but it is a great way to see the basic inner workings of a child theme and learn to build your own from there.

Do it yourself.

Otherwise known as ‘developing a child theme’. This is how the pros do it. Don’t get me wrong I have nothing against either off the shelf or roll your own child themes, but if you really want to understand not only child themes but WordPress themes and/or theme development, then you should really be developing your own. Not only does it give you a skill that is sought after, but it will open up a whole new avenue of WordPress and Divi customisation, giving you endless scope to create unique websites for your clients.

Now, as this series of articles is focusing on how to do it yourself, lets learn how to create a child theme.

The very basics.

All of what I am describing here you can read about in the WordPress documentation on child themes. In short, a child theme simply inherits the layout, styling and functionality of the parent theme but gives you the ability to override any of this layout, styling or functionality. A child theme only needs two things to be considered a child theme:

  • a directory (or folder) to contain the child theme files
  • a style.css file

The name of the directory is irrelevant. WordPress recommends naming it after the parent theme (eg ‘Divi-child’) but this is not required. Mostly developers prefer to name it after the site its being used on or give it a descriptive name based on it’s content. It honestly doesn’t matter. What does matter is what is inside your style.css file.

The header of the style.css contains the most important part of the child theme, the parent theme registration. This is placed inside CSS comments at the top of the style.css file.

 Theme Name:   Divi Child
 Theme URI:    http://example.com/divi-child/
 Description:  Divi Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  divi-child

Now the only really important part of this is the Template field. To ensure that this is registered as a Divi child theme you need to set Template to Divi. The rest of the fields are not important for a child theme to function, but it’s a good idea to at least give your theme a Theme Name and Version. If you are developing themes for client sites or to sell, its also useful to include the Author URI, as a link back to your site. Finally, while it is not a requirement to do so for the theme to work, because your child theme extends WordPress, which is licensed under the GPL, you should also include the License and License URI, as your child theme will also fall under the GPL.

You can literally start copying template files from your parent them (in this case Divi) to your child theme and edit them to achieve the effect you require. Some of the common things you can do is:

  1. Copy the footer.php file to edit the footer credits (probably the question that is asked the most by new Divi builders)
  2. Copy the archive.php file to change how the default blog archive is displayed.
  3. Copy the /includes/social_icons.php file to add additional social media icons to your header or footer.
  4. Copy the 404.php to create a custom 404 page for your site.

Quite honestly the sky’s the limit. Any file that is ‘auto included’ in the Divi theme can be overridden by copying it to your child theme and making the changes you require. You can also use the Template Hierarchy to create other files in your child theme to change how Divi renders certain views, for example creating a category.php file to enable how your category pages are rendered.

Working with style.

So obviously seeing as you have a style.css in your child theme, you’re going to want to also use it to add custom CSS to the site you are working on. As mentioned in part one, this is a quicker way to add custom CSS to your child theme and in my opinion easier to manage and tweak. For this to happen you’re going to need to add a functions.php file to your child theme. By adding this file you can queue up the parent and child style sheets, as well as use it to add any custom PHP functionality to your child theme, and therefore your site.

A good methodology is to simply always create a functions.php in your child theme with the following PHP.

function my_theme_enqueue_styles() {
    $parent_style = 'divi-style'; // This is the 'parent-style'.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'divi-child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

What this does is the following

  1. Registers a function called ‘my_theme_enqueue_styles’, to be fired when the WordPress ‘wp_enqueue_scripts’ action is fired.
  2. Enqueues the parent theme style sheet (in this case the style.css from the Divi theme)
  3. Enqueues the child theme style sheet (in this case the style.css from your child theme) and makes it dependant on the parent style

It’s important to note that the parent theme style needs to be loaded as well as the child theme style, and in which order, so that the child theme styles override the parent theme styles, should they be applied to the same HTML elements.

Once that is done you can do ahead and start adding custom CSS to your child theme style.css. As I’ve said before this is the recommended way to make large CSS changes to your Divi site.

Fully functioning.

But what else can be done with the functions.php file? Well this file really acts like a plugin file for your child theme. So you can add pretty much any custom functionality to your child theme in this file. Some examples include:

  1. Creating a function that will allow you to edit the contents of your footer credits from the WordPress Customizer
  2. Pre populating your new Divi site with common Divi settings
  3. Adding custom widgets
  4. Adding custom functionality to your Divi site, like custom modules or layouts.
  5. Customising the WP admin area

The sky is the limit really.

Active stations

Once you have created your child theme you will need to install it within WordPress. This is done by uploading an archive (zip) of the child theme directory via the Appearance -> Themes menu in your WP admin area (just like you would any other theme) and activating it.

A simple example.

I thought I would round of this article with a simple example of (more or less) all the things I’ve discussed above. I’ve created a simple child theme that registers two additional customiser settings for editing the Divi Footer credits. It also contains some custom CSS for the footer, just to show how custom CSS is implemented. You can download it from the GitHub repository.

For the next article in this series I will dive into each of the functions of the example child theme as well as add some more cool Divi specific things that can be done. I’ll also look at some of the comment WordPress specific things you need to know about, like actions hooks and filters.



Please, copy my ideas!

An open letter to all Divi plugin developers:

Please, copy my ideas!

I am, first and foremost, an open source developer. That means I believe that if you have a piece of software, either purchased or obtained freely via open source repositories, you should be allowed to ‘study, change, and distribute the software to anyone and for any purpose‘ (definition of open source software from Wikipedia). Secondary to that, I am a problem solver. I get great satisfaction when I can solve someone’s problem, specifically if it is with a piece of software I develop.

With that in mind, if I develop a plugin for Divi and you are developing/planning to develop a plugin for Divi that does the same thing or think you can do it better, please don’t stop. Build it, ship it, make it happen.

One of two things will occur.

  1. Your plugin will be superior to mine
  2. Your plugin will be just a copy of mine, with little to no added benefit.

Let’s consider both options

If your plugin is superior to mine, I will (silently, or maybe even publicly) congratulate you. If we ever end up discussing it, I’ll probably even share my original source code with you, if it helps you improve yours. In fact I’ve done this before with the developer of the Image Intense plugin. Image Intense does so much more than my little Image Overlay plugin every will. When I recently ended up in a discussion with the developer (over a totally separate post I shared and he found use for), he mentioned his soon to be released plugin with me. I shared my source code with him on the spot, should he ever find any use for it. Don’t believe me? Ask him yourself.

If your plugin is just a copy of mine, I’ll simply shrug it off and move on with my life. I’m actively working on new plugin ideas every week (literally, I was working on one this week and another plugin idea came to me, via a conversation with a previous client, which I started on the prototype for) so if you make something that copies anything I do, I’ll take it as a compliment. After all, they do say that “Imitation is the sincerest form of flattery.”

There are some things that I do find reprehensible.

I personally feel that if you are a developer/designer/site builder and you are using a piece of software for a client project that requires payment to obtain, you should at least pay for that plugin. I’ve seen sites where premium plugins and themes are listed free to download, citing the GPL is the legal reason why they can do this. Legally they are not wrong, nor ethically, as the GPL allows for this (see my definition of open source above). But I do feel that if you are selling your services as an expert, but part of your expertise is using a specific plugin to achieve a desired result, you should at least buy that plugin for your arsenal of tools. Having said that, because it’s GPL, there’s not really much anyone can do about it. You’re allowed to, so if you have no issues with doing it, then so be it.

I also do not agree with the concept of just copying and re-branding someone else’s code as your own. So if you buy any of my plugins, or obtain a copy of them via some other means, copy all the code verbatim but give it a new name to sell on your website (and I find out) I will call you on it. However, again because it’s GPL, there’s not really much I can (or will) do about it.

Competition is a healthy, natural part of being in business. As far as I am concerned, competition breads innovation. So please, compete with me, show me what you can do and I’ll show you what I can do. If you can do it better than me, great. My motto is not to be better than anyone else, but just to be better than the person I was yesterday.

At the end of the day the people who really win are our customers. And isn’t that the reason we got into building products in the first place, to solve our customers problems?