Skip to content

custom-theme-portfolio.md

Latest commit

 

History

History
516 lines (426 loc) · 12.9 KB

custom-theme-portfolio.md

File metadata and controls

516 lines (426 loc) · 12.9 KB

🎨 Custom Theme Portfolio Project

Project Overview

Create a professional portfolio theme that showcases your WordPress development skills. This project demonstrates theme development fundamentals, template hierarchy, and modern WordPress practices.

Difficulty: Beginner
Estimated Time: 8-12 hours
Skills Demonstrated: Theme development, template hierarchy, CSS/HTML, WordPress customization

🎯 Project Goals

  • Build a complete WordPress theme from scratch
  • Implement proper template hierarchy
  • Create responsive, accessible design
  • Add theme customizer options
  • Optimize for performance and SEO

📁 Project Structure

portfolio-theme/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── screenshot.png
├── assets/
│   ├── css/
│   │   ├── main.css
│   │   └── responsive.css
│   ├── js/
│   │   └── main.js
│   └── images/
├── inc/
│   ├── customizer.php
│   ├── template-functions.php
│   └── template-tags.php
└── template-parts/
    ├── content.php
    ├── content-page.php
    └── content-none.php

🚀 Step-by-Step Implementation

Step 1: Theme Header and Basic Setup

style.css

/*
Theme Name: Portfolio Pro
Theme URI: https://yourwebsite.com/portfolio-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: A professional portfolio theme for WordPress developers
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio-pro
Tags: portfolio, responsive, custom-menu, custom-logo, featured-images
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Links */
a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #005177;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0073aa;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #005177;
    color: white;
}

Step 2: Functions File Setup

functions.php

<?php
/**
 * Portfolio Pro Theme Functions
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Theme setup
function portfolio_pro_setup() {
    // Add theme support
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
    add_theme_support('custom-logo');
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ));
    
    // Register navigation menus
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'portfolio-pro'),
        'footer' => __('Footer Menu', 'portfolio-pro'),
    ));
    
    // Add image sizes
    add_image_size('portfolio-thumbnail', 400, 300, true);
    add_image_size('portfolio-large', 800, 600, true);
}
add_action('after_setup_theme', 'portfolio_pro_setup');

// Enqueue scripts and styles
function portfolio_pro_scripts() {
    // Google Fonts
    wp_enqueue_style('portfolio-pro-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    
    // Theme styles
    wp_enqueue_style('portfolio-pro-style', get_stylesheet_uri());
    wp_enqueue_style('portfolio-pro-main', get_template_directory_uri() . '/assets/css/main.css');
    
    // Theme scripts
    wp_enqueue_script('portfolio-pro-main', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'portfolio_pro_scripts');

// Include additional files
require get_template_directory() . '/inc/customizer.php';
require get_template_directory() . '/inc/template-functions.php';
require get_template_directory() . '/inc/template-tags.php';

Step 3: Header Template

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div id="page" class="site">
    <header id="masthead" class="site-header">
        <div class="container">
            <div class="header-content">
                <div class="site-branding">
                    <?php if (has_custom_logo()) : ?>
                        <?php the_custom_logo(); ?>
                    <?php else : ?>
                        <h1 class="site-title">
                            <a href="<?php echo esc_url(home_url('/')); ?>">
                                <?php bloginfo('name'); ?>
                            </a>
                        </h1>
                        <p class="site-description"><?php bloginfo('description'); ?></p>
                    <?php endif; ?>
                </div>

                <nav id="site-navigation" class="main-navigation">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'menu_id' => 'primary-menu',
                        'container' => false,
                        'fallback_cb' => 'portfolio_pro_fallback_menu',
                    ));
                    ?>
                </nav>
            </div>
        </div>
    </header>

    <div id="content" class="site-content">

Step 4: Main Index Template

index.php

<?php get_header(); ?>

<main id="main" class="site-main">
    <div class="container">
        <?php if (have_posts()) : ?>
            <div class="posts-grid">
                <?php while (have_posts()) : the_post(); ?>
                    <?php get_template_part('template-parts/content', get_post_type()); ?>
                <?php endwhile; ?>
            </div>

            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => __('Previous', 'portfolio-pro'),
                'next_text' => __('Next', 'portfolio-pro'),
            ));
            ?>

        <?php else : ?>
            <?php get_template_part('template-parts/content', 'none'); ?>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>

Step 5: Content Template Part

template-parts/content.php

<article id="post-<?php the_ID(); ?>" <?php post_class('post-card'); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('portfolio-thumbnail'); ?>
            </a>
        </div>
    <?php endif; ?>

    <div class="post-content">
        <header class="entry-header">
            <?php if (is_singular()) : ?>
                <h1 class="entry-title"><?php the_title(); ?></h1>
            <?php else : ?>
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
            <?php endif; ?>

            <div class="entry-meta">
                <span class="posted-on">
                    <?php echo get_the_date(); ?>
                </span>
                <span class="byline">
                    <?php echo get_the_author(); ?>
                </span>
            </div>
        </header>

        <div class="entry-content">
            <?php if (is_singular()) : ?>
                <?php the_content(); ?>
            <?php else : ?>
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
            <?php endif; ?>
        </div>
    </div>
</article>

Step 6: Footer Template

footer.php

    </div><!-- #content -->

    <footer id="colophon" class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-info">
                    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
                </div>
                
                <nav class="footer-navigation">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'footer',
                        'menu_id' => 'footer-menu',
                        'container' => false,
                    ));
                    ?>
                </nav>
            </div>
        </div>
    </footer>
</div><!-- #page -->

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

🎨 Customization Options

Theme Customizer Integration

inc/customizer.php

<?php
/**
 * Theme Customizer
 */

