how to create wordpress theme from scratch

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.

create wordpress theme from scratch

Here for this tutorial I am using following image for creating the wordpress theme.

create wordpress theme from scratch

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:

wp-bluemagic-html

Now we can start creating the wordpress theme.
First create style.css file and in top section copy paste the following code:

1/*
2Theme Name: wp-bluemagic
3Theme URI: purabtech.in/files/
4Description: two column, blue color wordpress theme
5Author: wordpressapi
6Author URI: purabtech.in/files/
7Version: 1.0
8 
9*/

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

001<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002<html xmlns="http://www.w3.org/1999/xhtml">
003<head>
004<meta name="keywords" content="" />
005<meta name="description" content="" />
006<meta http-equiv="content-type" content="text/html; charset=utf-8" />
007<title>Wordpressapi.com - wp-bluemagic</title>
008<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
009</head>
010<body>
011<div id="wrapper">
012 <div id="header">
013 <div id="logo">
014 <h1><a href="#">wp-bluemagic   </a></h1>
015 
016 </div>
017 </div>
018 <!-- header end -->
019 <div id="menu">
020 <ul>
021 <li><a href="#">Home</a></li>
022 <li><a href="#">Blog</a></li>
023 <li><a href="#">Photos</a></li>
024 <li><a href="#">About</a></li>
025 <li><a href="#">Links</a></li>
026 <li><a href="#">Contact</a></li>
027 </ul>
028 </div>
029 <!-- menu end-->
030 <div id="page">
031 <div id="page-bgtop">
032 <div id="page-bgbtm">
033 <div id="content">
034 <div>
035 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
036 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
037 <div style="clear: both;">&nbsp;</div>
038 <div>
039 <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>
040 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
041 </div>
042 </div>
043 <div>
044 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
045 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
046 <div style="clear: both;">&nbsp;</div>
047 <div>
048 <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>
049 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
050 </div>
051 </div>
052 <div>
053 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
054 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
055 <div style="clear: both;">&nbsp;</div>
056 <div>
057 <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>
058 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
059 </div>
060 </div>
061 <div style="clear: both;">&nbsp;</div>
062 </div>
063 <!--content end-->
064 <div id="sidebar">
065 <ul>
066 <li>
067 <h2>Author Information</h2>
068 <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>
069 </li>
070 <li>
071 <h2>Categories</h2>
072 <ul>
073 <li><a href="#">wordpress </a></li>
074 <li><a href="#">wordpress theme</a></li>
075 <li><a href="#">wordpress plugins</a></li>
076 <li><a href="#">wordpress tips</a></li>
077 <li><a href="#">wordpress hacks</a></li>
078 <li><a href="#">wordpressapi</a></li>
079 <li><a href="#">wordpress tutorials</a></li>
080 </ul>
081 </li>
082 <li>
083 <h2>Blogroll</h2>
084 <ul>
085 <li><a href="#">wordpress.com</a></li>
086 <li><a href="#">wordpress.org</a></li>
087 <li><a href="#">purabtech.in/files/</a></li>
088 <li><a href="#">google.com</a></li>
089 <li><a href="#">yahoo.com</a></li>
090 <li><a href="#">live.com</a></li>
091 <li><a href="#">facebook.com</a></li>
092 </ul>
093 </li>
094 <li>
095 <h2>Archives</h2>
096 <ul>
097 <li><a href="#">march 2010</a></li>
098 <li><a href="#">feb 2010</a></li>
099 <li><a href="#">january 2009</a></li>
100 <li><a href="#">december 2009</a></li>
101 <li><a href="#">november 2009</a></li>
102 <li><a href="#">september 2009</a></li>
103 <li><a href="#">july 2009</a></li>
104 </ul>
105 </li>
106 </ul>
107 </div>
108 <!-- end #sidebar -->
109 <div style="clear: both;">&nbsp;</div>
110 </div>
111 </div>
112 </div>
113 <!-- end #page -->
114</div>
115 <div id="footer">
116 <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
117 </div>
118 <!-- end #footer -->
119</body>
120</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.

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
03<head>
04<meta name="keywords" content="" />
05<meta name="description" content="" />
06<meta http-equiv="content-type" content="text/html; charset=utf-8" />
07<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
08<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
09<?php wp_head(); ?>
10</head>
11<body>
12<div id="wrapper">
13 <div id="header">
14 <div id="logo">
15 <h1><a href="<?php bloginfo('siteurl');?>/"><?php bloginfo('name');?> </a></h1>
16 </div>
17 </div>
18 <!-- header end -->
19 <div id="menu">
20 <ul>
21 <licurrent_page_item";}?>" ><a href="<?php echo get_settings('home'); ?>">Home</a></li>
22 <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order&exclude=827'); ?>
23 </ul>
24 </div>
25 <!-- menu end-->
26<!-- 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.

