Organize content and navigation

Outcome

You will expand the WordPress site into a small, connected information architecture. Every published page will have a clear role, stable URL, descriptive path from another page, and a suitable place in the primary navigation.

Why this matters

Visitors should not need to know the site’s internal editor or publication history. Content structure, page labels, URLs, and links must help them predict where each route leads and how to return.

What you will practice

Distinguish a site purpose, content inventory, site hierarchy, URL path, and navigation menu.
Plan parent and child page relationships before creating pages.
Create short, stable, descriptive slugs and link labels.
Build a primary navigation with a Projects submenu in a WordPress block theme.
Verify reachability, current-page context, keyboard use, narrow-screen behavior, and browser history.

What is new and what is reused

New: Information architecture, content inventory, sitemap, parent page, child page, slug, wayfinding, primary navigation, submenu, and orphan page.
Reused: Published pages, blocks, links, semantic headings, responsive testing, keyboard focus, visitor view, and complete Playground ZIP exports.

Starting point

Before you start

The saved WordPress Playground site from the CMS foundations lesson, or cms-foundations-checkpoint.zip.
The published Home and About pages and the Studio Profile site identity.
A block theme with the Site Editor and Navigation block available.

Current state: Home and About are published, Home is the static front page, and a complete CMS export exists. The site does not yet have a planned Projects hierarchy, Contact page, or deliberate primary navigation.
First action: Open the saved Playground site. If it is unavailable, open a new Playground and import cms-foundations-checkpoint.zip from New → Import zip in the Dock.
First checkpoint: The visitor view shows Studio Profile with the existing Home and About content before you add or move any page.
Help trigger: Use the recovery note or ask for help if an imported site is missing content, a page receives an unexpected slug, a child page does not keep its parent, the Navigation block uses the wrong menu, or the mobile menu cannot be opened with the keyboard.

Required result

You have completed the lesson when the CMS site has:

a saved cms-site-map.txt plan with purpose, audience, page hierarchy, URL paths, and menu order;
published Home, Projects, Profile Page, About, and Contact pages;
Profile Page set as a child of Projects;
the URL paths /, /projects/, /projects/profile-page/, /about/, and /contact/;
a Home-page link named View the selected projects that opens Projects;
a Projects-page link named Read the profile page project that opens Profile Page;
primary navigation ordered Home, Projects, About, Contact;
a Profile Page submenu item under Projects;
no page that is reachable only through the administration interface;
working keyboard, mobile-menu, browser Back, narrow-width, and 200% zoom behavior; and
a new complete export named cms-navigation-checkpoint.zip.

Plan the information architecture

Information architecture is the organization and labeling of content so people can find and understand it. A sitemap records page relationships. A navigation menu selects and orders routes that support common movement through the site.

Information architecture

Site hierarchy and primary navigation describe different relationships

Read the hierarchy from top to bottom, then compare it with the menu order.

The hierarchy records content relationships and URL paths. The navigation selects and orders routes that help visitors move through that structure.

The hierarchy and menu are related, but they are not the same list:

The hierarchy records that Profile Page belongs under Projects.
The URL path carries that relationship as /projects/profile-page/.
The primary navigation keeps four top-level choices.
The submenu exposes the child page without making it a fifth top-level choice.
The Projects page also links to the child page in its content.

Write the plan before changing WordPress

Create cms-site-map.txt beside the previous ZIP checkpoint. Add this plan:

Purpose: Introduce a small web portfolio and help visitors inspect selected work.
Audience: A teacher, classmate, or potential collaborator reviewing the work.

Hierarchy and paths:
Home                         /
Projects                     /projects/
  Profile Page               /projects/profile-page/
About                        /about/
Contact                      /contact/

Primary navigation:
Home | Projects | About | Contact

Projects submenu:
Profile Page

The indentation under Projects records a parent/child relationship. It is not decorative spacing.

Check the plan against visitor questions

Each page should answer one main question:

Page	Visitor question
Home	What is this site, and where should I start?
Projects	Which work can I inspect?
Profile Page	What was built, and which decisions shaped it?
About	Who or what professional role does this site represent?
Contact	How can I make contact without exposing private information?

If two pages answer the same question with the same content, combine them or define a clearer difference before you build.

Checkpoint: The site structure is explicit before implementation

What now works: cms-site-map.txt records the required hierarchy, paths, navigation order, audience, and page purposes.
Files changed: cms-site-map.txt
What remains: Create the Projects hierarchy and Contact page, then connect the pages with descriptive links.
Next action: Open Pages → Add New Page and create the Projects page.
If it does not work: If the hierarchy is unclear, answer only this question: does Profile Page make sense as a section of Projects? If yes, keep Projects as its parent.

Create the Projects parent page

Open Pages → Add New Page and enter Projects as the title.

Add these blocks:

A paragraph: This section collects selected web projects and the decisions behind them.
An H2 Heading block: Project list.
A paragraph that will later contain the link to Profile Page.

