Adding Custom Link Classes in WordPress

Most AJAX-ing and general-web-awesomeness is driven by CSS selectors. For instance, a lightbox pops up exclusively on links with a class of lightbox. For a plugin or theme developer, if you're application requires selectors like this, it's best to assume that the users cannot do this on their own. What I mean is this: give them a simple way to add the selector without and hand-coding.

A fine way to do this is via the class setting found under Insert/edit Link. Through a plugin or a theme, you can set specific classes from which the user can choose. Use the tinymcebefore_init hook that WordPress provides. It works by declaring some extra classes that are added to the mega array of TinyMCE settings.

Drop this in your functions.php file, or in your plugin:

<?php
    
add_filter('tiny_mce_before_init', 'add_lightbox_classes');

function add_lightbox_classes($initArray) {

    $initArray['theme_advanced_styles'] = "Lightbox=lightbox;iFrame=iframe";
    return $initArray;

}

?>

There is a problem with this, though! By using the tinymcebeforeinit hook you effectively replace the normal ones like: aligncenter, alignleft, etc. If you examine how the normal ones are generated, you'll find they are not included in the filter. They are fed in through another javascript object. If WordPress sees that there is something other than nothing in the themeadvanced_styles key, it replaces everything.

So, if you want to keep the normal ones you need to redo them in your hook function. I should probably submit a core patch that addresses this.

Limiting Dates on Two jQuery Datepickers

I just ran into a scenario where I had two separate jQuery UI datepickers, and needed to have the first calendar limit the date choices of the second. Essentially a start date and end date. It doesn't take a degree in relational physics to know that the end cannot come before the beginning; therefore, anything before the date the user chooses in the first calendar needs to be unavailable in the second calendar.

$('#start').datepicker({
    dateFormat: "@",
    onSelect: function(dateText, inst) {
        var dateText = eval(dateText);
        var min = new Date();
        min.setTime(dateText);
        $('#end').datepicker('option', 'minDate', min);
    }
});

$('#end').datepicker({
    dateFormat: "@",
});