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'

=

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

Freindly Category URLs

m.com.au/goldcoast/food
m.com.au/sunshinecoast/food

'Remove Category URL' Plugin

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

Sharing content between sites

Needs canonical tags to prevent duplication

Sharing content between sites

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

Share posts & pages 

between

multi-site sites

ThreeWP Broadcast Premium Pack

  • Copies ACF Content

  • References media

  • Copies Taxonomies 

ThreeWP Broadcast Premium Pack

Provides canonical URL meta tags

 Prevents duplicate content penalty on the google

ThreeWP Broadcast Premium Pack

Bonus: Duplicates users for other sites

ThreeWP Broadcast Premium Pack

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, ACFThreeWP 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

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
  • TimberACFThreeWP 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

Google Ads

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

Current Overview

Dev View

  • WP Multi-site
  • TimberACFThreeWP Broadcast
  • Infinite scroll articles
  • Single Responsive WP Theme
  • Responsive Google Ads 
  • Ajaxing 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

Overview

  • WP Multi-site
  • TimberACFThreeWP Broadcast
  • Infinite scroll articles
  • Single Responsive WP Theme
  • Responsive Google Ads 
  • Ajaxing loaded Google Ads
  • 10 Main Templates

Questions?

metropolist.com.au

deck

By Sam Brook

deck

  • 1,525