_Custom Directory_ Wordpress Plugin

Cover Image

This plugin I did it as a personal project.

The Wordpress Custom Directory plugin, allows a webmaster or editor to create a searchable list of items in any page or any blog post. Additionally, each item will have its own page with its own url.

Items in the list can be Personnel Profiles, Product Information (although WooCommerce would be better for that use case), Catalog Information, etc.

The main features of the plugin are:

Used Technologies

Since this is a WordPress plugin, a great deal of technologies where required:

For the development environment I used a Vagrant Machine with Ubuntu 18.04 installed inside of it.

Also, I used a pre-created script to install WordPress using WP-CLI from the command line. This script installs Wordpress and a short list of required plugins like ACF, Code Snippets and a basic template.

Just to be sure the the plugin will work on secured environments, I used Lets Encrypt certbot to create a SSL cert on the vagrant machine. I still received the Not Secured warning, but I could work with SSL.

I also used serveral packagist packages for installing external libraries. Specifically I used Twig for templates and PHP Markdown for creating inline help using Markdown.

Finally, I configured Visual Studio Code to use PHP Sniffer for code sniffing and beautification. I actually have a blog post explaining how to do that configuration.

How it works

The plugin creates a custom post type for storing the items that will be displayed on a list.

To display a filtrable list (the Live Search list) you need to use 2 shortcodes:

  1. A shortcode for embedding a Live Search form on a page.
  2. A shortcode for embedding a list of items on a page

The requirement is that both shortocodes have to be on the same page since the search works by showing/hiding items o the list using vanilla JavaScript.

To change how the items on the list are displayed, there is a Settings Page that allows you to create a template for the search form, the list items and how each item will be displayed on its own.


This are some screenshots that show different parts of the plugin

Configuration screen

Configuration Screen

Embedded Help

Embedded Help

Directory Sample

Directory Sample

Live coding sessions

Here are the live coding sessions for the creation of the plugin.

This is for demonstration purposes only, there is no sound or explanation of the process.