simple normal WordPress theme using the five main files:

my-normal-theme/
│
├── style.css
├── functions.php
├── header.php
├── index.php
└── footer.php

Create the folder here:

xampp/htdocs/wordpress/wp-content/themes/my-normal-theme/

1. `style.css`

/*
Theme Name: My Normal Theme
Theme URI: http://localhost/wordpress
Author: Your Name
Description: A simple WordPress theme for learning.
Version: 1.0
*/

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    color: #333;
}

.site-header {
    background: #333;
    color: white;
    padding: 20px;
}

.site-header h1 {
    margin: 0;
}

.site-header a {
    color: white;
    text-decoration: none;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.site-content {
    width: 80%;
    margin: 30px auto;
    background: white;
    padding: 30px;
}

.post {
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.post h2 {
    color: #333;
}

.post h2 a {
    text-decoration: none;
    color: #333;
}

.site-footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

2. `functions.php`

<?php

function my_normal_theme_setup() {

    // Add title tag support
    add_theme_support('title-tag');

    // Add featured image support
    add_theme_support('post-thumbnails');

    // Register navigation menu
    register_nav_menus(array(
        'primary' => 'Primary Menu'
    ));
}

add_action('after_setup_theme', 'my_normal_theme_setup');


// Load CSS file
function my_normal_theme_scripts() {

    wp_enqueue_style(
        'main-style',
        get_stylesheet_uri()
    );
}

add_action('wp_enqueue_scripts', 'my_normal_theme_scripts');

?>

3. `header.php`

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>

    <meta charset="<?php bloginfo('charset'); ?>">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php wp_head(); ?>

</head>

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

<header class="site-header">

    <div class="container">

        <h1>
            <a href="<?php echo esc_url(home_url('/')); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </h1>

        <p><?php bloginfo('description'); ?></p>

        <nav>

            <?php
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'fallback_cb' => false
            ));
            ?>

        </nav>

    </div>

</header>

<main class="site-content">

4. `index.php`

<?php get_header(); ?>

<h1>Latest Posts</h1>

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <article class="post">

            <h2>
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
            </h2>

            <p>
                Posted on <?php echo get_the_date(); ?>
                by <?php the_author(); ?>
            </p>

            <?php if (has_post_thumbnail()) : ?>

                <?php the_post_thumbnail('medium'); ?>

            <?php endif; ?>

            <div>
                <?php the_excerpt(); ?>
            </div>

            <a href="<?php the_permalink(); ?>">
                Read More
            </a>

        </article>

    <?php endwhile; ?>

    <?php the_posts_pagination(); ?>

<?php else : ?>

    <h2>No Posts Found</h2>

    <p>Sorry, there are currently no posts available.</p>

<?php endif; ?>

<?php get_footer(); ?>

5. `footer.php`

</main>

<footer class="site-footer">

    <p>
        &copy; <?php echo date('Y'); ?>

        <?php bloginfo('name'); ?>.

        All Rights Reserved.
    </p>

</footer>

<?php wp_footer(); ?>

</body>

</html>

How the files work together

                 WordPress
                     │
                     ▼
                index.php
                /       \
               ▼         ▼
          header.php   footer.php
               │         │
               ▼         ▼
          Navigation    Copyright
          Site Title
               │
               ▼
            style.css

        functions.php
              │
              ▼
      Theme setup + CSS
      + Menu registration

Important WordPress functions

File	Main purpose
`style.css`	Theme information and design/CSS
`functions.php`	Theme functions, menus, CSS loading
`header.php`	Header, site title, navigation
`index.php`	Displays posts using The Loop
`footer.php`	Footer and WordPress footer hooks

Activate the theme

Start Apache and MySQL in XAMPP.
Open WordPress Admin.
Go to Appearance → Themes.
Find My Normal Theme.
Click Activate.
Go to Appearance → Menus and create a menu.
Assign it to Primary Menu.

This gives you a basic working WordPress theme that is suitable for college practical/exam learning.

Breaking

simple normal WordPress theme using the five main files:

1. `style.css`

2. `functions.php`

3. `header.php`

4. `index.php`

5. `footer.php`

How the files work together

Important WordPress functions

Activate the theme

By admin