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.
- WordPress: custom-built theme (PHP/HTML/CSS)
- jQuery AJAX: updating News section content
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.
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.
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.