Using WPEngine’s CDN

It turns out that using the CDN with WPEngine causes a few issues. The first was a problem with also having SSL on. A session with the chat desk resolved it. Next, the development URLs persisted ( instead of Another chat session took care of that – well, two more chat sessions as I found a few instances of this issue. This second item could not be resolved by my clearing the cache, unfortunately.

Then, today, I noticed a third issue. It turns out that the CDN was serving the style sheets and I suppose stored references to that. So when I downloaded a backup for local development, I floundered for half a day wondering why style updates were not taking hold. Was I in the correct directory? Was my local MAMP software running correctly? Was it something with the custom plugin I was coding styles for?

I was inspecting the heck outta the pages, trying to source the pain. Eventually, I checked the Network feature of the Inspector (Firefox) to check how items were loading. Once there, I noticed that style assets were loading in from the CDN, so of course any changes or flushing I did were not being reflected on my local install. Ouch.

After another chat session, I resolved that the solution was:

  1. In WpEngine, turn off the CDN;
  2. Create a new Restore Point;
  3. Download a backup of this new RP;
  4. Create local dev environment with this;
  5. Logo back into WPEngine and turn on the CDN again.

Screen Shot 2015-10-27 at 16.23.01

This is kind of a pain because steps #1, 2, and 3 each require some behind the scenes activity from the folks at WPEngine, which means I click a button and wait around for each step. How long? I dunno. Sometimes a backup is spun up in as little as 10 seconds. But I received a notice that turning off the CDN will take 10 minutes.

How to Add and Display a New Image Size in WordPress

WordPress comes out of the box with three image sizes built in – a thumbnail, a medium, and a large size.

Each theme developer will determine the exact dimensions of those three sizes. But typically, these three exist in some range between a thumbnail – 50 x 50 or 150 x 150; a medium size – maybe around 450 x 350; and a large image – bursting at the seams around 1024 x 800 or something (all sizes here are in pixels).

This means that for every image larger than the “large” size that you upload to the media area, WordPress will automatically create three additional sizes of that image. If your image is only 600 x 800, WordPress won’t create a “large” size of 1024 x 800 from it.

But assuming your uploaded image is larger than the “large”, you end up with four images – your original upload, plus the three images of thumbnail, medium, and large dimensions created by WordPress. WordPress can organize these into a nice filing system for you automatically.

You can view – and edit! – the dimensions for your WordPress installation by going to your Dashboard –> Settings –> Media
WordPress Media Settings

If you do update those settings, you can use a handy plugin like Regenerate Thumbnails to instruct WordPress to run through all of your media items and regenerate your images with the new dimensions. Pretty handy utility, say if you move into a new theme that uses different featured image widths or something.

What if those three dimensions are not enough for you? What if you want to add a fourth dimension?

You can add a new image dimension by making an edit to your functions.php file.

First, you want to tell WordPress that you want to add a new size. You do this by adding the add_image_size(); function to your functions.php file.

The add_image_size function accepts $name, $width, $height, and $crop parameters. Only $name is required. Like so:

// Add additional image sizes 
	add_image_size( 'homepage-thumb', 535, 350, true );

Here, I am telling WordPress to create a new image size with a name of "homepage-thumb", a width of 535 pixels, a height of 350 pixels, and yes, crop it if the proportions do not match the dimensions of the original image.

Likewise, we could write:

// Add additional image sizes 
	add_image_size( 'homepage-thumb', 535 );

The above would create the new image size with a width of 535 pixels but would not set any height restrictions.

And this code if handy if you want some control over the cropping axis position:

 // Hard crop left top
add_image_size( 'homepage-thumb', 535, 350, array( 'center', 'center' ) );

You can use 'left', 'center', or 'right', for the first position and 'top', 'center', or 'bottom' for the second position. Great!

There are several things you can do with this new image size, now that you've created it and given it a name. A handy thing to do is to make it available to the folks using the WordPress Dashboard.

To do that, you need to filter the image_size_names_choose function:

// Show new image size in admin are of media section
    add_filter( 'image_size_names_choose', 'yourTheme_custom_image_size' );

... and then load up your instructions:

function yourTheme_custom_image_size( $sizes ) {
    return array_merge( $sizes, array(
        'homepage-thumb' => __( 'Homepage Thumbnail' ),
    ) );

The whole code:

And that's how you add a new image dimension to your WordPress installation!

How to Open A WordPress Functions File Using A Hook

If you want to write your own WordPress child theme, or even your own theme, you are most likely going to be getting into the nitty gritty of the functions.php file.

When you work in this file, you are essentially writing up a series of instructions for WordPress to deploy, in a pre-set order.

A smart way to work in this environment is to set your basic customizations inside a single function of their own, and then trigger that function to fire in a specific order within the WordPress code. How does WordPress know where to to fire your code? Because you tell your function to make use of a WordPress hook.

Hooks are areas within the WordPress code that allow template developers, people like you and me, to take our great customizations and inject them into specific areas of the overall WordPress software. Pretty cool.

Each hook name is a place identifying an area of the WordPress code. Maybe it is helpful to think of it not as a place in the code – but instead as a place in time during the execution of the code? Either way, your WordPress code is a linear set of instructions like this:
A ---> B ---> C ---> D

WordPress does A, then does B, then does C, then finishes with D.

Here’s how that would look with hooks in place:
A(hook1) ---> B(hook2) ---> C(hook3) ---> D(hook4)

So, in this simplified example, if you wanted to add some code that should execute after B, you would use the hook hook2. Simple? And yes, there is a whole list of WordPress action hooks to look over so you don’t have to guess!

OK, well, a hook that can help you organize your customizations within your functions file is ‘after_theme_setup‘.

Note: This action hook is called after the page loads.

Here’s how:

  • Open your function file with <?php
    Note: no spaces or comments are allowed before the <?php declaration
  • To start, use add_action to tell WordPress to use your new function. i.e.
    add_action( 'after_setup_theme', 'your_child_theme_setup' );
  • Create the function that will hold your instructions, i.e. your_child_theme_setup() {
  • Add your instructions inside your new function, i.e.
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-background');
    register_nav_menu( 'primary', __( 'Navigation Menu', 'myTheme' ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'myTheme_header_image_height', 198 ) );
  • Close your function with the right french brace “}”

That’s for vanilla WordPress.

If you are using Genesis, there are two ways to go about this. The first way is what is used in many Genesis child themes:

Add this to the top of your functions file (after <?php )

This basically retrieves and executes code from the functions file of the parent Genesis core theme.

OK. Then there is this second way, which I like better:

Add this to the top of your functions file (after <?php )
add_action( 'genesis_setup', 'your_child_theme_setup', 11 );
function your_child_theme_setup() { ... your code}

I prefer this second method (for Genesis) because, just like after_theme_setup, it places your instructions into a bundle and executes them in a pre-set ordering of actions (after the page loads).

What kind of code can you place inside the genesis_setup or after_setup_theme? You can register any theme support functions, add custom filters, and/or actions inside your_child_theme_setup. You would not want to use wp_enqueue_style functions within your after_theme_setup simply because there are other more appropriate action hooks for it, like wp_enqueue_scripts.