How I switched to Lando to develop using Docker!

A few months ago I tested Docker to manage my development environments. The major advantage of Docker is to be able to develop locally on the same technical basis of the server. Admit that it’s tempting when you have sites hosted by different providers (even if most of them for my case are at O2Switch ) with different software versions of PHP, Mysql, Mariadb. The major drawback of Docker, in my humble opinion, is the complexity of configuration! I had never managed to run several vhosts at the same time!

With Lando, it’s easy!

While chatting with a colleague on the French WordPress Slack, I discovered Lando.

To use Lando, you first need to install Docker, then Lando comes as an overlay. It will greatly facilitate the configuration of the different Docker images to use to run your environment.

WordPress Recipes!

Lando offers “Recipes”, literally recipes for the main CMS and Frameworks on the market, including WordPress.

With the WordPress recipe, Lando will create an environment including PHP, and Mariadb to run your site but also wp-cli!

In short, in a few seconds of launching, you are ready to develop on your favorite CMS.

A simplified configuration for Docker!

Here is an example of the .lando.yml configuration file that you will need to have at the root of your project to launch your Lando instance!

name: test
recipe: wordpress
config:
  webroot: .
  php: '7.0'
  xdebug: true
  database: mariadb
services:
  pma:
    type: phpmyadmin
    hosts:
      - database
      - old-test
  mailhog:
    type: mailhog
    hogfrom:
    - appserver
  old-test:
    type: mariadb
    portforward: true
    creds:
      user: wordpress
      password: wordpress
      database: old-test
tooling:
  compose:
    service: appserver

This is a simple text file in .yml format that will be read by Lando to create your environment.

Note a “name”, this one will be used to create your local development url! as well as the services you want to create and in which version! Here I chose a PHP version 7.0, Mariadb in its current stable version, Phpmyadmin, Mailhog to “catch the mails” without having a mail server to configure. There is also the configuration of a second ‘old-test’ database server, the activation of Xdebug and Composer! Lando on Github

How to Easily Contribute to WordPress

If you are reading me, you are probably using my favorite CMS, WordPress. WordPress is a free software or Open-Source in English. This means that the software code is available and you can modify and improve it as you wish… There are some limitations though… you have to share your improvements.

Why contribute?

I think there are as many reasons to contribute to the WordPress project as there are contributors… The reason that comes up a lot when talking to other contributors is :
I contribute to WordPress to give back to the CMS and its community.
You will probably have your own reason, but being part of this adventure will have a place in this choice.

The different ways to contribute to the WordPress project.

When we talk about contribution, most people think about code: Contribute by making improvements to the CMS via code. But not everyone is a developer, and yet we can all contribute! There are (for the moment) 18 contribution poles. You can join them by visiting this page: https://make.wordpress.org/ which is the central portal for WordPress contribution.
les poles de contributions à WordPress
These 18 poles would be the official ways to contribute to WordPress, but there are many other ways to contribute. JB Audras has started a series of articles on the topic of contributing to the Heart of WordPress.

Contribute by posting

Feeling literary-minded? Write articles on your website about WordPress. Whether it’s a technical explanation of a development project or an explanation of how you use a particular extension… that’s Contribute to WordPress.

Contribute by organizing or participating in WordPress events

Going to a WordPress Meetup? or a WordCamp is a beginning of contribution because you are making a move for the WordPress CMS. You’re going to talk about it, go back to it. In short, you’ll be contributing to the community. Of course, the next step after participating in an event is often to participate as an organizer or volunteer at WordCamp. Be aware that at each WordCamp there is a call for volunteers. WordCamp Volunteers are the little hands that make the event a success. At the moment there are 4 WordCamps in France: If you feel like travelling, there are some in the whole world! Here are the next ones in Europe and in the world Each of these events will make calls and I invite you to follow the Twitter accounts of each of them to stay informed. You don’t live near one of these 4/5 WordCamps? You don’t see yourself traveling across France to meet us? We’re sad to say, but there are WordPress events all over the place (check out the WPFR calendar) I hope that these few lines which are far from relating all the possible forms of contributions will make you want to dig into the subject 😉 If you are interested in contributing to WordPress but don’t know how to start, don’t hesitate to leave me a comment, I’ll try to help you as much as possible.

Multisite in WordPress: Why? How do I do it?

In this tutorial, I’ll explain what a WordPress multi-site is, why set it up and most importantly how!

What is a multi-site?

Most of you might be familiar with “classic” WordPress, or “single” WordPress as it is also called. It is an installation of our CMS that will be used to proudly power a website.

By enabling the “Multi-site” feature, your “classic” WordPress with a single installation will be able to power as many websites as your server can handle!

