Remove Image Size Attributes for Responsive Images in WordPress

WordPress, by default, will add the width and height attributes to image elements. These attributes will override CSS width and height properties. Making images with these dimension attributes responsive is a bit of a hassle, or in some cases cannot be done at all. Strip Image Dimension Attributes from Inserted Images Stripping out the image… Read More

Tweaking WordPress Image Quality

Optimizing images for use on the web can significantly reduce page load times for image-heavy websites. What many people don’t realize is that WordPress automatically applies a 90% quality level to all JPEG images. This helps to conserve disk space and reduce bandwidth. However, if you are optimizing your images before you upload them, you… Read More

Use Self-Executing JavaScript Functions for Code Isolation

When you first start learning JavaScript, you focus on getting down the basics. Then, after you work with JavaScript for a while, you learn more about variable scoping and the importance of isolating and protecting your code from outside influences. What is variable scoping? Variable scope refers to the context within which a variable is… Read More

Breakpoint Aware JavaScript for Responsive Design

Supporting responsive design across all the handheld devices that are available today means that most websites use CSS media queries to set break points; typically for mobile, tablet and desktop. When JavaScript interactions come into play, sometimes your JavaScript code should be aware of the break points available in CSS. The code below allows you… Read More

Automatically Download PDFs via jQuery

Have you ever wanted to have a link to a resource, such as a PDF file, and have that resource be automatically downloaded when the link is clicked? All you need to do is add a download attribute to your link HTML. <a href=”/resources/newsletter.pdf” download>Newsletter</a> But wait, the download attribute isn’t supported across all the… Read More

Open External Links in a New Window

A common practice with web links is to make sure that links to other websites open in a new tab. At the same time, all links to other pages on the same site should open in the current browser tab. It is important to understand why this approach is a best practice. For starters, visitors… Read More

Disable Links with an Empty href Attribute

Occasionally, there is a need to create a link that doesn’t actually go anywhere. A great example of this is a top-level menu item that displays a drop-down of sub-menu items. In this use case, you simply want a menu item that serves as a container for other menu items, but isn’t meant to take… Read More

Adding Dynamic and Piggyback Styling in WordPress

Often, when creating a WordPress theme, some of the theme’s styling will need to be dynamic because it is based on user selections stored in the database. WordPress provides a function called wp_add_inline_style() which allows for inline styles to be loaded after a specific CSS file. For example: add_action( ‘wp_enqueue_scripts’, function () { wp_enqueue_style( ‘custom-style’,… Read More