A WordPress API POC For Uploading Media
[Code: https://github.com/DanielSmith/SnapperStoreWP]
Motivation
I’m thrilled that there is WordPress API. There’s quite an opportunity to do publishing front ends, as well as being able to fully leverage great frameworks such as Vue.js and React.
Most of the articles out there focus on two things:
- getting data from WordPress
- perhaps doing something more interesting (such as posting), but relying on a Hybrid approach with uses a PHP-based theme
This is not one of those articles. Although they are interesting, they shy away from taking on the harder stuff.
Let’s leverage a bit!
We’re going to use WordPress as a completely Headless backend, and we’re going to post to it. Not only are we going to post to it, but we’re going to select media, or drag and drop it in, or paste images.
And we’re going to have fun while doing a Proof Of Concept!
What Does This Do?
The front end allows you to:
- select audio, image, or video files to upload
- or, paste image data (screen capture)
- or, drag and drop a media file to upload
A WordPress post is automatically created after the file is uploaded. Use WordPress as you normally would, with your favorite theme. You’ll see the new media posts. There is much more that could be done on the front end (for example: provide tags, and a description). I’m focused on getting this out there and iterating.
Ingredients
This POC consists of some basic components:
- a straightforward WP install, with a plugin for handling JWT authentication
- Vue.js + Vuetify
- Parcel.js as a bundler
JWT was used for authentication, because it is more secure than basic authentication. I wanted to keep the WordPress installation completely untouched, but I made an exception by installing a plugin to handle JWT.
Parcel.js was also used for this project, because I wanted to try it. It’s refreshing in that it is so simple and “just works”. I wanted to learn an alternative to webpack.
I wrote this on my Mac and used MAMP to host WordPress. The important thing here is to use the most recent version of WordPress (4.9.6, at the time of this writing), so that the REST API is available.
There are three basic steps to getting this going:
- install WordPress
- install the Simple JWT Authentication plugin for WordPress
- get the client side going (using Parcel as a bundler)
WordPress
I wont go into much detail about installing WordPress. The WordPress site covers this very well, and for macOS, I recommend looking at: Installing WordPress Locally on Your Mac With MAMP
Keep the WordPress directory completely separate from the front end code. An example would be:
- Server: /usr/local/projects/wpdev/wordpress
- Client: /usr/local/projects/Vue/SnapperStoreWP
JWT Authentication Plugin
The JWT plugin requires a little bit of configuration, so let’s go through that.
First off, a new WordPress installation only has a couple of plugins installed:
Nota Bene: I am not using the JWT plugins that come up in search results from the WordPress plugin panel.
Please follow the instructions at https://github.com/jonathan-dejong/simple-jwt-authentication/wiki/Documentation
You can download the zip file and install it like any other Wordpress plugin.
That will lead you to this screen:
Go ahead and activate the plugin:
There are two things to configure in your wp-config.php file (after the WP_DEBUG line is a good spot):
define('SIMPLE_JWT_AUTHENTICATION_SECRET_KEY', 'your-top-secret-key');
define('SIMPLE_JWT_AUTHENTICATION_CORS_ENABLE', true);Aside from that, I edited my .htaccess file to read:
SetEnvIf Authorization “(.*)” HTTP_AUTHORIZATION=$1
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ — [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, cache-control, content-disposition, Content-Type, Accept, Authorization"Once you have done those two file edits, be sure to activate your plugin, and restart your WordPress server. That should take care of the WordPress server side of things.
Installing The SnapperStore Client
- clone from https://github.com/DanielSmith/SnapperStoreWP
- be sure to have Parcel.js installed
- modify src/config.js to point at WordPress, and give it your own WP user credentials:
// point at your own WP server
SERVER: 'http://wp.dls',
// your login..
WP_USER: 'daniel',
// your password...
WP_PASSWORD: 'root'Do an npm install, and then parcel index.html
You should get a client side app at localhost:1234
Try the following:
- select a file (such as an image, audio, or video file) to upload
- go over to your WordPress site in a separate tab, and check for new posts
That’s it for the quick Proof Of Concept! There are many more nuances and layers I can go into. The idea is to have a quick and simple media publishing front end. Enjoy, and let me know of any comments and feedback.
