JOUR 2600

How-tos

Short answers to the questions that come up most while you build your group site.

Start here

Five minutes of reading saves an hour of clicking

This page is about how to do things. For what to use where — which banner, which set of cards, when not to centre your text — read the Patterns Gallery, which is the design guide for this template.

Nothing you do here is permanent. Every change can be undone, and every page keeps a full history.

Posts or pages?

Get this right once and the site looks after itself

Pages are the fixed parts of your site — Home, Our work, the four media pages, Contact. They sit in the menu, they have no date and no category, and you edit them when something changes.

Posts are dated entries that stack up over time. On this template that means the written stories. A post gets a featured image and a category, and the Written stories page builds its own grid from them — publish a post in the Written stories category and it appears there on its own, in date order, without anyone touching the page. You never add a post to the menu.

A section of your site → page
A story, an update, a piece you will add to over the term → post
Something you want listed automatically → post, with the right category ticked
Something people should reach from the menu → page

For more on the difference, see Understanding the difference between posts and pages on Learn WordPress.

Everyday editing

Click into any text and type. To make a link, select the words and press ⌘K (Ctrl+K on Windows), then paste an address or search for one of your own pages. Buttons work differently: select the button, then set its text and its link in the toolbar and the right-hand sidebar. Write internal links as paths — /contact/ rather than the full web address — so they keep working if the site is copied.

For more on working in the editor, see Creating posts and pages with the WordPress block editor on Learn WordPress.

A picture can live in three places. An image block: click it, then Replace in the toolbar. A row or column background: select the row or column, then Background → Image in the sidebar. A featured image on a post: in the sidebar under Post → Featured image. Whichever it is, fill in the Alt text field with a sentence describing what is in the photo.

For more on uploading, organising and reusing images, see Using the Media Library on Learn WordPress.

Pages → Add New. Give it a title and a short slug in the sidebar (field-notes, not Field Notes Page 2). If you are starting the page with your own banner, switch off Page Title and Content Vertical Spacing in Page settings. Publish, then add it to the menu.

For more on building a page block by block, see Nesting and using blocks on Learn WordPress.

Where it lives. Appearance → Menus. This site has one menu, main menu, assigned to the Primary location — the row across the top of every page. The theme also offers Secondary, Mobile and Footer locations, which you can assign under the Manage Locations tab if you ever want a different menu in one of those spots.

Adding something. Tick a page in the left-hand panel and click Add to Menu. The same panel adds posts and categories, and Custom Links handle everything else — including a spot on a page: /#team jumps to the team section on the home page.

Ordering and drop-downs. Drag items up and down to reorder them. Drag one slightly to the right and it becomes a drop-down item under the one above — that is how the four media pages sit under Our work.

Renaming. Click the arrow on a menu item and edit Navigation Label. That changes the wording in the menu only, not the page title.

Removing. Open the item and click Remove. That takes it out of the menu; it does not delete the page.

Nothing takes effect until you click Save Menu.

For more on every option on that screen, see the Appearance Menus Screen article in the WordPress documentation.

Adding media

Upload your film to TRU MediaSpace (media.tru.ca), open it there, and use Share → oEmbed. Copy the short link it gives you (media.tru.ca/id/0_xxxxxxxx…), add an Embed block here, and paste it in. WordPress builds the player for you. Use the link from the oEmbed tab, not the long address in your browser bar — that one comes out as a plain link. Video files uploaded straight to this site are slow to load, run into the upload size limit, and have no captions. The Video stories page is a worked example.

For more on how embedding works and what else can be embedded, see Embedding media and third-party content on your website on Learn WordPress.

Add an Audio block, upload an MP3 or M4A, and write a caption. Then add a transcript. The Standard block with accordion pattern is made for this: the transcript folds away, so the page stays short and nothing is hidden from anyone who needs to read rather than listen. A transcript is not optional — it is how deaf and hard-of-hearing audiences get your story, and it makes your work searchable.

For more on getting audio files into the site, see Using the Media Library on Learn WordPress.

Add a Gallery block, select several images at once, and set the number of columns in the sidebar. Kadence also has an Advanced Gallery block with masonry and lightbox options. Keep the photos in one gallery similar in shape — mixing tall and wide images makes the grid look ragged.

For more on preparing and managing the images first, see Using the Media Library on Learn WordPress.

