Create Original Theme in WordPress 1


To create the original WordPress theme


Today’s goal is to make the smallest WordPress theme as below.

File construction for WordPress theme

The following is an example of file construction.

  • index.php
  • header.php
  • footer.php
  • archive.php
  • comments.php
  • 404.php
  • page.php
    • page-fullwidth.php
  • sidebar.php
    • sidebar-home.php
    • sidebar-footer.php
  • single.php
  • category.php
  • tag.php
  • functions.php
  • style.css
  • templaete-parts
    • content.php
    • content-frontpage.php
    • content-none.php
    • content-single.php

You can see the role of each file in “Template Files”. Today, I create index.php, functions.php and style.css


This is the main PHP file displayed as a top page.

*This is main file for "techblog" theme
*@package Techblog
*@since Techblog 1.0
get_header(); ?>
<main id="main" class="site-main" role="main">
		<h1 class="page-title"><?php bloginfo('name'); ?></h1>
		<h2 class="description"> <?php bloginfo('description'); ?></h2>
	<?php if ( have_posts() ) : ?>
		<ul id="posts">
			<?php while ( have_posts() ) : the_post(); ?>
                <li><a href="<?php the_permalink(); ?>">
                	<h2 class = "post_item"><?php the_title(); ?></h2>
			<?php endwhile; ?>
	<?php endif; ?>
<?php get_footer(); ?>

PHP Doc Tags

Some PHP doc tags are used in WordPress. You can see the list of PHP doc tags in “PHPDoc Tags” in

*@package Techblog
*@since Techblog 1.0

php functions

You can see the functions that can be used in WordPress in “Code Reference“.

  • get_header()
    • Includes the header template for a theme
    • If you have no header.php, it includes the default header.
  • bloginfo()
    • Display information about the site you defined.
    • You can get information such as ‘name’, ‘description’ and so on.
  • have_posts()
    • It can be used to determines whether current WordPress query has posts to loop over
  • the_post()
    • Iterate the post index in the loop
    • It can be used when have_posts() is True
  • the_permalink()
    • Displays the permalink for the current post
    • It displays the url to the_post()
  • the_title()
    • Display or retrieve the current post title
    • It displays the titel of the_post()
  • get_footer()
    • Includes the footer template for a theme


style.css is the style sheet for the site. style.css should have infromation about the theme. Please check “Main Stylesheet (style.css)” in for details.

Theme Name: Techblog
Theme URI: #
Author: Nako
Author URI:
Description: This is the simplest theme for engineer's technical blog
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:
Text Domain: techblog
Domain Path: /languages/
Tags: blog, news,

This theme, like WordPress, is licensed under the GPL.

body {
    color: #6B6B6B;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    font-size: 14px;

The information in style.css is displayed in Appearance >Themes.


functions.php is function set for the site. I don’t use any original function at this time.

 * techblog functions and definitions
 * @package Techblog
 * @since Techblog 1.0
if ( ! defined( 'TECHBLOG_VERSION' ) ) {
	// Replace the version number of the theme on each release.
	define( 'TECHBLOG_VERSION', '1.0.0' );

Install the created theme

Put the directory where index.php, style.css and functions.php is into the themes directory “xampp\htdocs\wordpress\wp-content\themes”.

You can activate the theme you created in the Appearance >Themes.