The best example in this area is wordpress. com, the website platform created and managed by Automaticc. This commercial service that powers several million websites is in fact a single installation of WordPress!

Since WordPress 3.0, multi-site functionality is fully integrated into WordPress.

When to use a site network?

It can be interesting to create a site network when you are going to have several sites to host… you will then manage only one installation sharing themes and extensions. You will save time in maintenance since you will update for example only one WordPress core, one extension or theme version.

Different uses

Multi-site is also sometimes used to create a multilingual site. You can assign a language to each site and write different content for each site.

The networked sites can also be used to create a site by site company, a holding and its subsidiaries for example.

How do I set up a multi-site with WordPress?

There are 2 ways to create a site network:

  • In sub-domain: your url will be in the form site1.example.com, site2.example.com
  • In sub-folder: your url will be like exmple.com/site1, example.com/site2

If you install your network on a new installation, you will have the choice between these 2 structures. If you are converting an existing WordPress installation, you will have no choice but to choose the sub-folder installation.

Note that there is nothing you can’t do with one installation that you can do with the other!

Creating the network

First of all, for this example, I’m going to start with a local installation of WordPress.

Of course, it is highly recommended to make a full backup (files + database) at this level.

If you follow the WordPress developer’s bible, I named the Codex, you will understand that you have to create a PHP constant in the WordPress configuration file located at the root of your installation.

/* Multisite */
define('WP_ALLOW_MULTISITE', true);
/* That's all, don't touch the following! */

The purpose of this constant is to tell WordPress that we allow it to create a Multisite:

WordPress

Let’s click on the new entry in the “Tools” menu named “Network Creation”. You will get this page:

Capture d'écran

It is at this step that you can choose the structure of your URLs. Either in subdomain or in subfolder. If you want to choose the URL in sub-domain, you will have to create a wildcard entry in your DNS records.
In my example above, to get site1.tuto-multisite.local you will have to create a wildcard in DNS with the asterisk character (*) : *.tuto-multisite.local and point it to the folder containing your WordPress installation.

Click on “Install”

Capture d'écran

Ok so there I have an error message because I requested a subdomain installation of my WordPress network and I didn’t create a wildcard domain as requested. This is because on my local installation… it’s not easy!
WordPress tried to create the random sub-domain 14b292.tuto-multisite.local on the fly and failed. If you are installing locally, you can create the domain by editing your “Hosts” file.

The installation is almost finished, you just have to copy the 2 blocks of code in the .htaccess and the wp-config.php of your installation. Replace the content of your .htaccess with the block above.

It’s done? Click on the “Connect” link

Congratulations! Your WordPress site network is installed!

Let’s discover the new Back-Office of our newly installed multi-site WordPress.

Logo

The main change, as you may have noticed, is the appearance of a new menu, the network administration menu:

Here will be listed all the sites you can create on your site network as a Super-admin. Indeed, by activating the multi-site mode, a new role has been created, that of “Super-Admin”.

What is the “Super Admin”?

On a typical WordPress installation, we have the roles of “Subscriber”, “Contributor”, “Author”, “Editor” and “Admin”. The Administrator is the highest role, the one with the most rights on your installation. It is the user with this role who will be able to add, activate, delete an extension or a theme. He will also be able to completely configure your installation.

On a multisite installation, the installation of extensions and themes is done at the network administration level and not at the level of each site. So a new role was needed to manage this new level of administration.

If we summarize, an administrator will be able to manage his site while the super-administrator will be able to manage all the sites of the network as well as to install themes and extensions which will be available on all the network.

General principles of operation

Now your Multisite is installed but I won’t leave you like that!

Know that an extension like a theme is installed as a Super-admin on the network admin dashboard.

Know that an extension activated at the network level will be available on all the sites of your Multi-site BUT you can activate an extension site by site, or each site administrator can activate an extension on his site.

For themes, it works a little bit different, it must be active on the network to be activated on each site. So, if you have a theme and its child, you can activate only the child theme so that no changes are made to the “parent” theme.

One WordPress for several sites? Why not switch to domain mapping?

Setting up a multi-site – multi-domain WordPress at O2Switch

Migrate a site from a multisite to a classic installation

Introducing the WordPress multisite.

The Multisite technique allows you to run several WordPress sites together within a single installation.

This technique allows you to share the WordPress core, themes and extensions.

This results in significant time savings when maintaining your sites since you only update once.

Read more about this:

Extracting a site from a multisite step by step.

First of all, this tutorial is not meant to be THE method but a method that works and that I put into action today as part of my job as a WordPress developer.

Step -1 – Backup

Saaaaauuuuuvvvvvveeeeegggggaaaaaarrrrrrdddddeeeeee

Backup your files (WP, extensions, themes, mu-plugins and Mysql database)

