Reva Development Partners

Project Description

I had the privilege of working with Danielle Avila-Johnston and Elizabeth Nix on this project, and remain deeply grateful for the help Adam LaBarge gave me with my JavaScript problems.

From My Proposal

Reva Development Partners is a Chicago-based real estate development company that specializes in building high-quality, multi-unit rental housing. Reva’s existing website was created in-house on WordPress.com before the company had completed any projects. By the end of 2015, Reva Development Partners needed a new website to align with the goals of the business and the target audience.

Specifically, Reva Development Partners needs a website that

• Showcases completed projects through the use of photos, architectural renderings, and video;
• Includes an online press room that highlights press coverage, reprints press releases, and includes assets useful to reporters;
• Positions Reva as a leader in the industry and provides credibility to potential investors and municipal governments.

Right, so what does that look like?

We needed to build a site that was both visually striking and much more polished than the existing site and the competing sites, and also added functionality specific to Reva’s needs. Broadly speaking, the requirements broke down into three areas: the home page slider, the project pages, and the press room—and let’s not forget the documentation.

A Look at the Old Site

Reva’s old site was built some years ago on WordPress.com, when Elizabeth was one of my Mediabistro students. There are strict limitations on what you can build on WordPress.com. Even with a premium upgrade to allow you to use your own domain name and modify your CSS, there’s just too much you can’t do. Not only did everything have to be a post or a page, entirely too much content had to be entered in a labor-intensive way.

In with the New

For the new site we had Danielle’s elegant, minimal design, Elizabeth’s copywriting, and a good deal of custom functionality, which I’ll break down into sections here.

Team Pages

The team pages were fairly straightforward to build. First I created the team post type in my functionality plugin. Then I used ACF Pro to add some custom fields for contact info. Finally, I created the single and archive templates. For this site, we didn’t need any team taxonomies, but it was important to use custom excerpts.

Because the featured images on the single and archive pages were different shapes, I ended up installing the My Eyes Are Up Here plugin, which ensured the correct part of the photo got into the square thumbnail on the archive page.

Projects

The projects are the heart of this site. The whole point of that elaborate home page slider is to get site visitors to the Projects archive—REVA’s equivalent of a portfolio page. Instead of basing the projects on a portfolio page, I used Jackie d’Elia’s Genesis Communities CPT plugin, since it was created with real estate in mind and comes with a handy archive display. (We didn’t end up using that, because the final designs came out to be different, but it was nice to get to know the plugin better.)

Projects needed to have a lot of different information attached to them in addition to the standard title, description, and featured image. Each project needed a location (city and state), a set of overview fields (project type, project stats, product(s), completion date(s), developer, general contractor, architect, financing. Plus we needed to show a slideshow at the top and a tour video after the main content. Oh, and related news items. AND we needed to show each project’s status (in development, under construction, in lease-up) on the archive page. We also needed good manual excerpts for the archive page.

That meant a lot of work with Advanced Custom Fields and a lot of tinkering with the single and archive templates. I decided to use Meta Slider Pro for the sliders (on account of the thumbnail navigation) and specify a field for the shortcode, as well as a field for the video embed. That would ensure that whenever someone created a new project, everything would end up in the right place. Since the single edit screen is difficult to capture, I broke the different fields into separate images.

That makes entering a new project almost as much work as creating a new portfolio entry on this site. 😉 Once all that information is entered, however, the results are worth it:

News

We didn’t end up creating a full-blown newsroom for REVA, but we did divide news into “News Coverage” and “News Releases” and add some custom fields for each. I also renamed “Posts” to “News” and added a “News Type” taxonomy and also a “Related Project” taxonomy in order to be able to show the correct news items on the single project pages.

The client was very specific about how they wanted the main news page to look, so it’s a custom page template and not a regular archive page. The “read more” links for the news releases needed to point to the single entry, but for the news coverage, to the original article. The extra fields for news coverage items (publication name, publication date, link to original article) appear in the edit screen when “News Coverage” is checked under “News Type.”

The news pages look like this. Since the single news coverage entries are indexable, I had to style them, even though most people will not read them on the site.

Home Page Slider

I’ve used sliders on a lot of websites in my time, and none of them proved as complex as this. In essence, each slide needed to be a tiled gallery, and each image needed to link to one of the project pages. But we couldn’t just pull in the featured images from each project, because the slider images and the project images needed to be different. Plus each project appears on more than one slide, and each image tile in the slide has to appear in a specific place. And to make it more fun, one image tile in each slide doesn’t link to anything–it’s a stock photo.

I could not find a plugin that would do all of this, and writing one is not only above my pay grade but definitely above what the client had budgeted for the site. (I have the beginnings of an inkling of how to do a better job of building this now, and I would charge at least as much as I did for all the other dev work on the site.)

I ended up patching together three things to make this slider: the WP Tiles plugin (free), the WP Gallery Custom Links plugin (free) and Sridhar Katakam’s tutorial about creating a slider using Slick jQuery. I used WP-Tiles to create the tiled layout for each slide and add the hover effect to each image and WP Gallery Custom Links to connect each image to the correct project. Then I wrapped each gallery in Slick so I could slide it.

This is really, really kludgy, because I have to specify the image IDs in the shortcode inside of the functions.php file. It’s not something the client should be going anywhere near. Fortunately, it will be a while before REVA needs to add any more slides, and they expect to come back to us for that kind of thing.

And then I ran into an issue with JavaScript loading sequences where the tile container didn’t display at the proper size on all screens (or in all browsers), and either content was cut off or white space was added before the content or after the footer. It was utterly hair-tearing. That’s when Adam LaBarge came to my rescue.

The result does look pretty awesome, though.

Slide-Out Menu

In keeping with the overall minimalist aesthetic of the site, the client wanted to use a hamburger menu even on full-sized desktop screens.

After a bit of not-very-successful experimentation, I decided what we really needed was Robin Corbett’s SuperSide Me plugin. (Sometimes it feels a little incestuous knowing all the people whose products I use, but mostly it’s darned convenient when I want to ask a question.)

The menu’s settings let you dictate its width and position. All I did was change the styling so that on small screens the menu link was centered at the top, rather than at the top right. And I made sure that the word “Menu” appeared next to the hamburger icon.

Other Details

Two final modifications were the full-width page headers created from page featured images, and moving the page titles above the header next to the menu icon. I wrote a function to display the news page header on single news pages.

Documentation

I also created extensive documentation for the site using Mark Jaquith’s WP Help plugin. I walked through how to create and edit team members, project entries, news items, and sliders, and I embedded the video from the video walk-through I did with the client. Writing documentation is very time-consuming and I will remember to bill more for it in the future.