How To Build WordPress Theme From Scratch…….
For developing wordpress theme you need atleast basic knowledge on html and css. Wordpress template has lot of php files like index.php, comments.php, front-page.php, home.php, single.php, page.php and etc… WordPress template minimum should have this two files index.php and style.css.
Follow this simple steps to develop wordpress theme from scratch :
1. Setting layout for your wordpress theme :
For our wordpress theme development we are going use this basic layout whichconsists of header, menu, content, sidebar and footer.
Using Dream viewer or some of text editor create above theme layout.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My wordpress Theme</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1> Developers Guide</h1>
</div>
<div class="menu">
<ul class="nav">
<li><a href="#home">Home</a>
<li><a href="#about">About Us</a>
<li><a href="#product">Product</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact Us</a>
</ul>
</div>
<div class="main">
<div class="content"></div>
<div class="sidebar">
<ul class="side">
</div>
</div>
<div class="footer">
<p> Copyright by Developers Guide 2012</p>
</div>
</div>
</body>
</html>
with css file style.css.
2. Create following files index.php, footer.php, sidebar.php, header.php and style.css in the wordpress theme folder(where you installed wordpress theme in your localhost)
c:\xampp\htdocs\wordpress\wp-content\themes\muni
now open created php files in text editor one by one and add following codes in the corresponding files.
Now open header.php and add following code.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My wordpress Theme</title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1> Developers Guide</h1>
</div>
<div class="menu">
<ul class="nav">
<li><a href="#home">Home</a>
<li><a href="#about">About Us</a>
<li><a href="#product">Product</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact Us</a>
</ul>
</div>
In the above code bloginfo(‘stylesheet_url’) is wordpress internal function will read style.css and understand that the theme is telling them to go out and grab the files required for your page to look right. Read more about wordpress internal function in the WordPress codex page.
now open index.php
<?php get_header(); ?>
<div class="main">
<div class="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); ?></p>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, we couldn’t find the post you are looking for.'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<div id="delimiter"></div>
<?php get_footer(); ?>
then sidebar.php
<div class="sidebar">
<ul class="side">
<?php _e('Categories'); ?>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<?php _e('Archives'); ?>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
</div>
where sidebar will go ahead and grab the Categories as well Archives and display them nicely.
Footer.php
<div class="footer"> <p> Copyright by Developers Guide 2012</p> </div> </div> </body> </html>
Finally add following codes in the style.css file.
*{
margin:0px;
padding:0px;
}
.wrapper {
width: 100%;
}
.header {
background-color: #9F0;
height: 80px;
width: 100%;
text-align:center;
color:#FFF;
padding-top:10px;
}
.menu {
height: 40px;
width: 100%;
}
.main {
height: 600px;
width: 100%;
}
.content {
padding-left:20px;
background-color:#9F0;
color:#F0F;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
float: left;
height: 600px;
width: 80%;
}
.sidebar {
background-color:#9F0;
text-transform:uppercase;
color:#FFF;
font-size: 16px;
font-style: normal;
font-weight: bold;
float: right;
height: 600px;
width: 18.5%;
padding-left:1px;
border-color:#FFF;
}
.footer {
text-transform:capitalize;
color:#FFF;
text-align:center;
font-size: 18px;
font-weight: bold;
background-color: #9F0;
height: 80px;
width: 100%;
margin-top: 1px;
}
.side{
float:left;
padding-left:40px;
padding-top:150px;
list-style-type:none;
color:#FFF;
}
.nav{
width:100%;
float:left;
background-color:#9F0;
padding:0;
margin:0;
border-bottom:1px solid #fff;
border-top:1px solid #fff;
list-style-type:none;
}
.nav li {
float: left; }
.nav li a{
display:block;
text-transform:uppercase;
padding: 20px 40px;
text-decoration: none;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccc;
}
.nav li a:hover {
color: #c00;
background-color: #fff; }
Now login to your WordPress dashboard, and go to Appearance -> Themes where you find your newly created wordpress theme and activate them to see lively.
Here is our brand new wordpress theme, we just now created.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
