Behind the Scenes of the Redesign

Welcome to Version 4.0 of—a serious retooling that once again uses WordPress, but is quite different under the hood. One of my goals with the new site is to feature more tutorials and articles, so I thought it would be appropriate to kick things off with a look at the development process. I’ve learned a lot of development skills over the years, and it’s almost always due to the generosity of online tutorials, so as a web-savvy artist, I wanted to lift up the curtain for anyone getting started with WordPress development. Plus this should be a good walkthrough of my design process.

old website article

The previous version of the site featuring graph lines, ripped paper, and chamfered corners.


Design Goals

Part of the motivation for a redesign was simply outdated technology in the old theme—Wordpress now supports responsive image loading by default, eliminating the need for a complicated polyfill function I had been using to achieve the same effect. But I also wanted to expand the content of the site to include a freelancing portfolio and more in-depth, better organized blog posts.

  1. Update theme with current technology and make it easier to maintain than the old one.
  2. Advertise freelancing skills and past work.
  3. Skew the visual design more towards digital, computer-focused aesthetics to match the trends of my work.
  4. Prepare for more readable and extensive blog posts.


I drew ideas from a variety of portfolio sites and other sources. Some common themes ended up being clean grid-based layouts, big areas of color, and thin geometric lines. I’m also always drawn to tactile paper-like pages, but I didn’t want to include any actual texture images like I have in past versions of this site. Like Google’s Material Design guidelines, I wanted to acknowledge the classic humanism of print media while leaning into more futuristic terrain. The warm beige and modernist typography of N+1 is a nice example of that balance.

Oversize typography is a big trend these days, and I loved the huge, page-spanning headers of designer Arturo Wibawa’s portfolio. I ended up riffing on that layout, but simplified the decorations from lush illustrations to simple geometric shapes—still keeping a little animation in the headers to liven things up.


After reading up on the variety of frameworks and starter themes for the ambitious WordPresser, I’ve been using JointsWP for several recent projects. JointsWP adopts the Foundation framework to work with WordPress, and has great commenting to help you figure it all out. A framework provides pre-set styles for content, but leaves a lot more room for creativity than your typical theme. Major frameworks like Bootstrap and Foundation also include preset classes designed to arrange content into grid-based layouts; instead of tinkering with column widths in CSS, you can assign classes like column small-12 medium-6 to establish consistent, responsive columns in your HTML. I spent a lot of time referring to Foundation’s docs on the grid layout, which is super customizable.

Importantly, JointsWP also supports SASS, which I refuse to live without if I can help it. For the uninitiated, SASS is next-generation CSS that allows you create variables and nested styles (among other benefits) that get complied into standard CSS by some sort of pre-processor. JointsWP requires installing a few dependencies and basic Terminal commands, but the docs walk you though it. The final build automatically compiles your SASS, and minimizes CSS and Javascript into compact files for smaller file size.


The Look

I was still attached to the bold rust color used in the previous version of the site, so I wanted to keep that as a primary color. Some of the early sketches for the design used light teal backgrounds to create a cool, spacious environment, and while that never panned out, I did keep two shades of teal in the final color palette. The tan background color took a lot of tweaking to get just right, but because I set the colors as mixins using SASS, I was able to adjust the HSL values for the color, even after I had built a bunch of the site.

While it’s common practice to limit a site to a pair of fonts, I wanted to use a monospace font for navigation and captions to underscore my focus on digital work. Monospace fonts can be annoying to read extensively, and I wanted a heavy, funky font for the main headers since I was devoting so much screen space to them—so that meant three fonts.

sample header and body fonts

Kanit Medium for the headers

A subtle injection of sci-fi without seeming corny. Google calls it “a combination of concepts, mixing a Humanist Sans Serif motif with the curves of Capsulated Geometric styles.”


Roboto-Mono for navigation and captions.

Initially because it seemed like an easy choice to use this and the primary Roboto for the body text, but compared to some other monospace fonts, this one has a nice thin line-weight that compliments some of the tine vector art used throughout the site.


Overpass for body text.

