Building EE Sites with Structure

BUILDING EE SITES WITH STRUCTURE

Presented by Kristen Grotewww.kristengrote.com

Portland ExpressionEngine MeetupMarch 27, 2013

WHAT IS STRUCTURE & WHY IS IT GREAT?

Structure is EE's native Pages module on steroids.

BUILDING EE SITES WITH STRUCTURE

Client-Friendly Interface

BUILDING EE SITES WITH STRUCTURE

WHAT IS STRUCTURE & WHY IS IT GREAT?

EE's Edit Screen Structure

BUILDING EE SITES WITH STRUCTURE

WHAT IS STRUCTURE & WHY IS IT GREAT?

Native EE: http://www.mysite.com/blog/post/my-post-title

Structure: http://www.mysite.com/blog/my-post-title

Unnecessary Segment

Semantic, Organized URLs

Unrestricted Subpage Levels & URL Segments

1 2 3 4 5 6

WHAT IS STRUCTURE & WHY IS IT GREAT?

BUILDING EE SITES WITH STRUCTURE

BUILDING EE SITES WITH STRUCTURE

WHAT IS STRUCTURE & WHY IS IT GREAT?

Dynamic, Sortable, & Client-Manageable Navigation

BUILDING EE SITES WITH STRUCTURE

WHAT IS STRUCTURE & WHY IS IT GREAT?

Duplicate URL Titles

Native EE:

domain.com/contact/thank-you

domain.com/register/thank-you1

Structure:

domain.com/contact/thank-you

domain.com/register/thank-youGross!

● Download & install the Structure files like you normally would and install the module in EE

● The Pages module should not be installed

● Create all of your channels and templates before configuring Structure

BUILDING EE SITES WITH STRUCTURE

INSTALLATION & SETUP

BUILDING EE SITES WITH STRUCTURE

INSTALLATION & SETUP

● Configure each channel in the Structure settings

Every Structure channel should be assigned a default template, but you're not restricted to only that template (more on that later)

Page: A one-off entry that is part of the main sitemap (ex. Home, About, Contact, Blog Overview)

Listing: A large group of entries in the same channel that are best suited for categorization, sorting, & archiving (ex. blog entries, news items, products)

Asset: Channel entries that aren’t displayed as unique pages, but rather extra chunks of re-usable data (ex. sidebar touts, testimonials)

BUILDING EE SITES WITH STRUCTURE

INSTALLATION & SETUP

Publish Your First Entry

INSTALLATION & SETUP

BUILDING EE SITES WITH STRUCTURE

A Structure tab now appears on the Publish page

When You Publish an Entry with Structure, it Exists at 2 URLs:

BUILDING EE SITES WITH STRUCTURE

PUBLISHING ENTRIES

Native EE: http://www.mysite.com/blog/post/my-post-title

Structure: http://www.mysite.com/blog/my-post-title

TemplateTemplate Group

Parent Page

Entry Title

Child Page/Listing Entry Title

Hide Structure-assigned templates or template groups to prevent duplicate URLs.

BUILDING EE SITES WITH STRUCTURE

PUBLISHING ENTRIES

Hide the entire group... ...or just the template

Assigning Templates Per-Page

BUILDING EE SITES WITH STRUCTURE

PUBLISHING ENTRIES

"Default" Channel Content

Contact Template

● Can be multiple levels deep ● Can use any Structure-managed "Page"-type channel● Can be re-ordered & moved up or down levels● The URL structure will match the subpage structure

BUILDING EE SITES WITH STRUCTURE

SUB-PAGES

A large group of entries in the same channel that are well-suited to categorization, sorting, & archiving.

Examples: Blogs, Latest News, Products

BUILDING EE SITES WITH STRUCTURE

LISTINGS

1. Assign a channel as a listing in Structure settings.

Assign as a Listing channel

The template the individual channel

entries will use.

BUILDING EE SITES WITH STRUCTURE

LISTINGS

2. Assign the listing channel to a parent entry

BUILDING EE SITES WITH STRUCTURE

LISTINGS

The parent entry can be in any "Page"-type channel.

Tip: Use an empty "placeholder" channel for listing parents with no unique content.

BUILDING EE SITES WITH STRUCTURE

LISTINGS

● Assign the template per-entry

● SEO data can still be applied

Use NSM Publish Hints to help the client understand the purpose of the page.

BUILDING EE SITES WITH STRUCTURE

LISTINGS

BUILDING EE SITES WITH STRUCTURE

CATEGORIES, ARCHIVES, TAGS, & AUTHORS

Zoo Triggers: http://devot-ee.com/add-ons/zoo-triggers

Install & add {triggers:entries} to your listing channel entries tag:

BUILDING EE SITES WITH STRUCTURE

CATEGORIES, ARCHIVES, TAGS, & AUTHORS

Use {triggers:entries_title} in place of {exp:channel:category_heading}

Output full category & archive navigation with{exp:zoo_triggers:categories} & {exp:zoo_triggers:archive}

BUILDING EE SITES WITH STRUCTURE

CATEGORIES, ARCHIVES, TAGS, & AUTHORS

Use triggers: segment variables in conditionals instead of native EE segment variables

http://domain.com/blog/category/maru

{segment_1} {triggers:segment_2} {triggers:segment_3}

Flexible Sidebars Using Playa: http://www.train-ee.com/courseware/free-tutorials/comments/flexible-sidebars-using-playa/

BUILDING EE SITES WITH STRUCTURE

ASSETS

Code Your Templates Exactly the Same as You Would Without Structure

Without Structure:

BUILDING EE SITES WITH STRUCTURE

TEMPLATING

With Structure:

Display all sub-pages within a section:

{exp:structure:nav start_from='/{segment_1}'}

Dynamic Navigaton with {exp:structure:nav}

BUILDING EE SITES WITH STRUCTURE

TEMPLATING

Pages can be omitted from dynamic navigation by using the "hide from nav?" dropdown in the Structure tab.

Display all top-level pages:

{exp:structure:nav start_from='/' max_depth='1'}

Breadcrumbs? We got yer breadcrumbs right here:

{exp:structure:breadcrumb}

BUILDING EE SITES WITH STRUCTURE

TEMPLATING

StructureFrame Fieldtype

BUILDING EE SITES WITH STRUCTURE

TIPS & TRICKS

Standalone Fieldtype Supported in Most 3rd Party WYSIWYGs

Prevent a duplicate/broken homepage by updating the Structure URL to "/"

BUILDING EE SITES WITH STRUCTURE

TIPS & TRICKS

Use {structure:page:title} to output the current page's title without a channel entries loop.

BUILDING EE SITES WITH STRUCTURE

TIPS & TRICKS

BUILDING EE SITES WITH STRUCTURE

THANK YOU!Links & Resources:

Structure on Devot:ee: http://devot-ee.com/add-ons/structure

Structure Docs: http://buildwithstructure.com/documentation

Structure Tags: http://buildwithstructure.com/tags

Zoo Triggers: http://devot-ee.com/add-ons/zoo-triggers

NSM Publish Hints: http://ee-garage.com/nsm-publish-hints

Flexible Sidebars Using Playa: http://www.train-ee.com/courseware/free-tutorials/comments/flexible-sidebars-using-playa/