Art 114: Interactive Media and Design

Spring 2026 | Harrisburg Area Community College

Instructor: Rich Hauck, MPS

Hybrid Theme Tutorial

This tutorial will get you started on building your own custom "Classic" WordPress theme.

What's a WordPress Theme?

Themes dictate the look and feel of your WordPress site. Ultimately, it's a folder that contains the template files for your design. At the absolute minimum, a custom WordPress theme needs:

  • A theme folder
  • A style.css file
  • An index.php file

Creating a WordPress Theme

  1. Create the theme folder
    1. In your WordPress folder, navigate to /wp-content/themes. This is where all of your installed themes are located.
    2. Create a new folder. The name of the folder should be lowercase with no spaces. You can name it what you like, but for this tutorial we'll use my-first-theme. The path should be /wp-content/themes/my-first-theme/
  2. Create your style.css file
    1. Inside of your theme folder, create a file named style.css. Within that file, add the following code: 
      /*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: My custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

      This comment block is required, as it is what displays when you navigate to the appearance portion of your WordPress admin. Feel free to customize it with your own information.

    2. Below this, you can start adding your own custom CSS.
  3. Create a screenshot.png
    1. Create a 1200x900px image named screenshot.png (No transparency) that represents your theme. This will serve as the image preview within the WordPress admin, so you might want to use a screenshot of your design.
    2. Save this file in your custom theme folder. WordPress will automatically detect it.
  4. Creating index.php with "the Loop"
    1. Inside of your theme folder, create a file named index.php. Add the following into the file: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p>No content found.</p>
  <?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>

      2. This adds the "loop", which is the PHP code that loops through all of the posts on a page and displays them. In this example, we're displaying the title and content of each post.

      You can read more about the loop and all of the different template tags you can use in the WordPress documentation on the loop.

      This index.php file serves as the main template of your theme, and all pages and posts ultimately get rendered through this page. However, you can create additional template files to customize the look of different types of pages. For example, you could create a single.php file to customize the look of individual posts, or a page.php file to customize the look of static pages. If WordPress detects these files, it will use them instead of index.php for the appropriate pages. For complete documentation of the naming conventions, see the WordPress documentation on the template hierarchy.

  5. Create a header.php and footer.php

    It's common to create header.php and footer.php files that contain all of the HTML and PHP code that is shared across all pages in your theme.

    header.php

    This example retrieves the title, pulls in the stylesheet, and calls wp_head(). 

    <?php
/**
 * @package WordPress
 * @subpackage My Custom Theme
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    To reference files in your theme folder, you can inject this PHP code: 

    <?php bloginfo('stylesheet_directory'); ?>

    For instance, here's an example of loading a file from /my-first-theme/css/defaults.css: 

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/defaults.css" type="text/css" media="all" />

    footer.php

    The footer calls wp_footer(), which is a WordPress function that outputs necessary code for the theme to function properly. 

    <?php wp_footer(); ?>
</body>
</html>

    Here's the end result:

    <?php get_header(); ?>
<main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p>No content found.</p>
  <?php endif; ?>
</main>
<?php get_footer(); ?>