Stuffs learned from my latest WordPress project

les trophées de l'innovation
Those last days, I’ve been developing a WordPress site for Banque Populaire for an internal contest that took place during May 2018. This project called “Les trophées de l’innovation” is divided in several phases :
  1. Contest presentation and entrants submissions
  2. Projects showcase with public voting phase
  3. Results and prizes award

 

Design was made by my friend Vincent from Pommeclic. It’s been the perfect opportunity to enhance my WordPress skill as I had several challenges to overcome.

Projects submissions

An animated landing page, a bit of storytelling, nothing new here.
Then It shouldn’t has been an issue but I struggled to setup a proper submission form containing attached files.
For mails submissions I use to proceed with a homemade solution which is a mix of Semantic UI components (my framework of choice for past years) + its API coupled with SendGrid, which is an email delivery plateform.
However, after hours of attemps, I failed to setup this, and decided to use the Contact Form 7 plugin that worked like a charm immediately. The only drawback is to deal with CF7 markup. Sometimes, it’s better to use the packaged stuff, especially when one in not a hardcore dev..

Projects pages

A custom post type serving all the projects. I used Timber for the whole WordPress (which is a Twig templating engine, read my previous review about it).
I read the official doc about how to insert custom php functions in the template file and found it very messy. Here is what I used after a lot of Stackoverflow readings 😉

In template.php :

function my_function(){
// You stuff here
}
// Before "Timber::render" line :
$context['my_function'] = TimberHelper::ob_function('my_function');

In template.twig :

// You markup here
{{ my_function }}
// You markup here

Voting system

Several requirements :
  • Only peoples from Banque Populaire can vote
  • Only one vote allowed by people (among all the projects)
  • No user accounts to setup
The easiest way I found is to proceed with a form sending an email to the voter’s mailbox containing a link working only one time to validate its vote.
So first, a simple form (on each project pages) with an email field (restricted to Banque Populaire domain).
On submit : a simple function compile the project’s name and the email entered in form and base64 this to an hidden field. This will build the link’s parameter (project’s url + ? + email).
When user click on the link generated, he returns on the project’s page. The parameter in url trigger a php function inserting the email + the project’s id in a custom table in the WordPress database. This part is way simpler than what I imagined.
Here is the code to create/insert/check a custom table in the WordPress database without plugin.

In template.php :

// WordPress database var
global $wpdb;

// Create wp_mytable database (if doesn't exists yet)
$table = $wpdb->prefix . "mytable";
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE IF NOT EXISTS $table (
     `id` mediumint(9) NOT NULL AUTO_INCREMENT,
     `field2` text NOT NULL,
     `field3` text NOT NULL,
      UNIQUE (`id`)
    ) $charset_collate;";
 require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
 dbDelta( $sql );

// Insert data
$table = $wpdb->prefix."mytable";
$mydata = "mydata1";
            $wpdb->insert(
                $table,
                array(
                    'field2' => $mydata,
                )
            );

// Get data
$countEntriesOnDb = $wpdb->get_var( "SELECT COUNT(*) FROM wp_mytable" );
echo $countEntriesOnDb;

To control if user already used the link (or if he already vote for another project) we perform a simple check on the database and we can therefore display the right message according to the case.
This homemade solution works but seriously lack of security has anyone recognising base64 can hack the system by entering a custom hardcoded parameter. I should have proceed with multiple security measures to avoid this, as some people found the trick, but had too much to learn to realise something solid enough in a short time.

Conclusion

As any projects, this one learned me how to :
  • Better use WordPress Timber (and Twig language)
  • Better deal with advanced forms (always use WordPress plugins)
  • Manage custom tables in the WordPress database
Home