Galen Gidman is a front-end and WordPress developer from Missouri. He runs BrandColors, ThemeBright, and he used to have a podcast. He infrequently writes about the web here.
Galen is current accepting work architecting maintainable, scalable front-end systems and WordPress-as-a-CMS builds.

Hire Galen

Gravity Forms Dashicon Plugin

Posted on July 13, 2014 / No Comments

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

Posted on June 24, 2014 / 1 Comment

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.0

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

Posted on June 9, 2014 / 17 Comments

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

Posted on May 12, 2014 / No Comments

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()

Posted on May 8, 2014 / 12 Comments

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.