• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Reva Development Partners

Filed Under: BusinessTagged With: Genesis

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.

REVA Development Partners' original website on WordPress.com
REVA Development Partners’ original website on WordPress.com

In with the New

New REVA Development Partners, LLC website (as of February 2016)
New REVA Development Partners, LLC website (as of February 2016)

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.

team archive page
REVA Development Partners team archive page
team single page
REVA Development Partners single team 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.

Project Location and Project Slider fields
Project Location and Project Slider fields
Project Description (main content field)
Project Description (main content field)
Project Excerpt Metabox
Project Excerpt Metabox
Related News metabox for projects
Project Overview Fields
Project Status Metabox
Project Status Metabox
Project featured image metabox
Project Featured Image
Project Team Fields
Project Team Fields
Project Tour Video Embed Field
Project Tour Video Embed Field
Related News metabox for projects
Related News metabox for projects

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:

REVA Project Archive
REVA Project Page (Archive)
REVA Single Project Page
REVA Single Project Page

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.”

News Type metabox
Select News Type to display custom fields
Publication name, publication date, and link to original article
Publication name, publication date, and link to original article
associated project metabox
The Associated Project taxonomy creates a relationship between projects and news items

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.

REVA news page
REVA News Page
Single News Coverage Entry
Single News Coverage Entry
Single News Release Entry
Single News Release Entry

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.

Code for sliding the tiled galleries
Code for sliding the tiled galleries

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.

Tiled slide 1 (4 images)
Tiled Slide 1
hover effect on slide tile
Tiled Slide 1 showing project title on hover
tiled slide 2 (4 images)
Tiled Slide 2
tiled slide 3 (4 images)
Tiled Slide 3

Slide-Out Menu

SuperSide Me Menu, Expanded
SuperSide Me Menu, Expanded

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.

Full-width header (page featured image) and page title next to menu.
Full-width header (page featured image) and page title next to menu.

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.

publishing help screen
Top-level Help Screen

Colophon

Project Details

Client Name

Elizabeth Nix, Dahlia Park Productions

Client Company

REVA Development Partners, LLC

Project URL

http://revadevelopment.com

Base Theme

Genesis Sample

Project Fonts

  • Open Sans (body and headings)

Premium Plugins

  • Advanced Custom Fields Pro
  • BackupBuddy
  • Meta Slider Pro
  • SupersideMe

Free Plugins

  • Anti-Spam
  • Enable Media Replace
  • Genesis Communities CPT
  • Genesis Custom Footer
  • Genesis Custom Header
  • Glance That
  • Heartbeat Control
  • iThemes Security
  • Mail on Update
  • Meta Slider
  • My Eyes Are Up Here
  • Optimus WordPress Image Optimizer
  • Regenerate Thumbnails
  • Rich Text Excerpts
  • SG CachePress
  • WordPress Post Type Archive Links
  • WP Gallery Custom Links
  • WP Help
  • WP Rollback
  • WP Tiles
  • WP-Sweep
  • Yoast SEO

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email
« Knurld

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact