🎨 Homework Assignment: Install Theme and Create Child Theme
Apply your knowledge of WordPress themes by installing a parent theme and creating a fully customized child theme with your own modifications.
Assignment Overview
1
Install and Configure Parent Theme (20 points)
Choose and install a parent theme from the WordPress repository.
Recommended Parent Themes (choose one):
- Astra- Lightweight and customizable
- GeneratePress- Performance-focused
- OceanWP- Feature-rich
- Neve- Fast and AMP ready
- Twenty Twenty-Four- Latest default theme
- Task 1.1:Install theme from WordPress admin dashboard
- Task 1.2:Activate and preview the theme
- Task 1.3:Configure basic theme settings
- Task 1.4:Test theme on different devices
- Task 1.5:Document parent theme features
2
Create Child Theme Structure (25 points)
Create a properly structured child theme for your chosen parent theme.
📁 wp-content/themes/
├── 📁 parent-theme-name/
└── 📁 parent-theme-name-child/
├── style.css (required)
├── functions.php (required)
├── screenshot.png
├── header.php
├── footer.php
├── page-custom.php
└── 📁 assets/
├── 📁 css/
├── 📁 js/
└── 📁 images/
Required: style.css header
/*
Theme Name: [Parent Theme Name] Child
Theme URI: http://yourdomain.com/
Description: Custom child theme for [Parent Theme Name]
Author: Your Name
Author URI: http://yourdomain.com
Template: parent-theme-folder-name
Version: 1.0.0
License: GPL v2 or later
Text Domain: parenttheme-child
*/
Required: functions.php
<?php
// Enqueue parent and child theme styles
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
3
Implement Customizations (30 points)
Add meaningful customizations to your child theme.
-
CSS Customizations (10 points):
- Change the site's color scheme
- Modify typography (fonts, sizes)
- Adjust spacing and layout
- Style at least 3 different elements
- Ensure responsive design is maintained
-
Template Override (10 points):
- Override at least one parent theme template file
- Make meaningful changes to the template
- Document what changes were made and why
-
Custom Functions (10 points):
- Add at least 3 custom functions in functions.php
- Examples: custom widget area, modify excerpt length, add custom image size
- Use proper WordPress hooks and filters
Example Custom Functions:
<?php
// Add custom widget area
function child_theme_widgets_init() {
register_sidebar( array(
'name' => 'Custom Widget Area',
'id' => 'custom-widget-area',
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'child_theme_widgets_init' );
// Modify excerpt length
function child_theme_excerpt_length( $length ) {
return 25;
}
add_filter( 'excerpt_length', 'child_theme_excerpt_length' );
// Add custom image size
function child_theme_setup() {
add_image_size( 'custom-thumbnail', 350, 200, true );
}
add_action( 'after_setup_theme', 'child_theme_setup' );
?>
4
Add Customizer Options (15 points)
Extend the WordPress Customizer with your own options.
- Create a new Customizer section
-
Add at least 3 custom settings:
- Color picker for accent color
- Text field for footer copyright
- Checkbox for show/hide element
- Implement live preview with selective refresh
<?php
function child_theme_customize_register( $wp_customize ) {
// Add section
$wp_customize->add_section( 'child_theme_options', array(
'title' => __( 'Child Theme Options', 'child-theme' ),
'priority' => 30,
) );
// Add color setting
$wp_customize->add_setting( 'accent_color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize,
'accent_color',
array(
'label' => __( 'Accent Color', 'child-theme' ),
'section' => 'child_theme_options',
)
) );
}
add_action( 'customize_register', 'child_theme_customize_register' );
?>
5
Documentation and Testing (10 points)
Document your work and test thoroughly.
-
Create a README.md file with:
- Child theme description
- List of customizations made
- Installation instructions
- Screenshots of changes
-
Test your child theme:
- Check responsiveness on mobile, tablet, desktop
- Test in different browsers
- Verify parent theme updates don't break child theme
- Run Theme Check plugin
📦 Deliverables
- Child theme folder- Zip file containing all child theme files
- Screenshots- Before and after screenshots showing customizations
- Documentation- README.md file with detailed documentation
- Code snippets- Key code examples with explanations
- Testing report- Brief report on testing performed
✔️ Submission Checklist
📊 Grading Rubric
| Component | Points | Criteria |
|---|---|---|
| Parent Theme Installation | 20 | Correct installation, activation, and configuration |
| Child Theme Structure | 25 | Proper file structure, naming, and required files |
| CSS Customizations | 10 | Meaningful style changes, responsive design |
| Template Overrides | 10 | Correct override implementation |
| Custom Functions | 10 | Working functions using proper hooks |
| Customizer Integration | 15 | Working customizer options with sanitization |
| Documentation & Testing | 10 | Complete documentation and testing report |
| Total | 100 |
🌟 Bonus Tasks (Up to 20 extra points)
- +5 points:Add custom JavaScript functionality
- +5 points:Create a custom page template
- +5 points:Implement translation support
- +5 points:Add WooCommerce compatibility (if applicable)
- +5 points:Achieve 90+ score on Google PageSpeed
- +5 points:Create custom Gutenberg block styles
📝 Submission Guidelines
-
Compress your child theme folderinto a ZIP file named:
firstname-lastname-child-theme.zip -
Include all screenshotsin a separate folder named:
screenshots - Submit via the course portalby the deadline
- Include your README.mdin the root of the child theme folder
- Ensure all code is properly commented
- Test your ZIP file- it should be installable via WordPress admin
💡 Pro Tips
- Start simple:Get the basic child theme working before adding complex features
- Use version control:Track your changes with Git
- Comment your code:Explain what each customization does
- Test frequently:Check your work after each major change
- Keep parent theme updated:Ensure compatibility with latest version
- Use browser dev tools:Inspect parent theme structure
- Follow WordPress coding standards:Use proper indentation and naming
- Optimize images:Compress any custom images you add
Remember