Two limits catch people out. This site does not accept .webp files, so export JPEG or PNG instead. And photos should be no wider than 2000 pixels and run through an optimiser like TinyPNG before you upload — a 6MB photo straight off a camera makes the page slow for everyone who visits it.

Putting a pattern on a page

The one skill worth learning properly

A pattern is a ready-made chunk of page — a banner, a row of cards, a bio, a set of tabs. This template comes with 39 of them, already styled to match. Building a page mostly means stacking patterns and typing over them; you rarely start from a blank block.

Open the page you want to edit: Pages in the black sidebar, then click its name. (If you are already looking at the page on the site, Edit Page in the top black bar is faster.)
Click where the new section should go, so the cursor sits between two existing blocks.
Click the blue + at the top left of the editor, then choose the Patterns tab.
Pick a category down the left: Banners, Columned Content Groups, Contact and Team Bios, Headings, Note Boxes, Tabs and Accordions, Buttons, Displaying Stats.
Click a pattern to drop it into the page. It arrives with placeholder text and images.
Type over the placeholder text. Click each image and use Replace to swap in your own.
Use Preview → Preview in new tab and look at it on the real site — the editor is not always an exact match.
Click Update.

The patterns here are unsynced copies. Edit one as much as you like — you will not change any other page that used the same pattern.

For more on how patterns work in WordPress generally, including synced ones, see Using block patterns on Learn WordPress.

Which pattern should I use?

Top of a page → Gradient light banner or Gradient dark banner
Three or four things you want people to click through to → 3 pack or 4 pack image topped cards
One thing you want to highlight on its own → Card left / right constrained banner
People → Meet the team bio (one row each) or Contact us section (a grid)
Long text you want folded away → Standard block with accordion
Two or three versions of the same thing → Standard tab group
A short aside or warning → Standard note box
A call to action part-way down a page → Info banner with a button under it

Before you commit to one, check what the Patterns Gallery says about it. Several come with warnings — the gradient banners hide their right-hand column on mobile, and constrained banners are not meant to be used in pairs.

Three things that trip everyone up

Selecting the right block. Patterns are built from Row Layouts with sections and columns nested inside. Clicking once usually grabs the innermost thing. Open the List View (the icon at the top left that looks like stacked lines) to see the structure and click the exact block you want.

Photos are usually backgrounds, not image blocks. In most banners the photo belongs to the row or to one column. Select that row or column, then use Background → Image in the right-hand sidebar. If you cannot find the image anywhere, you have the wrong block selected.

Turn off the automatic page title. Every new page prints its title in a coloured band at the top, so a page that starts with its own banner ends up with two. Open Page settings at the top right and switch off Page Title and Content Vertical Spacing.

Alt text on every image — one sentence describing what is in it. A transcript under every recording. Headings in order: one H1 per page (usually your banner title), then H2 for sections and H3 beneath them — never pick a heading level because you like the size. Link text that makes sense read on its own: “read our flood coverage”, not “click here”. And check that text sits on a background it contrasts with, especially where it sits over a photo.

For more on why heading order matters, see How to use headings for accessibility and SEO on Learn WordPress.

Front-load the point of each section; people scan before they read. Keep paragraphs short. Write headings in the page’s own words so they work as signposts. Link internally with paths — /audio-stories/ — rather than full web addresses, so links survive if the site is copied.

The Patterns Gallery has the rules. The short version: don’t alternate row background colours, don’t put an outline and a drop shadow on the same card, don’t set text blocks to full width, don’t centre text that runs more than three lines, and keep paired content similar in topic and in length. Check every page on tablet and mobile before you call it done.

More help

Two places worth bookmarking

The Patterns Gallery on this site is the design guide: what each pattern is for, and what not to do with it.

Learn WordPress is the WordPress community’s own free training site. Everything linked from the sections above lives there, gathered here in one list:

Two notes for this site: Learn WordPress lessons about the Site Editor, templates and template parts do not apply here — this is a classic theme, so the header, footer and colours live in Appearance → Customize and the menu in Appearance → Menus.

Credits and reuse

Written for JOUR 2600 at Thompson Rivers University and shared under a Creative Commons Attribution-NonCommercial 4.0 licence — reuse it or adapt it for another course, with credit to JOUR 2600, for non-commercial purposes. The lessons linked above are published by the WordPress community at learn.wordpress.org and remain under their own terms; nothing on this page is copied from them.