Save the page as a draft. Open the page settings and find the URL or permalink. Confirm that the slug is projects. Change it if WordPress created another value.

Publish the page, then open it in the visitor view. Its path should end in /projects/.

Slug rules for this site

A slug is the editable part of a page URL. Use these rules:

use lowercase words;
separate words with hyphens;
describe the page content;
omit dates and version numbers unless they are part of the stable content identity;
avoid changing a published slug without a redirect plan; and
keep the displayed page title natural even when the slug is shorter.

Profile Page is a readable title. profile-page is a suitable slug.

Create the child project page

Open Pages → Add New Page and enter Profile Page as the title.

Add these blocks:

a paragraph that states the project outcome;
an H2 heading named Key decisions;
a list with three decisions from the HTML, CSS, visual-design, or image lessons; and
an H2 heading named Result, followed by a short result paragraph.

Open the page settings:

Set the slug to profile-page.
Find Parent or Page Attributes.
Set the parent page to Projects.
Publish the page.

Open the page in the visitor view. The path should end in /projects/profile-page/. If the path is only /profile-page/, return to the page settings and confirm the saved parent.

The parent setting records a content relationship. It does not guarantee that every theme will display a breadcrumb or automatically create the required submenu.

Create the Contact page

Open Pages → Add New Page and enter Contact as the title. Confirm the slug is contact.

Add this content:

Use the reserved practice address below to discuss a project or request more information.

Email the studio profile

Select Email the studio profile and create a link to:

mailto:hello@example.com

Keep the link text descriptive. Do not use Click here, because that label does not state the destination or action when read without its surrounding sentence.

Publish the page. Test the link only far enough to confirm that the browser recognizes it as an email action. You do not need to send a message.

Checkpoint: The published page hierarchy matches the plan

What now works: Projects, its Profile Page child, and Contact are published with the required titles, slugs, parent relationship, headings, and safe contact link.
What remains: Add descriptive content links and configure the primary navigation and submenu.
Next action: Edit Home and add a link named View the selected projects.
If it does not work: If WordPress adds -2 to a slug, search Pages and Trash for another page with the same slug before you rename or delete anything.

Connect pages with descriptive links

A page should not depend on the menu as its only incoming route. Content links connect related ideas at the point where the relationship matters.

Link Home to Projects

Edit Home. Add a paragraph after the introduction or Selected work section:

View the selected projects

Select the text, open the link control, search for Projects, and select the published page. Keep the link in the same tab.

Link Projects to Profile Page

Edit Projects. In the paragraph under Project list, add this link text:

Read the profile page project

Search for and select the published Profile Page. Update Projects.

Add a return path

Edit Profile Page. After the Result section, add:

Return to all projects

Link it to Projects and update the page.

Check the link network

Start at Home in the visitor view and follow this route:

Home → Projects → Profile Page → Projects

Then use the browser Back button twice. The browser should return through the pages in the order you visited them. Internal links must not force new tabs.

An orphan page has no usable path from the rest of the published site. The required link route and navigation prevent Profile Page from becoming an orphan.

Open Appearance → Editor → Navigation in a block theme. Select the navigation used by the site header. If the theme has no Navigation block, open the Header template part and add one before continuing.

Select the Navigation block or existing header menu.
Open its menu options.
Create a new menu named Primary navigation if a suitable editable menu does not exist.
Remove automatic, sample, or duplicate items that are not part of the site plan. Removing a menu item does not delete its page.

Add and order top-level links

Add published Page Link blocks in this order:

Home
Projects
About
Contact

Use List View or the navigation settings panel to verify the order. Do not add Profile Page as a fifth top-level item.

Add the Projects submenu

Select the Projects page link and choose Add submenu or Add submenu link. Add Profile Page inside it.

Confirm that List View shows Profile Page nested under Projects. Indentation or a submenu wrapper must show the relationship in addition to any visual styling.

Keep the Navigation block’s responsive display set to Mobile so the theme can use a menu control on narrow screens. If the submenu offers Open on click, enable it so the submenu does not depend only on pointer hover.

Save the navigation and any changed Header template part. Review the save panel before confirming, because Site Editor saves can include both menu and template changes.

Assistance 3 — Build the menu from List View

If the canvas is hard to interpret:

Open List View in the Site Editor.
Select Navigation (Primary navigation) or the Navigation block linked to that menu.
Expand the Navigation block.
Arrange Home, Projects, About, and Contact as sibling Page Link blocks.
Expand Projects and place Profile Page inside its submenu.
Confirm that no Sample Page or duplicate link remains.
Save the menu and Header changes.

List View exposes the block hierarchy. Use the visual canvas to inspect appearance after the structure is correct.

Checkpoint: Navigation matches the information architecture