A little more geometric than stalwarts like Roboto and Open Sans, and a little more delicate flair too. I toyed with using a serif font to accentuate the print aesthetic, but found a sans-serif font to be more versatile for short excerpts and other layout elements besides long body text.


Project Gallery

One of the main functions of this site is to display my projects, so establishing that functionality was one of my first steps. I don’t usually think about my work in terms of specific media, but with year-long interdisciplinary projects and the concurrent desire to advertise freelancing expertise, I wanted to use some sort of tagging to allow users to filter projects by media. There are a lot of options for filtering posts by tags, but I particularly like animated grids that don’t require a full page refresh. There are a lot of WordPress plugins that do this, but none of them quite behaved the way I wanted, and it’s more fun to figure out how these things work anyway.

For the Projects page, I used the Isotope Javascript library to display and filter the grid of posts. The posts are called in a custom loop on that particular page, and Isotope handles everything by assigning class names to the individual projects and the container div. Besides the filtering buttons at the top of the page, Isotope smartly packs all the posts together in a masonry layout. I followed this amazing tutorial by Alicia Ramirez.

Homepage Layout

The homepage offers the most freedom for unusual layouts, and I wanted to present a variety of content as an encapsulation of the entire site. I experimented with a ton of layouts, making simple mockups in Illustrator using some dummy images and the established color palette. Some of the early designs displayed a slew of small thumbnails; I even tried animating them to fade in and out in an effort to summarize the breadth of my work. But I eventually settled on a short video reel that would show some more dynamic content up front. Some of these layouts are very rough, but they show a fun evolution of the layout before it arrived at the design.

The two layouts above featured monochrome thumbnails fading in and out of view, and a navigation menu placed just below the fold. I ended up removing the nav menu entirely from the homepage in order to focus on the content. Recent thought has led some designers to hide nav menus at the bottom of the page or disperse the links throughout the page to keep users engaged with the content on the current page. We’ll see how it works out!

The final layout for the featured projects involved some shuffling around, but I wanted to keep the big “Projects” header extending off the edge of the page on large screens as an asymmetrical flourish. I also wanted the header to be at the top of the section on for narrow screens, so some responsive behavior shuffling was certainly called for—but I couldn’t get it to work quite right using the native Foundation grid. Instead, I took the opportunity to play with CSS Grid, which has been the talk of the web lately. I didn’t want to rely on it too much; even though it’s supported by all modern browsers, plenty of people don’t update their browsers regularly.

I found Grid to be a fantastic tool, though I only scratched the surface of it’s abilities to rearrange content and divide space equally. I learned the basics from Learn CSS Grid and CSS Tricks. If you’re like me, you may quickly get overwhelmed with all the options, so I just played with some dummy content to figure out what I needed.

The content is rendered with the regular Foundation grid up to a certain breakpoint, and then switches over to Grid. If the user is on an older browser, it just ignores the display:grid properties and renders with the red header spanning the entire page.


Unique Headers

For most of the development, all the headers featured the red background and expanding circle seen on the projects page. Later, as I created pages for search results, and tag and category archives, I wanted to use colored headers to differentiate blog posts from projects—which seemed to necessitate assigning unique colors and background SVG for each of the main pages.

gallery of header images

Each of these headers features a different animation, though all the artwork is very simple. When these kinds of animations are done well, they add a specific personality and feeling to the word, as users click on the navigation menu, it should trigger a tiny buzz of kinetic stimulation. I don’t know if all of these are successful, but I do know I love watching that gear spin on the service page.



Pretty standard stuff here, but for anyone getting started with WordPress, here are some of the key plugins I’m using:

  • Jetpack: this does all sorts of things, but I mostly use it for the sharing icons that appear on projects and blog posts.
  • Ninja Forms: A reliable contact form that’s very customizable; again, I’m just using the basic functionality to avoid posting my email address online and falling victim to spammers.
  • Envira Gallery Lite: A little prettier than the default WP galleries, for pages where I want images to link to lightbox displays of the full size. I used to use the paid Envira gallery, but it runs an annual charge and the free version suits me just fine.
  • Feed Them Social: Creates the Twitter and Instagram feeds on the homepage, which are styled by by own CSS.
  • Advanced Custom Fields: An essential plugin for creating custom fields for different post types. It’s easy enough to create custom post types in your php files, but ACF makes it super easy to create custom text boxes and dropdowns in the WordPress editor, and then retrieve that data in your loops. An example of this is the “Location” and “Year” fields for each project.

