EDCI 337

How-tos

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

Start here

Five minutes of reading saves an hour of clicking

This page is about how to do things on this site. For what to use where — which banner, which set of cards, when not to centre your text — see 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 and post keeps a full history under Revisions.

Posts or pages?

Get this right once and the site looks after itself

Pages are the fixed parts of your site — the front page, About me, this page. 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. In this course your assignment writing goes in posts. Each one gets a category and, ideally, a featured image. Your blog page lists them automatically, newest first — you never edit that list by hand.

  • A permanent section of your site → page
  • A piece of writing for an assignment or a reflection → post
  • Something that should appear in the menu → page
  • Something that should reach the course website → post, with a course category

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

Categories and the course website

The one mechanism worth understanding

Your posts reach the course website through categories. The course site collects posts from every student blog that carries the right category — so a post with no category, or the wrong one, will not appear there no matter how good it is.

This site comes with a Multimedia Learning category and four assignment categories inside it. Tick the one that matches the assignment in the Categories panel in the sidebar before you publish. Do not delete or rename them.

  • Assignment 1 — Midterm Review: Module 1&2 blog posts and comments
  • Assignment 2 — Video for a Learning Purpose
  • Assignment 3 — Final Review: Module 3–5 blog posts and comments
  • Assignment 4 — Rich Multimedia Lesson (group project)

You are welcome to add your own categories alongside these — for other courses, or for topics you want to write about. Where you can, name them for the subject rather than the course code: people outside your programme will recognise “Multimedia Learning” but not “EDCI 337”.

Two more things: your instructor needs your blog address before anything can be collected, and the collection only sees public posts.

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 — /about-me/ rather than the full web address — so they keep working if your site is copied or renamed.

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 and managing images, see Using the Media Library on Learn WordPress.

Pages → Add New. Give it a title and a short slug in the sidebar (teaching-philosophy, not My Teaching Philosophy Page). If you are starting the page with your own banner, open Page settings at the top right and switch off Page Title and Content Vertical Spacing. Publish, then add it to the menu.

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

Appearance → Menus. Tick a page on the left and click Add to Menu, then drag it into position; dragging an item slightly to the right makes it a drop-down under the one above. Custom Links point anywhere, including a category archive — /category/multimedia/ gives you a link to all your assignment posts. Click the arrow on an item to change its Navigation Label (the wording in the menu, not the page title), or to Remove it — which takes it out of the menu without deleting 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

Use an Image block for a single picture and a Gallery block for several. Before uploading, resize photos to no more than about 2000 pixels wide and run them through an optimiser like TinyPNG — a photo straight off a phone can be several megabytes and will make your page slow. Always write alt text.

Do not upload video files to your blog. Put the video on YouTube or Vimeo, then paste its address on its own line in the editor and WordPress builds the player for you. Uploaded video is slow, runs into the upload size limit, and has no captions. If your instructor points you at a university-hosted video service instead, use that — the method is the same: copy the share link, paste it into an Embed block.

For more on embedding, see Embedding media and third-party content on your website on Learn WordPress.

Add an Audio block and upload an MP3 or M4A, then write a caption. Put a transcript underneath — the Standard block with accordion pattern is made for this, so the transcript folds away and the page stays short. A transcript is how a deaf or hard-of-hearing reader gets your work, and it makes what you said searchable.

Check the file type and the size. Some file types are blocked on this network, and there is an upload size limit shown on the Media screen. If an image will not upload, export it as JPEG or PNG. If a video will not upload — it should not be uploaded at all; embed it instead.

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 set of tabs. This template comes with 38 of them, already styled to match. Building a page mostly means stacking patterns and typing over them; you rarely start from a blank block.

  1. Open the page you want to edit: Pages in the black sidebar, then click its name.
  2. Click where the new section should go, so the cursor sits between two existing blocks.
  3. Click the blue + at the top left, then choose the Patterns tab.
  4. Pick a category down the left: Banners, Columned Content Groups, Contact and Team Bios, Headings, Note Boxes, Tabs and Accordions, Buttons, Displaying Stats.
  5. Click a pattern to drop it into the page. It arrives with placeholder text and images.
  6. Type over the placeholder text. Click each image and use Replace to swap in your own.
  7. Use Preview → Preview in new tab and check it on the real site — the editor is not always an exact match.
  8. 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, see Using block patterns on Learn WordPress.

Which pattern should I use?

  • Top of a page → Gradient light banner or Gradient dark banner
  • Two or three things you want people to click through to → 3 pack image topped cards
  • One thing you want to highlight on its own → Card left / right constrained banner
  • A photo beside a paragraph → Text left constrained 50/50 banner
  • Your own bio → Meet the team bio
  • Long text you want folded away → Standard block with accordion
  • Two or three versions of the same thing → Standard tab group
  • A short aside → Standard note box

Before you commit to one, check what the Patterns Gallery says about it — several come with notes about what not to do with them.

Three things that trip everyone up

Selecting the right block. Patterns are built from Row Layouts with sections and columns nested inside, and 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 often 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 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 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.

Before you publish

Alt text on every image — one sentence describing what is in it. A transcript under every recording, and captions on every video. 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: “my notes on cognitive load”, not “click here”. Check that text sits on a background it contrasts with, especially 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 post; people scan before they read. Keep paragraphs short. Give every post a title that would make sense to someone who is not in the course. Add a featured image — it is what shows up when the post is shared or collected elsewhere.

Decide early how public you want to be: your own name or a pseudonym, the whole blog public or private, individual posts password-protected. You can change your mind, but changing it later does not un-publish what has already been collected elsewhere. Share only names and images you have permission to use. The starter post on this site — Welcome and Introduction — sets all of this out; read it before your first post, then delete it.

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 above lives there, gathered here in one list:

One note 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 EDCI 337 and shared under a Creative Commons Attribution-NonCommercial 4.0 licence — reuse it or adapt it for another course, with credit, 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.