Navigation bar – menus

Dashboard > Appearance > Menus

Even though “Act” and “Explore” are the default navigation buttons, admins can now add multiple items (and sub-items) to the main navigation bar, by selecting the “Navigation Bar Menu” from the drop-down.

The order can be customized by dragging and dropping each item.

The main navigation bar menu setup

To add sub-items, you can drag an item slightly to the right side under the desired main menu item.

Key info 👉 A maximum of 5 main menu items and 10 sub-items can be added to the menu. Each item must be maximum 18 characters long.

To show the drop-down menu with the sub-items in the front-end, you should go to the Planet 4 settings > Information architecture and select the “enable the dropdown menu” option.

Enable dropdown menu

When users hover on the main menu item, the sub-items will be shown via a dropdown on the frontend, see below.

Frontend rendering of the primary menu item (“Explore”) and its sub-items

This brief video also recaps how to customise the Navigation bar 👇


Donate button – menu

Dashboard > Appearance > Menus

Just as the main navigation bar menus, the Donate button can also have a maximum of 10 sub-items, always with a maximum of 18 characters length.

The Donate button menu setup

Just as the other menu items, when users hover on the Donate button, the sub-items will be shown via a dropdown, see below.

Sub-items in the Donate button menu

The main “Donate” button will of course always work as setup in P4 Settings > Donate button.


Navigation bar – tabs menu on mobile

Dashboard > Planet 4 > Information architecture

To show the tabs menu on mobile in addition to the burger menu, you should select the “enable mobile tabs menu” option.

Enable mobile tabs menu

frontend rendering of the mobile tabs menu


Navigation bar – style (light / dark)

Dashboard > Planet 4 > Navigation

It’s possible to customize the colour of the navigation bar with a “dark” or “light” mode.

The settings in Dashboard > Planet 4 > Navigation

The style will be immediately applied to your website top navigation bar. The footer colour will never change.

The “dark” and “light” styles of the navigation bar. The footer colour will never change.

Post types (Story – PR – Publication)

Post Types” represent the different kind of content of your Posts.

The P4 “Breadcrumb”, using POST-TYPE, Categories / Issues and #Tags

When clicking on the post type (see capture above), users are redirected to Page_Type wrapper, which consolidates all the posts of the same type (e.g. >> https://planet4.greenpeace.org/story/)

Key info 👉 The Description text of the Page type can be changed in the settings (see image below)

Editing the description of the Post types (e.g. Story | Press | Publication)

Reading time for posts

You can now set up a reading time (e.g. 4 min read) for some (or all) post types.

In dashboard > Posts > Post Types > Edit Post type (e.g. story or blogs) > Tick the box “Display an estimated reading time on this content”.

Key info 👉 The “xxx min read” string is translatable in LoCo, look for the “%d min read” string in the Planet 4 Master theme!


Footer

Dashboard > Appearance > Menus

The footer is displayed at the bottom of each page across the website.

It contains different elements such as a country selector, a site map link, utility and secondary links, as well as social media links.

It is not possible to customise the country selector icon or arrow.

To edit the footer menu, select which footer you would like to edit from the drop down menu.

Key info 👉 even though there are footer primary and footer secondary, the total number of entries will be displayed evenly in two columns.

Selecting each menu, you will access the edit mode of each.

Footer social (icons)

  1. Go to Appearance ⇒ Menus option
  2. Click on the button saying “create a new menu”
  3. Give as menu name: “Footer social”
  4. Click “Create Menu”
  5. On the top right of the screen there is a button saying “screen options”. Click it
  6. On the small panel that opened, check the box “Css Classes”
  7. Go to “Custom links”  (in the menu screen, on the left), and give the following data:
    1. URL: https://www.twitter.com/   (put your own twitter url here)
    2. Link text: Twitter
  8. Click on “Add to Menu”
  9. On the right side, under “Menu structure”, find the menu item you just added, and click on the small arrow to open it.
The Social Footer Icons

1) In the field “CSS Classes (optional)” add the name of the icon you want from the list of icons in the main theme.

For example:

2) Click “Save menu”

TIP 👉 To see the “CSS Classes (optional)” command you need to enable it in the your Screen options at the top of the page. See .gif below 👇

Accessing the screen options in P4 to activate the CSS class

Key Info – the template knows which menu to use only by the name. If you create it, make sure to name your menu “Footer Social”


Copyright text

Dashboard > Planet 4 > Copyright

Copyright text Line 1 and Copyright text Line 2 (3 and 4)

Generic Copyright usage (see “legal checks” for more info), which state the usage of your P4 site. Below the text used for the International site:

This text appears below the Footer, here’s what it looks like in the front end of the International site (yes, on 4 the year gets automatically updated!)

The copyright texts as they appear in the Footer

Site Favicon

Planet 4 uses WordPress default settings for the favicon.

To apply this, go to: Appearance > Customise > Site Identity > Select Image

Image should be at least 32 x 32 px; WordPress suggests 512 x 512 px.

Ref : https://codex.wordpress.org/Creating_a_Favicon


404 page

Dashboard > Planet 4 > 404 Page

404 background image and 404 page text and Default P4-page-type

The 404 error page gets set up in the P4 settings menu. Here’s what it looks like in the International site – https://www.greenpeace.org/international/ciao-I-am-a-404/


Links & Resources