Website Development with AI
Senior 6 · ICT
Website Development with AI
Lesson 2 of 5
25 min
Open the cooperative site from lesson 1 and go to Appearance → Themes. Activate a different theme and reload the front end. Every post and page is still there, word for word, but the fonts, colours, layout and menu position have all changed. Nothing in the database was touched. That is the separation of content and design at work, and it is what lets a site be redesigned in an afternoon.
Definition
Theme: a package of files that controls how a WordPress site looks: its layout, colours, fonts and the templates for each kind of page. Exactly one theme is active at a time.
Template: the layout for one kind of page, for example Single (one post), Page, Archive (a list of posts), or 404 (page not found). Template part: a piece shared by many templates, such as the header or footer.
Block: one unit of content in the WordPress editor, such as a paragraph, heading, image, gallery, table or button. Pages, posts and, in a block theme, templates are all built from blocks.
Since WordPress 5.9 (2022) there have been two kinds of theme. A block theme, such as the default Twenty Twenty-Five, is edited visually in the Site Editor (Appearance → Editor): you click on the header, the footer or a template and change it with blocks. A classic theme is built from PHP template files and is adjusted through the Customizer and Widgets screens. New sites should usually use a block theme.
Behind the Site Editor, a block-theme template is a plain HTML file in which each block is marked by a special comment. You do not need to write these by hand, but reading one shows how the parts fit together:
<!-- templates/single.html in a block theme -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-featured-image /-->
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->When a visitor opens a post, WordPress picks the most specific template it can find. For a single post it looks for a template made for that particular post, then for its post type, then for single, then singular, and falls back to index, which every theme must have. This search order is called the template hierarchy.
| Check | Why it matters |
|---|---|
Source: the official directory at wordpress.org/themes or a reputable seller | "Free" copies of paid themes from unknown sites often contain hidden malicious code. |
| Last updated and tested with your WordPress version | An abandoned theme will not receive security fixes. |
| Responsive and accessibility-ready | Most Rwandan visitors browse on phones; the tag Accessibility Ready means it passed extra checks. |
| Fast and simple | A heavy theme slows every page, which costs visitors on mobile data. |
In a post or page, click + or type / followed by a block name (/image, /table, /columns) to insert a block. Each block has its own toolbar and settings in the right-hand panel. Useful blocks for the cooperative site:
A group of blocks you want to reuse, such as a "How to order" box, can be saved as a pattern. A synced pattern changes everywhere when you edit it once.
Every file you upload goes to the Media Library. For each image, WordPress keeps the original and makes smaller copies; by default these include a thumbnail of 150 × 150 pixels, a medium size up to 300 pixels and a large size up to 1024 pixels, and the theme chooses the right copy for each place.
Two rules keep media fast and lawful:
Every image also needs alternative text (alt text), set in the block's settings: a short description read aloud by screen readers and shown if the image fails to load. Describe what matters in this place: "Women sorting coffee cherries on raised drying beds", not "image1.jpg" or "photo".
Dan Davies: The Complete Gutenberg Guide, WordPress Blocks Breakdown. Watch how blocks are inserted with + and with the slash command, and how each block's settings panel works; then build the cooperative's home page the same way.
Worked example 1: the cost of a big photo
The manager uploads a 4000 × 3000 photo saved as a 4.2 MB JPEG. Many visitors use mobile data at about 4 megabits per second. Estimate the download time, then the time after resizing to 1600 × 1200.
On a page with six such photos, that is the difference between waiting about 50 seconds and about 8 seconds. Visitors leave long before 50.
Worked example 2: change the header on every page
The cooperative adds a phone number to its header. How many pages must be edited?
Warning
Do not edit a theme's files directly. Changes typed into a theme's files are lost when the theme updates. Use the Site Editor, whose changes are saved in the database, or a child theme for code changes.
Tip
Content first, design second. Write the real text and choose the real photos before you choose a theme. A theme that looks good with its demo content can look empty or crowded with yours.
Check: the About page loads quickly on a phone, every image has alt text that describes it, and the header shows the same menu on every page.
Practice
index.html and single.html. Which template is used, and why?single.html: the template hierarchy picks the most specific template that exists, and single is more specific than index.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.