This module introduces the role of themes in WordPress and explains how theme development fits inside the WordPress Zero to Hero roadmap. You will understand the difference between using a theme, customizing a theme, and developing a custom theme. You will also learn how theme development connects to front-end development, PHP, WordPress functions, and professional project delivery.

1. Welcome to Theme & Front-End Development.
2. Where this course fits in the WordPress Zero to Hero program.
3. What is a WordPress theme?
4. Theme usage vs theme customization vs theme development.
5. Front-end development inside WordPress.
6. How WordPress generates the visible website.
7. Classic themes vs block themes overview.
8. What you will build during this course.

By the end of this module, you will understand what WordPress themes are, why they matter, and how theme development helps you control the design and front-end structure of WordPress websites.

This module explains the file and folder structure of a WordPress theme. You will learn where themes are stored, what files are required, and how WordPress recognizes a theme. You will also understand the purpose of important theme files such as style.css, index.php, functions.php, screenshot.png, and optional template files.

1. Where WordPress themes are stored.
2. Understanding the wp-content/themes directory.
3. Required theme files.
4. The role of style.css.
5. The role of index.php.
6. The role of functions.php.
7. Theme screenshot and theme metadata.
8. Common theme folders: assets, css, js, images, template-parts.
9. Organizing a clean theme structure.
10. Common mistakes in theme file organization.

By the end of this module, you will be able to identify the main parts of a WordPress theme and create the basic structure of a custom theme.

This module guides you through creating your first custom WordPress theme from scratch. You will create the required files, activate the theme, add theme metadata, connect CSS, and understand how WordPress loads your custom theme.

1. Creating a new theme folder.
2. Creating style.css.
3. Adding theme information.
4. Creating index.php.
5. Creating functions.php.
6. Adding screenshot.png.
7. Activating the theme from the dashboard.
8. Testing the theme on the front end.
9. Understanding common first-theme errors.
10. Organizing your theme project.

By the end of this module, you will be able to create, activate, and test a simple custom WordPress theme.

This module connects front-end development concepts with WordPress theme development. You will learn how HTML creates structure, CSS controls design, JavaScript adds interactivity, and PHP helps WordPress generate dynamic content.

1. How HTML appears inside WordPress themes.
2. How CSS controls theme design.
3. How JavaScript adds front-end interaction.
4. Static HTML vs dynamic WordPress output.
5. Adding basic HTML structure to a theme.
6. Styling theme elements with CSS.
7. Adding JavaScript behavior.
8. Understanding browser output.
9. Inspecting theme HTML with developer tools.
10. Avoiding messy front-end structure.

By the end of this module, you will understand how front-end technologies work inside WordPress themes and how to use them in a clean and organized way.

This module teaches the correct WordPress way to load CSS and JavaScript files. Instead of adding files manually in the HTML, you will learn how to use WordPress functions to enqueue styles and scripts properly.

1. Why enqueuing matters.
2. Problems with manually linking CSS and JavaScript.
3. Introduction to wp_enqueue_style.
4. Introduction to wp_enqueue_script.
5. Using functions.php to load assets.
6. Loading local CSS files.
7. Loading local JavaScript files.
8. Loading external assets carefully.
9. Dependencies and versioning.
10. Common enqueue mistakes.

By the end of this module, you will be able to load CSS and JavaScript files correctly using WordPress enqueue functions.

This module explains how to divide a WordPress theme into reusable layout parts. You will learn how to create header.php, footer.php, and main content areas, then connect them using WordPress template functions.

1. Why layout parts matter.
2. Creating header.php.
3. Creating footer.php.
4. Using get_header.
5. Using get_footer.
6. Adding the HTML document structure.
7. Adding wp_head.
8. Adding wp_footer.
9. Creating a clean page wrapper.
10. Common header and footer mistakes.

By the end of this module, you will be able to create reusable header and footer files and understand how WordPress themes organize page layouts.

The template hierarchy is one of the most important concepts in WordPress theme development. This module explains how WordPress decides which template file to use for different types of pages, including the homepage, single posts, pages, archives, categories, search results, and 404 pages.

1. What is the WordPress template hierarchy?
2. Why the template hierarchy matters.
3. How WordPress chooses template files.
4. index.php as the fallback template.
5. Homepage templates.
6. Single post templates.
7. Page templates.
8. Archive templates.
9. Category and tag templates.
10. Search and 404 templates.
11. Reading template hierarchy diagrams.
12. Common template hierarchy problems.