Step 0 – Local installation

Having the multisite locally, it will be much easier to manage and in case of accident, it will generate only you!

Step 1 – Updates

The first step will be to update your multisite:

  • WordPress
  • Themes
  • Extensions
  • Languages

If this step is not fundamental, I think that:

  1. it can’t hurt
  2. it can avoid conflicts and worries later on when you import themes and extensions into your “Classic” WordPress site.

Step 2 – Installing WordPress

Install a brand new WordPress… For this I suggest you do it in 3 minutes thanks to the wp-cli script I created for you…

OK I admit, I created it for myself… and I thought you might be interested!

Step 3 – Transferring the files

So now, let’s start a file transfer. That’s why I asked you in step 0 to work locally. It will be much easier to move files in the explorer of your machine than remotely via sFTP or whatever.

Remember to transfer:

  • Themes (parent and children)
  • Extensions
  • Mu-plugins
  • the “uploads” folder… but I reserve him the step 4!

Of course, on the multisite maybe not all the extensions or all the themes were useful for the site you are extracting.

Upload only what you need and do not activate anything

Step 4 – the “Uploads” folder

The Uploads folder located in `wp-content` contains all the media uploaded to your site and available in the media library.

Admit that it would be a shame not to find them in your new installation.

The Upload folder is a little different to transfer since its folder and subfolder architecture is different from a classic installation.

Logiciel
Architecture of the Uploads folder in Multi-site

Notice the difference with a classical architecture. In “uploads”, we have a “sites” folder that does not exist in a regular WordPress installation.

Inside this “sites” folder we have a folder named by the id of the site in the multisite infrastructure.

Then we find the classic WordPress media classification with a year folder and a month folder.

Find the site ID to extract from the multisite

I believe that if you do this manipulation then you have the privileges of super-administrator.

This step is quite simple, you have to go to the network administration of your multisite then in the submenu “Sites” at the end of the line concerning the site to migrate you will find the ID of this one.

Microsoft Azure
Find the ID of the site to migrate

The ID recovered you can move all the contents of the folder with the id as name in wp-content/uploads to find the classic tree structure of a WP.

Step 5 – export then import the database

It’s all very well but for the moment, you have everything except your content…. and in a site, it’s the most important thing, the database.

For this tutorial, I will assume that you have the default prefix “wp_”.

Just like media, WordPress multisite adds the id of the site on some tables.

You will have to export all the tables with the ID as well as the wp_user and wp_usermeta tables which do not have an id because in a multisite, the users are common to all the sites.

Personally I do it with PHPmyAdmin if the tables are not too big… we select the desired tables (example: the one of the site “4” wp_4_ as well as the 2 users tables).

Before importing, delete the tables wp_user and `wp_usermeta` from the classic installation to avoid conflicts with the tables you are going to import.

For the import in the classic WP, also use the tool you are used to.

You will end up with duplicate tables: those of your classic installation and the one you just imported that have the prefix `wp_4_`. Delete the duplicate tables from the classic installation.

Import your “multi-site” tables

At this stage, if you look at your database in PHPmyadmin or other, you should notice some tables in wp_ and others in wp_4_

In PhpMyadmin, check all the tables in `wp_4_` then at the bottom of the page in the dropdown menu select “Replace table prefix”

If you decide to change the table prefix, don’t forget to correct the `wp-config.php` accordingly.

Document

We’re almost there!

Step 6 – Replace the media URLs in the Database.

For this I use the SRDB script from Interconnectit. You can find a guide to this script from my friend Grégoire Noyelle.

Here we are going to modify the urls to the medias and thus make a search and replace which would look like this:

Search: https://example.com/wp-content/uploads/site/4/2019/02/mon-image.jpg

Replace: https://example.com/wp-content/uploads/2019/02/mon-image.jpg

Step 7 – the user base

When importing the database, we imported all the users of the multisite… but some of them have no relation with the site you just extracted.

Unfortunately, I haven’t yet found an sql query that fits … if you have an idea, submit it to me in comments, I’ll be happy to improve this tutorial.

Step 8 – Checks

Normally, your classic site is an exact copy of your site when it was in the multisite.

Depending on your setup, there may be 2/3 things to adjust. For example, replace urls to images written in hardcopy in css files created by Elementor page builder…

You may have transferred extensions that are only useful for a multisite…

Step 10 – Rest!

Yeah, there’s no step 9 because it’s good to stop on a round number! a dozen or so!

Normally you have just extracted a site from a multisite to a classic WordPress site… you have earned a little foam, a coffee or anything else that will make you happy!

And if not, there’s the easy way! (added on April 20, 2019)

If like me you are adept of WP-CLI then this script will allow you to extract a site from the multisite in a few seconds…

