How to Create a Minimal WordPress Theme

Creating a minimal WordPress custom theme is simple. In this tutorial let us walkthrough 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 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

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

  • header.php – to add 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 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 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: http://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 to 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.

 available_themes

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

Download WordPress Minimal Theme Source Code

This Wordpress code tutorial was published on December 4, 2013.

↑ Back to Top