Skip to main content

Course Progress

Loading...

🚀 Homework: Expand Your WordPress Theme

Apply template hierarchy concepts to build a professional theme structure

Estimated Time: 3-4 hours | Due: Before Session 3

Assignment Overview

Building on your minimal theme from Session 1, you'll now expand it with proper template hierarchy, modular template parts, and professional structure. This hands-on assignment will solidify your understanding of how WordPress selects templates and how to organize theme files effectively.

💡
Learning Goals
By completing this homework, you'll gain practical experience with template hierarchy, get_template_part(), and modular theme architecture - essential skills for professional WordPress development.

Core Assignments

1
Easy

Create Template Hierarchy Structure

Build out the main template files for different content types:

  • Create single.php for blog posts
  • Create page.php for static pages
  • Create archive.php for archive pages
  • Create search.php for search results
  • Create 404.php for error pages
Each template should have unique content to verify WordPress is selecting the correct file
2
Medium

Implement Template Parts

Modularize your theme with reusable template parts:

  • Create a template-parts/ folder
  • Build content.php for default post content
  • Build content-page.php for page content
  • Build content-none.php for no results
  • Use get_template_part() in main templates
Replace duplicate code in templates with get_template_part() calls
3
Medium

Add Category Templates

Create specialized category templates:

  • Create category.php for all categories
  • Create a specific category template (e.g., category-news.php)
  • Add category description display
  • Customize the layout for categories
Test with at least 2 different categories to verify hierarchy
4
Hard

Create Custom Page Template

Build a custom page template with unique layout:

  • Create page-templates/full-width.php
  • Add proper template header comment
  • Remove sidebar for full-width layout
  • Test template selection in page editor
  • Style appropriately with CSS
/* Template Name: Full Width Layout */
5
Hard

Implement Header/Footer Variations

Create conditional header/footer loading:

  • Create header-home.php for homepage
  • Create footer-simple.php for specific pages
  • Use get_header('home') conditionally
  • Use get_footer('simple') conditionally
  • Add visual differences to each variation
if ( is_front_page() ) { get_header( 'home' ); }
6
Medium

Pass Arguments to Template Parts

Use WordPress 5.5+ argument passing:

  • Pass custom classes to template parts
  • Pass display options (show/hide elements)
  • Handle arguments with defaults
  • Create backwards-compatible fallback
get_template_part( 'template-parts/content', null, array( 'class' => 'featured' ) );

Expected File Structure

After completing the assignments, your theme structure should look like this:

my-theme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── header-home.php          ← New
├── footer.php
├── footer-simple.php        ← New
├── sidebar.php
├── single.php               ← New
├── page.php                 ← New
├── archive.php              ← New
├── category.php             ← New
├── category-news.php        ← New (example)
├── search.php               ← New
├── 404.php                  ← New
├── page-templates/          ← New folder
│   └── full-width.php
├── template-parts/          ← New folder
│   ├── content.php
│   ├── content-page.php
│   ├── content-none.php
│   └── content-search.php
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── screenshot.png

Submission Checklist

🌟 Bonus Challenges

Want to go above and beyond? Try these optional challenges:

  • Post Format Support: Add support for different post formats (aside, gallery, video) with unique templates
  • Author Templates: Create author.php and author-{id}.php for author archives
  • Date Archives: Implement date.php for date-based archives
  • Attachment Template: Create attachment.php for media files
  • Debug Helper: Build a template hierarchy debugger that shows which template is being used
  • Template Part Variations: Create content-{post-format}.php variations
  • Ajax Loading: Use get_template_part() in an AJAX handler for dynamic content

Testing Your Theme

How to Test Template Hierarchy

  1. Homepage: Visit your site root to test front-page.php or home.php
  2. Single Post: Click any blog post to test single.php
  3. Page: Visit any static page to test page.php
  4. Category: Click a category link to test category.php
  5. Search: Use the search form to test search.php
  6. 404: Visit a non-existent URL to test 404.php
  7. Custom Template: Create/edit a page and select your custom template

Debug Tips

// Add to functions.php for debugging
add_action( 'wp_head', function() {
    if ( current_user_can( 'manage_options' ) ) {
        global $template;
        echo '<!-- Template: ' . basename( $template ) . ' -->';
    }
});

Common Issues & Solutions

⚠️
Template Not Loading?
  • Check file naming (must match WordPress conventions exactly)
  • Ensure files are in theme root (not in subdirectories unless specified)
  • Clear any caching plugins
  • Verify file permissions (should be readable by web server)
⚠️
Custom Page Template Not Appearing?
  • Ensure template header comment is at the very top of the file
  • Check for typos in "Template Name:"
  • Refresh the page editor after adding the template
  • Verify the file is in the correct location

Helpful Resources

📅 Submission Guidelines

Due: Complete before Session 3 - The Loop & Content Display

Zip your entire theme folder and be prepared to discuss your implementation choices in the next session.

We'll review common patterns and best practices based on your submissions!

Pro Tips for Success

Best Practices to Follow

  • Start Simple: Get basic templates working before adding complexity
  • Test Often: Check each template as you create it
  • Use Comments: Document what each template is for
  • Keep DRY: Don't Repeat Yourself - use template parts for repeated code
  • Follow Naming: Use WordPress naming conventions exactly
  • Version Control: Commit your changes frequently with Git
  • Browser DevTools: Use inspector to verify which template loads
  • Create Content: Add sample posts/pages/categories for testing