trepmal/blog-extractor

WP-CLI command. Extract single blog from multisite – trepmal/blog-extractor

https://github.com/trepmal/blog-extractor

Domain Mapping with WordPress multisite

In the previous episode, I simply presented (at least I hope so) how to set up a multisite with WordPress. We saw that we could create as many sites as we wanted on the basis of a single WordPress installation.

The created sites had then 2 possible syntaxes :

  1. in subdomain ex : site1.example.com
  2. in sub-folder ex : example.com/site1

Admit that it’s a good start but if we could also have a personalized URL… then it would be perfect !

When I say personalized URL, I mean a site address like thivinfo.com for the first site and tartempion.com for the second.

This is precisely where domain mapping comes in.

Setting up the registrar side

Yes, you will have to set up the domain names you want to map at your registrar. I can’t detail the way to do it because it is specific to each host depending on the administration panel used.

Please note that if your domain name is managed by your host, you must point this domain to the root of the folder containing your WordPress installation.

Setting up the WordPress side

Once your domains are pointing to the right folder, you have to tell WordPress that it will have to manage one or more other domains.

Concretely, let’s imagine that I have a network of WordPress sites on the tuto-multisite.local domain and that on this network of sites I have a site https ://tartempion.tuto-multisite.local. https ://tartempion.tuto-multisite.local is a fully accessible URL (locally but the principle is the same on a public URL) and I could stay like that. Except that to communicate it would be easier to give as URL tartempion.com.

The goal is to make all the requests point to tartempion.tuto-multisite.local and send them to tartempion.com.

Installation of the extension

For this, we will use an extension available for free on the WordPress repository : https ://wordpress.org/plugins/wordpress-mu-domain-mapping/

We are in Multisite WordPress, so the installation of the extensions is done at the network administration level.

Programme d'ordinateur

Then, as on a classic WordPress site, you look for the WordPress MU Domain Mapping extension, install it and activate it on the network.

Go to the network admin level in the “Domain Mapping” menu. And there : It does not work and you have a line saying :

“Please copy sunrise.php to /path/to/wp-content/sunrise.php and ensure the SUNRISE definition is in/path/to/wp-config.php”

Which can be translated as :

“Please copy sunrise.php into path/to/wp-content/sunrise.php and ensure you have defined SUNRISE in your wp-config.php file”.

Brancher

Attention, here is THE complicated part of this tutorial dedicated to domain mapping !

In the extension directory under wp-content/plugins/wordpress-mu-domain-mapping you will find the file sunrise.php

Conception

Take this file and drag it under wp-content/

Les données

We just have to define a PHP constant to allow domain mapping in the wp-config.php

to the part where you have declared the multisite, add

define('SUNRISE', true);

to get something like :

define('WP_ALLOW_MULTISITE', true);
define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', true);
define('DOMAIN_CURRENT_SITE', 'tuto-multisite.local');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

define('SUNRISE', true);

If you go back to the domain mapping settings you will see this new settings menu :

Capture d'écran

Save your settings and… your WordPress multi-site multi-domain is ready ! o/

Map your 1st WordPress domain

So we’ll map tartempion.com to tartempion.tuto-multisite.local.

Being local and not really owning the tartempion.com domain, I will modify the hosts file of my machine to simulate this domain.

I go to the administration of my site to be mapped https ://tartempion.tuto-multisite.local/wp-admin/ then in the menu “Tools/Domain Mapping”.

You will find this page :

Document

Fill in your domain to map (donations my case tartempion.com without http or https). If the domain will be the main domain then check “Primary domain for this blog”. This way you will be able to have as many domains mapped for a site (the www.tartempion.com for example) but only one will be served.

Congratulations ! You have mapped your first domain !

Thanks to Bruno Tritsch for making the following video tutorial illustrating perfectly my tutorial.

How to fix the Gravity Form error “Call to a member function can_be_used() on bool”

This article is more for my future self, but it may help others.

Following the upgrade to Gravity Form 2.6.2, I found myself on several sites I maintain with a fatal error looking like:

[06-May-2022 20:30:52 UTC] PHP Fatal error: Uncaught Error: Call to a member function can_be_used() on bool in /var/www/my-great-website/wp-content/plugins/gravityforms/common.php:2813
Stack trace:

I didn’t dig too much to know the cause… I’ll do that later… when a client site is down… we correct it quickly 😉

To correct this error I just added

define( 'GF_CACHE_DEBUG', true );

in the `wp-config.php` and then go to resave the form settings (without changing anything)

This error occurs when the license verification fails. The developers of Gravity Forms are studying the issue and will soon publish a new version.

The added constant allows to validate the license without taking into account the cached data.

