Skip to main content

Course Progress

Loading...

📚 Homework Assignment

Build a Complete Portfolio System

Apply your knowledge of Custom Post Types and Taxonomies

Estimated time: 4-6 hours

Project Overview

Create a comprehensive portfolio system for a creative agency website. This system will showcase various types of work including web design, branding, photography, and video production. You'll implement custom post types, taxonomies, metadata, and advanced display features.

Learning Goals:

  • Register and configure custom post types
  • Create hierarchical and non-hierarchical taxonomies
  • Implement term metadata with custom fields
  • Build custom templates for content display
  • Create filtering and sorting functionality
  • Optimize queries for performance

📋 Project Requirements

Your portfolio system must include the following components:

1 Custom Post Types

Create TWO custom post types:

  • Portfolio Items (portfolio)
  • Team Members (team_member)

Portfolio CPT Requirements:

  • Support for title, editor, thumbnail, excerpt
  • Custom icon in admin menu
  • Public with archive page
  • REST API enabled
  • Custom rewrite slug: 'work'
  • Menu position after Posts

Team Member CPT Requirements:

  • Support for title, editor, thumbnail
  • Custom icon in admin menu
  • Public but no archive
  • Exclude from search
  • Custom capability type

2 Custom Taxonomies

Create THREE taxonomies:

For Portfolio:

  • Service Type (service_type) - Hierarchical
  • Technologies (technology) - Non-hierarchical

For Team Members:

  • Department (department) - Hierarchical

Taxonomy Requirements:

  • Custom labels for all taxonomies
  • Show in admin columns
  • REST API enabled
  • Custom rewrite rules
  • Default terms for hierarchical taxonomies

3 Custom Fields & Meta

Portfolio Item Meta Fields:

  • Project URL (external link)
  • Client Name
  • Project Date
  • Featured Project (checkbox)
  • Project Gallery (multiple images)
  • Project Budget Range (select)

Team Member Meta Fields:

  • Job Title
  • Email Address
  • Phone Number
  • Social Media Links (Twitter, LinkedIn, GitHub)
  • Years of Experience
  • Skills (textarea)

Term Meta for Service Type:

  • Service Icon (image upload)
  • Service Color (color picker)
  • Featured Service (checkbox)
  • Service Order (number)

4 Templates

Create the following template files:

  • single-portfolio.php - Single portfolio item
  • archive-portfolio.php - Portfolio archive
  • single-team_member.php - Single team member
  • taxonomy-service_type.php - Service type archive
  • template-parts/content-portfolio.php - Portfolio loop item
  • template-parts/content-team.php - Team member card

Template Features:

  • Display all custom fields appropriately
  • Responsive layout
  • Proper escaping of output
  • Pagination on archive pages
  • Breadcrumb navigation

5 Display Features

Implement the following display features:

  • Portfolio grid with filtering by service type
  • AJAX loading for portfolio items
  • Related portfolio items on single pages
  • Team member grid with department filter
  • Featured projects section on homepage
  • Service type cards with term meta display
  • Search functionality within CPTs
  • Sort options (date, title, custom order)

6 Shortcodes

Create TWO shortcodes:

  • [portfolio] - Display portfolio items
  • [team] - Display team members

Shortcode Attributes:

  • count - Number of items to display
  • category - Filter by taxonomy term
  • layout - grid/list/carousel
  • columns - Number of columns (2,3,4)
  • orderby - Sort parameter

File Structure

Required Files Structure

theme/
├── functions.php
├── inc/
│   ├── cpt-portfolio.php
│   ├── cpt-team.php
│   ├── taxonomies.php
│   ├── meta-fields.php
│   ├── term-meta.php
│   └── shortcodes.php
├── single-portfolio.php
├── archive-portfolio.php
├── single-team_member.php
├── taxonomy-service_type.php
├── template-parts/
│   ├── content-portfolio.php
│   ├── content-portfolio-grid.php
│   ├── content-team.php
│   └── filters-portfolio.php
├── js/
│   ├── portfolio-filter.js
│   └── admin-term-meta.js
└── css/
    └── portfolio.css

Example Code Structure

