Adding Fonts to the Divi Builder Menu

The company I work for has been migrating a lot of sites to Divi, the WordPress Theme. I’m not really a fan of Divi but I also wasn’t in the meetings when the decision was made so… I’ve had to start learning Divi.

The other day a designer asked about using custom fonts on a site. In this case it was a TrueType Font. I uploaded the actual file to the server and added the font family via CSS:

@font-face {
font-family: 'KansasNew-Regular';
src: url('/wp-content/themes/divi-child/assets/fonts/KansasNew-Regular.ttf');

So basic stuff, but the user wanted to be able to pick the font from the font drop down in the Divi Builder:

Divi Builder Font Selector

This was trickier but after some searching I found the solution at Ville Teikko’s site. As is so often the case with WordPress it comes down to using a filter. Teikko says you need to bundle your font into a web-font kit but, maybe since my needs were very simple (a single typeface) I got away with not doing that.

Here’s the filter that worked with the CSS above:

add_filter('et_websafe_fonts', 'load_divi_custom_font', 10, 2);

function load_divi_custom_font($fonts) {

$custom_font = array('KansasNew-Regular' => array(
'styles' => '400,700',
'character_set' => 'latin',
'type' => 'serif',
'standard' => 1

return array_merge($custom_font,$fonts);

Knock on wood, so far it seems to be working. I’ll update the post if we run into any issues over time.

Layering Icons with Font Awesome

I’ve been playing around with using Font Awesome for icons lately. This is pretty common knowledge stuff but that doesn’t mean I won’t forget how to do it so figured I’d best write it down.

Step 1 of course is including Font Awesome inside your head tags. Something along the lines of this:

<link rel="stylesheet" media="all" href="" />

The simplest way to add an icon is just by adding a class to an empty tag:

<class="fa-solid fa-dungeon"></i>

From that code we get this:

OK but where does that code come from? You have to look it up on the Font Awesome site. Make sure you click the “Free Icons” toggle unless you’re paying for FA.

You can change the color of the icon via CSS in the same way you’d change any text color. You can change the size the same way (via font-size) OR you can add more classes:

<class="fa-solid fa-dungeon fa-lg"></i>

results in:

There are also literal sizing classes: fa-1x, fa-2x… fa-10x
You can read up on sizing icons in the official documentation.

So at long last let’s get to layering, which is the point of this blog post. Layering is my term, Font Awesome calls it stacking which is more accurate but in my brain I liken it to layers in a graphics program. Here’s their documentation on it.

And here’s an example.

This is the code behind that icon. This is 3 stacked icons: a solid circle, the RSS icon, then a hollow circle. Initially the hollow circle is the same color as the solid circle, but it changes color on hover (roll your mouse cursor over it to see what I mean). Note that you need a span or something wrapping all your layers.
<a href="">
<span id="rss_icon" class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-rss-square fa-stack-1x rss-icon"></i>
<i class="fa-regular fa-circle fa-stack-2x icon-border"></i>

So what does this all mean? The first span is a container for the stacked icons. The fa-stack class is what indicates this is a container for stacked icons. If you’re interested, here is the CSS behind fa-stack:

display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2.5em;

fa-lg is controlling the size of the icon stack

For the first actual icon, the combination of “fa fa-circle” are the classes for a solid circle, fa-stack-2x sets this to be twice as large as the standard size (as set by the container).

The next icon replaces fa-circle with fa-rss-square, which shows the RSS icon. fa-stack-1x makes it the standard size, so half as big as the solid circle.

And finally the last icon is from a different ‘set’ of Font Awesome icons, so starts with fa-regular (instead of fa) and then fa-circle. I know this is a little confusing, but “fa fa-circle” is a solid circle, while “fa-regular fa-circle” is a hollow circle. These values all come from looking them up on the Font Awesome site. Finally fa-stack-2x makes the hollow circle twice the standard size, or the same size as the solid circle.

The icon-background, rss-icon and icon-border classes are my classes that I use in local css to set colors and so forth.

If you’re curious about the actual shapes, here’s the CSS for fa-rss-square, or more technically the before pseudo element for fa-rss-square

.fa-rss-square:before, .fa-square-rss:before {
content: "\f143";

So just the hex code of the character that Font Awesome uses for the RSS icon, I guess.

And that’s about as far as I’ve taken this. I’m not 100% convinced this is easier than just making some small gifs to use as icons, but I’ll admit it’s pretty convenient once you have Font Awesome installed on a site. Just look up the icon you want and paste in the classes and bam!

Fixing “OneDrive Cannot Connect to Windows” error

Recently I started having an issue with my Windows 10 laptop where I’d get the error “OneDrive Cannot Connect to Windows” after a restart. This disabled OneDrive’s “Files on Demand” feature which I lean on heavily given my laptop only has a 500 GB SSD.

Looking in the system logs, I saw this error:

Session "Cloud Files Diagnostic Event Listener" failed to start with the following error: 0xC0000022

Found it under Kernel-EventTracing.

The ‘band-aid’ fix for this is to open an elevated shell and run:

netsh int ip reset

Then restart. This would fix things until the next restart, which is nice but not ideal.

A longer term (though still not ideal) solution is to disable Fast Start: Settings -> System -> Power & Sleep -> Additional Power Settings -> Choose what the power buttons do -> disable “Turn on fast startup” under shutdown settings.

I am hoping that will be a permanent fix; will report back with results. This appears to be a bug introduced in a recent version of Windows 10 as I’ve seen a lot of talk about it recently.

Changing Icon Colors in UI Kit (and SVGs in general)

For a new project I’m working on, I’m learning UI Kit; I have never done much in the way of front end development so I’m like a babe in the woods when it comes to CSS Frameworks.

Today’s challenge: Icons. UI Kit includes support for SVG icons. I needed a star on a navbar and UI Kit could give me one. Why not use it?

The UI Kit documentation says “This component injects SVGs into the site, so that they adopt color and can be styled with CSS.”  Problem is it doesn’t offer any details on this, assuming I guess that you know how to style SVGs. I didn’t.

Here’s how to insert a star icon:

<span uk-icon="icon: star"></span>

That worked but it gave me an open star  and I needed a filled star 

Seems like it should be easy enough, right? I tried assigning a color to the class and that worked on the stroke but didn’t fill the star.
In the end I inspected the hollow star (in a browser) and here’s what I found:

<span class="uk-icon" uk-icon="icon:star">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="" data-svg="star">
<polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27">

OK now we know what we’re aiming at. I’d read a lot of ‘how-to’ posts on dealing with SVGs and they made it seems simple: just use fill: color like this:

.uk-icon { 
fill: yellow; 

That didn’t work and it turns out the <polygon> tag of the SVG was mucking things up. So to make a long story slightly less long, here’s the CSS I wound up using. For grins I’m going to give our star a black outline:

.uk-icon[uk-icon="icon:star"] svg {
    color: black;

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;

So first (.uk-icon[uk-icon=”icon:star”]) I’m making sure to target just the star icon (I could get more specific in case I need a blue star somewhere else). The first rule points at the svg and assigns the color black to the stroke (ie the outline).

The second rule goes one level deeper and targets the <polygon> tag inside the SVG, and NOW we can set the fill to yellow. And we wind up with this: So there ya have it. Now a few obvious points to address: I could’ve just gone and found a filled star gif or some other svg or used Font Awesome or something, I know. But I learned a lot by spending the time to figure this out.

Second, yeah next thing to figure out is how to align it to the text better. 🙂

Controlling load order of enqueued WordPress scripts and stylesheets

Another in a long line of stuff that is easy to do once you find out how to do it.

I was working on a WordPress theme and I wanted to incorporate UI Kit into this theme. I was trying to be a good WordPress citizen and so was enqueueing both UI Kit’s CSS and my main CSS. I’m honestly not convinced this is necessary for a theme you’re building for a specific site but what the heck.

My concern was, UI Kit has a lot of default styles that I was intending to over-ride [we weren’t organized enough for me to go with a custom UK Kit theme] in my style.css file, so it was important that style.css get loaded last.

So, we need to do two calls for the enqueueing. First we load up UI Kit’s CSS and javascript files:

function mytheme_scripts()
// UI Kit
wp_enqueue_style('uikit', get_template_directory_uri() . '/css/uikit.min.css');
wp_enqueue_script('uikit', get_template_directory_uri() . '/js/uikit.min.js');
wp_enqueue_script('uikit_icons', get_template_directory_uri() . '/js/uikit-icons.min.js');

add_action( ‘wp_enqueue_scripts’, ‘mytheme_scripts’ );

Then we make a second add_action call to enqueue style.css, Note the trailing 99 in the add_action. That represents the priority, or order files will be loaded. The default is 10. 99 might be overkill but if we ever need to add something between the two we have ample ‘room’ to do so.

add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('main-style', get_template_directory_uri() . '/style.css');
}, 99);

If we view source of the page it looks like this. WordPress still prioritizes style sheets before js, so style.css gets included after UI Kit’s css but before UI Kit’s javascript:

<link rel='stylesheet' id='uikit-css' href='https://dev.sample.local/wp-content/themes/sample/css/uikit.min.css?ver=5.3.3' type='text/css' media='all' />
<link rel='stylesheet' id='main-style-css' href='https://dev.sample.local/wp-content/themes/sample/style.css?ver=5.3.3' type='text/css' media='all' />
<script type='text/javascript' src='https://dev.sample.local/wp-content/themes/sample/js/uikit.min.js?ver=5.3.3'></script>
<script type='text/javascript' src='https://dev.sample.local/wp-content/themes/sample/js/uikit-icons.min.js?ver=5.3.3'></script>

Simple enough. One of those things where it took me longer to realize I could add a priority to add_action than it did to make the change.

Adding GD support to a Docker image

I had to create a new docker container to emulate a site we have working on older versions of MySQL and PHP (don’t ask, long story).

The CMS was failing spectacularly. After suspecting memory issues and other esoteric settings I realized it was much more basic: there was no GD support in this container and the plugin that manipulated images was dying without generating any error messages (thanks for that, plugin developer).

Long story short, here’s my Dockerfile to get GD support working. This was one of those “look at a bunch of stack exchange answers and kind of merge them together” solutions so I’m not 100% sure how universally it will work. The bits in red are what I added for GD support. Frankly I’m not sure about that RUN NUMPROC line… I need to research that more because I honestly don’t understand what it is doing.

EDIT: OK the -j parameter passed to docker-php-ext-install is the number of make jobs that can run concurrently (in order to speed up compilation). The RUN NUMPROC line is looking at how many CPUs you have and telling make it can run that many jobs at the same time.

Edit 2: As of April 2, 2019 I started running into problems where my docker build who throw up errors like this:
Failed to fetch

Apparently Debian “Jessie” updates have been moved to the archives. The solution is to tweak the sources list, new line added in green
Solution comes from

Edit 3: When using PHP 7.4 (php:7.4-apache image specifically) the RUN docker-php-ext-configure gd line will fail. 7.4 version is in BLUE now. Use this INSTEAD of the “RUN docker-php-ext-configure gd” command in RED. You’ll note I’m only adding jpeg support; it is surmised by the Internet that png support is now baked in. I’ll update the post if I find that is not the case.

FROM php:5.6.38-apache

COPY 000-default.conf /etc/apache2/sites-available/000-default.conf
COPY php.ini /usr/local/etc/php/php.ini
RUN mkdir -p /etc/apache2/ssl/
COPY ./ssl.crt /etc/apache2/ssl/ssl.crt
COPY ./ssl.key /etc/apache2/ssl/ssl.key
RUN mkdir -p /var/run/apache2/

RUN sed -i '/jessie-updates/d' /etc/apt/sources.list # Now archived

RUN apt-get update -y && apt-get install -y zlib1g-dev libjpeg62-turbo libpng-dev libjpeg-dev

RUN docker-php-ext-configure gd --with-jpeg

RUN docker-php-ext-configure gd \
--with-png-dir=/usr/lib/ \
--with-jpeg-dir=/usr/lib/ \

RUN NUMPROC=$(grep -c ^processor /proc/cpuinfo 2>/dev/null || 1) \
&& docker-php-ext-install -j${NUMPROC} gd

RUN docker-php-ext-install pdo_mysql
RUN docker-php-ext-install mysqli
RUN a2enmod rewrite
RUN a2enmod ssl


Moving old images/files

Here’s a simple one for you. I had a directory with tens of thousands of files (images) and I needed to clean it up by moving all the images with a time stamp of 2016 or earlier into another directory.

Step 1 was figuring out how many days it has been between today and 12/31/2016 using this tool:

I came up with 618

Step 2 was running this command:

find . -maxdepth 1 -mtime +618 -type f -exec mv "{}" ~/www/images_bak/uploads \;

. = current directory
-maxdepth 1 = don’t go into subdirectories
-mtime +618 = files more than 618 days old
-type f = files only, no directories
-exec mv “{}” = we want to move the files, not remove them
~/www/images_bak/uploads = directory we want to move them to

Credit for this solution goes to user Jenny D at

I re-write these things cuz I can never find them twice… LOL

One thing to try when Wordfence breaks your server

I opened up my local copy of one of our sites today and… white screen. WTF, it was working fine the last time I used it. I hit reload and now I’m getting a server not found error. That’s weird.

So I check the log files and see this:

[Mon May 07 15:09:14 2018] [notice] Child 167276: Starting thread to listen on port 80.
[Mon May 07 15:09:16 2018] [notice] Parent: child process exited with status 255 — Restarting.
[Mon May 07 15:09:17 2018] [notice] Digest: generating secret for digest authentication …
[Mon May 07 15:09:17 2018] [notice] Digest: done
[Mon May 07 15:09:19 2018] [notice] Apache/2.2.31 (Win32) DAV/2 mod_ssl/2.2.31 OpenSSL/1.0.2e mod_fcgid/2.3.9 mod_wsgi/3.4 Python/2.7.6 PHP/7.1.7 mod_perl/2.0.8 Perl/v5.16.3 configured — resuming normal operations
[Mon May 07 15:09:19 2018] [notice] Server built: May 6 2016 10:19:53
[Mon May 07 15:09:19 2018] [notice] Parent: Created child process 50416
[Mon May 07 15:09:20 2018] [notice] Digest: generating secret for digest authentication …
[Mon May 07 15:09:20 2018] [notice] Digest: done
[Mon May 07 15:09:21 2018] [notice] Child 50416: Child process is running
[Mon May 07 15:09:21 2018] [notice] Child 50416: Acquired the start mutex.
[Mon May 07 15:09:21 2018] [notice] Child 50416: Starting 64 worker threads.
[Mon May 07 15:09:21 2018] [notice] Child 50416: Starting thread to listen on port 80.
[Mon May 07 15:09:23 2018] [notice] Parent: child process exited with status 255 — Restarting.

This repeated over and over. Apache was starting but when I attempted to load the site, it would crash. If I tried to load something simple that didn’t involve wordpress, everything worked fine.

Long story short, something had become foobar’d with Wordfence. Not blaming the plugin itself, I think I munged something up when I imported a fresh SQL dump. I usually don’t pull over wordfence directories but maybe I screwed up, who knows?

The fix is simple enough.

Step 1:
Delete everything in \public_html\wp-content\wflogs

Step 2:
Truncate all the wp_wf* tables in your database.

Bam, problem hopefully solved. Wordfence will recreate the files you delete and re-fill that tables as it needs to. And your local will start to work again. Huzzah!

Now if it happens again, you might have a bigger issue. What turned out to be the problem in my case was that Wordfence was exhausting Apache’s memory, essentially. This only happened for me in a MAMP environment; I never ran into the issue with my Docker-based locals.

I fixed it by tweaking the Apache ThreadStackSize by inserting this into http.conf:

ThreadStackSize 8388608

Since I was on MAMP I had to edit a template. See this post for more on dealing with MAMP templates.

Apparently (I read this on the Internet so it must be true) MAMP sets a much smaller default stack size (1 MB) as compared to a typical Linux installation (8 MB). So the above ThreadStackSize pushes the size to the same as you’d find on linux.

Creating a self-signed SSL certificate for local Docker development

Usually I don’t bother setting up SSL for local development but sometimes you’ll be using a service that requires it. Plus, more and more browsers are pushing you towards SSL all the time. [Side note, I wish someone would make a browser just for developers that gets out of the way and stops trying to protect us from ourselves when we’re working on local sites.]

A lot of folks are moving towards using Let’s Encrypt for free SSL certs but I’m either stubborn or dumb. Basically I didn’t want to figure out how to work it into a Docker container system, so I went old school and created a self-signed certificate. Please note you WILL need to add a “security exception” to your browser when you’re done with this process.

First off, you need openssl. I ~think~ I installed OpenSSL via Chocolatey install openssl on Windows, but honestly it was a while ago. You could also use the Openssl that comes in Ubuntu for Windows.

The command to create a self-signed cert is:

openssl req -new -newkey rsa:4096 -days 3650 -nodes -x509 -subj "/C=US/ST=NC/L=Local/O=Dev/CN=mysite.local" -keyout ./ssl.key -out ./ssl.crt

First off, credit for this goes to StackExchange user THelper and in all honesty I don’t know exactly what all the parameters mean. (I’m so trusting!)

Here’s what you need to know to get this to work. ssl.key and ssl.crt are the filenames you’ll be generating. This string “/C=US/ST=NC/L=Local/O=Dev/CN=mysite.local” has to be customized:

/C = country code (I’m in the US)
/ST = state (North Carolina for me)
/L = locale… as you can see I fudged this
/O = Organization… again, fudged. All these matter if you’re creating a real cert to use online but for local.. meh
/CN = domain name. This one is important. I’m working on https://mysite.local

So edit that string and run the command and it should generate ssl.key and ssl.crt files.

I use docker-compose so I need to tweak my docker-compose.yml file to expose port 443 (the ssl port):

- 80:80
- 443:443

And in your dockerfile you need to copy the keys to your container. To do this, first drop them in the same directory as your docker file (I tried keeping them outside the directory but would get “Forbidden path outside the build context” errors).

Next, add this to your docker file:

RUN mkdir -p /etc/apache2/ssl/
COPY ./ssl.crt /etc/apache2/ssl/ssl.crt
COPY ./ssl.key /etc/apache2/ssl/ssl.key

So we’re creating a directory and copying the files into it.

Also remember to expose port 443 in your docker file:


Now you need to update your apache virtual hosts to support ssl.

Here’s part of my Virtual Host file, the first 3 lines are what we’re focused on, notice they match the directory we created in our docker file:

<VirtualHost *:443>
 SSLEngine On
 SSLCertificateFile /etc/apache2/ssl/ssl.crt
 SSLCertificateKeyFile /etc/apache2/ssl/ssl.key

ServerName mysite.local

ServerAdmin webmaster@localhost
 DocumentRoot /var/www/html

 ErrorLog ${APACHE_LOG_DIR}/error.log
 CustomLog ${APACHE_LOG_DIR}/access.log combined

<Directory "/var/www/html">
  Require all granted
  AllowOverride All
  Options Indexes FollowSymLinks

And that should do it!

MAMP noobs: tweaking server settings and MySQL import problems

When I set up local sites for development I generally use Docker, but the folks back at the main office use MAMP Pro. Since recently I’ve had a greater hand in supporting these people I figured I’d better use MAMP Pro for something, so the next time I had a local to set up I used it.

Couple gotchas hit me right away. When I tried to import a bunch of data to MySQL the script would fail. I kept getting “Lost Connection to the Server” errors. Very small scripts worked, but I’m dealing with long-established sites that have a lot of data.

The solution for me was tweaking a my.ini (in Windows MAMP anyway, it’s an .ini not a .cnf file) setting:


I bumped that up to 32M


But whoops, let’s back up. You can’t just go in and change settings on the MAMP server like you normally would, so this was learning moment #2.

In MAMP you have to edit a template:

This will first pop up a warning that you could potentially screw everything up by editing these files (but we knew that, didn’t we?) and then open an editor where you can make your changes. When you save them MAMP will warn you that you have to restart your servers in order for the changes to take effect (and it will offer to do that for you).

Easy enough, once you know where to look.