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 komentar:
Posting Komentar