WPForms is one of the most popular WordPress plugins with almost 170M downloads and more than 6M active installs. Since March 2016, when it was released, the plugin has crossed many milestones, like great new addons, releases and enhancements, a growing number of VIP Members and social media subscribers, and big achievements like reaching the Top 10 Most Popular WordPress Plugins.
To properly organize these milestones and built trust among the customers, the company needed a page with a timeline that would allow the WPForms team to share the milestones easily.
So, Matt Brett designed the WPForms milestones page on a Figma project and I was in charge of implementing it. To do it, I created a Milestones custom post type and made all the posts publicly unavailable, because we wanted only the archive page that is the Milestones page itself. I’ve also removed the support for most basic features, including the editor and excerpt, and, using Advanced Custom Fields, I added only the fields to create each type of Milestone (small icon, large icon or image block). Besides that, to enhance the UX for the content team, I added a metabox with an instant preview according to the ACF fields selection.
After implementing the CSS layout, I used the awesome Animate.css library to animate the milestones entrance on the page, which is triggered by the Intersection Observer Javascript API. And, as we envisioned hundreds of milestones and we wouldn’t want to paginate, I also implemented an AJAX pagination that starts to load the next page when reaching half of the milestones loaded. This showed enough to ensure the natural page flow without interruptions to wait for the next page.
The biggest challenge I faced during this development was a layout issue when three or more image blocks were stacked consecutively (or two image blocks on the same side of the timeline). Currently, there is no case of this on the live page (October 2023) and the content team is oriented to avoid such cases by trying to always use minor milestones between the blocks. Even so, I thought it would be smart to ensure that the layout wouldn’t break no matter the order of the milestones the content team was publishing. So, after trying to fix it with CSS without luck, I decided to add a “phantom” minor milestone every time two image blocks appear together in the loop. As the distance between the milestones in the timeline is fixed, skipping one milestone was enough to solve the problem.
