Observations on Modern Blogging

Lately, I’ve been reading a lot of blog posts.

In fact, most of them are like this one.

One sentence per paragraph.

Or, if you’re feeling adventurous, maybe two. Like this paragraph.

As if every line was earth-shattering news that deserved a paragraph all to itself.

I understand what you guys are trying to do.

I get it.

You understand that short paragraphs are considered helpful.

You understand readers have short attention spans.

And you understand that writing long paragraphs is hard.

But I have a request.

And I’ll keep it brief.

Stop it.

Please.

It’s really annoying.

Thanks.

Gravity Forms Dashicon Plugin

If you’re someone like me that spends a lot of time in the WordPress admin, you’ll realize that little details in the UI can make a big difference. Combine that with my already slightly OCD bent, and it probably won’t surprise anyone that I find the lack of a Dashicon for Gravity Forms extremely annoying… so much so that I decided to make a plugin to fix it.

You can download it on GitHub. Hopefully they’ll update the core plugin before too long and this can become unnecessary.

Responsive, Flexible-Height Sticky Footers with Javascript

Back in March, I wrote a post about creating sticky footers with CSS using display: table and display: table-row. Since I wrote that post, it’s become by far the highest-traffic post on the site. Obviously it’s filling a need.

Since writing it though, I’ve discovered some issues with that approach. Sliders seem to be the biggest problem. For whatever reason, responsive sliders like bxSlider, RoyalSlider, and a few others break when they’re placed inside of a table or an element with display: table applied. Since the sticky footer method I posted applies display: table to the <body>, that pretty much means that responsive sliders break everywhere for me.

In April, Cory Simmons posted about using JavaScript for Responsive Dynamic-Height Sticky Footers. I mentioned in my post that I didn’t really care for the idea of using JavaScript to power sticky footers, but I must admit that I like the approach he came up with:

See the Pen Responsive Dynamic Height Sticky Footer by Cory Simmons (@corysimmons) on CodePen.

I think it really depends on what you need. If you’re building out a lightweight site that’s unlikely to use sliders or other more complex JavaScript components (I can only guess that display: table could prove problematic for them as well), then the CSS solution might be fine. For bigger sites though with more complex content, you might be best to go the JavaScript route.

Custom Post Type Search Results Templates in WordPress

As I was building out the the knowledge base section of the marketing site for my new WordPress church themes project, I came across the need to have a custom search results template for my knowledge base articles (custom post types called kb_article).

I figured that WordPress would have something build-in by default for this like they do with archive-{post_type}.php or single-{post_type}.php, but it turns out that’s not the case. The search results template WordPress looks for is search.php. If that’s not there they revert to archive.php and if that’s absent, index.php.

Limiting Search to a Particular Post Type

Before I go on, I want to quickly cover how to limit your search results to a particular custom post type. Add a hidden input to your search form with a name of post_type and the value attribute set to the name of whatever post type you want to search. In my case, my post type was called kb_article, so my form code looked like this:

Display Custom Results

We’ll name our custom search results templates using the WordPress filename conventions of {template}-{post_type}.php. In our case, that would result in search-kb_article.php. We could just check to see if that post_type=kb_article is set in the URL string and use get_template_part to load it if it is, but let’s go a step further. We’ll check to see if post_type is set in the URL string, and if it is, also check to see if custom search template exists for that post type using the {template}-{post_type}.php naming pattern. If it does, we’ll load it. If not, we’ll continue with the default search template.

So far this has worked well for me. If you have any ideas on how it could be improved, let me know in the comments.

Custom WooCommerce Cart Links

Sometimes if you’re working on a WooCommerce site, you’ll find yourself needing to create custom links to the WooCommerce cart. I covered pieces of this in passing in my post about adding static menu items to wp_nav_menu(), but I wanted to go ahead and cover it more in-depth as well. Here are a few mini-tutorials and things to keep in mind as you’re building your custom WooCommerce cart link.

A Simple Link to the WooCommerce Cart

This is probably the most basic form of linking to the cart. Here, we’re just calling get_cart_url() from WooCommerce’s WC_Cart class.

Adding the Cart Total to the Link

In this example we’re getting the cart total with the aptly-named get_cart_total() function and using that as the link text.

Updating the Cart Link Live

WooCommerce has a setting that allows products on archive pages (the main Shop page, product category/tag pages, etc.) to be added to the cart via Ajax. By wrapping our cart total with span that has a class of .cart_totals we ensure that the cart total is updated when products are added to the cart via Ajax.

Only Display Link if the Cart Contains Products

Here we’re checking to ensure that the cart actually has had products added to it. If so, we’ll display a link.

Further Reading

This really only scratches the surface of what you can do with the WC_Cart class. I recommend checking out the WooCommerce API docs for more.

Adding Static Menu Items to wp_nav_menu()

This week I found myself needing to append a static menu item to the end of a wp_nav_menu()-powered navigation menu. After a bit of Googling, I discovered I could do this using wp_nav_menu()‘s items_wrap parameter.

It’s actually pretty simple. Create a function that picks apart the default value of items_wrap and rebuilds it with a static link. Then call that function in the items_wrap parameter of wp_nav_menu():

