In my last post, I discussed the general tech stack that I’ve been using lately for Headless WordPress builds. One of the main components of this stack is Repress. Repress is a small library written by Ryan McCue from Human Made that works with Redux and allows you to access your WordPress REST API data easily and with minimum fuss. It contains a number of higher-order components (HOC) that...
Headless WordPress and the REST API
Recently I’ve spent a fair amount of time building up React websites using WordPress as the data source. This has been a very interesting period of learning for me, coming from a PHP background and as such, I’m going to write down my thoughts on the process in the hope that it can help others approaching this task! Why go headless? In my case, the reason for going headless was...
Google Maps Smooth Zoom
I was working on a project this week that required me to zoom in to a marker on a Google map. That’s easy, I thought, there must be a method for doing that within the V3 API. I was wrong. Apparently Google are fine with adding a panTo() method for smoothly panning to a marker, but the setZoom() method re-draws the map canvas and jumps straight to the zoom level you set.“ There are a...
CORS with the WP REST API and IE11
A bit of a background, I’ve recently been working on a reasonably large, headless, multilingual WordPress build. The frontend and the backend needed to be hosted on separate domains, so we decided to build this site using the following technologies: Backend: WordPress via the REST API JWT Authentication for the API WPML for i18n ACF Pro for custom fields. Frontend: React Redux i18next All...
How to properly include inline SVGs in a WordPress theme
SVGs are used all the time in WordPress themes and for a good reason, they are scalable, small in size and if we include them inline we can change colours etc without needing another image. There is one thing that bugs me when I see this though, especially with user uploaded SVGs; the way they’re included in the theme. There are 3 real ways that I’ve seen it done: Using...
Securing SVG Uploads in WordPress
This is from a talk I gave at WordCamp London 2018. Introduction These is briefly what I’m going to try and cover in this post. We’ll start with what an SVG actually is, moving on to the issues with SVGs on the web, why they’re dangerous and what dangers they present. I’ll then look at how we can sanitise them where we’ll cover some of the issues with sanitisation...
Merging ACF Field Group Tabs
Advanced Custom Fields is great but sometimes, especially when re-using field groups across templates, the admin area can get a little overwhelming. Tabs help but not when you’re using multiple field groups. To get around this I used to use this plugin for merging ACF tabs. It worked very well but hasn’t been updated in around 2 years and therefore doesn’t work at all on the new...
Background Image Resizing in WordPress
Since the media changes in WordPress 4.5 there have been a number of reports of upload issues, such as uploads timing out, as mentioned in this trac ticket. The reason behind this is very possibly due to the changes in the ImageMagick class. Whilst images are now handled better than before, it’s also added slightly more overhead to the code that resizes images. Now for a standard WordPress...
Integrating WordPress into Laravel
The Problem Recently whilst working on an outsourced project at We Are DWM we had a Laravel app and a WordPress site running side by side. The client had wanted the same design across both “sites” and for it to appear as seamless as possible. This really gave us two options: Maintain two separate sets of CSS and templates, one for WordPress and another for Laravel, or Find a way to...
Moving WordPress onto HTTPS
So recently I’ve been moving a fair few WordPress sites over to run completely on HTTPS and whilst this should be a simple URL switch, WordPress can make it a bit of a pain. Therefore, below is my preferred way of making the transition. For the sake of this post, I’m going to assume you’ve already purchased and installed your SSL certificate (if you haven’t Namecheap are...