01<?php get_header(); ?>
02<div id="page">
03 <div id="page-bgtop">
04 <div id="page-bgbtm">
05 <div id="content">
06 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
07 <div>
08 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
09 <p><span><?php the_time('F - j - Y'); ?></span><span>Posted by <a href="<?php the_author_link(); ?>"><?php the_author(); ?></a></span></p>
10 <div style="clear: both;">&nbsp;</div>
11 <div>
12 <p><?php the_content(); ?></p>
13 <p><a href="<?php the_permalink(); ?>">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<?php comments_popup_link('COMMENTS', '1 COMMENT', '% COMMENTS'); ?></p>
14 </div>
15 </div>
16 <?php comments_template(); // Get wp-comments.php template ?>
17 <?php endwhile; else: ?>
18 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
19 <?php endif; ?>
20<?php posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
21 <div style="clear: both;">&nbsp;</div>
22 </div>
23 <!--content end-->
24 <?php get_sidebar(); ?>
25 <div style="clear: both;">&nbsp;</div>
26 </div>
27 </div>
28 </div>
29 <!-- end #page -->
30<?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.

1</div>
2 <div id="footer">
3 <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
4 </div>
5 <!-- end #footer -->
6<?php wp_footer(); ?>
7</body>
8</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.

1<div id="sidebar">
2<ul>
3<?php     /* Widgetized sidebar, if you have the plugin installed. */
4 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
5<?php endif; ?>
6</ul>
7</div>
8<!-- 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