How would something like that be useful? In my case, I was adding a WooCommerce cart link to the navigation that dynamically pulled in the sub-total. My code looked something like this:

You can even check for certain conditions, and only return the static menu item along with the default items if the those conditions are true.

Here, I’m checking to see if there are items in the WooCommerce cart, and if there are, I’m adding a link to the cart to the nav menu.

Tools

This essay was written in early 2013 to be my contribution to Tim Smith’s Lustra Magazine. Unfortunately, circumstances dictated that the project never launched and this has been sitting in my Documents folder ever since. I ran across it today and wanted to share. Enjoy.


We’re lucky folks. By our industry’s very nature, the toolsets available to us are very good because we’re good at building them. That’s a luxury not afforded to carpenters or bakers. A carpenter can’t make a better table saw out of a 2×4 and a baker can’t make a better oven with flour and water. But we’re different. The things we build are made with other things we build.

It’s like a tweet I saw several days ago. Sadly, I can’t find it, but it went something like this.

Kid: “Was the thing you use to program made with programming?”
Dad: “Yes, it actually was.”
Kid: [mind = blown]

When you get down to it, this is huge. It’s no problem if you want a JavaScript component to work substantially different than it currently does — fork that sucker on GitHub and get to it! Want to make significant tweaks to your text editor? TextMate, arguably the best text editor of all time, is just waiting for you. Notice a bug or inefficiency in Ruby on Rails? Fix it and you too could have code in the Rails source.

The sky is the limit it and it’s awesome.

So, a couple of things. First, if we want something, we’ll build it. Second, there are a lot of us and we build a lot of things.

Blessings tend to come hand-in-hand with curses in my experience. Buy a Corvette and you can expect a substantial increase in your car insurance bill. Buy a new MacBook and you’ll be constantly worried it’ll get dented.

Have an endless supply of tools and you’ll never make anything.

I’ve just finished Execute by Josh Long and Drew Wilson. All in all a fantastic book. I wouldn’t say I agree with every single thing in it, but that’s for another time.

What it did best was explaining inspiration — how it works and how to manage it to your advantage. Inspiration is our most valuable asset when building things. With it at our backs, we can do a task twice as fast as it would take an uninspired us to do half as well.

Different people draw inspiration differently. Managing it is the trick. As Drew says in the book, whenever he gets a little tired of building out the backend of an app, he designs a marketing page or tweaks an interface. Design recharges him and gives him fresh energy towards the project.

Making, whether it be designing, developing or even gardening or sewing, is what inspires us. It’s what we as humans were designed to do. It’s our God-given nature and there’s not a thing we can do about it.

Picking our tools is a distraction. It’s time we’re not making, and more importantly, not being inspired. Bootstrap versus Foundation… SASS versus LESS… PHP versus Ruby versus Python… flat versus skeu… Mac versus PC…

It doesn’t matter.

Actually, I take that back. It matters a darned lot. It matters that you don’t get stuck there. It matters that you build instead of plan.

Pick something. Build something with it. Only then will you really know if you like it or not. If you get to the end of the project and want to try something different next time, do it. At least you’ll have some real experience to inform your decisions.

Stay inspired. Keep moving. Work hard. Leave things better than you found them. Make stuff.

Maybe even tools.

Responsive, Flexible-Height Sticky Footers in CSS

Since I’ve been in the game, front-end devs have been wrestling with sticky footers like it was going out of style. I’m no exception, but today I learned a trick that made things a lot easier.

Before we go on though, I’d like to explain the problem briefly. It’s common for websites to have a header, a content section and a footer. On pages with a lot of content, the content takes up enough vertical space to push the footer to the bottom of the browser window. But, on pages with little content, sometimes the content does not take up enough vertical space to push the footer to the bottom of the window. This leaves the footer sitting oddly in the middle of the screen.

There are several solutions, each with their own pros and cons.

The Old Way

The old way works well, except that it relies on the footer to be a fixed height at all times. In responsive sites, this is rarely the case. Of course, you could write JavaScript that detects the footer height and adjusts the CSS accordingly, but that’s neither clean nor performant. A CSS-only solution would be better.

The display: table Trick

My new favorite approach to the problem looks something like this:

The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a <div> or something inside the .page-row and styling that:

Why not Flexbox?

As I understand it, Flexbox handles sticky footers very well. If you’re in a position to be able to use Flexbox without worrying about browser support, go for it!

Getting a Image Size URL from the Advanced Custom Fields Image Field

On a recent WordPress project, I often found myself needing to get an image size URL an image uploaded via Advanced Custom Field’s image field.

The ACF image field allows you to return either the URL of the full-sized image, the image (attachment) ID, or the image object. How you configure this will depend on the method you intend to use to retrieve the URL.

Using wp_get_attachment_image_src

For this method, you’ll want to return the image ID. To get the image URL, we’ll use the following code:

Using the Image Object

You can also configure ACF to return the image object and extract the image URL like so:

HTML to Markdown Converter

While I was migrating my blog, I ran across the need to convert my HTML-formatted posts to Markdown. Surprisingly, there are few good tools to do this quickly, but the best I found was to-markdown.js by Dom Christie.

The only weird thing about his app is for some reason he seems to have copying disabled in the Markdown output box. It looks like Dom has reworked the app a bit and this has been fixed.