Build a very simple theme for WordPress

In this tutorial we talk about creating a really simple theme.

1. Install and configure WordPress.

You can go to this link and download WordPress.

2. Create a simple theme

Lets go to themes folder and add these files

/test-theme       # Root folder of your theme
|-- assets               # Contains all static resources like images, JS, and CSS
|   |-- css              # CSS files
|   |   |-- styles.css   # Main stylesheet
|   |-- js               # JavaScript files
|   |   |-- script.js    # Main JavaScript file
|   |-- images           # Store all your images here
|       |-- logo.png     # Example image
|
|-- header.php           # Header template
|-- footer.php           # Footer template
|-- functions.php        # Theme functions file
|-- index.php            # Main theme file
|-- style.css            # Main stylesheet for WordPress theme meta information

This is header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
    <div class="header-content">
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </div>
    <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
</header>

This is footer.php

<footer>
    <p>&copy; <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

This is functions.php

<?php

function your_theme_setup() {
    // Add theme support for document title tag
    add_theme_support('title-tag');

    // Register navigation menu
    register_nav_menus(array(
        'main-menu' => 'Main Menu',
    ));
}

add_action('wp_head', 'your_theme_setup');

This is index.php

<?php get_header(); ?>

<main>
    <section>
        <h2>Welcome to My WordPress Theme</h2>
        <p>This is a basic WordPress theme template.</p>
    </section>
</main>

<?php get_footer(); ?>

code for style.css

/*
Theme Name: Your Theme Name
Theme URI: http://example.com/your-theme-name/
Author: Your Name or Your Company's Name
Author URI: http://example.com/
Description: A brief description of the theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: your-theme-slug
Tags: one-column, two-columns, right-sidebar, flexible-header
*/

/* General body styles */
body {
    background-color: #f1f1f1;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Header styles */
header {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}

/* Footer styles */
footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

With this setup, you've created a basic structure for a WordPress theme with distinct sections for the header, footer, main content, and assets. This organization helps maintain clean and manageable code across different parts of your theme.

Now got to themes indashboard and activate it.