Tell me in comments if you had this error and this tip helped you!

Easily post your Facebook page feed.

I had a simple need these last few days… to display the feed of a Facebook page on a client site. Of course, I looked at the existing extensions and… I must admit that there are a ton of them!

A ton is good… but nothing really corresponded to my needs, because it was too complex to set up, required a Facebook account to create an application. In short, what I needed was simply what Facebook offers on its “plugin page”.

So of course… I could have coded my thing in my corner… and I said to myself… if I have the need, then surely others too… so make an extension my brave Séb !

A new extension by thivinfo.com

It is a very simple extension, there is a shortcode and a block for the new editor (thanks to Marie Comet).
The shortcode [\simple_wall] waits for at least one slug
parameter which waits for the slug of your Facebook page…

Example : the short code [\simple_wall slug="MotoGP"] (without the slash which has been added so that WP doesn’t interpret it) should display the feed of the Facebook page dedicated to this sport of which we are world champion (how do I get away from that ?).

Here it is in action:
[simple_wall slug=’MotoGP’]

The Gutenberg block “Simple Wall” is available in the list of blocks and also waits for the slug of the page to display.

The 2 other optional parameters are the width and the height of display.

The planned evolutions…

I use Twitter more (which is quite simple since I don’t have a FB account) and I wonder if I could evolve the extension to display the Twitter feed as well… tell me in comments if you’re interested.

Deploy your website with Github Actions

I already told you about Github Actions in a previous article to easily publish your WordPress extension on the official extensions repository

Today, the idea is to automatically deploy your developments when you push your changes to GitHub

State of the art

Currently, I publish my changes to my clients’ WordPress sites through DeployHQ.com

. It’s a very simple service to set up:

  • Link DeployHQ to our Github profile
  • Select the GH repository to deploy
  • Set the SFTP connection on our hosting

At this point, DeployHQ adds a webhook that will be triggered on each push to a defined branch of our Github repo that will start the deployment.

A few seconds later (or it counts in seconds), your changes are online.

Principle of Github Actions

In simple terms, Github Actions allows you to automate tasks according to events occurring on the repository on which it is active.

There can be hundreds or even thousands of tasks and in order to help developers, Github has set up a

marketplace where anyone can publish their Action in order to share it.

The principle:

  • Create a configuration file in yml format.
  • This file is stored in your GitHub repository
  • When the action defined in the configuration file is executed, GitHub Actions comes into play and executes the tasks requested.

Let’s get down to business

In the previous paragraph, I told you about a marketplace. In this marketplace, I came across https://github.com/marketplace/actions/ssh-deploy which according to the description, does exactly what I want it to do.

In practice, you need to create a .github folder in your project that will itself contain a workflows folder. Inside this folder you will add a file with any name you want, but in yml format. For example deploy.yml

.

GitHub actions

In this deploy.yml file we will add this code:

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install npm dependencies
        run: npm install
      - name: npm init
        run: npm init -y
      - name: Run build task
        run: npm run build --if-present
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-avz --delete"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

And what does that mean?

name: Deploy

Is simply the name of this action, because of course you can have as many actions as you want.

on:
push:
branches:
- master

When do we get this action? easy! “The “push” of the “master” branch.

So we can imagine having another action with :

on:
  push:
    branches:
      - staging

The next block we are interested in is:

        env:
SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
ARGS: "-avz --delete"
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
REMOTE_USER: ${{ secrets.REMOTE_USER }}
TARGET: ${{ secrets.REMOTE_TARGET }}
EXCLUDE: "/.git, /.github, /dist/, /node_modules/"

Because it defines the information related to Rsync

SSH_PRIVATE_KEY

The private SSH key used for deployment. According to the Action doc, you can create one with the command:

ssh-keygen -m PEM -t rsa -b 4096

This command will create a private key, to be kept secret, and a public key.

The public key is to be added in the file /home/user/.ssh/authorized_key of your server / hosting. The path will be adapted depending on whether you are on a shared hosting allowing SSH or on a dedicated server or other case.

The private key must be stored on your Github account in the settings of the repository you want to deploy. The principle will be the same for each of the following instructions.

guthub actions secrets

By clicking on “New repository secret” you will have 2 fields.

  • The “Name” field will take the capitalized part of your settings, for example SERVER_SSH_KEY
  • The “Value” field will take the value to send during the transfer (here the value of the private key)
ARGS: "-avz --delete"

The arguments of RSYNC to be found in its doc

I invite you to look at the very simple and clear Action doc for the other parameters.

Tadam!

Normally… if everything went well, your modifications are uploaded automatically when you push them on your main branch (or on the branch you have chosen)

Conclusion

You now know how to use Github Actions to deploy your sites, all that’s left to do is to make nice websites 😉

