Add custom icons to your ACF with ACF projects: FontAwesome Field

If you’re used to creating your own web icons, you must be familiar with Icomoon. For a client project already using FontAwesome, I needed to add 2 customs icons from using the Icomoon service.

In this blog post, I’m using Icomoon, but you should be able to reproduce the same behaviour with another icon provider, maybe with some adaptation.

FontAwesome icons were used on menu items thanks to Advanced Custom Fields and Advanced Custom Fields: Font Awesome Field. The goal is to add to the list of FontAwesome icons, my 2 or 3 customs icomoon icons.

Show Icomoon icons in the ACF FontAwesome field

Advanced Custom Fields: Font Awesome Field that I will name ACFFA from now offers a filter to modify the list of icons:

ACFFA_get_icons
add_filter( 'ACFFA_get_icons', 'cot_test' );
function cot_test( $icons ) {
$icomoon = array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => ''
),
'calice' => array(
'name' => 'calice',
'hex' => '\e90f',
'unicode' => ''
),
);
foreach ( $icomoon as $ico ) {
$icons['list']['far'][ 'far ' . $ico['name'] ] = '<i class="icon-' . $ico['name'] . '"></i> ' . ucfirst(
$ico['name'] );
$icons['details']['far']['far ' . $ico['name']]['hex'] = $ico['hex'];
$icons['details']['far']['far ' . $ico['name']]['unicode'] = $ico['unicode'];
}

return $icons;
}

Here we filter the existing list of FA icons to add our custom icons. Unfortunately, since the Matt Keys extension is developed for FA, only the FontAwesome categories are available, namely Brand (fab), Regular (far), Style (fas). I decided to add my icons in the Regular or Far categories. This is purely arbitrary.

DéLet’s break down the code above

array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => '&#xe90e;'
),

Here I declare the Icomoon icons I’m going to want to use:

  • name: the name of the icon in the list
  • hex: the hexadecimal code provided by Icomoon
  • unicode: the unicode of the Icomoon icon

Then, with a foreach loop, I’m going to feed the $icons array containing the FontAwesome icons

Exemple d'icône personalisé dans le champs ACF

Display icons in the back office and front office

To display the icons in back-office, the Icomoon CSS sheet with all the icons will have to be loaded on the back-end side.

For that, we’re going to add this code:

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );

If you are used to developing your themes you know the WordPress action hook wp_enqueue_scripts that allows you to load stylesheets and scripts in the frontend. There is also an equivalent for the back office called admin_print_styles.

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );
add_action( 'wp_enqueue_scripts', 'cot_load_icomoon_css', 9, 1 );
function cot_load_icomoon_css(){
wp_enqueue_style( 'font-icomoon', get_template_directory_uri() . '/css/iconmoon.css');
}

So here I load the CSS sheet in front and back office.

I put a priority 9 at the front loading in order to pass just before the loading of the theme stylesheet and to be able to use them afterwards in my theme. By default an add_action() has a priority of 10.

Display the icons in front-office

In front-office, the ACF FontAwesome extension returns HTML markup formatted for FA (normal!). In some cases, we want to load another font (the one generated by Icomoon) in our custom icon.

Icomoon provided me with 4 font files (.eot, .svg, .ttf and .woff) that I placed in my projects. The icomoon.css file does a @font-face so that the fonts are loaded

The problem lies in the fact that the Matt Keys extension generates an HTML FA markup and it will be necessary to “trick” to hijack the operation only for Icomoon icons. And yes, we want to be able to continue to use FontAwesome normally.

<i class="far cierge" aria-hidden="true"></i>

We find the far class of FA which will load the FontAwesome font then the cierge class generated from the name given in the list of extensions to insert.

To make the site load my font instead of FontAwesome’s, I created a CSS sheet modifying the style of these classes:

.far.cierge:before {
font-family: "my-icomoon-font";
content: "\e90e";
}

For each custom icon I ask WordPress to load my-icomoon-font and use the content with the hex code corresponding to my icon.

 

Geolocalize an address without Google Maps

We’ve long been used to using Google’s tools and services to do a lot of things… only good things come to an end and some of these services close or become paid for.

As part of the development of my OpenAgenda plugin for WordPress, I need to find the longitude and latitude of an event address.

OpenStreetMap to the rescue

Fortunately, there are many services that can replace those of Google. Among them OpenStreetMap (OSM) for everything that revolves around maps and geolocation.

Nominatim for the conversion of address to location data.

So I discovered the Nominatim service.

That’s all very nice, but I want code!