By the end of this module, you will understand how WordPress chooses template files and how to create the right template for each type of page.

The Loop is the core mechanism WordPress uses to display posts and content. This module teaches how WordPress retrieves and displays posts, pages, titles, content, excerpts, dates, authors, categories, tags, and featured images.

1. What is The Loop?
2. Why WordPress uses The Loop.
3. Understanding have_posts.
4. Understanding the_post.
5. Displaying the title.
6. Displaying the content.
7. Displaying excerpts.
8. Displaying post dates and authors.
9. Displaying categories and tags.
10. Displaying featured images.
11. Handling empty results.
12. Common Loop mistakes.

By the end of this module, you will be able to use The Loop to display WordPress content dynamically inside theme templates.

This module focuses on creating templates for individual posts and pages. You will learn the difference between posts and pages from a theme development perspective and how to control the layout of each.

1. Understanding single post templates.
2. Creating single.php.
3. Displaying post title and content.
4. Displaying post metadata.
5. Displaying featured images.
6. Displaying categories and tags.
7. Creating page.php.
8. Displaying page content.
9. Page layout differences.
10. Creating custom page templates.
11. Assigning page templates from the dashboard.
12. Testing post and page templates.

By the end of this module, you will be able to create and customize templates for single posts and pages.

This module teaches how to build templates for content lists and dynamic content collections. You will learn how WordPress displays archives, categories, tags, search results, and blog listing pages.

1. What are archive pages?
2. Creating archive.php.
3. Creating category.php.
4. Creating tag.php.
5. Creating search.php.
6. Displaying archive titles.
7. Displaying post lists.
8. Displaying excerpts in listings.
9. Adding pagination.
10. Handling no search results.
11. Improving archive page structure.
12. Common archive template mistakes.

By the end of this module, you will be able to create templates for archives, categories, tags, and search results.

Professional themes avoid repeating the same code in many files. This module introduces reusable template parts and component-based theme organization. You will learn how to create reusable files for post cards, content sections, page parts, and layout blocks.

1. Why reusable template parts matter.
2. Understanding template-parts.
3. Using get_template_part.
4. Creating reusable post cards.
5. Creating reusable content sections.
6. Reusing layout components.
7. Organizing component files.
8. Avoiding repeated code.
9. Improving theme maintainability.
10. Template parts best practices.

By the end of this module, you will be able to organize theme code into reusable template parts and build cleaner theme structures.

This module teaches how WordPress menus work inside themes. You will learn how to register menu locations, display menus in templates, style navigation, and create a clean site structure.

1. Understanding WordPress menus.
2. Registering menu locations.
3. Displaying menus with wp_nav_menu.
4. Creating header navigation.
5. Creating footer navigation.
6. Styling menus with CSS.
7. Building responsive navigation basics.
8. Dropdown menu basics.
9. Accessibility considerations for navigation.
10. Common menu problems.

By the end of this module, you will be able to register, display, and style WordPress navigation menus inside a custom theme.

This module explains how themes can include dynamic areas controlled from the WordPress dashboard. You will learn how to register sidebars and widget areas, display them in templates, and use them for flexible website sections.

1. What are sidebars and widget areas?
2. Registering a sidebar.
3. Displaying a sidebar in a theme.
4. Creating footer widget areas.
5. Creating blog sidebar layouts.
6. Styling widget areas.
7. Understanding dynamic content areas.
8. Widgets in classic themes.
9. Block-based widget areas overview.
10. Common sidebar and widget mistakes.

By the end of this module, you will be able to create and display dynamic widget areas inside WordPress themes.

This module explains how to add theme support for WordPress features such as featured images, title tags, custom logos, menus, and thumbnails. You will learn how to make your theme more integrated with WordPress dashboard features.

1. What is theme support?
2. Adding featured image support.
3. Displaying featured images.
4. Adding title tag support.
5. Adding custom logo support.
6. Adding menu support.
7. Adding post thumbnail sizes.
8. Working with media in templates.
9. Image sizes and performance basics.
10. Common media display problems.

By the end of this module, you will be able to add theme support for important WordPress features and display media professionally.

Modern websites must work across desktops, tablets, and mobile phones. This module teaches responsive design concepts and how to apply them inside WordPress themes using CSS, flexible layouts, and browser testing tools.

