Core Navigation logic
The core logic is: Primary navigation > TAXONOMY navigation > Search navigation
Planet 4 is designed to engage. it does so by inviting users to Take Action or by enabling them to Explore and understand the issues we are campaigning for and then taking action on. Or by giving them the tools to Donate and support the organization financially.
With this in mind, the 3 key entry points Act, Explore and Donate drive the user to either participate (Act), learn (Explore) or fund (Donate). We call this the Primary navigation.
The Primary navigation is then backed up with CATEGORY / #Tags navigation that forms the Taxonomy of the Planet 4 sites. This structure allows users to drive themselves right to the heart of the issue/campaign/topic. Every single Post or Page is backed up with a CATEGORY/IES and #tag/s. These cross-reference and interlink. Situated at the top of every content element, this organic navigation pulls out content related to one another, allowing in-page navigation to flow naturally.
Cross-site access to the hashtag navigation is driven by the site’s brain – the Search engine. Users can use the search engine to mine straight to the heart of an issue and then explore and act upon it. This allows P4 users to step away from the tunnel vision that more traditional drop-down menus offer.
See below highlighted the Primary Navigation / CATEGORY /#Tag / Search
Lastly, as every responsive website, the footer serves as backup navigation, grouping static and organizational content.
Need to set up your P4 Navigation? Check >> Setup P4 Content (Navigation, Footer, Menus and Favicon)
Primary Navigation (top menu bar)
The Primary Navigation is designed to encourage visitors to take action on issues and topics that are meaningful and important to them.
Need to set up your P4 Navigation? Check >> Setup P4 Content (Navigation, Footer, Menus and Favicon)
Taxonomy
Through consistent CATEGORIES and #tags (which form the P4 Taxonomy), users will access content they’re interested in quickly, naturally and easily.
>> CATEGORIES are used to represent the issues/baskets AND/OR a post type (press release, publication or story). Content can have multiple Categories.
>> #tags are used to recognise campaigns or topics within a broader Issue. Content can have multiple Tags.
The P4 “Breadcrumb”, using POST-TYPE, Categories / Issues and #Tags
|
Need to set up your P4 Taxonomy? Check >> Taxonomy: Categories and Tags
Home
The goal of the Homepage is to introduce site visitors to all of the opportunities for taking action through Planet 4.
Built with Blocks, this page contains curated content that is designed to amplify interest and highlight urgent issues and showcase the possibilities for exploration throughout the website.
Homepage – Design using blocks
Blocks to be used in the Homepage: Carousel header, Two columns, Gallery, Articles, Columns, Happy Point
Act
This page contains direct calls to action for site visitors to respond to.
A snapshot of the New Zealand “Act”
|
The focus and framing of all the content here is the what people can do to power the movement and address and solve ecological problems.
Act page – Design and blocks
Blocks to be used in Act: Covers, Take Action tasks, Happy Point
Title, Sub-title and Description in Act
Explore
The content on this page is organized as an issue < > first approach to actionable content. This means that if a site visitor is interested in a topic such as Oceans, they can directly access that content.
A section of the International “Explore”
The framing of the content here is focusing on the positive vision for the future and what needs to be done to maintain or reach that goal.
|
Explore – Design using blocks
Blocks to be used in Explore: Split two columns, Articles, Happy Point
Title, Sub-title and Description in Explore
ISSUE pages
Associated to CATEGORIES, issue pages are designed to explain the vision behind a specific topic or problem, and pull together both opportunities to take action and informational content.
|
A section of the International “Nature” issue page
Issue page – design and blocks
Blocks to be used in the Issue pages: Gallery, Covers, Articles, Happy Point
|
CATEGORY and Issue page: same title and slug to obtain a perfect ISSUE PAGE
Need to set up your P4 Taxonomy? Check >> Taxonomy: Categories and Tags
#Tag pages
Tag pages are created to dynamically pull out content (pages, posts) which has them assigned.
KEY INFO – whenever an editor saves a tag, if a redirect page is not defined, a WordPress page gets automatically created and assigned to the #tag, keeping the same default design and url
The International #Forests tag page
As an admin, go to Pages > Tags and customize your #Tag page.
You need to give the Tag a name, slug, Description, background image (See “Images & Videos” for size tips)
KEY INFO – Tag pages are dynamically populated by the content tagged with them
Edit mode of #Tag pages, by selecting the Post Type/s you determine which type will be pulled out.
The last step is to define the background and the Happy Point (aka Subscribe) images.
Setting the “image subscribe” (Happy point) in Edit mode and Live page
Auto-Generation of pages when saving a Tag
KEY INFO – whenever an editor saves a tag, if a redirect page is not defined, a WordPress page gets automatically created and assigned to the #tag, keeping the same design and url
When this process finishes, no tag pages will have auto-generated content any more.
The newly created tag pages will:
- have the name #tagname (E.g. #Oceans or #Climate)
- have the same design as the auto-generated #Tag pages. Any changes can be done though, since these will be regular pages
- have the same url /nro-name/tag/xxxxxxxxx
- not have any category, parent or tag when automatically created. Editors can assign Taxonomy / page parenting anytime
- be accessible when clicking on the assigned #Tag
- not be crawled by search results
Customise your #Tag pages
KEY INFO – whenever an editor saves a tag, if a redirect page is not defined, a WordPress page gets automatically created and assigned to the #tag, keeping the same design and url
The newly generate page has the same design of the Auto-generated #Tag, and you can add content or Blocks to make it unique.
To change the auto-assigned page:
- Create your new tag page
- Go to your existing #Tag page and select “Edit Tag“
- Click on “Redirect page”, select your new page and hit “Save”
Change url of your #Tags
In Settings > Permalinks you can customize your Tag pages url, to change from /tag/xxx to /whatever/xxx
Need to set up your P4 Taxonomy? Check >> Taxonomy: Categories and Tags
Evergreen pages
“Evergreen” pages contain static content that is likely not to change often. This is why they are not linked to any specific functionality, like Take Action or Issue pages. They simply display content.
Example of Evergreen pages are Our Values, Copyright and Community Policy.
|
No page parenting and “Evergreen” Page template for the International “Privacy & Cookies” page
Sitemap page
A very cool way to guide users through your content is to insert a sitemap in your Footer (>> Get your P4 Sitemap or set up your Footer)
|
- create a page
- give it the “Sitemap Page” Template
- publish it
- insert the Link in your footer (>> set up your Footer)
Creating a sitemap page is easy, just give a new page the “Sitemap” template and publish it, content is pulled out from your P4 taxonomy automatically
And this is how it looks in the front-end
The automatically generated GP Brazil sitemap https://www.greenpeace.org/brasil/sitemap/
- Remember to insert the Link in your Footer (>> set up your Footer)
Clone / Duplicate a page
From the backend / Admin dashboard:
- From the edit mode
- While editing an existing post or page, a command in the top navigation bar will copy this piece of content into a new DRAFT copy of the post or page, with the same title, URL, content etc..
Hide page title from the frontend
You can hide the Page title from the frontend whilst still having the title in the system on both Evergreen and Default page templates.
Just locate the “Hide Page Title” command in the Page Header fields (see .gif below). This is especially recommended when using the “Form on the Side” style of the Engaging Networks form block.
Watch the P4 Admin Video
All you need to know about how Navigation, content types and pages interact with one another is in the P4 Admin Video:
- TIP! Need subtitles? Enable them in the Video Progress Bar!
- 00:55 Homepage, Act and Explore pages
- 15:00 Page Blocks
- 16:55 Navigation and Footer
- 21:05 Settings
- 26:26 Categories and Tags
- 32:55 Issue pages
- 37:55 Tags page
- 39:00 Take Action pages
Links & Resources
- Handbook
- WordPress.org
- MEDIUM
- “Checking technical options, we discovered…” – Technical investigation
- Architectural strategy – Multi-instances approach decision
- Creating the first prototype – implementing Multi-instance P4 sites