Lesson 1 of 0
In Progress

Explore: Themes & Templates

Themes control the overall appearance of a WordPress site. They contain templates for pages and posts and allow users to customize the site with different fonts, colors, and other design elements. While you’ve probably installed, activated, and customized a theme in the Full Site Editor or WordPress Customizer before, you’ve likely never paid close attention to how a theme is put together so that it can be easily customized by users.

Before you begin working towards creating your own theme, you will first examine how a theme is constructed. But before you begin, you must first know the difference between the two types of themes that exist: Classic Themes and Block Themes.

Classic themes are the original WordPress theme type. To change colors or other design elements, you use the WordPress Customizer. If you have completed TurnKey Tech Ed’s eCommerce Using WooCommerce curriculum, you’ve worked with a classic theme (Storefront).

Block themes are a more modern type of theme that allow for more customization through the Full Site Editor. If you’ve completed TurnKey Tech Ed’s WordPress Essentials curriculum, you worked with a block theme and made color, font, and design changes in the Full Site Editor.

Directions: Visit the WordPress Theme Repository and analyze the files for two classic and two block themes. While you may not understand exactly what you are looking at, you should be able to determine the types of files that are commonly present within the theme folder and open each to make a prediction about what that file is used for.

Go to the WordPress Theme Repository (https://wordpress.org/themes/).

To find your two classic themes, type “classic” into the search bar.


When you find a theme that looks interesting to you, click on it. On the page for the theme, scroll to the bottom and look for “Browse the code” on the right. Then select “Browse in Trac”.


Depending on the theme, there may be several versions. Look for the most recent, which in the example below, was updated “8 days ago”. Press the small arrow next to the folder to open it and view the contents.


You can then open the folders in the theme or double click to open the actual theme files to view the code and respond to the questions below.

For your two block themes, follow the same instructions, but press the “Block Themes” button instead to narrow the options to block themes.

Name of Classic Theme 1:

  • Look for a folder called Templates or Template Parts. What templates are included in the theme?
  • Look at the files in the Template or Template Parts folder. What extension do most of them end with (.txt, .png, etc.)?
  • Open the index.php file. What do you think the purpose of this file is?
  • Open the style.css file. What do you think the purpose of this file is?
  • At the top of the style.css file there are several lines of code between the /* lines. What do you think the purpose of those lines is?
  • Open the functions.php file. What do you think the purpose of this file is?
  • Open the file called screenshot.png or screenshot.jpg. What do you think this is for?

Name of Classic Theme 2:

  • Look for a folder called Templates or Template Parts. What templates are included in the theme?
  • Look at the files in the Template or Template Parts folder. What extension do most of them end with (.txt, .png, etc.)?
  • Open the index.php file. What do you think the purpose of this file is?
  • Open the style.css file. What do you think the purpose of this file is?
  • At the top of the style.css file there are several lines of code between the /* lines. What do you think the purpose of those lines is?
  • Open the functions.php file. What do you think the purpose of this file is?
  • Open the file called screenshot.png or screenshot.jpg. What do you think this is for?

Name of Block Theme 1:

  • Look for a folder called Templates. What templates are included in the theme?
  • Look at the files in the Template folder. What extension do most of them end with (.txt, .png, etc.)?
  • Open the index.html file (this may be in the templates folder if you don’t see it listed with the other files). What do you think the purpose of this file is?
  • Open the style.css file. What do you think the purpose of this file is?
  • At the top of the style.css file there are several lines of code between the /* lines. What do you think the purpose of those lines is?
  • Open the functions.php file (if one exists). What do you think the purpose of this file is?
  • Open the theme.json file. What do you think the purpose of this file is?
  • Open the file called screenshot.png. What do you think this is for?

Name of Block Theme 2:

  • Look for a folder called Templates. What templates are included in the theme?
  • Look at the files in the Template folder. What extension do most of them end with (.txt, .png, etc.)?
  • Open the index.html file (this may be in the templates folder if you don’t see it listed with the other files). What do you think the purpose of this file is?
  • Open the style.css file. What do you think the purpose of this file is?
  • At the top of the style.css file there are several lines of code between the /* lines. What do you think the purpose of those lines is?
  • Open the functions.php file (if one exists). What do you think the purpose of this file is?
  • Open the theme.json file. What do you think the purpose of this file is?
  • Open the file called screenshot.png. What do you think this is for?

Compare & Contrast:

  • What are some things that classic and block themes have in common?
  • What differences do you see between classic and block themes?