1. What is responsive design?
2. Mobile-first design concept.
3. Flexible containers.
4. CSS media queries.
5. Responsive typography.
6. Responsive images.
7. Responsive navigation.
8. Testing with browser developer tools.
9. Common mobile layout problems.
10. Improving user experience across devices.

By the end of this module, you will be able to create responsive WordPress theme layouts that work across different screen sizes.

This module focuses on writing cleaner CSS and creating consistent visual design. You will learn how to style theme elements such as headers, footers, buttons, sections, cards, blog lists, single posts, pages, forms, and navigation menus.

1. Organizing CSS files.
2. Global styles and design consistency.
3. Styling typography.
4. Styling buttons and links.
5. Styling headers and footers.
6. Styling post cards.
7. Styling single post pages.
8. Styling page sections.
9. Styling forms.
10. Creating spacing systems.
11. Avoiding CSS conflicts.
12. CSS debugging with browser tools.

By the end of this module, you will be able to style WordPress themes in a clean, consistent, and professional way.

This module introduces simple JavaScript interactions commonly used in WordPress themes. You will learn how to add interactive front-end behavior such as menus, toggles, sliders, tabs, accordions, and scroll effects in a controlled and organized way.

1. JavaScript role in WordPress themes.
2. Loading JavaScript properly.
3. DOM selection basics.
4. Mobile menu toggle.
5. Accordion sections.
6. Tabs and content switching.
7. Simple slider concept.
8. Scroll effects basics.
9. Avoiding JavaScript conflicts.
10. Debugging JavaScript errors.

By the end of this module, you will be able to add simple JavaScript interactions to WordPress themes safely and professionally.

Theme development requires testing and debugging. This module teaches how to inspect HTML, CSS, JavaScript, PHP output, loaded files, and layout problems. You will learn how to use browser developer tools and WordPress debugging practices to identify and fix front-end issues.

1. Debugging mindset for theme development.
2. Inspecting HTML output.
3. Testing CSS changes in the browser.
4. Debugging responsive layouts.
5. Checking console errors.
6. Checking loaded CSS and JavaScript files.
7. Understanding missing asset problems.
8. Common PHP display issues.
9. WordPress debug mode overview.
10. Fixing common theme errors.

By the end of this module, you will be able to inspect and troubleshoot common theme and front-end development problems.

WordPress has evolved from classic PHP-based themes to modern block themes and full site editing. This module gives an overview of the difference between classic themes and block themes, helping students understand the current WordPress theme landscape.

1. What are classic themes?
2. What are block themes?
3. Template files in classic themes.
4. Templates in block themes.
5. Introduction to Full Site Editing.
6. Understanding theme.json.
7. When to use classic themes.
8. When to use block themes.
9. How modern WordPress affects theme development.
10. Preparing for modern WordPress learning.

By the end of this module, you will understand the difference between classic themes and block themes and how theme development is evolving in modern WordPress.

This module introduces professional practices for building cleaner, safer, and more maintainable WordPress themes. You will learn naming conventions, file organization, code readability, security basics, performance awareness, accessibility basics, and documentation habits.

1. Clean theme structure.
2. Naming files and functions clearly.
3. Avoiding repeated code.
4. Separating structure, style, and behavior.
5. Escaping output basics.
6. Sanitization concept overview.
7. Accessibility basics.
8. Performance-aware theme development.
9. Avoiding heavy and unnecessary assets.
10. Writing theme documentation.
11. Preparing a theme for portfolio use.

By the end of this module, you will understand the basic professional standards needed to build cleaner and more maintainable WordPress themes.

In the final module, you will apply what you learned by building a complete custom WordPress theme project. This project brings together theme structure, templates, layout parts, The Loop, menus, archive pages, single pages, responsive design, styling, JavaScript interactions, debugging, and documentation.

1. Build a custom WordPress theme that includes:
2. Homepage layout.
3. Header and footer.
4. Navigation menu.
5. Blog listing page.
6. Single post template.
7. Page template.
8. Archive template.
9. Category or tag template.
10. Search results template.
11. 404 page.
12. Reusable template parts.
13. Featured image support.
14. Custom logo support.
15. Responsive layout.
16. Styled buttons, cards, sections, and typography.
17. Basic JavaScript interaction.
18. Clean file organization.
19. Project documentation.

By the end of this module, you will have a complete custom WordPress theme project that demonstrates your ability to build and customize WordPress front-end structures professionally.