Add async to a WordPress JavaScript file

Whether its an large external CDN file or an third-party library that client “needs” to have, you’ll eventually need to resort to having to add async to a WordPress JavaScript file.

The reason you would need to add the async attribute  is to move unnecessary or render-blocking scripts out of the critical rending path, thus allowing the browser to “paint” the webpage sooner.

One important thing to note is the difference between async and defer. The async does the following:

The async attribute tells the browser to start downloading the resource right away without slowing down HTML parsing. Once the resource is available, HTML parsing is paused so the resource can be loaded.

As opposed to defer:

The defer attribute tells the browser to hold off on downloading the resource until HTML parsing is complete. Once the browser has finished with the HTML it will then download and render all deferred scripts in the order in which they appear in the document.

To learn more about render-blocking resource, be sure to check out this amazing and insanely detailed article  by Jon Penlad.

Regardless of whether you need to use async or defer, the function below can twisted and reused to serve your purpose.

Assuming you’ve already enqueued your WordPress files, in your functions.php file you can reference each specific file by the name or “handle” you passed into the enqueue function. You can pass each handle into an array,  as seen the in array named $case scripts_to_async. 

You then loop through the array and return the async version of each script link. In this example, we will be placing the async tag in front of the src attribute.

if ($async_script === $handle) {
 return str_replace(' src', ' async src', $tag);
}

After everything has completed, you should be left something close to the following:

Original Link
<script src="//script1.js?cid=6asdfsdf"></script>
New Link
<script async src="//script1.js?cid=6asdfsdf"></script>

If you need to use defer, simply replace the async word defer when using the str_replace function.

Make WordPress featured image required

There are quite a few instances where I need to make the WordPress featured image required whether it is for a standard or special custom post type. The snippet below does the following:

  1. Requires a featured image to be set before a post type can be published.
  2. Displays a error to set the featured image if not set.
  3. If a post is already published, the post status will set to ‘Draft’ when updated.
Make the WordPress featured image required
Error Message shown when the featured image isn’t set.

 

Credit to WP Snipp

Make WordPress srcset serve HTTPS images

So I ran into an issue today where I was updating a ton of plugins on a site running an older version of WordPress and it broke all the images that were embed in the post content area.  I was updating the previous version number from 4.2.7 and I was updating it to 4.4.2.  The 4.4 version is important to note since added native responsive image support by including srcset and sizes attributes to the image markup it generates.

Once I ran through all of my tests locally, everything looked great and it was time to update the live site to reflect those updates. However, I immediately noticed that many of the images were showing up as broken links, even though they were showing up fine in the media library. It turns out WordPress was serving an http version of the image in the srcset attribute.

I figured, no big deal, I’ll just update the database img src value to reflect the changes. However, WordPress was displaying the img src as a relative link making it a little more difficult to change through a query.

Solution

So that was awesome. Instead of updating the database on a live site I decided to opt for , in my opinion, a safer and more targeted approach by using a filter to update the image’s srcset.

I found that WordPress uses a helper function to calculate srcset, so I hooked into that and then used wp_set_url_scheme to update the value of the srcset for each given image.

WordPress SEO Breadcrumbs Tweaks

One of the most popular and downloaded WordPress plugins is WordPress SEO by Yoast. It’s a powerful plugin that comes with many great features including On-Page rankings, auto-generated sitemaps and breadcrumbs. Breadcrumbs are important since it assists the user in creating al “mental map” of how the website is laid out, along with giving them links to go back and fourth between the page hierarchy.

While convenient, the WP SEO breadcrumbs feature doesn’t always line up with what you’re trying to achieve when building custom themes.   For example, my biggest problem (aka annoyance) with it is this:

WordPress SEO Breadcrumbs
Double or nothing?

You can see WP SEO includes the current page’s title, which feels a little redundant especially when have the page title directly below it.

Better WordPress SEO Breadcrumbs

I’m going to hook into the wpseo_breadcrumb_links and the wpseo_breadcrumb_single_link functions to find the last link remove it and add a link for the last page in the list. Here is how I did it:

Hope you have found this helpful.

Cross Browser Select

Let’s be honest; selects are ugly. Sorry, that came out wrong. Selects are wildly inconsistent across each browser and really make a design look off (and they’re ugly). Anyway, here is what I implement to create a consistent experience on each browser.

At the time this was posted, the select was tested on these browsers:

  • MS Edge 12 and 13
  • Internet Explorer 8-11
  • Firefox 35 through 44
  • Chrome 28 through 48
  • Opera 15 through 35
  • Safari 9
  • Yandex 14.12
  • iOS 9
  • Android 4.3 through 5.1

Kudos to the Filament Group for maintaining this solution with the recent Firefox changes and curing my future headaches.

See the Pen The True Cross-Browser Select by Jason Jones (@theJasonJones) on CodePen.

Social Icons, the Old Fashioned Way

Any website creates content regularly love to have the ability to have users share their content. The easy answer for most WordPress developer is to download a plugin. However, that has a few drawbacks:

  1. Social Media sharing are usually very limited and usually only offer a few features.
  2. If it’s a highly customizable plugin, then it costs money.
  3. Many times there are social networks included that the client just doesn’t care about.
  4. The design can be awful.
  5. It’s not that hard to create custom links.

So here is a list of the big five social networks and how you can share that content via WordPress. We will skip over the Open Graph stuff and save that for another post.

Disclaimer: Twitter has a limit of 140 characters so we can bit.ly to shorten the link to allow the title to fit in the tweet comfortably. Just add the following code to your functions.php file and use the getBitly function in place of the_permalink().

Hello World

This is my blog.
There are many like it, but this is mine.
My blog is my best friend.
I must master it as I master my life.
Without me it is useless, without my blog I am useless.

That is Full Metal Jacket reference for those wondering at home.

Thanks for coming to my blog, I hope you enjoy the halfway interesting posts I put on here.