< Back to Course

INF 270: WordPress — Week 2: Themes

Quick Review

WordPress is a content management system (CMS) that makes it easy to create and manage websites without needing to code everything from scratch.

It involves both a backend, admin interface, and a collection of files and folders on the server. The admin interface is accessed with a web browser, and the files and folders are accessed via FTP.

This week we are learning about themes and how they affect the presentation of your site.

How themes work in WordPress

Think of WordPress as two parts working together: content that is stored in a database, and templates, which are comprised of PHP files that live on the server.

  • Content generally refers to things that you can edit using the WordPress admin interface (also known as the Dashboard or UI).
  • Theme files live on the server in a folder inside wp-content/themes. Themes are comprised of templates, which are individual PHP files that manage the presentation of particular pieces of content. They allow you to re-use code across your site.
  • WordPress chooses which template to use based on what page you’re viewing (home page, single post, page, category, etc.). If it can’t find a specific template, it falls back to the generic index.php.
  • functions.php is where you add theme behavior (register a menu, load CSS/JS, enable features). It runs automatically when your theme is active.

Today we will create a child theme for Twenty Twenty-Five. A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. It allows you to make modifications without altering the parent theme's files, ensuring that your changes are preserved when the parent theme is updated.

Before we begin

You will need an FTP client (like FileZilla) and a code editor to follow along. Good, free code editors include VScode or Sublime Text. You can also use any text editor, like Notepad or TextEdit, but code editors have features that make coding easier.

How you’ll work with files

We will be editing files directly on the server today. This is not actually best practice - it's easy to mess things up and crash your site when you work directly on the server. Today, though, it will be easier and faster.

Your basic workflow will be:

  • Connect to your WordPress server on Filezilla
  • Create/edit files by double clicking them or right clicking and choosing "View/Edit"
  • Edit the file in VScode, then save it to re-upload to the server.
  • While working, keep your browser open with one tab logged into your Admin Dashboard and the other open to the frontend of your site.

Step 1 – Confirm the Active Theme

In your WP backend, go to Appearance → Themes and confirm that "Twenty Twenty-Five" is active.

Try activating a different theme and refreshing your frontend to see the change. What do you notice?

Go back and reactivate "Twenty Twenty-Five".

Step 2 – Locate Theme Files in the Filesystem

Connect to your server with FileZilla. Navigate to wp-content/themes.

Everything WordPress renders visually originates from this directory.

Step 3 - Inspect twentytwentyfive

Open the twentytwentyfive folder and identify the main files and folders used by the theme.

This folder contains the source layout templates, global styles, and reusable parts that define how the site looks before any customization.

Step 4 – Create the Child Theme Folder

Inside wp-content/themes, create a new folder named twentytwentyfive-child

WordPress treats this folder as a separate theme. Any files placed here override or extend the parent theme without modifying it.

Step 5 – Create Required Child Theme Files

Inside twentytwentyfive-child/, create:

  • style.css
  • functions.php

Insert this CSS into style.css:

/*
 Theme Name: Twenty Twenty-Five Child
 Theme URI: https://example.com/twentytwentyfive-child
 Description: A child theme of Twenty Twenty-Five
 Version: 1.0
 Template: twentytwentyfive
*/
/* Import parent theme styles */
@import url("../twentytwentyfive/style.css");

Save the file and confirm in FileZilla that you want to upload the changes.

Step 6 – Activate the Child Theme

In WP, go to Appearance → Themes and activate Twenty Twenty-Five Child. Check how it looks on the main page.

Once activated, WordPress still uses the parent theme’s files, but any overrides now come from the child theme. This confirms you are in control of customization

Step 7 - Update the CSS

Go back to style.css in VScode and add the following below the @import statement: 


body {
	background-color: #6c96f92e;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #c953ff;
	text-transform: uppercase;
}

Save and confirm in FileZilla you want to reupload.

Refresh your frontend - what do you see?

Step 8 - Load your CSS

The changes aren't showing up because, even though we defined the styles in style.css and activated the child theme, we haven't yet told WordPress to load this file.

To fix that, open functions.php in VScode and add the following code: 


<?php
add_action( 'wp_enqueue_scripts', 'twentytwentyfivechild_enqueue_styles' );

function twentytwentyfivechild_enqueue_styles() {
	wp_enqueue_style( 
		'twentytwentyfivechild-style', 
		get_stylesheet_uri()
	);
}

Save, reupload, and refresh your frontend. What do you see now?

Step 9 - Use the Admin Editor to adjust appearance

Inside WordPress, go to Appearance → Editor. Click Templates and then Blog Home.

On the page editor, select the header (where your site title is) and see the options that show up on the right. Select a different design style, save, and refresh your frontend to see the change.

Review: Template (file) vs Dashboard (UI) editing

WordPress gives multiple ways to customize the appearance and functionality of your site, including template editing and user interface editing.

As we learn more, it will become clearer how these approaches complement each other, and when you might choose one over the other.

Lab Submission Requirements

  • Screenshot of twentytwentyfive-child in FileZilla showing style.css and functions.php.
  • Screenshot of header changes made in the Site Editor.
  • A working link to your website.