WordPress Fixes

In the image above, you can see my custom post types for “Projects” and “Blog Posts.” In my previous theme, I created these post types within my theme’s functions.php file. This was a big mistake, because it implanted content within the theme, which should really only control the appearance of a site. This makes it difficult to switch themes, so when I built the current version of the site, I was sure to include the custom post type (CPT) functions within a custom plugin. For anyone shifting from CPT-in-theme to CPT-in-plugin, you must first remove or comment-out any reference to the CPT in your theme, and as long as you use the same name for the post type in the new plugin, your content will still load from the database.

Creating a plugin is as simple as creating a PHP file with your code and placing it in the plugins folder. In fact, to make sure I never accidentally deactivate this plugin, I placed the file in a folder called mu-plugins which automatically activates it outside of the normal plugin interface.

One hiccupup was that my custom post types weren’t automatically included in the archive pages. By default WordPress uses the template file archive.php when returning searches or lists of “all posts with ______ tag.” The Projects and Blog pages are custom templates, so I didn’t run into this issue until the end of development when I was styling the pages for various search results. After searching online, I fixed the issue by adding this code to my functions.php:

// Add custom post types to archives
function add_custom_types( $query ) {
  if( is_archive() && (is_category() || is_tag()) && empty( $query->query_vars['suppress_filters'] ) ) {
    $query->set( 'post_type', array(
     'post', 'project', 'blog_post'
	  return $query;
add_filter( 'pre_get_posts', 'add_custom_types' );

Also regarding those annoying search results pages, you’ll generally see a big header at the top that says something like “Tag: Audio” which is kind of ungainly. Some more Googling turned up this bit of code that removes the preface from category and tag archives—or in one case here adds a custom preface reading “Projects featuring:”

// Format Archive titles
function custom_theme_archive_title( $title ) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    } elseif ( is_tag() ) {
        $title = single_tag_title( 'Projects featuring: ', false );
    } elseif ( is_author() ) {
        $title = '' . get_the_author() . '';
    } elseif ( is_post_type_archive() ) {
        $title = post_type_archive_title( '', false );
    } elseif ( is_tax() ) {
        $title = single_term_title( '', false );
    return $title;

add_filter( 'get_the_archive_title', 'custom_theme_archive_title' );

I have a handful of other custom functions, but those two seemed really annoying and the solutions were so simple that I wanted to share in case anyone else ever bangs their head against that particular wall.


Crash Course in SSL

Since Google is now giving preference to sites beginning with HTTPS, I needed to upgrade my site’s security even though I’m not handling any user info besides the contact form. Most web hosts provide some sort of SSL certificate you can purchase through them, but it can be a substantial addition to your annual hosting bill. One free option is Cloudflare, which hosts a cached version of your site on their servers, and acts as an intermediary between users and your actual host. The main limitation of this is that the connection is only encrypted between the user and Cloudflare (but not between Cloudflare and your host). Cloudflare also does some magic to help resources load faster.

Setting this up is as simple as logging into your web host and updating the DNC names to ones provided by Cloudflare—BUT results may vary. In this case, I was greeted with a totally unstyled site after servers updated (even the WordPress dashboard). Besides switching the DNS names, I also discovered these essential steps:

  1. Install the Cloudflare WordPress plugin (duh). Fixes some of the broken links that are still trying to connect over HTTP, and ensures everything works smoothly.
  2. Install SSL Insecure Content Fixer. You’ll probably still have some URL’s in your theme, posts, and plugins, that are referencing the old HTTP address, and while you could hunt them all down and replace them, this plugin does it automatically and instantaneously.



Leave a Reply