Template: Landing pages for topics

[ryelle]

There will be four new top-level category landing pages: WordPress Overview, Technical Guides, Support Guides, and Customization. Since WordPress does not support archive pages in this designed format, I've suggested making these pages with multiple query loops of each "subcategory".

These pages would have URLs like w.org/support/wordpress-overview, w.org/support/technical-guides, etc. There could still be categories with these names, but it's not necessary.

Mockups

Desktop	Mobile

A quick breakdown of how this could work:

[ryelle]

Like #12, this has also been updated to show a single column of just article titles:

[ryelle]

I've pushed up two patterns and a page template that can be used when building these pages.

1. Create a new page, add the title
2. Assign it the "Topic Landing Page" template
3. Add the "Page Header" pattern, update the content (heading and paragraph)
4. Add an "Articles by Category" pattern, and update the heading
5. In the query loop, update the category used in the sidebar, under Filters
6. Add another "Articles by Category" pattern, update the content
7. Repeat until all the relevant categories are added
8. Publish the page

Here's an example page content, what I've been using to test.

Example page content

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":1} -->
<h1>Technical Guides</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"8px"}}},"textColor":"charcoal-4"} -->
<p class="has-charcoal-4-color has-text-color" style="margin-top:8px">Learn how to install WordPress and keep it secure and healthy</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search the documentation","widthUnit":"px","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"borderColor":"light-grey-1","className":"is-style-secondary-search-control"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-style:solid;border-bottom-width:1px"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<h2 style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Installation</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:query {"queryId":29,"query":{"perPage":"10","pages":0,"offset":0,"postType":"helphub_article","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"taxQuery":{"category":[19]}},"displayLayout":{"type":"list","columns":2}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"level":3,"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"blueberry-1","fontSize":"normal","fontFamily":"inter"} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:paragraph -->
<p><a href="http://localhost:8888/category/installation/">Show all articles in Installation</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-bottom-color:var(--wp--preset--color--light-grey-1);border-bottom-style:solid;border-bottom-width:1px"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<h2 style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Security</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:query {"queryId":29,"query":{"perPage":10,"pages":0,"offset":0,"postType":"helphub_article","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"taxQuery":{"category":[32]}},"displayLayout":{"type":"list","columns":2}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"level":3,"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"blueberry-1","fontSize":"normal","fontFamily":"inter"} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:paragraph -->
<p><a href="http://localhost:8888/category/installation/">Show all articles in Security</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[ryelle]

Before this can be viewed on the frontend, the theme switcher code will need to be updated to add the pages to the allowed list here, so we'll need a list of those pages to create on the site first.

[ryelle]

This issue can be considered "done" once those pages are created on the live site.

[estelaris]

Comment from Jono:

The actual URL structure isn't hugely important, as long as;

• It's readable.
• It's organized.
• It's not completely/artificially 'flat' (it has some kind of logical structure).
• We redirect anything that changes.
• Everything has good internal linking.

category/subcategory/article can be preferable from an analytics/reporting perspective, as it makes it easier to (natively) subdivide data, tools, etc etc

[ryelle]

Noting that in a DM conversation with me, @estelaris confirmed that this approach - using pages for these top-level category archive views - will work. Those categories will also need to exist, and the site will still use the nested category structure from this spreadsheet.

The actual URL structure isn't hugely important

Right now, we're not doing anything fancy with URLs, so they'll look like default WP urls.

• Topic landing: site-url/technical-guides/, site-url/support-guides/, etc
• Category: site-url/category/installation/, site-url/category/appearance/, etc
• Article: site-url/article/some-article-name/
• Version: site-url/wordpress-version/version-6-1/

Ideally we can stay this way. If you need any changes, that should be a new issue, since this one's just about the structure of topic landing pages.

[tellyworth]

How does this fit into the launch process, if it involves creating new pages on the live site and perhaps redirecting old URLs?

With Showcase we launched it by switching the staging site to the live version. Should that be the plan here?

[estelaris]

@tellyworth I don't think that will work as smoothly as it did before. We have a number of pages to rename/remove and recategorize. @ryelle is looking into how we proceed for content. Would a soft launch of the template only, while we work on fixing the content work? And schedule the final launch early in the New year?

[ryelle]

I've created an issue where we can talk about the redirects specifically #21

[ryelle]

I've created these pages on the staging site:

• https://wordpress.org/documentation-test/technical-guides/
• https://wordpress.org/documentation-test/support-guides/
• https://wordpress.org/documentation-test/overview/
• https://wordpress.org/documentation-test/customization/

Technical Guides is the only one with categories that currently exist on the site, so it's the only one I was able to fully set up. The rest are just using placeholder content for now.

[ryelle]

These 4 pages have been updated with the correct content 👍🏻

Thanks @estelaris!