dustin caruso

dustin caruso

Front-End / JavaScript / UI / WordPress / Shopify Developer

loading FontAwesome locally if the CDN fails

Just this week I had a problem w/ two of my clients’ websites. It seems that Font Awesome wasn’t loading from the CDN that they supply after you fill out the form on their “Get Started” page (pictured above). The solution I slapped together (below) will only work if your site is using this JavaScript loader (1st line of code below, but your’s won’t have all zeros).

It basically looks for a value that would be in an object returned with the FontAwesome code. If that value doesn’t exist, then it will use the CSS file specified in the “document.write…” line of code (replace this with the location and name of your local FontAwesome file).

<script src="https://use.fontawesome.com/0000000000.js"></script>

<script>
	if (!window.FontAwesomeCdnConfig.useUrl) {
		document.write('<script src="/my-site/css/font-awesome.min.css"><\/script>');
	}
</script>

Please, let me know in the comments if this little tip helped you at all.

Facebook Open Graph meta tags in WordPress

How to get your page or post content in the description tag

Getting the Open Graph meta tags (that Facebook parses when sharing a webpage) to be populated with the proper content can sometimes be tricky when working with HTML code that is dynamically generated by WordPress.

Below is the quickest and simplest way I’ve come up with to do this. As always, I like to share my discoveries in hopes that it saves other people the time I had to spend Googling and testing my solutions.

In the “header.php” file of your theme, add the following code, just above your Open Graph meta tags…

<?php $d = strip_tags(get_post($post->ID)->post_content); ?>

* the “d” variable stands for description. 😉
* the “strip_tags” bit ensures your description doesn’t include HTML tags.

Then output the description in your meta tag like so…

<meta property="og:decription" content="<?php echo $d; ?>">

Please, let me know in the comments if this little tip helped you at all.

move the Shadowbox.js close button to the upper-right

Shadowbox.js is the coolest JavaScript lightbox I’ve come across. The only thing I wanted to change was to put the “Close” button in the upper-right corner, where most users are used to looking for it. After crusing their forums, I discovered I wasn’t the only one that wanted this feature. So, I dove into the code and made the necessary adjustments, and of course, afterwards, I decided to document it here so that others could use it too. Here’s how to do it…

First, find this part in the Shadowbox.js code that writes the HTML into the page…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div> 

and edit it – moving the HTML for the “X” (close) button…

<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>

…into the upper div #sb-title, just after #sb-title-inner, like so…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div> 

then, add this stuff to your Shadowbox.css file AFTER all the other styles…

#sb-title-inner {
    width: 90%;
}
#sb-nav-close {
    float: right;
    width: 16px;
    height: 16px;
    display: block;
    margin: -20px 0px 0px 0px;
    background: url(close.png) 2px 0px no-repeat;
    cursor: pointer;
}

…and that’s it.

Let me know in the comments if this worked for you…

User Photo plugin not working? – try this…

Once again, I recently ran into a situation where something cool that I was developing worked just fine when run locally using MAMP. But then, when i uploaded everything to my server, things did not work as expected.

This will be a short one.

In this case I am using the User Photo plugin v.0.9.4 and WordPress v.3.0.4. I have a place on my single post page(s) (single.php) where I want to show a tumbnail of the author’s photo using the following code…

<?php userphoto_the_author_thumbnail(); ?>

…and it just was not working. After doing the usual bit of googling, I discovered this thread on the WordPress support forums where I found my solution – thanks to user dragunoff (Ivaylo Draganov). It turns out the issue is apparrently linked to wether or not a user photo should be held for moderation or not depending on their user level.

the fix…

At approximately line 120 in the User Photo plugin file “user-photo.php”, located at /wp-content/plugins/user-photo/, there is a function called userphoto__get_userphoto. About 3 or 4 lines down in that function you’ll see this line of code…

if(($userdata->userphoto_approvalstatus == USERPHOTO_APPROVED) &&

All we need to do is add 2 forward slashes – “//” – after the first open parentheses to comment out this first condition in the “if” statement, like so…

if( // ($userdata->userphoto_approvalstatus == USERPHOTO_APPROVED) &&

…and all should work fine.

What we’re really doing is removing the check for approval status from administrator moderation. So, don’t use this hack if you have a site where users could potentially upload some “questionable” user photos.  😉


update: 02.18.11 – this also works with User Photo plugin v.0.9.5 and WordPress v.3.0.5.

get the top parent category in WordPress

Here’s a cool little scrap of code to get the name of the top parent category in WordPress. This is another one of those things i spent a good deal of time trying to find through a lot of web searching. I finally came across a post somewhere (can’t remember where anymore) which had the solution I was looking for. I’ve just changed some of the wording (for my own benefit) and have posted it here. This will get the top parent category name, no matter how many levels deep in the category heirarchy you might be. To get this up and running, just add the code below to your functions.php file…

<?php

function get_parent_category_name($cat) {
    $parentCategoryList = get_category_parents($cat, false, ',');
    $parentCategoryListArray = split(',', $parentCategoryList);
    $parentName = $parentCategoryListArray[0];
    $stuffToReplace = array(' ' => '-', '(' => '', ')' => '');
    $parent = strtolower(strtr($parentName,$stuffToReplace));

    return $parent;
}

?>

Then, put this bit in your template where you want to place the top parent category name…

<?php get_parent_category_name($cat); ?>

This function returns the category “slug”.
To return the actual category name, replace the last line in the block of code above with this…

return $parentName;

Have fun…