wpdocker: A Local WordPress Development Stack in Docker

I have been using VVV as my local development environment for quite some time, and while it’s an awesome tool, I’ve been itching to try something a little lighter weight, and to have the ability to tailor it a little more to my own workflow. I have been intrigued by Docker ever since it started gaining popularity, and I finally found the time to start playing with it.

wpdocker is the result of my experimentation in building a local WordPress development stack in Docker. It’s not only a set of Docker containers which make up the local environment, but also a couple of Bash scripts which handle things like starting and stopping the stack, creating and deleting WordPress installs, updating the host system’s hosts file, and running WP-CLI commands.

I started using this as my primary development environment this week, moving over all my local WordPress installs from VVV. While there are still some rough edges, it has been stable, and I’m going to be using it as my local development environment full-time going forward.

Check it out at https://github.com/philipnewcomer/wpdocker.

Keep in mind that this is very much a beta release; this has not been extensively tested and there are still some rough edges. However, it is usable, and I look forward to improving it over time.

Creating Custom RSS Feeds in WordPress – The Right Way

There are a lot of tutorials floating around the internet that describe how to create a custom RSS feed in WordPress. Most of them have you creating a new page template, copying the code that WordPress uses to generate feeds into the page template, and adding to and modifying the code there.

In addition to all of the duplicated RSS code in the template, and the maintenance burden that creates, most of these tutorials exhibit poor coding practices, security vulnerabilities, and do not make use of core WordPress functionality. Having been frustrated with all of the bad tutorials out there, I decided to do something about it and write my own tutorial showing how to create a custom RSS feed in WordPress the right way.

If you just want to see the code, head over to this post’s example repository on GitHub. Otherwise, keep reading.
Continue reading

WordPress MU Domain Mapping in VVV

TLDR: After setting up WordPress MU Domain Mapping on local in the standard way, add the subsite’s desired top-level domains to your hosts file and modify the Nginx config for your main site to listen for those URLs. Then just edit the site and point the site URL to the desired top-level domain.

It’s not uncommon when a client has a network of sites running off of one Multisite install to use the WordPress MU Domain Mapping plugin in production to give each site its own top-level domain. Normally we can develop just fine on local using the subdirectory or subdomain multisite structure. However, there are some (rare) cases where we need to have domain mapping setup in our local development environments in order to debug some weird issue that can only be reproduced with domain mapping enabled, such as something related to site URLs. This document describes the steps to take to enable domain mapping in VVV, where each site in a multisite network will have its own top-level domain.
Continue reading

How to Delete all WordPress-generated Thumbnail Sizes

After changing the registered thumbnail sizes and regenerating your thumbnails a few times during theme development, you may have quite a few thumbnails left over from old images sizes that don’t match any of the currently registered sizes, but are just sitting there in your uploads directory taking up space. Here is a command which will delete all generated thumbnails, after which you can regenerate your thumbnails one final time and be left with only the sizes currently registered in the theme.

Navigate to your uploads directory, and run this command:
find . -name *-*x*.jpg | xargs rm -f

Note that this will delete ALL generated thumbnails, so only run this if that’s what you want. The originals will be unaffected, unless they are named like a thumbnail.

How to Make the Tab Key Indent Text in a Texarea

I recently had a situation where the user needed to be able to insert tabs into a texarea. Normally, when the cursor is inside of a textarea, pressing tab will move the cursor to the next field or button in the form. However, in this case, I needed to change that behavior and make the tab key insert a tab character into the textarea content instead. Here’s how I did it in raw Javascript, no jQuery needed.

Note: Doing this will break the accessibility of your page in a very bad way. Make sure you have a Very Good Reason to do this before implementing it, as it will make it impossible for users to tab out of the textarea.

/**
 * Hijack the tab key to insert the tab into the content rather than moving the cursor to the next field or button in
 * the form.
 */
document.getElementById( 'my-texarea' ).addEventListener( 'keydown', function( event ) {

    if ( event.keyCode === 9 ) {

        // Set up some variables. We need to know the current position of the cursor or selection.
        var selectionStartPos = this.selectionStart;
        var selectionEndPos   = this.selectionEnd;
        var oldContent        = this.value;

        // Set the new content.
        this.value = oldContent.substring( 0, selectionStartPos ) + "\t" + oldContent.substring( selectionEndPos );

        // Set the new cursor position (current position + 1 to account for the new tab character).
        this.selectionStart = this.selectionEnd = selectionStartPos + 1;

        // Prevent the default action (tabbing to the next field or control).
        event.preventDefault();
    }
});

Note: You will want to make sure this code runs after the DOM has been loaded, or it will not be able to access your textarea.