many people written about creating wordpress theme and using wordpress hooks. Here in this tutorial I will show How to create wordpress theme from scratch.
create wordpress theme from scratch
Here in this tutorial I will show How to create wordpress theme from scratch. I given very detailed steps to create wp theme. You can create wp theme from simple jpg file or PSD file. First choose or create your html template from photoshop. For creating the html template you can refer following screen shots for creating photoshop image. This is very common layout for creating any webpage.
Here for this tutorial I am using following image for creating the wordpress theme.
After creating image in photoshop you need to create the html according to this image. Here I created the one index.html file and style.css file.
You can download the HTML from here:
Now we can start creating the wordpress theme.
First create style.css file and in top section copy paste the following code:
/* Theme Name: wp-bluemagic Theme URI: purabtech.in/files/ Description: two column, blue color wordpress theme Author: wordpressapi Author URI: purabtech.in/files/ Version: 1.0 */
You can change the information as per your requirement.
For creating the wordpress theme following minimum files are needed in wordpress theme folder.
1. index.php
2. header.php
3. footer.php
4. sidebar.php
5. comments.php
6. functions.php – not necessary
7. screenshot.png
Here is my html code from index.html file rename that file to base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Wordpressapi.com - wp-bluemagic</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">wp-bluemagic </a></h1> </div> </div> <!-- header end --> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Photos</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- menu end--> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <div> <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2> <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p> <div style="clear: both;"> </div> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div> <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2> <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p> <div style="clear: both;"> </div> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div> <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2> <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p> <div style="clear: both;"> </div> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p> <p><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div style="clear: both;"> </div> </div> <!--content end--> <div id="sidebar"> <ul> <li> <h2>Author Information</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </li> <li> <h2>Categories</h2> <ul> <li><a href="#">wordpress </a></li> <li><a href="#">wordpress theme</a></li> <li><a href="#">wordpress plugins</a></li> <li><a href="#">wordpress tips</a></li> <li><a href="#">wordpress hacks</a></li> <li><a href="#">wordpressapi</a></li> <li><a href="#">wordpress tutorials</a></li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">wordpress.com</a></li> <li><a href="#">wordpress.org</a></li> <li><a href="#">purabtech.in/files/</a></li> <li><a href="#">google.com</a></li> <li><a href="#">yahoo.com</a></li> <li><a href="#">live.com</a></li> <li><a href="#">facebook.com</a></li> </ul> </li> <li> <h2>Archives</h2> <ul> <li><a href="#">march 2010</a></li> <li><a href="#">feb 2010</a></li> <li><a href="#">january 2009</a></li> <li><a href="#">december 2009</a></li> <li><a href="#">november 2009</a></li> <li><a href="#">september 2009</a></li> <li><a href="#">july 2009</a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p> </div> <!-- end #footer --> </body> </html>
Now we are going start to create the wordpress theme from html file which we created earlier.
First create the header.php file and copy paste the following code in that file. I taken the top header HTML code from base.html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="<?php bloginfo('siteurl');?>/"><?php bloginfo('name');?> </a></h1>
</div>
</div>
<!-- header end -->
<div id="menu">
<ul>
<licurrent_page_item";}?>" ><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order&exclude=827'); ?>
</ul>
</div>
<!-- menu end-->
<!-- end header -->
Create the index.php file and copy paste the following code in that file. I taken the middle or inner part of HTML code from base.html file.
<?php get_header(); ?>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><span><?php the_time('F - j - Y'); ?></span><span>Posted by <a href="<?php the_author_link(); ?>"><?php the_author(); ?></a></span></p>
<div style="clear: both;"> </div>
<div>
<p><?php the_content(); ?></p>
<p><a href="<?php the_permalink(); ?>">Read More</a> | <?php comments_popup_link('COMMENTS', '1 COMMENT', '% COMMENTS'); ?></p>
</div>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php posts_nav_link(' — ', __('« Newer Posts'), __('Older Posts »')); ?>
<div style="clear: both;"> </div>
</div>
<!--content end-->
<?php get_sidebar(); ?>
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
<?php get_footer(); ?>
Create the footer.php file and copy paste the following code in that file. I taken the bottom footer HTML code from base.html file.
</div> <div id="footer"> <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p> </div> <!-- end #footer --> <?php wp_footer(); ?> </body> </html>
Create the sidebar.php file and copy paste the following code in that file. I taken the only the sidebar HTML code from base.html file. I taken only sidebar div from html and li tags and other widgets will be provided by wordpress admin, so you dont worry about that part.
<div id="sidebar">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->
Create the comments.php file and copy paste the following code in that file. I did not taken HTML code or php from base.html file. This is common wordpress comments template. If you are designer then you dont need to worry about comments code. you just need to copy paste the following code into comments.php file
<?php
if ( post_password_required() ) : ?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>
<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<?php if ( comments_open() ) : ?>
<a href="#postcomment" title="<?php _e("Leave a comment"); ?>">»</a>
<?php endif; ?>
</h2>
<?php if ( have_comments() ) : ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<?php comment_text() ?>
<p><cite><?php comment_type(_x('Comment', 'noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>
<?php endforeach; ?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>
<p><?php post_comments_feed_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.')); ?>
<?php if ( pings_open() ) : ?>
<a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Universal Resource Locator">URL</abbr>'); ?></a>
<?php endif; ?>
</p>
<?php if ( comments_open() ) : ?>
<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() ) );?></p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p><?php printf(__('Logged in as %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account') ?>"><?php _e('Log out »'); ?></a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" />
<label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" />
<label for="email"><small><?php _e('Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small><?php _e('Website'); ?></small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->
<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
Create the functions.php file and copy paste the following code in that file. In this file we are just registering the sidebar widgets, using following function.
<?php
automatic_feed_links();
if ( function_exists('register_sidebar') )
register_sidebar();
?>
Here is my style.css file. You can create this file as per your theme. We are using the same css which we created for base.html, We just added some of extra code for wordpress theme and img alignment.
/*
Theme Name: wp-bluemagic
Theme URI: purabtech.in/files/
Description: two column, blue color wordpress theme
Author: wordpressapi
Author URI: purabtech.in/files/
Version: 1.0
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #787878;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #32639A;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #4486C7;
}
a:hover {
}
#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
width: 940px;
height: 148px;
margin: 0 auto;
background: #4169E1;
}
/* Logo */
#logo {
float: left;
margin: 0;
padding-top: 30px;
color: #000000;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
float: left;
padding-left: 80px;
letter-spacing: -1px;
text-transform: lowercase;
font-size: 3.8em;
}
#logo p {
float: left;
margin: 0;
padding: 26px 0 0 10px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/*img align*/
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 0px;
}
img.alignnone {
padding: 5px 5px;
margin: 0px 0px 10px 0px;
display: inline;
background:#E3E8E0;
border: 1px solid #C7CFC2;
}
img.alignright {
padding: 5px 5px;
margin: 5px 0px 5px 5px;
display: inline;
background:#E3E8E0;
border: 1px solid #C7CFC2;
}
img.alignleft {
padding: 5px 5px;
margin: 5px 5px 5px 0px;
display: inline;
background:#E3E8E0;
border: 1px solid #C7CFC2;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
.alignright {
float: right;
margin: 0px 0px 10px 10px;
}
.alignleft {
float: left;
margin: 0px 10px 10px 0px;
}
.wp-caption {
border: 1px solid #C7CFC2;
text-align: center;
background-color: #E3E8E0;
padding: 4px 0px 5px 0px;
color:#222;
}
.wp-caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}
.wp-caption p.wp-caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
background: #4169E1;
border-bottom: 4px solid #FFFFFF;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 23px;
border: 1px solid #89B056;
background: none;
font-weight: bold;
font-size: 10px;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 940px;
height: 49px;
margin: 0 auto;
padding: 0;
background:#4169E1;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
width: 155px;
height: 33px;
padding-top: 16px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #659CEF;
text-decoration: none;
}
#menu .current_page_item a {
background: #FBFBFC;
padding-left: 0;
color: #30476A;
}
/* Page */
#page {
width: 940px;
margin: 0 auto;
padding: 0;
}
#page-bgtop {
padding: 20px px;
}
#page-bgbtm {
}
/* Content */
#content {
float: left;
width: 620px;
padding: 30px 0px 0px 0px;
}
.post {
margin-bottom: 15px;
}
.post-bgtop {
}
.post-bgbtm {
}
.post .title {
margin-bottom: 10px;
padding: 12px 0 0 0px;
letter-spacing: -.5px;
color: #000000;
}
.post .title a {
color: #32639A;
border: none;
}
.post .meta {
height: 30px;
background: #D8E7FE;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.post .meta .date {
float: left;
height: 24px;
padding: 3px 15px;
color: #4A81DE;
}
.post .meta .posted {
float: right;
height: 24px;
padding: 3px 15px;
background: #4169E1;
color: #FFFFFF;
}
.post .meta a {
color: #FFFFFF;
}
.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 280px;
padding: 0px;
color: #787878;
background: #FFFFFF;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
border-left: 1px solid #E2E2E2;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #D1D1D1;
margin: 0px 30px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
color: #8A8A8A;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
background: #D8E7FE;
border-top: 1px solid #D3DEF0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
padding-top: 20px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #A0A0A0;
}
#footer a {
color: #5389E0;
}
Now wordpress theme is complete. You can upload this whole folder the wp-content/themes directory and activate the theme.
You can download this wordpress theme code form here. Wp-bluemagic
Please write comment for this Post: create wordpress theme from scratch
What you posted here helped me quite a bit and im grateful for it!
This is nice wordpress tutorial, made some things clear for me! I found some nice posts about programming in wordpress at http://www.wp-coder.com . Thanks!
hi, i would like to make my own wordpress theme, can u pls help me with this, thanks