What turned out to be my last major job before starting at King Arthur was a new website for Second Growth, a local nonprofit dedicated to treatment, recovery, and prevention of substance abuse in adolescents and young adults. Before I came on board with Aquilino Arts my partner had set them up with a lovely Joomla site, but it was hard to update in terms of both content and software. It was time to shift to WordPress, and clean up and reorganize a little at the same time. I was involved in the organization – though we stuck fairly close to the previous structure – and gave feedback and input on the design, but my main job was the technical aspects. I wanted to discuss them here because it is our most sophisticated site to date and it gives a fairly thorough overview of my methods for site construction.

By the way, I have a Pinterest board devoted to plugins we use, which you can take as recommendations.

The front page starts with a mosaic; the left half has a YouTube video and a mini-menu, the right half is split into 3 pieces whose contents can be changed from within the Customizer. The theme is set to use two menus, intended to be the mini-menu and a full menu. The mini-menu includes a link to the full menu; the full menu appears in the footer, which is where the link goes, but if you have JavaScript, it hijacks the link and pops the full menu up in a lightbox (the method is shown almost exactly in my post about AJAX in WordPress).

Below the mosaic and a divider band, there are three more spots whose contents can be set in the Customizer. In every case the options are a page, a specific blog post, or the latest blog post. The footer includes not only the full menu but a 2-up slider of donor logos. The gallery uses Media Library Assistant to allow logos to be selected by categorizing them appropriately on the back end and is set to have two columns and random order. Flickity applies itself after page load and turns each column into a panel of the slider. All gallery/slider and lightbox functionality (which is via Colorbox) is in a custom plugin so it can persist should they change their theme down the road. The choice of Flickity and Colorbox is semi-arbitrary; I’m familiar with both of them and they do what I want. I’ve never written about Colorbox here, but I’ve written fairly extensively about Flickity.

On interior pages the mini-menu appears as the top-of-page menu; the logo gets you back home if you don’t want to use the full menu popup. Certain content is accordion-folded, which is also provided by the custom plugin but is hand-coded. Different pages have different sidebar content via Display Widgets, chosen as the least awkward of the options. Almost all of them have a donate button and contact link; most have a two-column gallery of donor logos; a couple have a still of the home page’s YouTube video that lightboxes up into a watchable video. One has 1-up slider of photos, chosen via Media Library Assistant’s tagging system.

The contact form is from Contact Form 7, because of the option of Selectable Recipient with Pipes, including the ability to use the pre-pipe content by prefixing the label with _raw_. The event calendar is Event Organiser, chosen because it does recurring events and is developer-friendly. I didn’t end up turning off the original CSS, but I found it reassuring that the developer included that option. It provides for per-category colors, which we used to make one-off events stand out from weekly recurring events, and also produces the lists of upcoming events that appear on the home page (set to show only the next instance of any recurring event) and in the sidebar of one of the interior pages.

There are two custom post types aside from contact forms and events, both created and given custom taxonomies using Custom Post Type UI. One is testimonials, which currently only exist in the sidebar of one page (a single random one selected and shown by Flexible Posts Widget with a custom template – and by the way you can get all my custom FPW templates on GitHub). The other is resources. The resources archive and news (blog) archive look similar: they are topped with buttons for each category (or topic, the resource-specific hierarchical taxonomy) and for the whole archive. These buttons are coded into the archive templates. The list of all resources actually excludes one of the categories; resource archives also display alphabetically by title instead of by date and with more allowed per page.

The news archive shows the featured image and an excerpt; the resource archive shows the full content with no image. Featured images aren’t set to automatically show on any of the individual posts or pages; they are used for the front page featured content and news archive only.

The theme is fully responsive, and below a certain width the two-column donor logo galleries are hidden so as not to make the page infinitely long. When at “full size” the right sidebar is positioned and sized via display: table-cell. This caused some problems on Firefox with the pages with the video still in the sidebar, where the sidebar was displaying far wider than it was set to (35%). The fix was to set width: 100% on the still (in addition to the max-width: 100% set on all images in the theme). It was tricky to repair because my browsers have gotten very tenacious about using the old CSS file, regardless of hard refresh or cache clearing, until I change the version number. I’d switched to CSS tables because I was having the same problem in Flexbox, but since then have determined the same fix would have worked for Flexbox.

Using CSS tables or Flexbox was important for getting the main content and sidebar to be the same height, since the leafy divider is actually a small vertically-repeating background image on the sidebar, transparent beyond the leaves on the sidebar side and with solid white background (covering the translucent green background of the sidebar) on the main content side. When the sidebar drops below we switch the image and its positioning and repeat settings.