01<?php
02 
03if ( post_password_required() ) : ?>
04<p><?php _e('Enter your password to view comments.'); ?></p>
05<?php return; endif; ?>
06 
07<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
08<?php if ( comments_open() ) : ?>
09 <a href="#postcomment" title="<?php _e("Leave a comment"); ?>">&raquo;</a>
10<?php endif; ?>
11</h2>
12 
13<?php if ( have_comments() ) : ?>
14<ol id="commentlist">
15 
16<?php foreach ($comments as $comment) : ?>
17 <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
18 <?php echo get_avatar( $comment, 32 ); ?>
19 <?php comment_text() ?>
20 <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>
21 </li>
22 
23<?php endforeach; ?>
24 
25</ol>
26 
27<?php else : // If there are no comments yet ?>
28 <p><?php _e('No comments yet.'); ?></p>
29<?php endif; ?>
30 
31<p><?php post_comments_feed_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.')); ?>
32<?php if ( pings_open() ) : ?>
33 <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Universal Resource Locator">URL</abbr>'); ?></a>
34<?php endif; ?>
35</p>
36 
37<?php if ( comments_open() ) : ?>
38<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>
39 
40<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
41<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() ) );?></p>
42<?php else : ?>
43 
44<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
45 
46<?php if ( is_user_logged_in() ) : ?>
47 
48<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 &raquo;'); ?></a></p>
49 
50<?php else : ?>
51 
52<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" />
53<label for="author"><small><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></small></label></p>
54 
55<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" />
56<label for="email"><small><?php _e('Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></small></label></p>
57 
58<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
59<label for="url"><small><?php _e('Website'); ?></small></label></p>
60 
61<?php endif; ?>
62 
63<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->
64 
65<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
66 
67<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" />
68<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
69</p>
70<?php do_action('comment_form', $post->ID); ?>
71 
72</form>
73 
74<?php endif; // If registration required and not logged in ?>
75 
76<?php else : // Comments are closed ?>
77<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
78<?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.

1<?php
2automatic_feed_links();
3 
4if ( function_exists('register_sidebar') )
5 register_sidebar();
6 
7?>

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.

001/*
002Theme Name: wp-bluemagic
003Theme URI: purabtech.in/files/
004Description: two column, blue color wordpress theme
005Author: wordpressapi
006Author URI: purabtech.in/files/
007Version: 1.0
008 
009*/
010 
011body {
012 margin: 0;
013 padding: 0;
014 background: #FFFFFF;
015 font-family: Arial, Helvetica, sans-serif;
016 font-size: 12px;
017 color: #787878;
018}
019 
020h1, h2, h3 {
021 margin: 0;
022 padding: 0;
023 font-weight: normal;
024 color: #32639A;
025}
026 
027h1 {
028 font-size: 2em;
029}
030 
031h2 {
032 font-size: 2.4em;
033}
034 
035h3 {
036 font-size: 1.6em;
037}
038 
039p, ul, ol {
040 margin-top: 0;
041 line-height: 180%;
042}
043 
044ul, ol {
045}
046 
047a {
048 text-decoration: none;
049 color: #4486C7;
050}
051 
052a:hover {
053}
054 
055#wrapper {
056 width: 960px;
057 margin: 0 auto;
058 padding: 0;
059}
060 
061/* Header */
062 
063#header {
064 width: 940px;
065 height: 148px;
066 margin: 0 auto;
067 background: #4169E1;
068}
069 
070/* Logo */
071 
072#logo {
073 float: left;
074 margin: 0;
075 padding-top: 30px;
076 color: #000000;
077}
078 
079#logo h1, #logo p {
080 margin: 0;
081 padding: 0;
082}
083 
084#logo h1 {
085 float: left;
086 padding-left: 80px;
087 letter-spacing: -1px;
088 text-transform: lowercase;
089 font-size: 3.8em;
090}
091 
092#logo p {
093 float: left;
094 margin: 0;
095 padding: 26px 0 0 10px;
096 font: normal 14px Georgia, "Times New Roman", Times, serif;
097 font-style: italic;
098 color: #FFFFFF;
099}
100 
101#logo a {
102 border: none;
103 background: none;
104 text-decoration: none;
105 color: #FFFFFF;
106}
107/*img align*/
108img.centered  {
109 display: block;
110 margin-left: auto;
111 margin-right: auto;
112 margin-bottom: 10px;
113 padding: 0px;
114 }
115 
116img.alignnone {
117 padding: 5px 5px;
118 margin: 0px 0px 10px 0px;
119 display: inline;
120 background:#E3E8E0;
121 border: 1px solid #C7CFC2;
122 }
123 
124img.alignright {
125 padding: 5px 5px;
126 margin: 5px 0px 5px 5px;
127 display: inline;
128 background:#E3E8E0;
129border: 1px solid #C7CFC2;
130 }
131 
132img.alignleft {
133 padding: 5px 5px;
134 margin: 5px 5px 5px 0px;
135 display: inline;
136 background:#E3E8E0;
137border: 1px solid #C7CFC2;
138 }
139 
140.aligncenter {
141 display: block;
142 margin-left: auto;
143 margin-right: auto;
144 margin-bottom: 10px;
145 }
146 
147.alignright {
148 float: right;
149 margin: 0px 0px 10px 10px;
150 }
151 
152.alignleft {
153 float: left;
154 margin: 0px 10px 10px 0px;
155 }
156 
157.wp-caption {
158 border: 1px solid #C7CFC2;
159 text-align: center;
160 background-color: #E3E8E0;
161 padding: 4px 0px 5px 0px;
162 color:#222;
163 }
164 
165.wp-caption img {
166 margin: 0px 0px 5px 0px;
167 padding: 0px;
168 border: 0px;
169 
170 }
171 
172.wp-caption p.wp-caption-text {
173 margin: 0px;
174 padding: 0px 0px 0px 0px;
175 font-size: 11px;
176 font-weight: normal;
177 line-height: 12px;
178 }
179 
180/* Search */
181 
182#search {
183 float: right;
184 width: 280px;
185 height: 60px;
186 padding: 20px 0px 0px 0px;
187 background: #4169E1;
188 border-bottom: 4px solid #FFFFFF;
189}
190 
191#search form {
192 height: 41px;
193 margin: 0;
194 padding: 10px 0 0 20px;
195}
196 
197#search fieldset {
198 margin: 0;
199 padding: 0;
200 border: none;
201}
202 
203#search-text {
204 width: 170px;
205 padding: 6px 5px 2px 5px;
206 border: none;
207 background: #FFFFFF;
208 text-transform: lowercase;
209 font: normal 11px Arial, Helvetica, sans-serif;
210 color: #5D781D;
211}
212 
213#search-submit {
214 width: 50px;
215 height: 23px;
216 border: 1px solid #89B056;
217 background: none;
218 font-weight: bold;
219 font-size: 10px;
220 color: #FFFFFF;
221}
222 
223/* Menu */
224 
225#menu {
226 width: 940px;
227 height: 49px;
228 margin: 0 auto;
229 padding: 0;
230 background:#4169E1;
231}
232 
233#menu ul {
234 margin: 0;
235 padding: 0;
236 list-style: none;
237 line-height: normal;
238}
239 
240#menu li {
241 float: left;
242}
243 
244#menu a {
245 display: block;
246 width: 155px;
247 height: 33px;
248 padding-top: 16px;
249 text-decoration: none;
250 text-align: center;
251 font-family: Arial, Helvetica, sans-serif;
252 font-size: 13px;
253 font-weight: bold;
254 color: #FFFFFF;
255 border: none;
256}
257 
258#menu a:hover, #menu .current_page_item a {
259 background: #659CEF;
260 text-decoration: none;
261}
262 
263#menu .current_page_item a {
264 background: #FBFBFC;
265 padding-left: 0;
266 color: #30476A;
267}
268 
269/* Page */
270 
271#page {
272 width: 940px;
273 margin: 0 auto;
274 padding: 0;
275}
276 
277#page-bgtop {
278 padding: 20px px;
279}
280 
281#page-bgbtm {
282}
283 
284/* Content */
285 
286#content {
287 float: left;
288 width: 620px;
289 padding: 30px 0px 0px 0px;
290}
291 
292.post {
293 margin-bottom: 15px;
294}
295 
296.post-bgtop {
297}
298 
299.post-bgbtm {
300}
301 
302.post .title {
303 margin-bottom: 10px;
304 padding: 12px 0 0 0px;
305 letter-spacing: -.5px;
306 color: #000000;
307}
308 
309.post .title a {
310 color: #32639A;
311 border: none;
312}
313 
314.post .meta {
315 height: 30px;
316 background: #D8E7FE;
317 margin: 0px;
318 padding: 0px 0px 0px 0px;
319 text-align: left;
320 font-family: Arial, Helvetica, sans-serif;
321 font-size: 13px;
322 font-weight: bold;
323}
324 
325.post .meta .date {
326 float: left;
327 height: 24px;
328 padding: 3px 15px;
329 color: #4A81DE;
330}
331 
332.post .meta .posted {
333 float: right;
334 height: 24px;
335 padding: 3px 15px;
336 background: #4169E1;
337 color: #FFFFFF;
338}
339 
340.post .meta a {
341 color: #FFFFFF;
342}
343 
344.post .entry {
345 padding: 0px 0px 20px 0px;
346 padding-bottom: 20px;
347 text-align: justify;
348}
349 
350.links {
351 padding-top: 20px;
352 font-size: 12px;
353 font-weight: bold;
354}
355 
356/* Sidebar */
357 
358#sidebar {
359 float: right;
360 width: 280px;
361 padding: 0px;
362 color: #787878;
363 background: #FFFFFF;
364}
365 
366#sidebar ul {
367 margin: 0;
368 padding: 0;
369 list-style: none;
370}
371 
372#sidebar li {
373 margin: 0;
374 padding: 0;
375 border-left: 1px solid #E2E2E2;
376}
377 
378#sidebar li ul {
379 margin: 0px 0px;
380 padding-bottom: 30px;
381}
382 
383#sidebar li li {
384 line-height: 35px;
385 border-bottom: 1px dashed #D1D1D1;
386 margin: 0px 30px;
387 border-left: none;
388}
389 
390#sidebar li li span {
391 display: block;
392 margin-top: -20px;
393 padding: 0;
394 font-size: 11px;
395 font-style: italic;
396}
397 
398#sidebar h2 {
399 height: 38px;
400 padding-left: 30px;
401 letter-spacing: -.5px;
402 font-size: 1.8em;
403}
404 
405#sidebar p {
406 margin: 0 0px;
407 padding: 0px 30px 20px 30px;
408 text-align: justify;
409}
410 
411#sidebar a {
412 border: none;
413}
414 
415#sidebar a:hover {
416 text-decoration: underline;
417 color: #8A8A8A;
418}
419 
420/* Calendar */
421 
422#calendar {
423}
424 
425#calendar_wrap {
426 padding: 20px;
427}
428 
429#calendar table {
430 width: 100%;
431}
432 
433#calendar tbody td {
434 text-align: center;
435}
436 
437#calendar #next {
438 text-align: right;
439}
440 
441/* Footer */
442 
443#footer {
444 height: 50px;
445 margin: 0 auto;
446 padding: 0px 0 15px 0;
447 background: #D8E7FE;
448 border-top: 1px solid #D3DEF0;
449 font-family: Arial, Helvetica, sans-serif;
450}
451 
452#footer p {
453 margin: 0;
454 padding-top: 20px;
455 line-height: normal;
456 font-size: 10px;
457 text-transform: uppercase;
458 text-align: center;
459 color: #A0A0A0;
460}
461 
462#footer a {
463 color: #5389E0;
464}

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

3 thoughts on “how to create wordpress theme from scratch”

nowblogger says:

July 9, 2010 at 5:44 pm

What you posted here helped me quite a bit and im grateful for it!

entuziasm says:

September 12, 2010 at 11:06 am

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!

kumar says:

October 20, 2010 at 4:13 am

hi, i would like to make my own wordpress theme, can u pls help me with this, thanks

how to create wordpress theme from scratch

create wordpress theme from scratch

Published by

Purab

3 thoughts on “how to create wordpress theme from scratch”

Leave a Reply Cancel reply

create wordpress theme from scratch

Share Article:

Published by

Purab

3 thoughts on “how to create wordpress theme from scratch”

Leave a Reply Cancel reply