// inc/cpt-portfolio.php
<?php
/**
 * Register Portfolio Custom Post Type
 */
function agency_register_portfolio_cpt() {
    $labels = array(
        'name'                  => _x( 'Portfolio', 'Post Type General Name', 'agency' ),
        'singular_name'         => _x( 'Portfolio Item', 'Post Type Singular Name', 'agency' ),
        // ... more labels
    );
    
    $args = array(
        'label'                 => __( 'Portfolio', 'agency' ),
        'labels'                => $labels,
        'supports'              => array( 'title', 'editor', 'thumbnail', 'excerpt', 'revisions' ),
        'taxonomies'            => array(),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'menu_icon'             => 'dashicons-portfolio',
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'rewrite'               => array( 'slug' => 'work' ),
        'capability_type'       => 'post',
        'show_in_rest'          => true,
    );
    
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'agency_register_portfolio_cpt', 0 );

🌟 Bonus Tasks (Optional)

For extra credit, implement these advanced features:

  • Implement lazy loading for portfolio images
  • Add a lightbox gallery for project images
  • Create an admin dashboard widget showing portfolio statistics
  • Implement view counting for popular projects
  • Add CSV export functionality for portfolio items
  • Create a REST API endpoint for portfolio data
  • Implement infinite scroll on archive pages
  • Add schema.org structured data markup
  • Create a portfolio slider block for Gutenberg
  • Implement caching with transients

💡 Tips for Success

  • Start with CPTs: Register your post types first, then add taxonomies
  • Test incrementally: Test each component as you build it
  • Use unique prefixes: Prefix all your functions to avoid conflicts
  • Check permalinks: Flush permalinks after registering CPTs
  • Validate and sanitize: Always validate input and escape output
  • Use version control: Commit your changes regularly
  • Test responsiveness: Check all templates on mobile devices
  • Document your code: Add comments explaining complex logic

Grading Rubric

Component Points Criteria
Custom Post Types 20 Both CPTs properly registered with all requirements
Taxonomies 15 All three taxonomies created and properly configured
Custom Fields 20 All meta fields implemented with proper saving/display
Templates 20 All required templates created and functioning
Display Features 15 Filtering, sorting, and AJAX functionality working
Shortcodes 10 Both shortcodes working with all attributes
Bonus Tasks +10 Extra credit for additional features

Success Criteria

Your project will be considered successful if it:

  • Registers all required CPTs and taxonomies correctly
  • Saves and displays all custom meta fields properly
  • Includes all required template files
  • Implements working filtering and sorting
  • Follows WordPress coding standards
  • Properly escapes all output
  • Is responsive and accessible
  • Includes code comments and documentation

Testing Checklist

Before Submission

  • CPTs appear in admin menu with correct icons
  • Can create, edit, and delete portfolio items
  • Can create, edit, and delete team members
  • Taxonomies show in post edit screens
  • Can assign terms to posts
  • Custom fields save and display correctly
  • Term meta fields work in taxonomy admin
  • Single post templates display all content
  • Archive pages show posts with pagination
  • Filtering and sorting work correctly
  • AJAX loading functions without errors
  • Related items display on single pages
  • Shortcodes output correct content
  • No PHP errors or warnings
  • Responsive on mobile devices

📤 Submission Guidelines

What to Submit:

  • Complete theme folder in a ZIP file
  • README.md with setup instructions
  • Screenshots of working features
  • Brief documentation of your implementation

File Naming:

Name your ZIP file: yourname-portfolio-cpt-assignment.zip

Include in README:

  • Theme installation instructions
  • List of implemented features
  • Any known issues or limitations
  • Bonus features implemented (if any)
  • Total time spent on assignment

Helpful Resources

📚
Reference Materials
Remember to flush permalinks after registering your CPTs and taxonomies. Go to Settings → Permalinks and click "Save Changes" without making any modifications.
🎯
Good Luck!

This assignment will help you master Custom Post Types and Taxonomies - essential skills for any WordPress developer. Take your time, test thoroughly, and don't hesitate to refer back to the lesson materials.

Remember: Quality is more important than speed. Focus on creating clean, well-documented code that follows WordPress best practices.