Structure Of a Wordpress Theme:
Basically wordpress theme contains header, footer , sidebar
and content area. Here is the preview of a wordpress theme:
What software needed
for Wordpress Theme Development?
To development a wordpress theme we have to work with-
Index.php
Header.php
Footer.php
Sidebar.php
Style.css
Function.php and many other php and css files. So dreamwaver
is the best software to develop a wordpress theme. This software is too
friendly to designing a website.
First Step Of Wordpress Theme Development:
We have to open the dreamwaver software and create Index.php, Header.php, Footer.php,
Sidebar.php, Style.css blank document.
There is many code provided from wordpress.org to develop a
wordpress theme. Those code will help you to complete your project.
Index.php
To designing index.php please write those code on your
index.php file.
Code detailes,
<?php get_header(); ?>
This code to call
header section of your wordpress theme.
<div id="main">
<?php
get_sidebar('right'); ?>
</div>
This code to call sidebar of your theme.
<div
id="content">
<?php if
(have_posts()) : while (have_posts()) : the_post(); ?>
<h1><a href="<?php
the_permalink(); ?>"><?php the_title();
?></a></h1>
Using this code you can complete call about your content
area.
<span <h4>Posted on <?php
the_time('F jS, Y') ?></h4> .post in <?php echo
get_the_category_list( ', '); ?> </span>
This code to calling the time and category of your post.
<p><?php
the_content(__('(more...)')); ?></p>
Its for adding read more option.
<hr>
<?php endwhile;
else: ?>
<p><?php
_e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif;
?>
</div>
<div id="delimiter"></div>
If there is no post then this code will work.
<?php get_footer(); ?>
This code for calling footer area.
Header.php
Write those code on your header area.
<head>
<title>Welcome to marksitbd</title>
<link rel="stylesheet" href="<?php
bloginfo('stylesheet_url'); ?>">
</head>
<body
<div
id="wrapper">
<div
id="header">
<h1> Welcome to marksitbd </h1>
</div>
Welcome to marksitbd
Footer.php
On footer.php write this code to beginning practice.
<html>
<title>footer</title><div
id="footer">
<h1>Designed
By marksitbd</h1>
</html>
Sidebar-right.php
This code will call sidebar of your theme
<div id="sidebar-right">
<h2
class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul
class="list-cat">
<?php
wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</div>
Style.css
Now we have to style our theme. Here is the code to styling
our running wordpress theme.
/*
Theme Name:basic
wordpress theme
Theme URI:
http://carifahmad.blogspot.com/
Description: Basic
wordpress theme development tutorial.
Author: Arif
Ahmed
Author URI:
http://carifahmad.blogspot.com/
Version:
1.0
*/
-- This is the introducing code to develop a wordpress
theme. You can change the theme name, uri, description, author name and the
theme version of your theme.
body {
margin: 0
auto;
padding: 0;
text-align:
center;
background-color:#94908D;
width:960px;
}
This section will call your body of running theme. Here background color is #94908D. you can
change this with your closeable color code. You can change text align center,
left or right. Also you can change another options to design your wordpress
theme.
#wrapper {
display: block;
border: 1px
#000000 solid;
width:960px;
margin:0px auto;
background-color:#ffffff
}
This will call your wrapper area.
#header {
border: 1px
#000000 solid;
background:#0A0501;
color:#ffffff;
height:
140px;
width:960px;
}
This is the header section of your theme. Here border is 1
px and color is 000000, background color is # 0A0501. Here color #ffffff is the text
color. Height and width defined your headers height and width.
#content {
width: 600px;
border: 2px
#000000 solid;
float: left;
position:
relative;
}
You can change width border and float as your need. This
will show the content of your site.
#sidebar-right{
width: 350px;
border: 1px
#64a9fd solid;
float: right;
position: relative;
}
#delimiter {
clear: both;
}
This section to call sidebar of your theme. You can change
the amount as your need.
#footer {
border: 2px
#000000 solid;
background-color:#0A0501;
color:#FFFFFF;
}
This is the footer of your theme.
.title {
font-size: 12pt;
font-family:
verdana;
font-weight: bold;
}
This section will call your title.
Finally save all of the file on a
folder and make a .zip file. Now your theme is ready to use have a look on your
first making wordpress theme :
Thank you for staying with me.
0 Important comments