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'

Sites & URL structure

Category URLs

 Unfriendly by default

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

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

Infinite Scroll

Plugin Options

• Difficult to customise
• No hooks where needed
• Loads too many articles up front

Infinite Scroll

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

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
• Timber, ACF, ThreeWP Broadcast
• Infinite scroll articles
• Single Responsive WP Theme
• Responsive Google Ads 
• Ajaxing loaded Google Ads
• 10 Main Templates

Resopnsive Magazine style theme

• Re-usable partial templates
• Twig templating

• Friendly for funky widths
• Easier for vertical alignment
• Responds nicely

Theming

• All the good sass stuff
• BEM style syntax

• Bulk import of 30+ modular based scss files
• merge all js into one file

Theming

Overview

• WP Multi-site
• Timber, ACF, ThreeWP Broadcast
• Infinite scroll articles
• Single Responsive WP Theme
• Responsive Google Ads 
• Ajaxing loaded Google Ads
• 10 Main Templates

Questions?

metropolist.com.au