If like me you are a WordPress developer but you host your sites at WPEngine, know that there is an action that allows you to deploy directly at WPEngine!

I’m new to this tool… if you have any questions… it’s not easy, but give it a try anyway by leaving a comment.

Save Private Mozilla

Today, I take the keyboard to talk to you about anything other than WordPress. Mozilla, the entity that develops the excellent web browser Firefox has announced to remove another 1/4 of its staff.

Job cuts are not the main problem…

Behind Mozilla’s announcement hides something much more serious in my opinion … since the disappearance of Firefox would lead to an influx to its competitor Google Chrome and would give even more weight to this giant that has made monopoly its hobbyhorse.

Yeah, but I like Google Chrome!

Yes and nobody prevents you from using it but in order to keep a semblance of freedom in this world, it would be nice to use Mozilla Firefox too in order to make it take market share and give faith to its developers.

The goal is not to see Firefox with a 90% market share as Nicolas Hoffman explains very well in his tweet :

The goal is to keep the choice to use Firefox, Chrome, Edge or any other web browser so that none of them have a monopoly and dictate its rules and deprive us of our freedom of choice and incidentally resell our personal data.

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.

 

Kawi: The WordPress Theme you will love

Today, I’m going to introduce you a slightly different article as I’m going to introduce you a theme…

Hey! what’s your theme?

The theme I wanted to talk to you about is none other than the one you see on thivinfo.com: Kawi by Vincent Dubroeucq

Why Kawi?

It’s quite simple, I’m not a front-end developer, I didn’t want to develop a theme from A to Z knowing that colleagues from the French WordPress community had already developed some good ones…

My friend Marie Comet simply made me discover Vincent’s theme by telling me:

  • It’s light
  • respectful of WordPress development best practices and accessibility (a11y)
  • easy to customize

Bingo! I will use it!

Child theme VS starter theme?

I asked myself: are you going to use it as a starter theme or more classically by creating a child theme?

In addition to the official WordPress theme directory version, Vincent also offers his theme on Github. The advantage of this version is that it offers the SASS sources that composes the stylesheet. It is therefore a more oriented version for developers who would like to use it as a working base…

Ok, but do I want to cut myself off from the improvements that Vincent could bring to his theme? not really, so I opted to create a child theme to keep the possible future evolutions of the theme.

The version you see here is the child version of the theme available for free on the WordPress directory.

Why changing theme?

And why not?!

First of all because the previous one based on the Humescores theme by Morten Rand-Hendriksen had grown over the years. After 4 years or so, through tests, graphic and functional modifications… the theme had become heavy to manage and to load.

And then the desire to change a little too!

What changes were made?

Not a lot because as a great artist in front of the eternal, I took almost the same style and layout of the home page!

The difference is rather under the hood because the CSS of my child theme is created thanks to SASS which allowed me to discover the excellent Prepros tools avoiding me an installation of an additional tool like Gulp and its multiple dependencies never up to date when I want to use it.

Results

The result is a faster website, more accessible to people with disabilities or using adapted equipment. For me, it’s a lighter theme to maintain and ready to evolve according to my future ideas…

3, 2, 1 Translate!

On April 17, 2020 a WordCamp should have taken place in Paris. Given the situation due to Covid19, this one as well as many others was cancelled.

The idea of organizing a day of virtual meeting has born in the minds of several members of the French WordPress community!

We are therefore organizing an half day of contribution to the WordPress project open to everybody, whether you are already a contributor or a novice.

Participate

It’s easy to participate, sign up for the Zoom videoconference. The coordination will also be done via the Slack of the French-speaking community and more specifically on the channel #wptranslationday, to get an invitation, it’s this way

Read the official announcement

See you next Friday!

Install WordPress Coding Standards on PHPStorm easily

WordPress, as all development frameworks, has its own rules to follow so that each developer can easily read and understand a colleague’s code.

This is what we call “Coding Standards”. For WordPress, we have the WordPress Coding Standards better known as WPCS!

These developments rules can be read here: Discover the WordPress Coding StandardsOK, we’ve got a thousand pages of docs… but I’m not gonna read all those docs while developing… couldn’t you make it easier?

Well you’re lucky because we can integrate these rules directly into our IDEs or text editors! So your code will be automatically checked during your development.

I use PHPStorm from Jetbrains every day but you should know that these rules can be used on almost any code editor.

Where do I find the WPCS?

WPCS are available on Github. I will detail how I do it but there are several methods. Take your pick!

Séb method for installing WPCS

So it’s not really my method… in the sense that it’s not me who developed it… but it’s the one I’m using and that I’m going to detail!

Before installing WPCS, you need to install PHPCS… and yes, WordPress is developed in PHP and to make it simple, WPCS adds rules or modify a little the rules of the PHP Codings Standards.

