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.


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 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.