If like me, you need to retrieve the latitude and longitude of a geographic point in PHP… for WordPress, here’s what I do:

PHP

A little explanation:

Line 1: a function is declared in which I pass by setting an address (street postal code city).

Line 2: I encode this address so that it can be integrated into a URL.

Line 3: I check if a transition with the coordinates exists. Nominatim limits access to its IAP… the transient allows you to store the information locally and not to make a request at each display… especially since the geographical coordinates of a point should not change too often….

Line 14: I create the transient that will be valid for 90 days. Basically, your WordPress will ask for geolocation only once every 90 days for the same address.

Between 2: if the address has never been geocoded then I request the Nominatim API.

Any ideas or improvements to make? Leave me a comment!

Develop your WordPress Project using Lando

I already told you about Lando a while ago… it was more of a cry from the heart to have found a simple solution to use Docker technology.

What’s Lando?

As I explained in my previous article, Lando is an overlay that makes it easy to use Docker Technology.

To put it simply, you have to see Docker as a modular tool where each brick is the component of your web server.
So you will need for example, to run a WordPress locally an Apache brick, a PHP brick and a Mariadb or Mysql brick.
Among these different bricks, there are different versions. For example PHP7.0 / PHP7.3 .

To develop soundly and avoid unpleasant surprises during production, it can be interesting to use during our developments the same software versions as those used by the server that will host the website in the end. In this way we reduce the risks of conflicts and errors.

Docker’s goal is to provide these different bricks and make them work together… except that…

Except that, as I said in my previous article, you have to set all this up… and have sysadmin knowledge that we don’t all have… fortunately Lando has arrived…

Install Lando

The hardest part of installing Lando is actually installing Docker which is quite simple if you are free like me, i.e. on a Linux distribution. It’s a bit more complicated if you’re trapped in a private system such as Windows or Mac OS. (For once we have something simpler under Ubuntu Linux… )

In short, Docker runs natively under Linux, you’ll have to add a virtual machine to install Docker on Windows or Mac OS.

Once Docker is installed, go to Lando’s website to install the overlay that will set all this to music.

Configuring Lando

I told you earlier that Lando was ignoring the complexity of Docker’s parameterization.

All the configuration of your development server will fit in a text file.

Let’s imagine that we want to create a WordPress site with the url https://mon-super-site.lndo.site.

Just create a folder on your machine where you have the write access and that you would name with the name you want: my-super-site.

In this folder we will add a .lando.yml file that will contain all the configuration of the server of our site:

Plain Text
.lando.yml

That’s it, that’s all! Lando is ready to go! And you’re ready to develop!

Let’s decorate the .lando.yml:

  • Line 1: A name for your development environment. This name will be used to build the url of your project.
  • Line 2: “Recipe” means recipe in English. Lando has developed preconfigurations according to what you will do with it. Here is a WordPress recipe, it will install wp-cli. There are some for Pantheon, Drupal and more => Lando Recipe
  • Line 3: a config block where you can specify your software versions
  • Line 7: a Service block where we will list the services we want to see working. here PhpMyadmin and Mailhog
  • Line 16: Composing is still practical when working in the PHP world.
  • Line 19: This block is optional if you are working on a simple domain. It can be very useful when working on a Multisite WordPress subdomain for example.
  • Line 22: maybe the nicest part… do some tasks just after importing a database… here we do via wp-cli a search & replace to adapt the urls and we disable the excellent WordPress WP-Rocket extension because the cache in dev… how to say 😉

This .lando.yml is quite simple and there is a multitude of other configurations and possibilities to best fit your needs.

Note that Lando is oriented for development and is strongly discouraged by its developers for a production

To run Lando for the first time, you have to do a `lando rebuild –y’.

At this point, it will create and download what it needs. This step can be long depending on your web connection but it will only be done once…

Then for the next launches a `lando start` in your terminal in your working directory will be enough.

Attention the WordPress recipe prepares lando technically to receive WordPress but does not install WordPress. You will perform this installation step as you are used to or by using my wp-cli method.

I use Local By Flywheel… it’s the same thing!

Hummm each solution has its advantages and disadvantages. When I decided to test and finally adopt Lando, Local By Flywheel was not available under Linux. This is no longer the case since the summer of 2019.

I (too) quickly tested Local By Flywheel and I couldn’t get a WP to work :-/ (note it too much).

The only thing Flywheel brings for my case is a GUI (Graphical User Interface) whereas Lando… it’s command-line… but sincerely to make lando start or `lando rebuild –y`? install an interface that will necessarily use machine resources… I didn’t see the point.