This plugin adds Contact Form 7 entries as new users (if necessary) and grants them the specified WooCommerce Membership plan.
Get the code at the GitHub repository. Continue reading “Contact Form 7 → WooCommerce Memberships”
Author: Andrew Minion
Merge + Minify + Refresh Force Clear Caches
This plugin clears other page caches/proxies when the Merge + Minify + Refresh cache is regenerated so users don’t end up missing static resources (CSS/JS files) due to a cached page trying to load old static resources.
Get the code at the GitHub repository. Continue reading “Merge + Minify + Refresh Force Clear Caches”
Hosting WordPress inside a SilverStripe Installation
I ran into a puzzling issue today. Normally I wouldn’t recommend hosting a CMS inside another CMS installation, but for various reasons, I had to set up a WordPress blog inside an existing SilverStripe installation. For sake of this article, I’ll call it example.com/blog/.
The first problem I ran into was that instead of loading WordPress, example.com/blog/ was showing the directory index:
That’s obviously not ideal, as well as being a bad idea for security.
I then added Options -Indexes to the WordPress .htaccess file to disable the directory listing, but all I got was a “403 Forbidden” error when going to example.com/blog/ or example.com/blog/wp-admin/ (however, example.com/blog/?p=1 would redirect to the post URL using pretty permalinks and worked fine 🤔):
I then tinkered with the SilverStripe .htaccess file, thinking it was overriding something; I added this line to make it ignore the WP blog URLs:
RewriteRule ^/blog/?.*$ /blog/index.php [L]
Still no luck.
Finally, I thought to try manually setting the index file, so added this line at the top of WP’s .htaccess file:
DirectoryIndex index.php
And that did the trick!
There must have been a server-wide setting to use some other file for DirectoryIndex (that’s the file that gets served by default when you try to access a directory URL), but I didn’t have access to the entire server.
Summary
Here’s what I ended up using:
SilverStripe .htaccess file
RewriteEngine On
RewriteBase '/'
# Added for WP blog
RewriteRule ^/blog/?.*$ /blog/index.php [L]
# Process through SilverStripe if no file with the requested name exists.
# Pass through the original path as a query parameter, and retain the existing parameters.
RewriteCond %{REQUEST_URI} ^(.*)$
### Blog Redirect ###
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* framework/main.php?url=%1 [QSA]
WordPress .htaccess file
DirectoryIndex index.php
Options -Indexes
Friends Divided: John Adams and Thomas Jefferson
This 511-page book by Gordon S. Wood is what I call a “comparative biography”: a comparison and contrast of two contemporaries.
John Adams and Thomas Jefferson could hardly have been from more different backgrounds: Adams was a relatively poor New Englander from the “common” class and rose to prominence due to his law practice and writings, while Jefferson was born into the wealthy Virginian society and owned slaves his entire life.
Despite their drastically different beginnings, they both served as emissaries to France, served under Washington during his presidency, and served as President themselves.
They held opposing viewpoints on how the government should act (Adams favored monarchist traditions, while Jefferson adamantly believed in democratic methods) and attacked each other in the press so much that for a period of years, they stopped communicating altogether. After Jefferson’s presidency, a mutual friend (Dr. Benjamin Rush) convinced them that they should mend their relationship, and they continued writing to each other for the rest of their lives, finding much where they could agree.
One of my favorite things about this book is how it delves into explanations of the current political situation. For instance, it explained the English political system and the tension between the king and Parliament for sovereignty.
It also discussed Adams’ and Jefferson’s viewpoints on the strength of representative bodies vs. the executive, and Adams’ increasingly-peculiar views on representation and monarchy.
The book ends with a comparison and contrast of the two statesmen’s legacies, specifically how their overall beliefs have impacted how we view them today.
America is not a nation based on ethnicity, but rather based on ideas, specifically the principle that “all men are created equal.” In 1858, Lincoln observed that “half the American people…had no direct blood connection to the Founders of the nation.” But Americans—both native-born and immigrants—do have a “set of beliefs that through the generations have supplied a bond that holds together the most diverse nation that history has ever known.…To be an American is not to be something, but to believe in something. And that something is what Jefferson declared.”
I thoroughly enjoyed this book and highly recommend it, both for the biographical content and the explanation of the politics in the formative days of our country. It definitely helps explain why Adams is the “forgotten” founding father.
WordPress Theme Stylesheet Auto-Cachebusting
If you’re like me and you set up server-side caching, CloudFlare (or any other proxy cache), and/or long Expires headers on your theme stylesheets, you know the hassles that go into invalidating those caches and forcing browsers to load an updated version.
One method to force browsers to pull the new version is to add/change the ver parameter in the query string (WordPress’ wp_register_script, wp_register_style, wp_enqueue_script, and wp_enqueue_style have a built-in way of doing this).
Query Strings
Defining a Constant
Here’s how I used to do it: define a constant and then manually update that, as well as the Version header in the style.css file.
The main drawback is that I had to manually update the version number in two places: functions.php and style.css.
File Modification Time
Another method I’ve used at times is to add the style.css file modification time as the query string.
This has the advantage that the cache will be invalidated every time the stylesheet file changes. For some reason, I really never cared for it that much, though. It does add a tiny bit of performance hit, as the filemtime has to go get the file and figure out the timestamp.
WordPress Theme Version
I just read about this today and I think it’s going to be my go-to method in the future. It uses one of WordPress’ built-in theme functions to get the version number from the stylesheet.
This has a bit of overhead as well due to the function call, but I like the fact that it uses the theme version number so you can easily do Semantic Versioning.
Filename Modification
However, most performance testing tools will recommend you remove query strings altogether to improve caching especially by proxy servers. Here are two automatic methods of doing that:
File Modification Time
WordPress Theme Version
Conclusion
No matter which method you choose, setting up caching can greatly improve your site speed. It’s worth a little bit of hassle to ensure your stylesheets and scripts are cached, knowing that with any of these methods, you can easily invalidate those assets.
Activate a Specific WooCommerce Tab
Here’s a quick code snippet to make a button on a WooCommerce product page activate a specified tab:
WordPress and Responsive Images: srcset and sizes Attributes
I’ve been puzzling over a performance issue on one of my sites lately and finally got it figured out today.
A custom shortcode uses the_post_thumbnail() to include a small image (~250px square); I have a bunch of custom image sizes set up, so the srcset attribute included 16 different image sizes. (Overkill? Maybe….) However, instead of using the image closest to 250px wide, Chrome was pulling in the largest available image—sometimes as much as 1500px! Obviously, this is terrible for performance.
In addition, certain pages had dozens of these images, multiplying the effect. My test-case page was 10+MB total (way too heavy…).
Here’s a sample <img> tag for one of my images:
I finally realized that the root cause was that the sizes attribute was set to “100vw,” basically suggesting to the browser that the image might at some point be rendered at 100% width of the viewport, so my browser was happily pulling down the largest possible image so it could display it in all of its high-resolution, hundred-KB glory instead of the scaled dozen-KB file.
Since I know this particular shortcode will only show images at a max width of 250px, I needed to set the sizes attribute to “250px,” hinting to the browser that anything slightly larger than that would be perfectly adequate.
Here’s how I handled it:
- Added a filter to
wp_get_attachment_image_attributesand checked for a named image size or array - If it was an array, I set the
sizesattribute to that pixel size - If it was a named image size, I set the
sizesattribute to that pixel size
Sample code:
This approach admittedly is a bit heavy-handed and I’m still testing out the behavior on other pages on the site, but this fixed the problem with that specific shortcode, and my test page went from 10+MB to ~5MB—it cut my page weight in half!
The moral of the story is don’t “set it and forget it,” especially when adding responsive images using custom code.
Thanks to VIA Studio for their blog post that finally made the solution click for me.
Thinking With Type by Ellen Lupton
For Christmas this past year, my wife gave me a copy of Thinking with Type: A Critical Guide for Designers, Writers, and Students (2nd revised and expanded edition) by Ellen Lupton. I just finished it and very much enjoyed reading it. I’ll definitely be using it as a reference.
These days, I generally prefer to read Kindle books on my Kindle Paperwhite, but this book is definitely better as a physical book.
Description
This is a great introduction to and reference on typography. It’s divided into three main sections—Letter, Text, Grid—plus an appendix.
Letter
Explains some of the history of letterforms and the printing process, explaining why certain aspects of typography are tied to mechanical processes. Goes into details about type families, punctuation, numeral styles, typefaces on screen, and more.
Text
Discusses legibility in the context of large blocks of text including kerning, tracking, alignment, and more.
Grid
Talks about page formatting, the golden ratio, and more specific details about laying out text on a page.
Appendix
Includes more details on proofreading, editing, and some free advice.
My Thoughts
Much of this information I was already familiar with, partly due to my dad working in the printing industry and teaching us some of the terminology and concepts. A number of the concepts have also been covered by various blog posts and other publications that I’ve read through my career.
This guide includes examples on nearly every page (some created for the book and some from historical sources), either illustrating the point or depicting a “type crime” where type was mis-used.
You can read the description of the book on Amazon for more information or take a look at the companion website for exercises and some more details.
Thomas Jefferson: The Art of Power by Jon Meacham
Author of the Declaration of Independence, Virginia state legislator and governor, member of Congress, minister to France, Secretary of State under Washington, Vice President under Adams, and ultimately President himself, Thomas Jefferson was no stranger to power.
This 800-page volume was a good book, but I was a bit disappointed that it wasn’t as biographical as I had initially hoped.
Influence
I hadn’t realized how much influence he had on other presidents:
“For thirty-six of the forty years between 1800 and 1840, either Jefferson or a self-described adherent of his served as president of the United States: James Madison, James Monroe, Andrew Jackson, and Martin Van Buren.32 (John Quincy Adams, a one-term president, was the single exception.) This unofficial and little-noted Jeffersonian dynasty is unmatched in American history.”
—Kindle location 192
Politics
Jefferson and Hamilton were openly opposed to each other’s politics and their disagreements ultimately became the basis of the two major parties at the time. Hamilton wanted a stronger, more centralized government which emphasized trade and commerce, while Jefferson despised those who worked with their heads instead of their hands—he wanted a rural, agrarian society. Thankfully, Hamilton had President Washington’s ear and the country headed that direction rather than remaining a simple farming culture.
Jefferson was a republican through and through:
“The Jefferson of the cabinet, of the vice presidency, and of the presidency can be best understood by recalling that his passion for the people and his regard for republicanism belonged to a man who believed that there were forces afoot—forces visible and invisible, domestic and foreign—that sought to undermine the rights of man by reestablishing the rule of priests and nobles and kings. His opposition to John Adams and to Alexander Hamilton, to the British and to financial speculators, grew out of this fundamental concern.”
—Kindle location 5171
Conclusion
This biography did cover major events in his personal life, but it seemed to shift a bit around the time he became President and began to read more like a philosophical discussion on how his seemingly-contradictory decisions fit into his framework of wielding executive power to fit his purposes.
It’s definitely worth reading and will give you a perspective on how he made decisions, but personally, I would look elsewhere if you are reading just one book about him for a good biography. That said, it does have a 4.5 star rating (with 1464 reviews) on Amazon, so many other people definitely enjoyed it.
Slanted Background Stripes
While working on a recent project, I needed to use angled background stripes on a number of pages.
Here are a couple of requirements that limited my options:
- Angled stripes with text content and a background color and/or image
- Angled stripes stacked on top of each other