Art 114: Interactive Media and Design

Spring 2025 | Harrisburg Area Community College

Instructor: Rich Hauck, MPS

Custom WordPress Theming

Custom themes are a way to have full control over your site design. WordPress publishes thorough documentation on custom theme development on their Codex and in their theme handbook.

Block vs. Classic vs. Hybrid theme

Classic Block (Full Site Editing - FSE) Hybrid Headless
  • Traditional PHP-based themes that rely on the WordPress Customizer, widgets, and theme options for customization.
  • Uses PHP template files (e.g., header.php, footer.php, index.php) to render different parts of a website.
  • Support shortcodes, widgets, and meta boxes for additional functionality.
  • Use the Customizer for settings rather than full-site editing.
  • Examples: Astra, GeneratePress, OceanWP.
  • Built entirely with blocks, using the WordPress Site Editor for designing all parts of the website, including headers, footers, and templates.
  • Use HTML template parts (header.html, footer.html) instead of PHP template files.
  • No reliance on the Customizer, widgets, or theme options—everything is controlled via the block editor (Gutenberg).
  • Utilize theme.json for global styles (colors, fonts, layout).
  • Examples: Twenty Twenty-Two through Twenty Twenty-Five.
  • A mix of Classic and Block themes, allowing partial Full Site Editing features while retaining PHP-based templating.
  • Support both customizer-based settings and block-based features like theme.json for global styles.
  • Allow developers to transition gradually from classic themes to block themes.
  • Examples: Kadence, Neve, Blocksy.
  • This uses the WordPress admin panel for managing content, but the frontend is rendered completely separate
  • Uses WordPress's REST API.
  • Examples: Faust.js
Best for: Users who prefer traditional WordPress themes and developers who are comfortable with PHP-based template editing. Best for: Users who want to make a theme without needing to edit code. Best for: Users who want the flexibility of classic themes but also want to incorporate new block-based customization options. Best for: Performance, security, and developers who don't want to use older technologies like PHP.

For this class, we'll be looking at hybrid themes.


Popular starter themes


Steps to create a custom Block theme

  1. Install Wordpress.
    This will vary according to your shared hosting. You may need to download it from WordPress.org.
  2. Install the Create Block Theme plugin.
    1. Install and activate it.
    2. Under "Appearance", choose "Create a new Blank Theme"
    3. Provide a Theme Name, Theme Description, and list yourself as the Author. Then clicke the "Create and Activate Blank Theme".
  3. Create a file in your theme named functions.php. Add the code below. This will load CSS you add to style.css into your custom theme.
    <?php
    // Enqueues style.css on the front.
    if ( ! function_exists( 'mytheme_enqueue_styles' ) ) :
    /**
    * Enqueues style.css on the front.
    * @return void
    */

    function mytheme_enqueue_styles() {
    wp_enqueue_style(
    'mytheme-style',
    get_parent_theme_file_uri( 'style.css' ),
    array(),
    wp_get_theme()->get( 'Version' ) ); } endif; add_action( 'wp_enqueue_scripts',
    'mytheme_enqueue_styles' );
  4. Create Static Front Page