What now works: The header uses Primary navigation with four ordered top-level links and one Profile Page submenu item under Projects.
What remains: Verify every route, state, input method, narrow layout, and export checkpoint.
Next action: Open Home in the visitor view and test the navigation without the administration interface.
If it does not work: If the correct menu does not appear, select the Header Navigation block and confirm that it is assigned to Primary navigation before changing the links again.

Verify wayfinding and responsive behavior

Test the visitor view, not only the Site Editor preview.

Start at the site root and follow each top-level navigation link.
On Projects, open the Profile Page submenu with the keyboard and follow the child link.
Confirm that a visible current-page state or equivalent page title identifies your location. Do not rely on color alone to identify the current route.
Follow the content links from Home to Projects and from Projects to Profile Page.
Use browser Back and Forward. The navigation history should stay in the same tab.
Narrow the viewport to about 320px and open the mobile menu with the keyboard.
Open the Projects submenu and follow Profile Page without using hover.
Zoom to 200% and confirm that menu labels wrap or reflow without clipping.
Visit every published page from the visitor view. No page should require WordPress Admin as its only route.

If it does not work

A menu item opens the wrong page: Edit the Page Link and select the published page rather than typing a similar URL.
A submenu works only on hover: Enable click-to-open behavior when the Navigation block provides it, then test with Enter and Space.
Profile Page is top-level: Move it inside the Projects submenu in List View.
A mobile menu does not appear: Inspect the Navigation block’s Display setting and confirm that the responsive menu is set to Mobile.
The current page is unclear: Keep the page title visible and inspect the theme’s current-menu style. A current state needs more than a color change when the menu provides one.
A published page is unreachable: Add a descriptive content link or a suitable menu item based on the sitemap.

Export the connected site

Open Export in the WordPress Playground Dock and select Download as .zip. Rename the downloaded file:

cms-navigation-checkpoint.zip

Store it beside cms-site-map.txt and the previous checkpoint. Do not overwrite cms-foundations-checkpoint.zip; the earlier file preserves the state before the navigation lesson.

Confirm that the new ZIP is greater than 0 bytes before you close the Playground tab.

Self-check

Complete these checks against the required result.

Open cms-site-map.txt and confirm that its hierarchy, paths, and primary-navigation order match the required plan.
Open Pages and confirm that Home, Projects, Profile Page, About, and Contact are published.
Open Profile Page settings and confirm that Projects is its parent and its visitor path ends in /projects/profile-page/.
Follow the content-link route Home → Projects → Profile Page → Projects without using the primary menu.
Confirm that Contact uses the reserved example address and a descriptive email link.
Inspect Primary navigation and confirm the order Home, Projects, About, Contact.
Confirm that Profile Page is nested in a submenu under Projects rather than shown as a fifth top-level item.
Use only the keyboard to open the primary menu and Projects submenu and follow every item.
Test at about 320px width and 200% zoom and confirm that menu labels, focus, content, and submenu controls remain visible.
Use browser Back and Forward and confirm that internal links stay in the same tab and preserve history.
Start at Home and reach every published page without opening WordPress Admin.
Find cms-navigation-checkpoint.zip beside the site-map file and confirm that it is greater than 0 bytes.

The page hierarchy records content ownership. Slugs turn that hierarchy into stable, readable URL paths. Primary navigation exposes high-value routes in a limited order. Submenus reveal deeper content without flattening every page into the same level. Content links connect ideas where visitors need them.

These parts need separate checks. A correct parent setting does not create good link text. A complete menu does not prevent an orphan page if the menu is hidden or unusable. A readable URL does not explain the page purpose if the title and content are unclear.

Optional information-architecture investigations

The required lesson is complete before these investigations. Choose one route that tests a different structure.

Add a second project child

Create another child page under Projects. Add it to the Projects content and submenu. Keep the two child labels distinct, then test keyboard order and the narrow mobile menu again.

Run a closed card sort

Write each current page title and one-sentence purpose on a separate card. Ask another person to group the pages under Home, Projects, About, or Contact without seeing your sitemap. Record one difference between their grouping and yours, then decide whether a label or hierarchy change would improve predictability.

Duplicate the menu. In the duplicate, place Profile Page at the top level. Compare the number of top-level choices, the visible parent relationship, and the narrow-screen menu. Keep the required nested menu active and record the tradeoff.

Optional references

WordPress Site Editor navigation explains how to manage, order, save, and assign menus in a block theme.
The WordPress Navigation block documents page links, submenus, responsive display, and click behavior.
WordPress page creation explains parent pages and hierarchical page paths.
WordPress link control explains how block links can target an existing page, a path, or an email address.

Next step or safe stopping point

The required lesson is complete when the sitemap, page hierarchy, URLs, content links, primary navigation, submenu behavior, responsive checks, and new ZIP checkpoint all agree.

Continue to Add basic search engine information to write page titles and descriptions that help browsers, search systems, and people understand each route.

If you stop here, leave yourself this resume note beside the new ZIP: All published pages are connected. Next, restore or open the site and audit one page’s title, description, heading, URL, image text, and internal links.