By creating simple WordPress theme, we can easily understand the WordPress mechanism. In this post, we develop a WordPress theme from scratch. Here I just give you code that you have to add in theme templates. By doing so you get the basic idea about the working system of a WordPress theme.
Table of Contents
Points to remember while creating simple WordPress theme:
- Install WordPress on your system. WordPress should be worked properly. For installing WordPress you can follow this post.
- Read the template hierarchy adopt by WordPress at this post.
- Place theme folder in localhost/project-name/wp-content/themes directory.
- Theme name and theme root folder name should be same. Like if your theme name is First Theme then theme folder name should be first-theme.
So let get the start.
Creating style.css and give name to your first WordPress theme
We tell before, the style.css file is must in a WordPress theme. As it contains the theme information part. For details please follow our post. It basically contains a comment part that tells WordPress that a theme exists here.
/* Theme Name: New Theme Theme URI: YourWebsite.com Description: Your Theme Description Version: 1.0 Author: Your Name Author URI: http://www.yourwebsite.com */
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
}
h2{
font-family: Rockwell, Arial, Sans-serif;
font-size: 30px;
color: #000000;
}
a:link, a:visited{
text-decoration: underline;
color: #000000;
}
a:hover{
text-decoration: none;
}
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
#header{
float: left;
width: 750px;
}
#container{
float: left;
width: 400px;
}
.sidebar{
float: left;
width: 240px;
background: #ffffff;
margin: 0 0 0 10px;
display: inline;
}
.sidebar h2{
font-size: 20px;
}
#footer{
clear: both;
float: left;
width: 750px;
}
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}
.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}
.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}
.commentmetadata{
font-size: 12px;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
}
Open notepad and copy this code. Save the file as style.css. You can add your name and fill some creative.
Now in WordPress dashboard, go to appearance/theme. Here you can’t get your theme name. As till now, you do not add index.php file.
Adding index.php
Now copy below code into notepad and save it as index.php in your theme.
<?php get_header(); ?>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now again refresh theme page. You find your theme name here. You can activate it.
When you read the code, you find some name like get_header, get_footer and get_sidebar. These are prefined functions to call a particular type of file. You will get them soon.
header.php: a file for get_header
Now copy below code into notepad and save it as header.php in your theme.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
footer.php: a file for get_footer
Now copy below code into notepad and save it as footer.php in your theme.
<div id="footer">
<p>
Copyright 2017 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
sidebar.php: a file for get_sidebar
Copy below code into notepad and save it as sidebar.php in your theme.
<div class="sidebar">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
<?php endif; ?>
</ul>
</div>
A sidebar is an area for widgets. A widget generally shows dynamic data related to posts, comments etc.
single.php: a file for single post
Copy below code into notepad and save it as single.php in your theme.
<?php get_header(); ?>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php previous_post_link('%link') ?> <?php next_post_link(' %link') ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
page.php: a file for page
Copy below code into notepad and save it as page.php in your theme.
<?php get_header(); ?>
<div id="box"
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
functions.php: a file to extend functionality of theme
Copy below code into notepad and save it as functions.php in your theme.
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
comments.php: a file to show comments
Copy below code into notepad and save it as comments.php in your theme.
<?php
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password)
{ // and it doesn't match the cookie
?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
$oddcomment = 'alt';
?>
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?>
to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?>
<a href="#comment-<?php comment_ID() ?>"
title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?>
<?php comment_time() ?></a> <?php _e('Said:'); ?>
<?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; ?>
</ol>
<?php else : ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?redirect_to=<?php the_permalink(); ?>">
logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>
/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>
/wp-login.php?action=logout"
title="Log out of this account">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"
size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>"
size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?>
</small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?>
<?php echo allowed_tags(); ?></small></p>-->
<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
<?php endif; ?>
That’s all for creating a simple WordPress theme. Hope this tutorial clear many things. It’s just an introduction to theme development. Next steps will be published shortly.
Leave Your Comment Here