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 VIDOC19, 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:

Plain Text

or

Plain Text

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:

Plain Text

or

Plain Text
That’s great news! You have installed PHPCS and WPCS on your computer!

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…

BRAVO! you are ready to develop for WordPress according to the rules developed by the community and used in the Core of your favorite CMS.

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:

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.