Originally the footer used CSS columns, as well as the sidebar when it dropped below but had width enough for multiple widgets, but then I discovered Flickity doesn’t play well with CSS columns. At all. I had crazy spillover outside the Flexbox viewport that I couldn’t figure out how to fix. No more CSS columns; they are now done the old fashioned way with percentage width and floating.

The behind the scenes plugins in the site are WP Smush for image optimization, WP-SpamShield for comment spam elimination, Google Analytics by Yoast, and W3 Total Cache for caching. With such an image-heavy site both image optimization and caching are key elements. I didn’t use WP Fastest Cache because the free version has to be cleared from the hosting account if you haven’t just published a post or page – changing the featured items in the front page won’t do it. W3TC doesn’t detect changes in the front page but you can clear its cache from a button at the top of any of its pages.

The post Touring a New(ish) Site appeared first on rweber.net.

There are any number of options for email subscriptions to the entirety of your main WordPress blog, including Jetpack. If you want to allow subscriptions to individual blog categories or to custom post types (CPTs), however, the options drop off radically. Here are three possibilities I’ve tracked down.

1. Arigato Pro + Intelligence Module

This is a newsletter plugin that allows email subscriptions via daily or weekly digests (this part requires the Intelligence Module add-on; the whole bundle costs $87 for a lifetime license and a year of support and updates).

Flexibility: You can limit the posts in the digests to specific categories, but it does not do custom post types. [The developers are very responsive, though, and might be amenable to adding CPTs as an option.]

Advantages: There are no limitations on number of subscribers or emails sent (except those imposed by your web host). Your list is local and doesn’t require another online account. You have control over your mailing lists and the design of the emails, which come from your site. If you want to sell subscriptions to certain kind of lists there is a free extension that connects to WooCommerce. If you have multiple lists and lots of people, it is cheaper than most external services (including even the lowest cost plan on MailChimp, below), even if you re-up every year for more support and updates. Your signup form can include checkboxes to allow people to subscribe to multiple categories/lists at once.

Disadvantages: Blog subscriptions are in digest form and sent once a day at most. Setup is fairly complicated. No custom post types at this time.

2. MailChimp

MailChimp is one of the many newsletter services out there, and not the only one to offer RSS to Email (Mad Mimi and AWeber do as well; Constant Contact does not seem to). However, it is the only major player with a free tier: up to 12,000 emails per month spread over up to 2,000 subscribers.

Flexibility: Since WordPress automatically produces individual RSS feeds for not only the main blog but also every taxonomy and post type, this can be used for any type of email subscription.

Advantages: You have control over your mailing lists and the design of the emails, which come from the email address of your choice. If you want to combine with another form of newsletter you can do so in the same account. Your signup form can include checkboxes to allow people to subscribe to multiple categories/CPTs at once (you’d want to have one “list” in MailChimp-speak and “groups” for categories – a “group title” like “Categories to Subscribe To” with “groups” underneath for each category; the nomenclature is a little confusing). A Google search implies MailChimp is the most popular option for RSS to Email and there are tutorials accordingly.

Disadvantages: Your subscriber list is not local and you have an additional online account to deal with. Setup is fairly complicated. If you go over the free tier the price goes up pretty fast.

3. Feedburner

Feedburner is a Google service that’s been around for a long time, and you will read that it ought to be kicking the bucket any day now. Those rumors have been around since 2012, however, and it is still here and even fully integrated with Blogspot.

Flexibility: As with MailChimp, anything with an RSS feed can be used.

Advantages: There are a surprising number of services, styling options, and statistics associated with this free service, and you can look at your subscriber list and download them as CSV. You don’t need to add any plugins to your site, just a form Google provides the code for.

Disadvantages: Email comes from a Google address (though with the blog’s name) and at a delay of nearly 24 hours (regardless of time of posting). Your subscriber list is not local. Multiple category/CPT subscriptions require multiple signups. Google is known for yanking services with little notice.

Where’s the Feed?

A few notes on setting up Feedburner and MailChimp: WordPress feed addresses follow a pattern. In each address below, anything starting with “your” is to be substituted with your specific information; the rest should be left as-is.
Categories:
http://www.your-site.com/category/your-category-slug/feed
Custom post types:
http://www.your-site.com/feed/?post_type=your-cpt-slug
You can even do “per-category” custom post type subscriptions (quoted under the assumption that the “category” would be a custom taxonomy) with
http://www.your-site.com/feed/?post_type=your-cpt-slug&your-custom-taxonomy-slug=your-taxonomy-term-slug
Actually if your taxonomies are specific to post types you could go with just
http://www.your-site.com/feed/?your-custom-taxonomy-slug=your-taxonomy-term-slug
Make sure under Settings → Reading you have “Full Text” or “Summary” selected as desired for articles in the feed.

You can read more about feeds in the WordPress Codex.

The post Flexible Email Subscriptions in WordPress appeared first on rweber.net.