How to Create a Minimal WordPress Theme

by Vincy. Last modified on July 12th, 2022.

Creating a minimal WordPress custom theme is simple. In this tutorial let us walk through the steps to create a WordPress theme.

  1. Create new theme folder.
  2. Create WordPress theme-specific files like header, footer, and stylesheets.
  3. Add styles to the new theme.

Before starting with these steps, it is better to have a local setup of WordPress.

1. Create New Theme Folder

First, we have to create a new folder for the theme. When you install the theme in WordPress, this folder should be located at,

<Wordpress root directory>/wp-content/themes/

2. Create WordPress Theme-Specific Files

available_themes

For a minimal WordPress theme, the following files will be sufficient.

  • header.php – to add a title, client-side script, styles and etc.
  • footer.php – to add footer menu if any, copyright information, feeds and etc.
  • index.php – home page to post a list of articles.
  • styles.php – to add styles for the theme

Let us see the above PHP files content for an example. You can use them while creating your own theme.

header.php

<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo('name'); ?><?php wp_title( '|', true, 'left' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head();  ?>	
</head>
<body>
	<div align="center">
		<div id="inner">
			<header>
				<a href="<?php echo home_url( '/' ); ?>"
					title="<?php echo bloginfo('name'); ?>" rel="home">
					<h1><?php bloginfo( 'name' ); ?></h1>
				</a>
			</header>

footer.php

<footer>
	<div id="footer">© <?php date('Y'); ?> <?php bloginfo('name'); ?> Theme is copyrighted to Vincy.</div>
</footer>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php
get_header();
?>
<div id="contentArea">
	<div id="mainContent">
<?php while ( have_posts() ) : the_post(); ?>
<h2>
			<a href="<?php the_permalink(); ?>"
				title="<?php the_title_attribute(); ?>"><?php the_title() ?></a>
		</h2>
<?php the_content() ?>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

while loop iterates over the array of available posts. WordPress functions the_title() and the_content() prints title and description of a post respectively. the_permalink() function provides a link to the post title.

3. Add Styles for Theme

While adding we need to provide Theme information like Theme Name, Theme URI, Version and etc on top of the stylesheet.

wordpress_theme

For example,

styles.css

/*
Theme Name: SharpEdge
Theme URI: http://localhost:85/wordpress/themes/sharpEdge
Version: 0.1
Author: Vincy
Author URI: https://phppot.com/
Description: A Minimal WordPress Theme.
Tags: minimal, simple, responsive, light-weight
Text Domain: sharpEdge
*/
a {
	color: #A0A0A0;
	text-decoration: none;
}

#inner {
	width: 778px;
	text-align: left;
}

#contentArea {
	border-top: #CCCCCC 2px solid;
	overflow: hidden
}

#mainContent {
	float: left;
	width: 70%;
}

#sidebar {
	float: right;
	width: 28%;
	padding-left: 3px;
	padding-bottom: 100%;
	margin-bottom: -100%;
	background-color: #DDDDDD;
}

#footer {
	clear: both;
	padding: 2px;
	color: #DDDDDD;
	background-color: #000000;
}

To Activate a Theme

We have to login in Wordpress admin panel, to select the newly created theme as the current theme of our WordPress blog. And then, we have to go with left panel Appearance->Themes to manage themes.

If everything is good, the newly created theme will appear in WordPress admin panel.

Click on the Activate link at the bottom of your newly created theme to select it as the current theme. To show the theme snapshot in the admin panel, we need to create theme screenshot and paste it into the wp-content/themes folder.

Download WordPress Minimal Theme Source Code

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Comments to “How to Create a Minimal WordPress Theme”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Tutorials

↑ Back to Top

Share this page