Wordpressframework~30 mins

Theme from scratch setup in Wordpress - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Theme from scratch setup

📖 Scenario: You want to create a simple WordPress theme from scratch to understand how themes work. This theme will have a basic structure with a header, footer, and a main content area.

🎯 Goal: Build a minimal WordPress theme with the required files and basic template tags to display a site title and content.

📋 What You'll Learn

Create a style.css file with theme header information

Create an index.php file with basic HTML structure and WordPress loop

Add a functions.php file to enqueue the stylesheet

Add header and footer template parts and include them in index.php

💡 Why This Matters

🌍 Real World

Creating a WordPress theme from scratch helps you understand how themes control site appearance and content display.

💼 Career

WordPress theme development is a common job skill for web developers working with content management systems.

Progress0 / 4 steps

Create the theme stylesheet with header

Create a file named style.css with the exact theme header comment including Theme Name: My First Theme and set the body background color to #f0f0f0.

Wordpress

/*
Theme Name: My First Theme
*/

body {
    background-color: #f0f0f0;
}

# Your code here

Need a hint?

The theme header comment must start with /* and include Theme Name: My First Theme.

Create the main template file with basic HTML and WordPress loop

Create a file named index.php with a basic HTML5 structure. Inside the <body>, add a WordPress loop using have_posts() and the_post() to display the post title with the_title() and content with the_content().

Wordpress

/*
Theme Name: My First Theme
*/

body {
    background-color: #f0f0f0;
}

Need a hint?

Use have_posts() and the_post() to loop through posts and display the title and content.

Add functions.php to enqueue the stylesheet

Create a file named functions.php and add a function called my_theme_enqueue_styles that uses wp_enqueue_style to load the theme's style.css. Hook this function to wp_enqueue_scripts.

Wordpress

/*
Theme Name: My First Theme
*/

body {
    background-color: #f0f0f0;
}



<?php
// Your code here

Need a hint?

Use add_action to hook your enqueue function to wp_enqueue_scripts.

Add header.php and footer.php and include them in index.php

Create header.php with the opening HTML tags and site title using bloginfo('name'). Create footer.php with closing </body> and </html> tags. Modify index.php to include get_header() at the top and get_footer() at the bottom inside the <body>.

Wordpress

/*
Theme Name: My First Theme
*/

body {
    background-color: #f0f0f0;
}




    
    
    
    ">


    
    
        
        
    
    



<?php
// functions.php
function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Need a hint?

Use get_header() and get_footer() in index.php to include the header and footer templates.