My good friend Gabriel Valdivia had a great idea to do interviews that push people to be as honest and candid as possible and then present the conversations in the same format they occurred.
I thought this was rad, so I helped him build a website that acts and feels like a chat app where you can browse the interviews. We got real geeky on the details, so I thought I would share some of them here:
- People seem to be surprised that this site runs on WordPress. The secret is Advanced Custom Fields. We crafted a backend that allows Gabe to fully manage the interviews and customize the related information accordingly. The chat bubbles are repeater fields and Gabe only has to choose whether it was himself or the interviewee who made the comment when entering the conversation.
- The theme is responsive and completely custom, based off Underscores starter template. Gabe layed out a front-end in HTML and we converted that code into the WordPress PHP templates.
- The chat bubbles auto-propagate into the correct shape depending on which bubbles come before and after. There are four types of bubbles: initial bubbles, closing bubbles, continuing bubbles, and single bubbles. It was important to have this step be automated instead of having to make this choice for every bubble in the WordPress back-end.
- Gabe gets to choose the color of every interview from a color picker UI in WordPress. He usually bases it of the primary color of the interviewee’s Twitter profile.
- The site has a read count at the end of each chat which gets kind of amusing being in public. We used a plugin called WordPress Post View and hacked it to fit our needs.
- The 404 page is exactly what you’d expect. Check out how it responds on mobile vs desktop.
- You can use the up and down arrows to move between conversations in any view. You can also tap the enter key to start composing a tweet. These commands are using jQuery’s keydown function.
- We added browser push notifications for new articles using OneSignal which seemed like the easiest way to get them up and running as fast as possible.