Taking screenshots with Selenium WebDriver and NUnit.

Here is a method I wrote to take a screenshot of the current page when using Selenium WebDriver and NUnit.

I have a dedicated screenshot folder in my build_output folder I save the images to and name the file according to test class name and test name. You can change both to fit your needs.

Back up and running.

I have finished the server transfer today but still need to migrate content.

I moved from DreamHost where I have been since 2003 to DigitalOcean for hosting and Hover for domain names. I’m especially in love with DigitalOcean right now, they make it incredibly easy to spin up a SSD cloud server in seconds. The price and customer service is great.

How to use AJAX with WordPress.

I’m writing this article with the assumption that you know what AJAX is and does and you have a good idea of what you want to do with it.

If you are not familiar with AJAX, let me Google that for you.

Setting up AJAX calls in your WordPress themes and plugins can be confusing and there is not a whole lot of information out there to steer you in the right direction. A good rule to go by is: if you have to include a file from the WordPress core, you’re doing it wrong.

WordPress provides two action hooks you can use for building AJAX functionality; wp_ajax_ and wp_ajax_nopriv.

Register Your JavaScript File

You will need to register and enqueue your JavaScript file with WordPress so it gets included when the page loads.  If you’re writing a theme this will go in your functions.php file, if you’re writing a plugin you can put it wherever.

The name of the function (in the example “register_scripts”) and your JavaScript’s handle  (in the example “script-handle”) need to be unique in your WordPress install.

Specify the path to the file in a string. If you have any dependencies such as jQuery include those and a version number for your script if you have one. It is generally a good idea to load all JavaScript in the footer of your page as it helps the actual page content to load faster.

The call to the wp_localize_script() function passes the URL of WordPress’ built in AJAX functions as well as any parameters you need to pass to your JavaScript file as an array. Make your “ObjectName” something meaningful and unique to your script.

 Setup Your Callback

Your callback is the PHP function you want to run when the AJAX action is triggered. It will also be in your functions.php file or wherever you want to put it in your plugin.

This part is pretty straight forward. Put the functionality you want perform in the callback function (make sure to give the function a unique and meaningful name) and make sure to include the call to die() at the end. Calling die() is important because without it you will not get a proper response back to your JavaScript.

Then you’ll want to tie your callback to 1 or both of the AJAX action hooks. The hooks will always start with “wp_ajax_”, next you’ll include your script’s handled (note that you’ll need to replace any dashes ( – ) with underscores ( _ ). If you want the AJAX to work on the front end of the site you’ll want to append the hook with _nopriv. If you need it in the Dashboard just leave it as it is.

The JavaScript File

The last piece to this all is the JavaScript file that triggers and perform whatever actions you need to run.

Change “script-handle” and “ObjectName” to match what you chose when registering the script with WordPress.

The code $.post( ObjectName.ajaxurl, data, function ( response ) {} is what will call the callback you specified in the last section. You can place this inside an event such as a click. The “response” variable will contain any output you generated in the callback.

And that’s it. If you have any questions or suggestions to make this how-to a little more clear leave a comment or contact me directly.

Disable previous month navigation in FullCalendar.

Adam Shaw’s FullCalendar is a wonderful plugin if you need to display a calendar on your site.

My only problem was that I needed to find out how to disable navigation to previous months. None of my projects show historical data.

Searching for a way to do this did not find any results but did find some other people wanting to know how. I knew the code to use but not where to put it.

After some investigation I found the correct function and successfully disabled the previous button if you were on the current month.

Open fullcalendar.js and place this code in the renderView function (around line 368 in version 1.5.4)) before  ignoreWindowResize–; near the end of the function.

Dynamic Twitter Bootstrap columns for sidebars.

UPDATE: I am using this in more places than one so I did the practical thing and created a function to drop in functions.php. See the Gist link at the end of the article for the updated code.

I build most of my themes on Twitter Bootstrap which uses a 12 column grid system. You set column sizes using a CSS class, span# with # being the number of columns on the grid that element will span.

I was coding a footer for a new theme and the client wanted six columns so I started hard coding the structure. When I was putting in a check in for active sidebars I thought why would I want to display a blank column if nothing is going in it. So I wrote this code to check for how many active sidebars are going in a row and adjust the spans.

First setup your variables. $max_sidebars should never be higher than 12 for Bootstrap.

$max_sidebars = 6; // Adjust for the maximum amount of sidebars the row will have
$sidebar_prefix = 'footer-sidebar-'; // Enter the sidebar ID prefix
$active_sidebars = array(); // Used to hold the active sidebars

Find out how many sidebars are active for that row. I’m storing the ID of the sidebar in the $active_sidebars array so later I’ll know exactly which sidebars are active.

for ( $i = 1; $i <= $max_sidebars; $i++ ) {
	if ( is_active_sidebar( $sidebar_prefix . $i ) ) {
		$active_sidebars[] = $sidebar_prefix . $i;
	}
}

Now find what span# class to use based on the number of active sidebars. If there are no active sidebars I won’t even output the row so I set $span to blank. Everything above 7 will be set to 1 column and 5 active sidebars sets the span to 2. I know it would be more efficient to set the array count to a variable and just access that but I got lazy.

if ( 0 == count( $active_sidebars ) ) {
	$span = ''; // Don't even display the section
} elseif ( 5 == count( $active_sidebars ) ) {
	$span = 'span2';
} elseif ( 7 <= count( $active_sidebars ) ) {
	$span = 'span1';
} else {
	$span = 'span' . 12 / count( $active_sidebars );
}

Now that we know what sidebars are active and how many the displaying part is pretty easy. If there are no active sidebars we won’t display the row at all. Other than that we just loop through each sidebar ID in the array and output the HTML. If the container only has the one row just move the conditional around all of it instead of just the row.

// Display the HTML
if ( ( 0 < $number_active ) && ( function_exists( 'dynamic_sidebar' ) ) ) {
    echo '<div>';
    foreach ( $active_sidebars as $sidebar ) {
        echo '<div>';
        dynamic_sidebar( $sidebar );
        echo '</div>';
    }
    echo '</div>';
}

The full file is on Gist: https://gist.github.com/4218556

Christopher Lamm's site.