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.
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.
When users hover on the main menu item, the sub-items will be shown via a dropdown on the frontend, see below.
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.
Just as the other menu items, when users hover on the Donate button, the sub-items will be shown via a dropdown, see below.
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.
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 style will be immediately applied to your website top navigation bar. The footer colour will never change.
Post types (Story – PR – Publication)
Post Types” represent the different kind of content of your Posts.
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)
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)
- Go to Appearance ⇒ Menus option
- Click on the button saying “create a new menu”
- Give as menu name: “Footer social”
- Click “Create Menu”
- On the top right of the screen there is a button saying “screen options”. Click it
- On the small panel that opened, check the box “Css Classes”
- Go to “Custom links” (in the menu screen, on the left), and give the following data:
- URL: https://www.twitter.com/ (put your own twitter url here)
- Link text: Twitter
- Click on “Add to Menu”
- On the right side, under “Menu structure”, find the menu item you just added, and click on the small arrow to open it.
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:
- For Facebook >> fa fa-facebook
- For Twitter >> fa fa-twitter
- For Youtube >> fa fa-youtube
- For Instagram >> fa fa-instagram
- For Whatsapp >> fa fa-whatsapp
- For Medium >> fa fa-medium
- For Spotify >> fa fa-spotify
- For LinkedIn >> fa fa-linkedin
- For TikTok >> fa fa-tiktok
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 👇
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:
- Unless otherwise stated, the copy of the website is licensed under a CC-BY International License
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!)
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/
