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.
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:
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:
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
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.
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:
Social Media sharing are usually very limited and usually only offer a few features.
If it’s a highly customizable plugin, then it costs money.
Many times there are social networks included that the client just doesn’t care about.
The design can be awful.
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().