Blahblahblah Science, or B3Sci for short, started out as a modest music blog back in the early 2000s that has since an amassed an incredible track record of highlighting up and coming musicians. When the publishers first came to me in 2005 to break them out of their standard WordPress theme, I had very little experience with the platform and used their project as an opportunity to learn.

In 2010 I started to prod them to update the design in order to be more mobile friendly, but it wasn’t until 2015 that they finally took my advice. Not only were they looking to redesign their standard blog, but also add on a store for their burgeoning label specializing in vinyl releases. Unfortunately at the time I was mired in other work and had to tell them to seek out another designer/developer to update the site since I had no bandwidth to spare. Then in April of 2016, I received a call from the publisher informing me that the team they had hired to update the site had run into myriad problems with their responsive design and asked if I would be able to take a look under the hood. What I found was a mess.


Before and After
  • B3Sci Desktop Homepage 2005-2016
  • B3Sci Homepage 2016
  • B3Sci Mobile Homepage 2005-2016
  • B3Sci Mobile Homepage 2016

Correcting Course

The first major problem was that they had highly customized an existing theme without breaking it out into a child theme, making it impossible to tell what CSS they had changed from the foundation. So the first task was reworking the foundation of the responsive design, which required reverting back to the original WordPress theme and breaking out the customizations into a child. Once that was done, I started to streamline many of the previous developers solutions for custom features.

Author Assistance with Advanced Custom Fields (ACF)

The majority of B3Sci’s post follow a fairly standard formula. All new music posts have an artist, a country flag, an audio and/or video embed, links to the band’s social channels and website, and digital shopping channels. The original dev’s proposed solution was for the publishers to wrap each one of these elements inside specific HTML tags, looking something like this:

<div class="soundcloud-o" style="display:none;">https://soundcloud.com/wayvee/laaately</div>
<div style="width:100%;">
  <div class="artist-o" style="float:left; padding-right:5px;">
    <strong>Wayvee</strong>  (<a href="https://soundcloud.com/wayvee">Soundcloud</a>)
  </div>
</div>

Setting aside the fact that the publishers of this blog are not coders and would most certainly forget a closing div in future posts, breaking the entire page design, at the very least this snippet should have been using classes instead of inline styles. Then there’s the pain of repeating this template of code in every single post, and most importantly the fact that future designs may require this data to display differently. So to save the publishers and myself a lot of future headaches, I used Advanced Custom Fields to break out all of the artist data into separate fields like so:

Advanced Custom Fields for Blog Posts

Backend fields
b3-post-footer

Frontend display

The WordPress template takes care of the rest, using the country code to display the corresponding flag, and the rest of the fields to generate links to the artist’s social sites, website, and purchase locations. In the event that no link is provided for iTunes, Facebook, Soundcloud or Spotify, the artist’s name is passed along to the appropriate search query for each website.

ACF also allowed for post validation by making specific fields required. At the client’s request, some fields that are not used on every post were made required, but are ignored by the template by simply entering “no”. Some additional validation was added via JavaScript to make sure at least one music genre category is checked for every post.

A Simpler Slider

Featured Post by Advanced Custom Field

The previous developer was using a hacked implementation of Slider Revolution in order to achieve the full height featured post slide show on the home and category pages. I have used this plugin for clients in the past, but only when it required standard customization. B3’s design had elements such as an offset title/navigation overlay that was not possible with Slider Rev’s div and CSS configuration without extensive hackery. It also proved difficult to give the publishers an easy way to curate this content without having to manually alter what posts should appear in it for each category.

My solution was to use ACF to add a panel to posts where the post author could simply check a box marked “Featured?”, as well as provide a display priority (1-5) to dictate what order it should appear in. Then I a WordPress template to pull these posts into an HTML template, and jQuery/CSS to style it appropriately. This achieved a much simpler curation process for the slider, much lighter front end loading time, and no need to rely on a 3rd party premium plugin.

Soundcloud Music Player

A major request from the client was for a custom music player in the footer that controlled Soundcloud tracks embedded in the post. To accomplish this, the custom field “Soundcloud Link” is embedded in each post using WordPress’ embed feature. JavaScript then attempts to load the player using the Soundcloud API, and in the event of a failure or lack of permissions, the standard iFrame player is loaded into posts.

Woocommerce Customization

The original devs did not get very far in customizing the B3sci store, but judging from their past work on the blog templates, it was probably for the best that I didn’t have to rework their product templates and could just start from scratch. The store had a number of custom requirements that led me to deepen my knowledge of how to customize WooCommerce.

Products

Similar to B3’s blog posts, many products included video and audio embeds allowing customers to listen to the tracks included on the vinyl products. To accomplish this, these were separated into custom fields, but this time allowing for multiple tracks per post. The audio tracks are embedded using the custom audio player, while video tracks are displayed in a tab at the bottom of a product’s page.

Artist Pages

One of the first hurdles to overcome was the creation of an Artists page. At first I considered using a “Brands” extension that allowed each product to be associated with a parent brand, which would be the artist. The backend upkeep for this extension was more involved than the client wanted, so I came up with a way to pull off the same feature using ACF.

First I created a field group named “Store Artists” containing a dropdown of all the artists. This field appears on all products and is set when creating a new product. When a new artist is added to the store, the client adds them to this dropdown, uploads an image and selects the artist name to set that image as their thumbnail on the Artists page. That page is a custom template that generates a list of artists using the options in this field dropdown. For each artist WordPress finds the image associated with the artist name. If more than one product is associated with the artist, the thumnail links to a list of all their releases, otherwise it links directly to the single product.

B3 Shop Artists

Order Fullfillment

B3Sci had been using Big Cartel for the past year as an interim storefront, and wanted to maintain the same order fullfillment process with WooCommerce. The biggest challenge in this was matching the CSV export that Big Cartel allowed. To accomplish this, I used the Order/Customer CSV Export extension along with custom filters and hooks to inject non-standard data such as the product’s URL and artist name, and to perform custom sorting so that there would be a seamless transition with the storefront change over.