WordPress Plugin – Creating your own Spotify Plugin – Part 1

So you’ve finally decided on creating your own custom wordpress plugin, welcome to the team!
It took me awhile to scrounge around for a bunch of details, resources and a lot of head banging, so here are some notes and a step-by-step tutorial on creating our own plugin.

Here are the other parts:

What we will be doing:

We are going to create a plugin that works with Spotify; everyone loves music.

Unimaginatively, we will call it:
DO-SpotifyAlbum

To keep it simple, here’s what the plugin will do:
Given a Spotify Album ID
-Show the album cover art
-Show the list of tracks for the album

 

Here’s a Quick Look:

TO BE COMPLETED

 

Technical Coverage:

Here’s what we will learn in detail:

  • Creating Option Pages in the WP Dashboard
  • Creating an registering a Widget with our plugin
  • Configuring widget instance options
  • Making a REST API call in wordpress
  • Creating Handlebar Templates and widget rendering

 

Setting up WordPress

For Mac OSX:
Setup WordPress Locally for Mac OSX

For Windows/Linux:
Coming Soon

 

Plugin Preparation

If you followed the above example on setting up WordPress on MAMP locally, your WordPress directory will be:

/Applications/MAMP/htdocs/wordpress/

We need to look a few more folders within our WordPress installation because everything in there is for WordPress functionality. For our plugins, navigate to the following directory:

<wordpress>/wp-content/plugins

Once we are inside the plugins directory, you might notice other plugin folders in there (e.g. akismet). This is where we will create our plugin folder: do-spotify-albums:

  • <wordpress>/wp-content/plugins/do-spotify-albums

 

Directory Structure

To better describe the next few sections, the files and code it contains, lets take a look at the directory structure first.

  • wordpress
    • main.php
    • LICENSE.txt
    • README.txt
    • assets
      • screenshot-1.png
      • screenshot-2.png
      • screenshot-3.png
    • classes
      • class.DOSpotifyAlbums.php
      • class.DOSpotifyAlbumsSettings.php
      • admin
        • class.BaseOptions.php
        • class.GeneralOptions.php
    • css
      • main.css
    • js
      • handlebars-v4.0.5.js
    • widgets
      • class.DOWidgetSpotifyAlbums.php

 

MAIN.PHP

Every plugin or program will require some place to start, we will call ours main.php.

Here is the content for main.php (the top part of it at least).
This part is important because this information will be parsed and used in the Plugins / Installed Plugins page.

Here is the same header filled in for our plugin example:

 

After the header, we need to setup some code to include our other php files because it’s always better to organize our classes and functionality in separate files rather than keeping everything in our main.php.

Inside this file, we skipped the header portion already included above. The major areas include:

NAMESPACE
Namespaces are not historically used with WordPress Plugins because of version support but now that it’s available, lets use it to better organize our code.

We create the namespace “DigitalOpium\Spotify”, and define a constant “NS” to make it easier to use later on instead of always calling a function with “DigitalOpium\Spotify\functionName”

FILE AND PLUGIN DIRECTORY CONSTANTS
In the next section we setup a few constants for the plugin directory and version. You will see these used in the calls for require_once. The files being included are the same ones outlined in the directory structure above and they will be covered later.

Lastly after all the includes, we initialize our core class, DOSpotifyAlbums.
Here’s the rest of the content inside main.php:




Leave a Reply

Your email address will not be published. Required fields are marked *