Customizing a magazine front page
with static and dynamic elements
We built a custom home page for Swisscom magazine for small and medium-sized enterprises to show static content alongside dynamic posts.
Intro
We had worked on the new redesign and migration of the Swisscom magazine for small and medium-sized enterprises to WordPress. The front page has 12 different sized boxes, with eleven of those filled with latest posts. The seventh section was set up to show the Jetpack widget with the most popular posts. Further posts were loaded dynamically without a page reload with a click on the “Further Articles” button at the bottom.
Request
The start page shows by default the latest posts first. The team at Swisscom wanted to be able to replace a post from one of the twelve boxes with a specific article or teaser that they would like to stay prominent on the page without it dropping down as they published new content.
A short-term solution could have been to manipulate the published date but that was not going to be good enough. Another way would have been to make the posts “sticky” but this was not adequate. We ended up implementing a custom solution allowing every single slot on the homepage to be defined with any published post or page. Any boxes where no page or post was defined was filled with a recent post.
Check out the short video to see how we the custom solution works:
Implementation
Read on to find out how we implemented it and what challenges we faced.
The site is multilingual with posts in German, French and Italian. Though with the current content strategy, not every article got translated into the other languages. This meant that the front page for each language could look different. It was not possible to allow the user to define the posts in one language and automatically pull the translations for the other languages. We had to allow the content managers to structure the homepages in the languages differently.
We decided to build upon the WordPress customizer so that we could have live previews when defining posts for a section. Unfortunately Polylang, the multilingual plugin that we use and love, does not have a way of saving settings in the customizer to a specific language. The solution that we came up with was to create a section for each language.
The large of the number of posts on site meant that a drop-down would have become very long and difficult to find posts. To solve this we used Customize Object Selector plugin which allowed us to have a searchable field instead.
The defined content needed to keep it’s position even when new posts were published while the recently published posts had to move.
In WordPress, you can define different variables to order the posts by but there is no method to query the database to place post N in position X. Loop through all of the posts to find the correct post and place it in the correct position was not performance friendly. We ended up saving the post-ID’s in their respective positions and querying the posts in that order.
Whenever a new post was published we merged the list of static posts with the latest posts. This also helps make sure that the same post was not displayed twice if the position of a current post was changed.
In the beginning, I mentioned that we were using infinite scrolling for the loading further posts. As we had modified the posts query the first query was only returning a total of 12 posts, which was correct but Jetpack Infinite Scroll figured that there were no more posts to be loaded. We needed to override Jetpack Infinite Scroll to be able to load more posts and making sure that those posts have not been displayed before.
Conclusion
For me, it was a fun project to work on as we had to use a combination of the customizer with the multilingual plugin and making sure the infinite scroll continued to work.