Originally Published: 2015-05-23 By Lewis Cowles

Background

So it’s 2015, devices are coming thick and fast, with a variety of pixel densities, and screen resolutions; nobody is at all tolerant of pixels appearing in all but the most niche of media. Recently I decided to start authoring vector content again; I want this site to use mainly vector images, as I can draw them, produce my own content and know that one image will work on a variety of devices. I converted all my logo’s to SVG, and when done I attemped to upload them to my WordPress.

The problem

So it didn’t take long for head-scratching to ensue. WordPress told me it did not support my upload type, so I decided to do a bit of googling. After a quick search, I found a source I trust (sadly I rarely visit sources I don’t trust, regardless of position, as long as a source I know exists on page #1 of google, I’ll visit that first). CSS-Tricks had a great article on just this subject, but after some reading, it seemed the whole WP community was struggling, as this basic file format, was not polished when retro-fitted to WordPress. Basically Chris Coyier had an awesome way to add the upload type, and let me upload. The good news is it works, which is cool, but previewing the SVG wouldn’t work in the latest WordPress releases, because the core devs have changed something that broke his magic… Also I’m assuming like many devs, Chris is happy enough, having the functionality back-end, because front-end, SVG shows up just fine anyway!

Unfortunately, despite being a dev, and this being for a personal site; I’m a bit mental, so I have to have it look like it belongs in WordPress, and it’s great if I can make that happen, and output a nice update to my base WP theme, or as a plugin that I can distribute to my clients, friends, etc. (I chose to make it a plugin, as I really hate when crap is bundled into themes).

Getting to work...

Well as a programmer, you might assume I just opened up WordPress, read every line of code, and set about finding what goes where; constructed a mental model of the whole of WordPress, and worked from there. This is actually less common than you might think, especially on the web, for simple tasks such as this, and for a more senior developer, who to be honest, just see’s WordPress as a toolkit (it’s great and all, but I don’t have time to look into the production of ratchet sets, when I have so many other tools to get to know).

Because WordPress is web-based, I can at the very least, view the console log, inspect the live page source, and view-source of the page and resources as they are served, before any client-side magic happens. This as it turns out, is awesome, and I was quickly able to find that the gallery seemed to output different content for the images with the SVG extension…

I Built myself a list of requirements, as I do with any task (I’m a planning & lists kinda guy)

  1. add upload support for the file-type
  2. identify the template part(s) used by WordPress
  3. modify the template part(s) used by WordPress
  4. bundle into a plugin, on Gist (because I no longer use SVN, I can't publish to WP Repo)

A Solution?

On Chris’s original CSS Tricks article there was a JS solution to partially fix display for the gallery, but it used JS (ewww), it didn’t completely fix everything, and most importantly, I thought I could do a better job and make something that might be patchable into the WordPress core, which would be great, as it would help me and WordPress.

More Problems...

You can’t really be a programmer for long, until you have to deal with things not going your way, or not being coded in what you perceive to be a logical, and straightforward manner. WordPress team does a great job in creating something lots of people use, they have lots of bundled features, and are more feature packed than the CMS’s I used to build, up until early 2010; but as with anything designed by comittee, and with such broad, unspecific purpose, over years, and refusal to break BC, you get surprised. For example I was sure you could filter almost everything, but it seems that templates, which WordPress strangely outputs in script tags on the page, there is no filtering right now. Again, I have one purpose and if I let myself get side-tracked, then the plugin would likely never be finished; this was likely why the JS partial solution author used JS, it can filter content in the final HTML sent to the page, and this is fine, but I wanted to modify this back-end.

The Solution

The following Gist is what I came up with; it basically adds in a few more steps to my original list, using output buffering to neatly grab all of the content, then using a simple find-replace using str_replace. This is using a sledge-hammer to crack a walnut, because filtering of templates is not currently possible, and likely will increase server-load, which is why it hooks into “admin_init”, but as most of your users will  not be logged in to the backend, this should not be an issue.

Sure it could do with a little light cleaning, and it probably will be, when integrated (in part I assume) to Grok’s full-repo on adding SVG to WordPress