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
Blog
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
Using the wp_parse_id_list() WordPress Function
The wp_parse_id_list() WordPress function will take a list of post IDs in array or string format and return a cleaned-up and sanitized array of post IDs
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
Using the wp_array_slice_assoc() WordPress Function
The wp_array_slice_assoc() WordPress function allows you to extract a subset of data from an associative array given a list of keys.