Sam Brook / Deepend / @webwaldo
Metroplist Case Studay
Overview
Site Info
Metropolist.com.au is a listicle style site which covers regional areas of Australia by The Urban List team
Overview
Client Specs
- Multiple 'regions' - single domain
- Shared content between regions
- Responsive
- Magazine style
- Auto-load content
- Google Ads
- Share buttons
- Sticky header
- Popular posts
- Subscription forms
- more things
Overview
Dev View
- WP Multi-site
- Timber, ACF, ThreeWP Broadcast
- Infinite scroll articles
- Single Responsive WP Theme
- Responsive Google Ads
- Ajaxing loaded Google Ads
- 10 Main Templates
Why not single site?
- Unique Category URLs
- Keeping visitors in same 'region'
- Per region settings
- Content per region
WP setup
Multiple 'Regions'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2154933/Screen_Shot_2016-01-21_at_10.03.31_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2154944/Screen_Shot_2016-01-21_at_10.08.29_PM.png)
=
One site per region + landing page site
All sites share the same custom theme
Sites & URL structure
metropolist.com.au Landing
metropolist.com.au/goldcoast
metropolist.com.au/sunshinecoast
Category URLs
Unfriendly by default
metropolist.com.au/goldcoast/category/food
metropolist.com.au/sunshinecoast/category/food
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2235269/cat-hate-it.gif)
Freindly Category URLs
m.com.au/goldcoast/food
m.com.au/sunshinecoast/food
'Remove Category URL' Plugin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2235285/cat-bro.gif)
m.com.au/goldcoast/category/food
m.com.au/sunshinecoast/category/food
m.com.au/goldcoast/food
m.com.au/sunshinecoast/food
Settings per region
ACF fields via JSON
- Same Theme per site, same fields
- Only modify fields locally
Settings per region
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2232098/pasted-from-clipboard.png)
Sharing content between sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2235316/bad-feeling.gif)
Needs canonical tags to prevent duplication
Sharing content between sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2235328/giphy.gif)
Needs to share page attributes
Sharing content between sites
- ACF Fields ( Repeater, Custom Media )
- WP SEO Fields
- Uploaded Media
- Post categories & Tags
ThreeWP Broadcast Premium Pack
Sharing content between sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238053/doc.gif)
Share posts & pages
between
multi-site sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2232317/broadcast.jpg)
ThreeWP Broadcast Premium Pack
-
Copies ACF Content
-
References media
-
Copies Taxonomies
ThreeWP Broadcast Premium Pack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238068/eyebrows.gif)
Provides canonical URL meta tags
Prevents duplicate content penalty on the google
ThreeWP Broadcast Premium Pack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238081/brows2.gif)
Bonus: Duplicates users for other sites
ThreeWP Broadcast Premium Pack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238121/cool.gif)
Has loads more functionality with premium packs
https://plainviewplugins.com/threewp-broadcast-premium-pack/
ThreeWP Broadcast Premium Pack
Current Overview
Dev View
WP Multi-site- Timber,
ACF,ThreeWP Broadcast - Infinite scroll articles
- Single Responsive WP Theme
- Responsive Google Ads
- Ajaxing loaded Google Ads
- 10 Main Templates
-
Load post summary as we scroll past article
- Update page URL with each article
- Update share icons with each article
- Customise response
Requirements
Auto Load Next Post Plugin
Infinite Scroll
YITH Infinite Scrolling
Plugin Options
- Difficult to customise
- No hooks where needed
- Loads too many articles up front
Infinite Scroll
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238151/try.gif)
Timber
+
React
+
jQuery Waypoints
Infinite Scroll
Roll a custom solution
Timber
- MVC style WordPress
- Easily return page data as JSON instead instead of TWIG template view
Infinite Scroll
React
- Manage UI & state
- Handle article ajax requests
- Update share icons
- Leverage the waypoints plugin to decide when to pull new articles
Infinite Scroll
jQuery Waypoints
- Load new article when the title hits the bottom of the screen
- Update the to the previous article when scrolled up
- Trigger update of share icons when they are past the title of the article
Infinite Scroll
Infinite Scroll
Demo ( via slow iframe )
Current Overview
Dev View
WP Multi-site-
Timber,ACF,ThreeWP Broadcast Infinite scroll articles- Single Responsive WP Theme
- Responsive Google Ads
- Ajaxing loaded Google Ads
- 10 Main Templates
Google Ads
Responsive & Repeatable
DoubleClick Problems
Google Ads
Google Ads
- Unique ID to embed
- Cannot Ajax
- Cannot repeat ads on the page
- Responsive ads problematic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238320/yarr.gif)
Google Ads
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238330/github-octocat.png)
jQuery DFP
Double Click for Publishers
Google Ads
jQuery DFP
- Embed via divs with data attribute
- Load ads on new elements
- Repeatable ad elements
- Easier responsive interface
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2238387/rock.gif)
Current Overview
Dev View
WP Multi-site-
Timber,ACF,ThreeWP Broadcast Infinite scroll articles- Single Responsive WP Theme
Responsive Google AdsAjaxing loaded Google Ads- 10 Main Templates
Resopnsive Magazine style theme
Timber
- Re-usable partial templates
- Twig templating
Flexbox
- Friendly for funky widths
- Easier for vertical alignment
- Responds nicely
Theming
SASS
- All the good sass stuff
- BEM style syntax
GRUNT
- Bulk import of 30+ modular based scss files
- merge all js into one file
Theming
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2241728/grid.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2241730/grid-part2.jpg)
Overview
WP Multi-site-
Timber,ACF,ThreeWP Broadcast Infinite scroll articlesSingle Responsive WP ThemeResponsive Google AdsAjaxing loaded Google Ads10 Main Templates
Questions?
metropolist.com.au
![](https://s3.amazonaws.com/media-p.slid.es/uploads/128669/images/2241758/VioletLoathsomeHorse.gif)