Category Archives: Web Programming

WordPress Plugin Pods

wordpress pods logo

When I first started messing around with WordPress many years ago it was simply known as a powerful blogging platform. Today, WordPress is a highly configurable content management system that can handle almost any type of web based platform (though not necessarily the best choice for everything!). One of the best aspects of WordPress is the unbelievable number and variety of plugins. For a client project I was tasked with build a custom Content Management System (CMS) utilizing the WordPress plugin Pods.

Pods utilizes the existing WordPress admin interface and supporting MySQL database to allow for the creation and management of custom objects. Objects can be very complex in nature and can take the form of many fields with customizable data structures. Complex relationships can also be defined between objects, such as many-to-many. Pods can also reinforce simple object creation and editing validation, such as required fields.

In general I like Pods but I did find a few negatives. First, performance can be rather slow so make sure you have a respectable WordPress hosting provider. Second, object customization is not always straight forward and some of the settings can be rather arcane and without much in the way of documentation. Third, I found a number of bugs such as cases where objects were not updating properly and the data export / import process plain broke. Finally, the underlying database objects created by Pods is somewhat non-standard and not exactly how you would personally build a well designed normalized database.

One final thing to note: development on a WordPress JSON restful APIs has been ongoing for several years and is set to become a default component soon. Leveraging upon this work, there is a Pods JSON API plugin. I made an attempt to configure the Pods JSON API plugin but I had several issues. Couple this with the fact that the Pods database structure is not ideal at all for fast queries that are needed to support an efficient API and I decided to handle my API by leveraging the Slim PHP Micro Framework.

In the end, I think Pods is an interesting choice for those wishing to leverage their existing WordPress infrastructure and expertise to build a highly customizable and powerful content management system. With it’s bugs and quirks, however, be prepared to spend at least a minimal amount of time getting setup and running.

PHP Slim Micro Framework

I recently had to build an API for a client. The client is a content based business that prefers to utilize WordPress related technologies whenever possible. Since WordPress is built on top of PHP and I think it’s a good idea to limit the number of disparate technologies in any tech stack, I decided to stick to PHP solutions for the API development. After researching several different PHP micro frameworks I chose Slim.

So far my experiences with Slim have been great. It is easy to install and configure and performance is excellent. To get started, install PHP, install Composer, create a Composer config file and then run the Composer install command. This will create a directory structure with the main definition file index.php. This file is where you define your URLs and include external files such as the definition for your database connection and code relevant for specific URLs. This structure should be familiar to anyone who has used modern web development frameworks such as Rails or Django but I would like to stress how unbelievably easy it is to get up and running on Slim.

To finish your Slim configuration you will need to configure your web server of choice to work with Slim. I chose nginx as it seems best suited for an API application but Apache is also a popular choice.

Slim is a great choice for PHP developers that want a super simple and lightweight framework to host an API.

JavaScript Table Sort Library jDynamicSorter

jDynamicSorter is a new repository I have added to my GitHub account. The JavaScript library dynamically sorts Twitter Bootstrap row based tables simply using its custom HTML attributes.

What’s nice about this project?

  • Simple, easy to understand and commented source code
  • No unnecessary formatting of data using custom attributes. You simply specify what type of data is in each column and the library takes care of the rest.
  • The header sort UI is updated alongside the sorting process
  • Handles columns where each column div is wrapped in an HTML “A” link
  • Handles date sorting with any type of separator such as “/” or “-” and one or two digit days/months

Getting Started

To get started simply include jDynamicSorter.js, jDynamicSorter.css and the /img folder into your existing JQuery + Twitter Bootstrap project. You may want to apply other CSS attributes to your table as seen in the example project base.css. Next create a row based table with the required class, data-type and data-desc attributes as shown in the example jDynamicSorter-Example.html.

Possible Future Enhancements

  • Ability to have multiple tables on a single page
  • Handle additional date formats
  • Animations
  • Further simplify the code

View a live demo here.

Here is a screenshot:

jDynamicSorter screenshot

Javascript Pie Chart Project FlotPieChart

FlotPieChart is a new repository I have added to my GitHub account. The project shows how to build a customizable Javascript pie chart based off the Flot Chart library. The pie chart has been assigned custom styles, hover logic and click event logic. It is a nice sample project for those getting familiar with Flot charts and want to dive into some customizable features. This project also uses JQuery & Bootstrap. Here is a look:

FlotPieChart screenshot

Javascript Maps Project Tabbed-JVectorMap

Tabbed-JVectorMap is a new repository I have added to my GitHub account. The project consists of a single webpage which features five JVectorMap based Javascript maps each contained within their own tab. Several different map types have been used, styles have been modified, custom action functions have been created and some zoom tricks have been utilized. The maps contain markers that signify the offices of a firm, with the number of employees listed per office. Hovering on the markers shows the office details and clicking on the markers redirects the user to a new webpage (you must insert the URLs in the Javascript file to control the redirection). It is a nice sample project for those getting familiar with JVectorMap and want to dive into some customizable features. This project also uses JQuery & Bootstrap. Here is a look: