Another WordPress + Timber project done

Gandi internal blog
I’ve been asked to redesign the internal blog of gandi.net called Inside Gandi that we can only access through VPN, so no links there. The design is grossly based on news.gandi.net with some special features.
As any UI work, I’m now using Sketch instead of Photoshop, simpler and better for this kind of job. Technically, I used the Timber starter theme for WordPress as functional base.

Custom dashboard with external datas

I had to deal with scrapping datas from external sites, and process them for a display in a visual dashboard UI. Never done that before, so after messed up with different solutions, I found my way using PHP PhantomJS coupled with an Ajax request. It works like a charm locally but couldn’t manage to get it working online, so I had to ask for a classic JSON url to get the datas with a simple Ajax request that ask a php file to get it.

Cron jobs

Instead of directly retrieving values from the JS file, the php writes datas into a textfile. Considering the concerned server often take long time to respond, I found it safer to first write datas into an accessible file anytime, so that it avoid getting infinite loading time and be potentially stuck displaying the remaining page’s elements. So I needed this job to execute as a background task on a frequently basis, not on the page load. So I discovered Crons tasks. This allows this textfile to be updated every minute by the server by executing the php file. We can setup this locally using the terminal, or a GUI client as Cronnix.

Regular expressions

Regexps: here is something I already used in the past, but never took time to really get to this specific syntax.
Job : I needed to remove some specific characters from a corrupted JSON file. It tooks me 2 hours to finally get this simple working code :
var myRegexp = /("})/;
var splittedString = originalString.split(myRegexp);
var cleanString = splittedString[0] + "\"}";
The expression is delimited by two backslashes. The parenthesis defines a group of characters to search for in the analysed string.
The “split” method simply split the string when finding the regexp. We then just get the first part of the string.
Regexp looks really messy at first, but could be damn efficient if mastered, so will keep playing with that in the future.

Timber

As always, I struggled while implementing new things the Timber way (if you don’t know Timber for WordPress, go check it). Here is a list of stuffs I had to deal with :

Custom queries

In php file :

$args = Timber::get_posts(array(
'post_type'      => 'post',
'tag'            => ’tag',
'posts_per_page' => 1
));
$context[‘myQuery'] = Timber::get_posts($args);

In twig file:

{% for post in myQuery %}
{{ post.class }}                                 
{% endfor %}

Calling function (directly, without context variable)

In php file :

function myFunction(){
echo ‘my function';
}

In php twig file :

{{ function(‘myFunction') }}

Dump object as documentation

In twig files, I make a heavy use of the dump method (in twig files), it’s a kind of “print_r” PHP method but for Twig. {{ dump(post) }}, {{ dump(user) }}, {{ dump(post.terms) }}, all of these are really helpful to find exact values stored in a huge array.

Tacklebox course

I recommand a course I followed to level-up my Timber skill: Tacklebox. It’s a set of video courses that helps to deal a lot aspects of Timber.

Global functions in function.php

In function.php (should be localised within “class StarterSite extends TimberSite {}” :

function myFunction(){
echo ‘my function';
}

In twig file :

{{ myGlobalFunction() }}

Conditionnal enqueues with WP_ENV

Not specific to Timber, but I found it very useful to conditionnaly load uncompiled assets file (JS, CSS..) during the dev phase, and load the compiled version on the production site without having to make the switch.

In wpconfig.php (on dev site only) :

define('WP_ENV', 'dev');

In function.php:

if( WP_ENV == "dev”)
{ //load uncompiled assets here… }

Conclusion

That was a long shot !
Lots of things learned once again, my understanding of Timber goes progressively better, even if so many things remains. This make me more confident for the next WP project, but beside I’m also eager to dive into JS frameworks such as React/Vue, tools that are still missing in my skillset. I plan 2019 to be more on the dev side, but as always, time will tell..
  • Scraping external website with PHPphantomjs and Ajax requests
  • RegExps
  • Cron jobs (explanations once on server learned)
  • Timber features
  • Conditionnal enqueues with WP_ENV
Home