0
0
Wordpressframework~10 mins

Theme from scratch setup in Wordpress

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Creating a WordPress theme from scratch lets you build a unique website look and feel. It gives full control over design and features without relying on pre-made themes.

You want a completely custom website design that matches your brand.
You need a lightweight theme without extra features you don't use.
You want to learn how WordPress themes work by building one yourself.
You want to add special features or layouts not available in existing themes.
Syntax
Wordpress
/*
Theme Name: My Custom Theme
Author: Your Name
Description: A simple theme built from scratch.
Version: 1.0
*/

// index.php
<?php get_header(); ?>
<main>
  <h1>Welcome to My Custom Theme</h1>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
      <h2><?php the_title(); ?></h2>
      <div><?php the_content(); ?></div>
    </article>
  <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

The comment block at the top of style.css defines your theme details.

index.php is the main template file that loads content.

Examples
This is the minimal style.css file with theme name and basic styles.
Wordpress
/*
Theme Name: Simple Theme
*/

/* style.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
functions.php adds theme support for dynamic page titles.
Wordpress
<?php
// functions.php
function simple_theme_setup() {
  add_theme_support('title-tag');
}
add_action('after_setup_theme', 'simple_theme_setup');
?>
header.php starts the HTML document and includes WordPress head functions.
Wordpress
<?php
// header.php
?><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>
<body>
<header><h1>My Site Header</h1></header>
Sample Program

This is a complete minimal WordPress theme with style.css, index.php, header.php, and footer.php files. It shows posts and basic navigation.

Wordpress
/*
Theme Name: Scratch Theme
Author: Your Name
Description: A theme built from scratch.
Version: 1.0
*/

/* style.css */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  color: #333333;
  margin: 0;
  padding: 0;
}

/* index.php */
<?php get_header(); ?>
<main>
  <h1>Welcome to Scratch Theme</h1>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
      <h2><?php the_title(); ?></h2>
      <div><?php the_content(); ?></div>
    </article>
  <?php endwhile; else: ?>
    <p>No posts found.</p>
  <?php endif; ?>
</main>
<?php get_footer(); ?>

/* header.php */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php wp_title('|', true, 'right'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="<?php echo home_url(); ?>">Home</a></li>
    </ul>
  </nav>
</header>

/* footer.php */
<footer>
  <p>&copy; <?php echo date('Y'); ?> Scratch Theme</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
OutputSuccess
Important Notes

Always include wp_head() in header.php and wp_footer() in footer.php for plugins and scripts to work.

Use semantic HTML tags like <main>, <header>, and <footer> for better accessibility.

Test your theme by activating it in WordPress and checking different pages.

Summary

Building a theme from scratch gives full control over your site's look.

Start with style.css and index.php files, then add header.php and footer.php.

Use WordPress functions like get_header() and have_posts() to load content dynamically.