Keep in mind that, as in all the WordPress ecosystem, the goal is to make development accessible and easy.

Install PHPCS

Personally, I have a partition on my Ubuntu Linux dedicated to my projects and next to the projects, I have a folder with the WPCS and one with the PHPCS.

PHPCS are also available on Github

Clone PHPCS Github repo

Go to the place where you want to download the rules then:

or

if you haven’t entered an SSH key in your GitHub account.

You should now have a folder named phpcs.

Clone WPCS Github repo

We’ll do almost the same command to clone the WPCS repository this time:

or

I reassure you, the hardest part is over…

Setting PHPStorm

Go to “File | Settings | Languages & Frameworks | PHP | Quality Tools”.

Programme d'ordinateur
PHPStorm settings

By clicking on the 3 points to the right of Configuration you can specify the path to the PHPCS. It will be necessary to navigate and select the file “phpcs” present in the directory “phpcs/bin” obtained thanks to the preceding cloning.

Capture d'écran

If everything is OK, at the bottom of the window will show the version of Code Sniffer installed.

Let’s move on to WPCS, because after all… they’re the reason we’re here!

The path to the settings is File | Settings | Editor | Inspections

Logiciel
I love arrows!

the goal here is to get to the “PHP Code Sniffer Validation” menu in order to check “Installed Standard Paths” and to search after clicking on the folder on the right for the directory to be cloned with WPCS.

If all goes well… by clicking on the 2 circular arrows, you should have the choice of several WPCS… personally, I choose WordPress-Extra. then we validate by clicking OK…

Thivinfo présente un nouveau service: paroisse-catholique.fr

Aujourd’hui, je souhaite partager un nouveau projet qui pourra rendre de nombreux services je l’espère à certains d’entre vous.

Il était une fois 5p2p

J’ai travaillé un peu plus de 2 ans pour l’association 5 Pains et 2 Poissons qui avait pour but de faciliter le numérique auprès des associations ecclésiastiques.

En tant que développeur WordPress, je produisais des sites web pour des institutions et congrégations religieuses. Cette expérience m’a permis de découvrir un monde qui a besoin de communiquer et de façon efficace… mais qui n’en a pas les moyens.

WordPress au service de l’Église Catholique!

A la fin de cette expérience, l’idée m’est venu de créer un service permettant aux paroisses n’ayant pas trop de revenu d’accéder à un service web de qualité répondant aux standards du web d’aujourd’hui.

Et c’est ainsi qu’est né paroisse-catholique.fr !

Que propose Paroisse-catholique.fr?

Paroisse-catholique.fr propose une solution clé en main qui vous permettra de créer vous même sans connaissance technique le site qui ressemble à votre paroisse.

  • Publiez facilement de l’actualité a destination de vos paroissiens
  • Programmez vos évènements paroissiaux et locaux
  • libérez vous des contraintes, ne gérez que la communication de votre paroisses facilement.
  • Permettez a vos paroissiens de vous contacter facilement
  • Mettez facilement en place des campagnes de dons (denier du culte, donations…)

Quels sont les domaines disponible?

Pour le moment vous pourrez obtenir dans le cadre de votre abonnement un sous-domaine de l’un des domaines suivant:

  • paroisse-catholique.fr
  • paroisse-catholique.org
  • paroisse-catholique.net
  • paroisse-catholique.info
  • paroissial.fr
  • ma-paroisse.org
  • ma-paroisse.fr
  • votre domaine personnalisé…

3 minutes to install WordPress!

We read everywhere that it takes 5 minutes to install WordPress… and it’s FALSE! We’ve been lied to! We can install it much faster than that…

The proof in video!

Those of you who have already installed a multisite know that after installing WordPress, you have to enter constants in the wp-config.php to activate this mode, go to the Back-Office, configure the network and return to the wp-config.php to paste a pad of constants as well as in the .htaccess … in short much more than with the script I have concocted!

How does it work ?

I’ve created a bash script that, when you run it, asks you a few questions.

Nothing nasty, it’s the information you would enter during the routine of installing a WordPress via your favorite browser.

Once the answers are recorded, the script launches the installation and the multisite is ready … in 3 minutes!

Of course this script will need wp-cli to work.

Command line interface for WordPress | WP-CLI

Command line interface for WordPress | WP-CLI

WP-CLI is the command-line interface for WordPress. You can update plugins, configure multisite installs and much more, without using a web browser.

https://wp-cli.org

I’d like to have the Seb Scripts!

Yeat get it on Github 😉

WP Grid Builder to easily create a faceted search system with WordPress

Today I am going to present you a French solution to create a faceted search system!

What is a faceted search?

