Two “Where Have You Been All My Life” WordPress Plugins

There’s a type of WordPress plugin that provides functionality that is simple and targeted but so useful that once you’ve got it you wonder how on earth you functioned previously.

Here are two such plugins that I’ve started using recently and now install on almost all of the sites I work on:

1. Schedule Posts Calendar

schedule post calendar screenshotIf you ever need to schedule blog posts to publish in the future (which I think is probably everybody who blogs), you’re familiar with selecting a post date and time.

The problem with the “normal” way of doing this is that you’re just looking at numbers. For me, that means I have to reference a calendar to figure out the day of the week for each date.

Yes, it’s a total first world problem but it’s annoying and it’s unnecessary given that there’s a handy little plugin called Schedule Posts Calendar that adds a calendar picker to that area, letting you click to select a date (and time).

A calendar picker for scheduling WordPress posts? Yes please! It also has a “Today” button in case you want to jump to present.

2. Admin Collapse Subpages

Some sites end up with a lot of pages and subpages, which the admin “All Pages” screen is really not well set up to handle. At a certain point a humongous list of page titles with hyphens indicating hierarchy is basically unusable.

Don’t worry! The Admin Collapse Subpages plugin does exactly what the name implies:

pages with subpage collapse screenshot

It gives you that nice little +/- next to each parent page so that you can collapse all the subpages. So easy, so functional.


What are your must-use utility plugins for WordPress?

Creating a Alphabetically Ordered, Searchable Directory Page in Shopify

The more I use and play around with the “blog as content structure” technique to create complex Shopify layouts, the more I find ways to take it a bit further. In this post, I’ll show an example where I created a directory page where the entries are sorted into groups and displayed in alphabetical order, and then can be filtered via an in-page live search feature. Here’s the final result:

A Favorite Design peddlers page

A. Favorite store locations page (design by Sarah Connor, code by me, an Aeolidia project)

Here’s the full code for the page template:

In this model, each state is a blog post. The title of the post is the name of the state (or the country, for international places) and the store locations are the body of the post, like so:

post content structure in the admin

We tagged all international posts with “international.” More on that tagging shortly.

Let’s take a look at the two things that level this code up from previous examples – the sorting and ordering, and the search feature.

Sorting and Ordering

There are two levels of sorting going on here – the alphabetical sorting and the sorting by U.S./ international.

This is the code that sorts all the location names alphabetically:

{% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}

I feel like liquid filters are not that well documented and are kind of hard to find when you’re figuring stuff like this out – I don’t think I even know there was a “sort” filter before I made this particular template. There are a couple of sort examples in the documentation but it doesn’t tell you all the attributes you can use to sort, which would be nice to have right on that page.

At any rate, we’re using that snippet to create a variable sorted_articles with the blog articles from the “Peddlers” blog sorted alphabetically by title. As the docs note, the case of the title matters, so it’s important to be consistent with your capitalization.

Then, I looped through those articles twice (using the variable in {% for article in sorted_articles %} to make sure we’re looping through the alphabetized set of articles). Here’s that code, abridged so you can see the part doing the work:

{% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}
{% for article in sorted_articles %}
    {% unless article.tags contains 'international' %}

        <!-- post content -->

    {% endunless %}
{% endfor %}
{% for article in sorted_articles %}
    {% if article.tags contains 'international' %}

        <!-- post content -->

    {% endif %}
{% endfor %}

Just inside the first loop we’re using unless to make sure that we only display posts without the “international” tag – all the U.S. locations in this case. Conversely, in the second loop we use if to make sure we only display locations that do have that tag. That’s how we split out the two sections of the page.

The columns under each state are done with CSS3 columns, nothing too crazy there.

In-Page Search

The sorting and ordering is cool, but the client also wanted a way for customers to easily find locations in their area without scrolling all over the page. Since I’d already used jQuery Quicksearch on my own bookmarks page, that came to mind as an easy way to accomplish quick on-page search, so that’s what we did.

Here’s the code for that piece of things, separated out:

{{ "jquery.quicksearch.js" | asset_url | script_tag }}
<script>
jQuery(document).ready(function($){
    $('#peddler-search').quicksearch('.columns p', {
        'show': function () {
            $(this).show();
            $(this).parents('.location').find('h3').show();
        },
        'hide': function () {
            $(this).hide();
            $('.location').each(function(){
                if ( $(this).find('p:visible').length == 0 ) {
                    $(this).find('h3').hide();
                }
            });
        }
    });
});
</script>

