Updating The Google Password

Have you updated your Google password lately? It’s gotten a little crazy. It isn’t Google’s fault – it’s that we live in a goofy web of interconnected, insecure-trying-to-be-secure devices that falter when trying to communicate with one another.

I updated my Google password in my browser. It was pretty easy. Open a browser. Log into Google. Go to my account settings, click the security tab, change the password. Write the new password on a sticky note and put it on my monitor.

Then Google emailed me: “Did you want to change your password?” Yep.

Oops – oh yeah. My cell phone pulls down mail from GMail. I open up my GMail on my cell and, as expected, can no longer log in. “Do you want to change your password?” Yeppers.

And then Google asks me – “What is the Security Code we texted to your mobile device?” Well – this is my mobile device. The text appears a moment later and I enter the code. Now GMail on my phone works.

But that was some kind of weird double-authentication fail. The texted security code is supposed to show that I have access to a secondary device and therefore probably am who I am claiming to be (the account owner). But when I am “double” verifying ownership of the mobile device by providing a text code sent to the mobile device … I dunno. Seems like a breakdown in the system somewhere.

OK whew. Oh – desktop mail client. “Do you want to change your password?” *sigh*. Yes. “Invalid password.” Hey no way! That’s the right password! I have it right here on a sticky note on my monitor!

Ooooooh … Right. For the desktop client, I need to provide an Application-Specific Password. Which means I open up a new browser tab and log into Google, and generate a new application-specific password. I copy that to my clipboard (because I only need it once!). Then on my computer, I open my main system settings, and then navigate over to user accounts, find my mail accounts and … where am I? What was I doing? Oh hey – time for lunch.

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.


“Live” Map of Pittsburgh Bus Service

This is a really great map of the Pittsburgh-Area with a data overlay. It shows the live location of all GPS-enabled Port Authority Transit (PAT) Buses. It is mostly “live”; there is maybe a 10-30 second delay.

In the screenshot above (from a mid-morning weekday), it is neat to see the clustering effect of all the buses – I expected a city-wide transit service to be fairly even in its spread across the city. But that is not the case. You can see how buses aggregate along the routes. I tracked four “75” buses (not shown in my screenshot); two were in Aspinwall/WaterWorks area and two were on Fifth Ave in Oakland, each pair about a block apart.

If these four buses were evenly distributed across their route, riders would have relatively quick access to one of those four whenever they came out to a stop. However, with the four clustered in two pairs, entire regions of the route are underserved for long stretches. How could we solve this?

This website is described as a “small weekend hack” by creator “Alpire” (from Reddit – where else?). The Reddit thread on this project also links to some resources, including why there is a slight lag and also another hack up of the bus map by Reddit user Emgram769.

Emgram769’s map (below) allows users to select (albeit from a small pool of buses) which specific bus(es) they are interested in tracking. While this does not give you the “big data” view that Alpire’s map gives, it is a really nice way to just get the information you need about a particular bus. Also, it shows the direction that the bus(es) is/are traveling.

emgram769 Map

Note that on Emgram769’s screenshot (taken in the early afternoon), the 75 buses are more evenly spread along their route. This is great. I wonder if the clustering I noticed on Alpire’s screenshot was an effect of the early morning rush?

The Port Authority does have a map of their own. It works great and seems very useful. It is great that the data has been made available for use by local folks who can hack together their own “weekend projects”, and put out on the web. It forces PAT to be flexible and responsive, and also can give them great ideas for their own resource.