A faceted search is a technique for narrowing the results as search criteria are selected.

But if you know, you come up on a page with 200 T-shirts. You select your size, there are 128 choices, then the color, there are 50 possibilities, then the price and you get the only model you can afford!

Until not so long ago, you had to use the FacetWP extension on WordPress but recently, a new extension developed in the south of France has appeared: WP Grid Builder.

If FacetWP is limited to offer a developer-oriented tool to create facets, WP Grid Builder is a consumer-oriented tool and does not only offer facets.

Facets and content grids

Indeed, it also offers the display of grids and templates, all easily manageable in the backoffice of your WordPress.
So non-developers will be able to create a page with a faceted search box and display the results as a grid without a line of code.

WP Grid Builder for developers.

You are a developer then benefit from all the power of WP Grid Builder by creating your facets and templates directly in your projects.

WP Grid Builder has been thought so that WordPress web site developers can easily realize all kinds of projects. So they will find PHP and JS functions and hooks.

Of course, a detailed documentation of the functions is available on its website

WP Grid Builder for non-developers.

Aren’t you developers?

Nothing serious, Loïc thought of everything. You will be able to create your facets, grids and maps directly in the back-office and display your creations via short codes or Gutenberg blocks for the new editor.

Hello, Doctor? I’ve got a problem!

Who has never been in front of his website or that of an equipped customer does not do what we want”? That’s when the support of paid extensions comes into play… and with WP Grid Builder, as a French speaking person we are spoiled since Loïc lives in the south of France.

So he answers in French on our time zone… which brings a reactivity that is always appreciated!

Nothing beats examples!

As they say: A picture is worth 1000 words. I just replaced FacetWP on Thivinfo.com by WP Grid Builder.

Check out the result:

Have fun 🙂

Fighting GAFAM… it’s not easy.

State of play

Until recently, I was what you might call a pure Google product… visiting websites with Google Chrome, having several personal Gmail accounts and a GSuite for my pro mail. I also had synchronized drives… and an Android mobile! Anyway… he knew everything and I didn’t care… you know “I have nothing to hide…”

This has got to stop!

The summer of 2019 marked the beginning of a change of ideas! It’s only the fools… all this you see…

  1. I started boycotting Amazon… in favor of European or French e-commerce sites… when the American giant decided to defer the tax on French merchants using the platform…
  2. I wanted to decrease the use of Google products, starting with my personal and professional emails, in order to replace @gmail.com by personalized domains…

Let’s trust French products and startups!

Yeah! France has a startup that makes degoogling its hobbyhorse, I named mailo.com.

On Twitter, @hellomailo is very active on the evil that Google represents … I gave in to the sirens … especially since they have a family offer rather nice (on paper anyway).

What does the mail family offer consist of?

Basically, they offer to secure your children’s email accounts by filtering the correspondents through an approval of the address by the parent(s)…

Concretely, if a correspondent is not in your child’s address book, the email is directed to your Spams (already it’s starting to suck) for validation… if you validate… your child receives the email… ( but the address is not added to the address book => not very logical in my opinion )

If your child adds a contact in his address book, he will only be able to send him an email when you have validated the contact (that’s good… you should say that too!).

In short, not everything is ready but the offer is young and will be (I hope) improved.

So? What’s wrong with you?

Well, what doesn’t suit me is that the offer is young but a correct customer support (because I paid a subscription) should follow… and it doesn’t.

My kids sync their mail on Thunderbird. As the contacts have to be validated by myself, that they are then added to the online address book… they should be synchronizable via Carddav as my adult account… which is not the case… or I didn’t understand…

If you don’t understand… it’s not Mailo’s fault!

That’s true… but if I, a web professional, didn’t understand… what about Mrs. Michu?

And even so… I send emails to several addresses found on their site… no answers. I don’t miss an opportunity to challenge them on Twitter where they are active… and I don’t get any feedback…

How’s your professional e-mail coming?

To manage the @thivinfo.com emails, I was at G Suite (did you notice the time spent?) and I’m not at Mailo… seeing the little reaction on the private part, I thought it was not a good idea to entrust them with one of the most used means of communication in the professional world…

For my Pro mail, I trusted the Swiss host Infomaniak and its mail hosting offer for 1.5€/month. And I have to say that I am quite satisfied.

  • The service works well (Mail /contact / calendar synchronized on Thunderbird and Android smartphone).
  • support in case of questions is very responsive, reachable by mail, phone and instant chat depending on the time and day …

Courage… let’s run away

You’ll understand, I’m not going to make old bones at Mailo.com and certainly migrate everyone to Infomaniak.

Only downside, Infomaniak does not offer a filtering solution as Mailo offers for children …

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:

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:

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.