Ok I nailed it. Here is the full code for anyone else that needs it. I used this article to learn how to enque my script into WordPress. You can see this script in action on this page.
// use proper JQuery Wordpress version
// https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
var $j = jQuery.noConflict();
// ensure that widgets.js is loaded
$j(document).ready(function() {
// https://dev.twitter.com/web/javascript/events
twttr.ready(
function (twttr) {
twttr.events.bind(
'loaded',
function (event) {
// callback can be triggered when event.widgets is 0, so make sure it isn't
if (event.widgets.length) {
// locate all the <time> elements and hack up the text in the title to insert into the tweet
// you are going to want to change "twitter-widget-1" to the ID of the widget you are targeting on your page
// change the color to always be visible, not just on hover
var times = $j("#twitter-widget-1").contents().find("time").each( function () {
$j(this).html($j(this).attr("title").split(": ")[1]);
$j(this).css("color", "#8899A6");
});
// setup a callback for when the "Show More Tweets" is clicked to update timestamps for new tweets
// I could not find an event that fires when new tweets are loaded, so just wait a second
$j("#twitter-widget-1").contents().find("button").each( function () {
$j(this).click(function() {
setTimeout(function() {
var times = $j("#twitter-widget-1").contents().find("time").each( function () {
$j(this).html($j(this).attr("title").split(": ")[1]);
$j(this).css("color", "#8899A6");
});
}, 1000);
});
});
}
}
);
}
);
});
I should also add that if the page does not have a twitter timeline or anything that loads widgets.js then this code will throw a JS reference error, but it should not interfere with any other JS operations