function portfolio_pro_customize_register($wp_customize) {
    // Hero Section
    $wp_customize->add_section('portfolio_pro_hero', array(
        'title' => __('Hero Section', 'portfolio-pro'),
        'priority' => 30,
    ));

    // Hero Title
    $wp_customize->add_setting('hero_title', array(
        'default' => 'Welcome to My Portfolio',
        'sanitize_callback' => 'sanitize_text_field',
    ));

    $wp_customize->add_control('hero_title', array(
        'label' => __('Hero Title', 'portfolio-pro'),
        'section' => 'portfolio_pro_hero',
        'type' => 'text',
    ));

    // Hero Subtitle
    $wp_customize->add_setting('hero_subtitle', array(
        'default' => 'WordPress Developer & Designer',
        'sanitize_callback' => 'sanitize_text_field',
    ));

    $wp_customize->add_control('hero_subtitle', array(
        'label' => __('Hero Subtitle', 'portfolio-pro'),
        'section' => 'portfolio_pro_hero',
        'type' => 'text',
    ));

    // Colors
    $wp_customize->add_setting('primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array(
        'label' => __('Primary Color', 'portfolio-pro'),
        'section' => 'colors',
    )));
}
add_action('customize_register', 'portfolio_pro_customize_register');

📱 Responsive Design

assets/css/responsive.css

/* Tablet Styles */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}

/* Mobile Styles */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .post-card {
        margin-bottom: 2rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

🧪 Testing Checklist

  • Theme activates without errors
  • All template files load correctly
  • Navigation menus work properly
  • Featured images display correctly
  • Responsive design works on mobile
  • Customizer options save and display
  • SEO meta tags are present
  • Performance is optimized

🚀 Deployment Guide

  1. Create a ZIP file of your theme directory
  2. Upload to WordPress via Appearance > Themes > Add New
  3. Activate the theme and test all functionality
  4. Customize colors and content via the Customizer
  5. Add sample content to showcase the theme
  6. Take screenshots for your portfolio

📸 Portfolio Presentation

Screenshots to Include:

  • Homepage (desktop and mobile)
  • Single post page
  • Archive page
  • Customizer interface
  • Responsive breakpoints

Documentation to Prepare:

  • Project Overview: What the theme does and who it's for
  • Technical Features: WordPress features implemented
  • Customization Options: What users can modify
  • Performance Metrics: Page load times, optimization techniques
  • Code Quality: Standards followed, best practices implemented

Live Demo Setup:

  • Deploy on a live WordPress site
  • Add sample content and images
  • Test all functionality
  • Optimize for performance
  • Add analytics tracking

🎯 Next Steps

  1. Enhance the theme with additional features
  2. Add more customization options in the Customizer
  3. Implement advanced features like custom post types
  4. Create child theme for client customization
  5. Add to WordPress.org theme directory (optional)

This project demonstrates your ability to create professional WordPress themes and serves as an excellent portfolio piece for potential clients or employers.