The first line includes the script file from the theme’s assets directory (you have to download it and add it to the theme – it’s not hosted remotely – and you need to also already be loading jQuery).

Then, you initialize Quicksearch on the search input field (#peddler-search in this case). The first parameter, .columns p, is the unit to search. You can think of it as the block that gets returned as the result, if that helps.

The show and hide options define how the search results should act as the user enters parameters. In this example, we’re saying that any positive (matching) results should be shown and the H3 element for their location block (the name of the state) should also show. Any results that don’t match should be hidden, and if all the paragraphs (locations) within a state block are hidden, then the H3 should also be hidden. This combination ensures that the state name appears only when there is at least one result in that state.


While I’m really happy with how this particular page turned out (one of my favorite things about working with Aeolidia is the way we work as a team with the client, myself, the designer and others on the project to creatively address the client’s needs and solve problems), the real reason I wanted to share it was to illustrate just how powerful Shopify templates can be once you start pulling in blog content structures and a little bit of jQuery. It’s endless, really, what you can accomplish!

WP Elevation Interview + Neatly Polished Giveaway

WP Elevation podcast interview screenshot

The above screenshot is from the interview I did for the WP Elevation podcast (recorded in January, but just recently released). One of my cats makes a little off-screen guest appearance at 12:11 as well.

The interview is online and I’d love for you to watch/ listen to/ read it (audio, video, and transcript versions all available). Like many people, I typically hate watching videos of myself but watching this one just reminded me how fun the interview was to record.

Check it out

In addition to talking about process, getting client work, and WordPress stuff, I also managed not to go on a rant about public education too badly around 23:00 despite the fact that I was kind of tempted. As an added bonus, you can also enter to win a 3 month subscription to Neatly Polished by commenting on the post over on WP Elevation (the question I’d love for you to answer as your entry is in the podcast towards the end).

Featuring Products with Different Images in Shopify

Somebody recently emailed me asking for suggestions on how to feature a collection or set of products in Shopify when the images to be displayed are NOT the same as the products’ main featured images. I thought I’d share how I’d think about this kind of feature in case it’s helpful for others as well.

Shopify: Feature Products with Special Images

The thing to know is that Shopify lets you upload as many images as you want per product. The first image (you can reorder them) is designated as the “featured image” and that’s the one you usually see in grid views or in featured product areas.

But, what if you want to show some products but you don’t want to use the featured image?

You could use theme settings for this for sure, using image and title and URL fields. That’s how I did it on Society Social, the example shown in the title image above. However, if you do it with a collection you get the title, price, sale status, etc., without having to enter all that info into settings fields.

So let’s assume we’re using a collection for this featured area. How do we pull from a non-featured-image?

The next thing I’d ask is whether the image you want to feature is completely different from the product images. What I mean is, should it not appear at all on the product detail page, or is it just not the first/ featured image?

The idea is to come up with a pattern that is repeated for every product that identifies the right image.

If the image should also appear on the product detail page (but not first), maybe you could have it always be last. Then, you could use {{ forloop.last }} to grab that in your feature area and also to omit it on the detail page. However, it only works if every product has a last image that shouldn’t be shown, which seems unlikely.

Another way to handle it if the image isn’t to show on the detail page would be to use the image alt and a keyword to identify the image to show in the feature block but not on the detail page. Then, in your loop through the product images you look for that keyword and use it to either only display that image (in the featured area) or exclude that image (on the detail page). This is untested but it would probably be something like:

{% for image in product.images %}
    {% if image.alt contains 'special feature' %}
        {{ image.src | product_img_url: 'medium' }}
    {% endif %}
{% endfor %}

That would show the image that contains the phrase “special feature” in the alt text. Or, to exclude it:

{% for image in product.images %}
    {% unless image.alt contains 'special feature' %}
        {{ image.src | product_img_url: 'medium' }}
    {% endunless %}
{% endfor %}

Personally, I think this alt method is probably what I’d go with, paired with a special collection just for the feature area (likely an automatic collection that feeds from a product tag).

7 Tips for Working with Online Product Photos

I’m over on the Aeolidia blog today with seven tips for product photos. The tips are not about how to take product photos, but about things like sizing, cropping and naming the files. Things you need to know after you take the photos and before you put them online.

product photography tips

The post is focused on Shopify store owners, but there’s probably something helpful in there for everyone, Shopify store or not.

READ IT