A deep refactoring of a last year WordPress site

This article is about a major update for a Banque Populaire WordPress project that I’ve been in charge for last year.

Context

Previously called “Trophées de l’innovation”, the title has changed for “Riv’innov’”. The purpose remains the same, that is to say, an internal context that entices Banque Populaire’s employees to submit “innovative ideas” and also offers them to vote for the most interesting ones. The 3 top ranked receive awards.

Hello WordPressify, goodbye Timber

The website is pretty similar in term of structure than the previous version, but encompasses significant improvements. Those are auto-created posts in waiting status at user idea submission, blog posts, and a search feature.

Due to potential difficulties I would encounter with Timber developing specific features (it happened everytime), I decided to drop Timber, the object-oriented twig-based framework I’ve been using so far. I swap the layer abstraction for something messier with the native WordPress development workflow, but it’s a lot more broadly used to find support. I don’t regret it. I think Timber is still an excellent value for simple projects, but can be really a headache as soon as we need more advanced features.
It’s been the second time I used WordPressify, and it’s really the best tooling framework to speed up development. All is set : complete Gulp file, neat tree structure, dev and build commands, Babel to support ES6.. I definitely recommend this one instead of a wonky homemade automation that will inevitably lack of optimisations and stability.

Project submission

The whole idea is to automate the process of submitting new ideas by entrants.
I discover acf_form(), an ACF function that provide options to display a front-end form built with a defined group fields. It perfectly fit with my need and work well. The only drawback is the page reload on form submission and there isn’t any native Ajax method. So I had to find a workaround to make this work using the code below in my JS file :


   // ACF Ajax handling
   acf.do_action('ready', $('body'))
  
   // Prevent submit
   $(document).on('submit', '.acf-form', function (e) {
     e.preventDefault()
   })
  
  // Custom submit loading state
  function loadingState () {
    $('#acf-form-submit').addClass('loading')
  }
  $('#acf-form-submit').on('click', loadingState)

  // ACF validation hook
  acf.add_filter('validation_complete', (json, $form) => {
    function checkDeepValidation () {
      // if errors?
      if (json.errors || $form[0].outerHTML.indexOf('is-invalid') !== -1) {
        $('#acf-form-submit').removeClass('loading')
        return json
      } else {
        var formdata = new FormData($form[0])
        $.ajax({
          url: window.location.href,
          method: 'post',
          data: formdata,
          cache: false,
          processData: false,
          contentType: false,
          success: data => {
            console.log('success')
            }
        })
      }
    }
  }

Improved voting system

In the previous version, the voting system was really a homemade patch-up job using simple js base 64 encoding : the user has to enter its mail adress in a form, it’s then converted in base 64 string, an email is sent with a link containing an encoded email in param. It was way too easy to hack the stuff using a base 64 encoded string of whatever email then hit the URL.

Now the encryption part in set on the server side using sha-256 + base64 + secret key. So that it’s nearly impossible to the lambda user to simply hack the system. Here is the php function:



function convert_string($action, $string) 
{
    $output = '';
    $encrypt_method = 'AES-256-CBC';
    $secret_key = '{YOUR SECRET KEY}=';
    $secret_iv = '{YOUR SECRET IV}';
    $key = hash('sha256',$secret_key);
    $initialization_vector = substr(hash('sha256', $secret_iv),0, 16);
    if($string != ''){
        if($action == 'encrypt'){
            $output = openssl_encrypt($string, $encrypt_method, $key, 0, $initialization_vector);
            $output = base64_encode($output);
        }
        if($action == 'decrypt'){
            $output = base64_decode($string);
            $output = openssl_decrypt($output, $encrypt_method, $key, 0, $initialization_vector);
            
        }
    }
    return $output;
}
  

if (isset($_POST['method'])) {
    // File called via ajax through app.js -> execute function with provided params
    echo convert_string($_POST['method'], $_POST['email']);
}

The vote results are henceforth available from an admin page. It’s really not a big deal and the client really enjoy this kind of admin customisation that is totally tailored to its need.

IE11 workarounds

Sadly, Banque Populaire’s employee are still using IE11 throughout their internal network and I had to perform a cross browser check with unattended bugs : usual CSS fails as well as missing ES6 features despite the Babel transpilation embarked in WordPressify. I can’t even consider working with CSS Grid given those conditions and hope they’ll get rid of old IEs somedays..

Conclusion

Once again, it was a good opportunity to handle new WordPress developments, mostly acf_form() that make it my favorite WordPress plugin so far. A bit of PHP to maintain knowledge and of course a way better workflow with WordPressify (+all vsCode tooling that I didn’t use before).

Here is the link for Rivinnov.fr

Home