Behind the Scenes: Padchops CPT

Presented by Hugh Smith on 08/27/2018 2:00pm

Percussion PracticePad Chops is a place for percussionists to come and work on their rudimental exercises. It is a personal passion project that is fun to work on but one that Hugh, our presenter, and the developer, does not typically have much time to work on.

During this webinar, we'll be taking a closer look at some more complex, custom things you can do in a WordPress custom post type.

From the backend edit post page that puts all custom data into a single entry in the database, to how it’s pulled out of the database and used on the frontend. There will be a lot of code, so be sure to bring plenty of duct tape.

Beginning with what currently exists in the 1.0 version of the website you will see that the site was designed using PODS and LoopBuddy plugins. It quickly became evident that the functionality of the website was going to require a custom Plugin option if it were to grow and be able to be easily maintained moving forward.

A few of the existing problems that would need to be overcome were...

  • on the front end, the sort feature for the user could be even better
  • too many individual database entry items
  • difficult to organize PODS and POD fields conveniently
  • featured image required to be added separately
  • too many taxonomies to maintain

The idea is to rebuild the functionality and pull all of the information in with a custom plugin that will dynamically create multiple custom post types.

Proof of Concept Prototype

Before we can actually create our custom plugin we need to test the feasibility of our concept – a proof of concept or prototype, per say.

To build our prototype, we have another live site (currently set up as a sub-domain).

One of the things we began with before moving everything into WordPress was to start grouping our exercises rather than creating individual exercises for each type of drum (bass, drum, tom-toms, etc). Originally, each exercise was an individual post within WordPress. By grouping using the full or main exercise, we could then pull out the individual elements from the full version. So now, each exercise that is available is based on the main exercise that was comprised of all the different types of drums. This makes more sense for the user and saves us from having to create and manage 4-6 posts per each full exercise (one for each type of drum).

In order to get this to work ideally, we needed to change out the player that we had originally used with one that could assist us in reaching our goals. Our prototype area was built with PHP so we could isolate everything from WordPress before building the site that would display everything together.

We used Isotope to enhance our filtering within our new player. And also added a nifty slider.

What is Possible Working with CPT within WordPress

This custom plugin is not designed to be distributed to the plugin repository. It is a custom plugin designed for a specific functionality that is unique to this website.

In looking at the code, you will see there are some things in the plugin that would not be ever be included if it were designed to be made public. That being said, most plugins will use similar things like the root file, as far as what does get pulled into WordPress.

Plugins typically list their constants and also pull in their library paths.

One of the things you’ll notice is that none of the CPT information is listed on the WordPress dashboard left-column navigation. If we listed in the dashboard navigation it would become difficult as we continue to add new CPT for our users to see and use. Instead, we list it isolated from anything else, in the admin bar.

Looking at the constructor and grabbing everything for the front end as well as the back end, we use PHP to collect the settings, post types, our custom post types class that created, and all pad items. This will dump everything that is in the database all into one array. This is a lot of information – currently 220 exercises, but you can see that it becomes much more manageable, not to mention expandable or scalable and allowing for growth.

Taking a look at the front end, you can see that our custom plugin’s PHP has pulled everything into WordPress and it is all working.

Creating the Actual Custom Post Type

Now the actual place where the CPT is getting done requires us to register padchops on the init hook. Additionally, we add what we need to the backend – metaboxes, scripts, admin bar and save.

Breaking this down, we look at what is really needed to register the padchops in order to have them in groups and create a custom post type for each one.

Next, we create the taxonomies, briefly describe them, and add any arguments needed to ensure that the correct taxonomies are applied to the correct CPT exercise. These are done with if statements and else statements.

We continue looping through to add all of the CPT and taxonomies.

However, now when we look at our menu in our Admin Bar we can see that our menu item is getting rather long and will not be ideal to manage or even use as a visitor to the website. Let’s look at how we can add section headers and nest the items to make it more ideal.

Once you create the initial pattern of code and get it to work with one, it is relatively simple to add what you need.

You can also do the same type of thing with the metaboxes. In our case, we have the information that we want and we want it to display as a table which will show up in the custom post edit page below the text editor. This will allow us to add more than one exercise to each custom post type that we create.

We use a meta key that will tell WP to use the value we want. It allows us to use one key and have all of the info associated with the key added to the database all at once.

we are going through the code quickly not to show you the code, but to open the idea of all of what is possible with WordPress and Custom Post Types.

For example, we added a timestamp that we can use in ordering things later.

Some of you may recognize template_include. It is a hook that many developers use to either get a template from their own plugin or go in and search for a file in the active theme directory.

A lot of our code is being used to pull everything out of our database and pass it on to the javascript.

The site is also set to be able to be monetized. All exercises would have a free option and then the paid options would provide additional exercises. We have code to allow for that access.

Another non-standard thing we are doing to show how complex you can get we have a click and non-click version, and any number of other options, along with images for each exercise.

Within the .htaccess file we send redirects to pull the file from Amazon S3 and reflect our domain name in the URL.

Wrapping up

The sheer amount of information in this webinar is evidence of how important it really is for us to charge the fair price for the complicated and complex WordPress options that we as designers and developers often offer.

Not everyone can work comfortably creating what plugins like PODS and LoopBuddy without the use of plugins.

KEY: It does not matter how you do what you do as long as you grow to be the problem solver and find what works best for you to get things done!

The CSS styleable jQuery media player plugin with HTML5 support!
Filter & sort magical layouts
noUiSlider is a free and lightweight JavaScript range slider with full touch support (iOS, Android, Windows 8). Great for responsive designs, and no dependencies!


Presenter Bio: Hugh Smith

Hugh Smith has been doing freelance work and building his own successful web development (among other things) business for years. Hugh is not from Australia. The Oz comes from Hugh's roots in Kansas, and though he also says that he is not a wizard, we're here to tell you that this is one man behind the curtain you're going to want to pay attention to.