While working for Greystar under contract from KForce, my first completely new build was for West 5th in Los Angeles, a luxury apartment complex. As the first step to any of our property builds, a single-page welcome website was designed in Figma in order to park the domain, collect visitor lead information via a simple Gravity Form, and served as a starting point for the coming design.
Landing Page Mockups:
With the landing page design approved, the dev cycle was kept to a single day. A basic Genesis child theme was established with a single page template using shortcode to embed the form. GTM containers were also established which would eventually roll into the full live website to preserve historic stats pre- and post-launch.
Once the landing page was live and tracking traffic, we could focus on building the more extensive permanent website. Multiple views were designed to show the various pages and state changes, such as with the top promo bar or nav menus open/closed, the page-specific popups, accordion or tab interaction, and lightbox photo galleries. Some of the highlighted mockups are shown in this post’s main gallery, but the mobile-specific mockups are featured below:
Mobile-First Mockups:
The tech stack for new builds at Greystar has been to create an Understrap-based child theme and ACF Pro. All page content and images would be controlled via the ACF metaboxes. WP Go Maps Pro powered the neighborhood page’s map and categories filters, handled with a combo of shortcode for embedding the map and custom jQuery to toggle an invisible filter checkbox for each category and pass that category’s ID to the map for live filtering. All CSS and JS were run through build scripts (CSS-compile, CSS-minify, Terser, Rollup, etc.) to make sure asset size and count were as low as possible, and all JavaScript was kept to vanilla Bootstrap functions.
The sitemap embedded into the tab on the floor plans page was an iFrame from the company Engrain. The floor plans and unit availability functionality of the website used a custom in-house plugin. The floor plan page template content loops were built into the Greystar Understrap child theme and ready to handshake with the plugin. We used the client’s RealPage API feed and credentials in our plugin using a “wp_remote_post” request and “file_put_contents” function to parse the responses into JSON files and logs (depending on success status).
There were endpoints for base floor plans (the main data container, converted into custom post types), individual units nested within, and unit availability statuses. Since each floor plan always had a unique ID within the source data we could store these with each CPT and check against the data feed during each fetch to make sure data or image updates are processed. Data fetches and updates would occur regularly based upon a customizable CRON schedule. The default would be to only check for new floor plans and units once a day but check for availability every ten minutes. These CRON jobs were also available in the WordPress admin with logging and interval options for easy troubleshooting.
Eventually, the lead capture forms were embedded from Funnel Leasing who also provided a Dynamic Number Injection script that would allow the phone numbers on the website to update based upon the referral ID being passed to the site from one of its marketing partners so that each lead source could have a custom phone number assigned for analytics purposes. Some of the property’s lead sources would string together URL parameters, sometimes including custom strings of characters, so an “attribution helper” JavaScript was placed in a custom conditional GTM container to catch and preserve these across internal website links to make sure that visitors would be served consistent information during their session without having to implement a cookie policy.
