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.
I like your post. Good to read your topic. with coding also you given. super information. keep sharing like this.
ReplyDeleteGraphic design company in Coimbatore
Logo design Coimbatore
Brochure designing Coimbatore
website design company in coimbatore