Use Docker for Fast WordPress Development Environments

A Dockerfile That Provides Quick WordPress Development Environments

Back in May of this year I started playing around with Docker quite a bit. Took me a bit to wrap my brain around everything Docker can do, wish I had read this article from Adam Ierymenko before starting.

Anyway, Docker describes itself as such:

Docker is an open platform for building, shipping and running distributed applications. It gives programmers, development teams and operations engineers the common toolbox they need to take advantage of the distributed and networked nature of modern applications.

I’m not using Docker to it’s fullest extent, not even close. I mostly use it for setting up quick WordPress development environments for building client sites or just to do some testing.

I came across an outdated Dockerfile that had exactly what I needed but lacked the ability to SSH to the Docker container. I forked it on GitHub and added some modifications (like SSH).

It’s on the Docker Hub Registry, making it super easy to use. There’s a few items on the to-do list, but the one I want to take care of first is adding support for Docker Compose, which will make installation even easier.

To get started with this Docker image, you just need to have Docker installed and then run the following command:

sudo docker pull tlongren/docker-wordpress-nginx-ssh:latest

Once you’ve got the Docker image pulled, fire up a new container like with the command below. It will create a new Docker container named project-name.

sudo docker run -p 80:80 -p 2222:22 --name project-name -d tlongren/docker-wordpress-nginx-ssh:latest

Give it a bit to get everything setup then navigate to http://127.0.0.1:80 in your browser to access your new WordPress install.

For more information I suggest checking out the readme. Every time that I push commits to GitHub, a new build of the Docker image will automatically be built as I’ve got it setup as an automated build repository at the Docker Hub Registry. Pretty nifty.

So, I’m relatively new to Docker, if you’re a pro and see something I should be doing differently, please let me know. Any advice on setting up Docker Compose for this project would be great, too (if I’m not mistaken, it just involved linking multiple containers together).

Do you use Docker?

View Results

Loading ... Loading ...
8+

Poll: Which Language?

Just an unscientific poll of Hacker News and Designer News users (mostly)

Choose your favorite 3:

View Results

Loading ... Loading ...

Results will always be publicly available. This is more of a practice simply to help me gauge where I should go from PHP and JavaScript. Golang is enticing and is currently what I’m leaning towards.

Hacker News thread, and Designer News thread.

0

WordPress: Sending Correct HTTP Status Code on Login Failure

For some reason, WordPress will send a 200 HTTP response status code, or OK, when a login attempt has failed. Why not send a 403 status code, which is designed specifically to say you can’t be here, or forbidden, actually. There’s even a better alternative to 403, but stay with me.

I came about this bit of information while reading this post by Konstantin Kovshenin. And was able to confirm it myself by logging into this site incorrectly, as you can see in the featured image above. wp-login.php is returned as 200 OK and is circled in red.

So, as Konstantin suggested, we can use this code to send a proper 403 Forbidden status code on a failed login attempt:

<?php
function my_login_failed_403() {
    status_header( 403 );
}
add_action( 'wp_login_failed', 'my_login_failed_403' )
?>

But why send a 403, which is Forbidden? It’s not truly a forbidden page, as people have a legit reason to be there, even if they can’t remember their password.

So, sending 401 Unauthorized as the HTTP response status code may be even better.

<?php
function my_login_failed_401() {
    status_header( 401 );
}
add_action( 'wp_login_failed', 'my_login_failed_401' );
?>

So, you can use either of those, the first chunk to send a 403 Forbidden response, and the second for sending a 401 Unauthorized response code.

On login failure, send "401 Unauthorized" or "403 Forbidden" HTTP response code?

View Results

Loading ... Loading ...

Either could go in the functions.php file for your theme, or more likely, in your WordPress functionality plugin.

You can find a good list of HTTP response codes at the Mozilla Developer Network site.

0

Creating A WordPress Functionality Plugin

Keep your customizations in place, like that driftwood up there

A functionality plugin is a WordPress plugin that is specific to your site, and contains the additional functionality you need your site to have. This is a much better option than adding features to your theme’s functions.php file, because it allows you to change themes at will, yet keep your customizations via the plugin.

WPCandy has a great write-up on creating a functionality plugin and does a great job of explaining why you’d want to use one, and also what kind of things belong in a functionality plugin. Here’s one of my favorite pieces from that WPCandy article:

To decide what belongs in a functions.php file and what belongs in a functionality plugin, think long term. Rather than thinking about how your website will look and behave this week, think about how it will look and behave five years from now. With few exceptions, I bet all of our sites will have new and upgraded themes in five years’ time.

If a feature is theme-specific, such as sidebars or menus, is should go into your functions.php file. If the feature interacts with content of any type, it belongs in a functionality plugin.

Creating The Plugin

This piece is so easy, we’re essentially creating our own WordPress plugin. First, create a new folder called functionality-plugin. Create it inside the plugins folder for your WordPress site.

Next, we just need to create the PHP file and save it in the functionality-plugin folder. Your plugin needs to have some specific content in the comments at the top of the file for WordPress to recognize it as a plugin, you can see those in the functionality plugin example below. Our functionality plugin will load a JavaScript file that your site relies on ALL the time, no matter what theme is currently in use.

<?php
/*
Plugin Name: Tyler's Functionality Plugin
Description: Everything to run my site.
Version: 1.0
License: GPL
Author: Tyler Longren
Author URI: http://longren.io/
*/

function load_site_scripts() {
    // load javascript
    wp_enqueue_script( 'photo-service-script', 'http://thisphotoservice.com/script.js' );
 
}
add_action( 'wp_enqueue_scripts', 'load_site_scripts' );

?>

So, with that, as long as this plugin is enabled, your site will always load that necessary JavaScript file, http://thisphotoservice.com/script.js.

You can safely use that code as a starting point for your own functionality plugin. Just make sure to save that code in the functionality-plugin folder.

The filename doesn’t matter, just make sure to save it with a .php extension. Navigate in your web browser to your WordPress Dashboard, go to Plugins, and enable your plugin just like you would any other plugin. That’s it!

Really, most of what I know about functionality plugins came from Ryan Imel and his article at WPCandy, so a LOT of credit is owed to Ryan.

Do you use a functionality plugin?

View Results

Loading ... Loading ...

There’s this plugin at WordPress.org, too, called Functionality. It’s essentially a plugin for creating a functionality plugin it looks like, but I’m really not sure. Anybody used it before? Comments are open below.

0

Add Infinite Scroll to Your WordPress Theme Using Jetpack

Scroll Forever, Or Until There’s No More Posts

It’s no secret I’m a big fan of Jetpack. A single plugin adds so many options, not only for end users, but for we developers too! An excellent example would be infinite scroll.

Jetpack is a very popular plugin, so supporting Jetpack-specific features in your themes will end up just making your users happier. Kind of like an added bonus they didn’t realize they could use if they’re using your theme and Jetpack.

Infinite scroll is incredibly easy to add to “well-crafted” themes. The Twenty Twelve theme is a great example. Enabling infinite scroll is slightly more complicated with not-so-well-crafted themes, but it’s still pretty easy.

Enable Infinite Scroll in Well-Crafted Themes

Just add the following to your functions.php file.

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
) );

Enable Infinite Scroll in Not-So-Well-Crafted Themes

Activate Infinite Scroll

Add the following to the functions.php file for your theme.

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'rootdip_infinite_scroll_init' );

Setup Function for the Render Parameter

The render parameter specifies a function, in this case, mytheme_infinite_scroll_init. That function uses the WordPress loop to load additional posts to be shown for infinite scrolling.

To hook this all up, add the following to your functions.php file.

add_action( 'init', 'mytheme_infinite_scroll_init' );
function rootdip_infinite_scroll_render() {
    get_template_part( 'loop' );
}

In mytheme_infinite_scroll_init, the ‘loop’ parameter value defines the file where your wordpress loop sits. It should be very basic and only contain markup and PHP you want to be included with every post. Have a look at the loop.php file from Rootdip for an example.

That’s It

There’s more options that you can play with that are described on the Jetpack Infinite Scroll page, such as styling specifics and JavaScript events.

That’s really all there is to it. With the above code you’ll have a working Jetpack Infinite Scroll in your WordPress theme. Whether you’ve got a well-crafted theme or not, you should be able to add infinite scroll via Jetpack fairly easily.

I’d suggest adding an option to your theme options to allow users to enable or disable Infinite Scroll.

5+