Updates to global header and footer navigation

The global headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer navigation will be updated on Wednesday, October 18th, to continually improve the user experience on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ as discussed in #360 Navigation: Rephrase a few items, reconsider sorting, and #364 Footer: Revisit footer links and categorize.

Global header navigation

In September 2022, the global navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. was updated to better organize content across the WordPress.org network. This iteration notably grouped several previously top-level menu items into sub-menus. 

Since then, there has been a discussion (see #360) about how the navigation could be further improved with a greater focus on visitors exploring WordPress for the first time. Overall, the changes are relatively minimal, but this iteration notably adds Showcase and Hosting back as top-level menu items and simplifies the Download & Extend grouping.

A live demonstration of the upcoming changes.

Content changes

  • Showcase is back as a top-level menu item.
    • The goal is to make the Showcase more visible and to provide visitors, especially new-to-WordPress visitors, a way to see what can be built with WordPress. 
    • This update is related to the pending Showcase v2 launch.
  • Hosting is back as a top-level menu item.
    • The goal is to provide new-to-WordPress visitors with a better path to getting started with WordPress since some form of hosting is always required.
    • While outside the scope of these navigation updates, some exploratory work is being done in Figma to improve the aesthetics of the Hosting page and explain why hosting is required for WordPress. This would make the page feel more educational and help new-to-WordPress visitors get oriented.
  • Download & Extend is renamed to just Extend.
    • The goal is to simplify this section and “decouple” menu items that focus on “extending” WordPress and those related to “getting” WordPress.
    • “Downloading” a .zip is also not the primary way users get WordPress these days, so directing folks to the Get WordPress button makes more sense, especially for new-to-WordPress visitors.
  • The Get WordPress and Mobile links under Extend are removed.
    • Visitors are now directed to the Get WordPress button to “get” WordPress. The mobile app CTA is already present on this page.
  • The new Blocks page is added under Extend.
    • The current page is v1, and v2 is planned (#318). This page aims to tell the story of blocks in WordPress. It was placed under Extend since making custom blocks and working with the BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor are key ways of “extending” what WordPress can do.
  • In Extend, the Plugins link has been moved above Patterns to reflect its higher importance.
  • The WordPress Swag Store has been renamed to Swag Store.

Functional changes

  • Make sub-menus open on-click instead of on-hover to reduce the number of actual links in the navigation and subtly improve accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (#440
  • Prevent screenreaders from reading the external link arrows (↗) to improve accessibility (#453)

Global footer navigation

The update to the global footer navigation is minimal. There has been a lot of great discussion about a more extensive overhaul (see #364), which future iterations should consider. 

The most significant change is to denote all external links with an arrow (↗) to match the implementation in the global header navigation.

Content changes

  • All external links are denoted with an arrow (↗)
  • Links are now loosely ordered by:
    • About
    • Showcase/Extend
    • Ways to learn WordPress
    • Ways to get involved/support WordPress
    • Other important external links
  • The Public Code link is removed to ensure an equal number of links in each column. 
  • Swag is renamed to Swag Store to match the global header navigation.
  • The capitalization of WordPress.TV is fixed to match the global header navigation.

Thank you to everyone who participated in crafting these changes, both in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and in the #website-redesign channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. As with all changes to WordPress.org, this is just a single iteration, with many more to come. The website is constantly evolving.

If you would like to propose a change or report an issue, please do so in the wporg-mu-plugins GitHub repository, which handles all navigation (among other things) across the WordPress.org network. Also, join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute. 

Props to @eidolonnight, @cbringmann, and @laurlittle for reviewing this post and providing feedback.

#navigation, #website-redesign