Hamilton the Musical

I was contracted by an agency in NYC called RPM to work with their internal team on some components of the Hamilton site redesign.

Project background

Because of the recent addition of new runs of the production (Chicago and London) as well as the US Tour they launched, they needed their website content needed to reflect these new undertakings. The client decided to take this opportunity to do a redesign as well.

Technologies involved

  • WordPress: custom-built theme (PHP/HTML/CSS)
  • Javascript: Swiper.js carousel
  • jQuery AJAX: updating News section content

CSS contributions

The site is built in WordPress, and the theme was hand-coded from scratch, so obviously there was a lot of CSS that had to be written to match the design we were working from.

Home logo presentation

One of the first tasks I did on the project was to tweak the CSS for the logo and silhouette imagery on the home page of the site. The logo needed to look good and fit “above the fold” as well as remain proportional to the silhouette imagery below the logo on all devices. To accomplish this I assigned a plethora of media queries specifically to these targeted elements that used not only device width and height features but also the orientation feature.

Animated slider background

The next CSS related task I worked on was to animate the silhouette background for the site in relation to the user’s slider position. When the user is on the “home” page position of the slider, the silhouettes are hidden, but as the user navigates to the subsequent slides the silhouette background fades in and then shifts left or right depending on which direction the user is going through the slides. I ended up writing a small callback function on the slideChange event to adjust the CSS transform position of the silhouette image in the background. The result is a subtle but engaging animation effect to enhance the user’s experience when navigating through the slides [read: pages] of the site.

Javascript contributions

Since the site was built largely using a javascript slider as the navigation mechanism, there was a lot of javascript to be written in order to adapt the javascript slider plugin/library chosen to the specific needs of the site.

Page menu

In order to maintain a familiar user experience for the navigation on the site, the design included a traditional menu that can be used for navigation in addition to the redundant slider (left/right) navigation. We had to link up the traditional dropdown menu links to javascript functions that would manipulate the slider to change directly to the corresponding slide. On top of this, some of the menu items corresponded to static pages not included in the slider for the site, and those needed to have href attributes with normal URLs.

Cities menu

In addition to the left-hand pages menu, there is also a right-hand “cities” menu to switch between content for each of the separate runs of the show. This cities menu needed to be updated every time the slider switched slides so that when the city was changed, it would load the content of the slide the user was currently on for the relevant “city” they chose from the menu. The result was a surprisingly simple and intuitive experience for the user, though the implementation was actually quite complicated.

jQuery AJAX contributions

The bulk of the work I contributed to this project was for the AJAX functionality around the content on the “News” slide on the site. I came into this project after the first round prototype had been built, but after looking over the AJAX code they had I decided it would be best to refactor the code to use more of the AJAX-related functionality WordPress has baked into its core.

Important refactoring

We ultimately decided not to use the REST API to get the data but instead used the ancestral admin-ajax.php interface to get the data using jQuery’s AJAX functionality. Originally the templating for the AJAX requested content was written entirely in JS, which I felt was not as scalable as it could be. The refactoring I did was to rewrite the templating for the AJAX requested content in PHP, and passed the AJAX content to the PHP using WordPress’ wp_localize_script function when calling the AJAX JS file.

Keeping it dry

I kept the JS functions DRY so that we could use the same function for both the pagination requests as well as the category filter requests for the News posts we loaded on the page. In addition, the templating for the AJAX content remained in PHP and was able to use template partials so that changes to the display of the News section grid would only need to be made in one place, instead of having to make changes to JS for templating as well.