WordPress Plugin

Project Brief

In this project for Proveg I was given a prototype design in Figma and asked to develop a component which displays various information about employees in different countries.

I was tasked to develop this as a WordPress plugin which could be added to the website as a block in the Gutenberg block editor.

The first decision I made was to create a seperate Employees Custom Post.

Rather than users adding the employee data directly into the block, I felt it would be better to seperate the data into a custom post so that it could be reused for additional blocks and in other areas of the website.

I decided that the best way to do this was by using Advanced Custom Fields.

Tools Used

WordPress API
PHP
REACT
Advance Custom Fields

The development of this plugin required PHP to register and enqueue the styles and scripts to WordPress, and REACT for the actual functionality.

The data was pulled from the wordPress REST API using the getEntityRecords selector on the backend and the classic fetch method on the frontend.

Lessons Learned

Having completed other simpler projects at ProVeg, focusing on applying PHP, Advanced Custom Fields and SCSS, I was keen to try to build something a little more in depth. Developing a plugin using my skills in REACT felt like the perfect challenge.

I first followed some tutorials and made a plugin for a Gutenburg Quiz custom block. This used a slightly different approach as the data was input in the actual block itself, rather than seperated into a Custom Post. It took a little research, but I managed to figure out how to use getEntityRecords to display images using the repeater field type in Advanced Custom Fields.

The main take out from this project for me was figuring out how to use REACT to move through the list of countries and display the data accordingly. This gave me another chance to hone in my javaScript problem solving skills.

Link to Project

Code

WordPress Plugin

Project Brief

Tools Used

Lessons Learned

Link to Project

Let's Build Something Together