How To Design or Develop a Wordpress Theme Easily :: Basic Tips

Dear visitors. Today our topic is about beginner wordpress theme development. I think it will help you very much to develop professional theme next time.  To develop a wordpress theme we have to know wordpress webdesign also to know basic html, php , css  and photoshop. In this tutorial I am  going to present you the basic ideas all of about it.

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-
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 to develop a wordpress theme. Those code will help you to complete your project.

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'); ?>
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.
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
<div id="delimiter"></div>
If there is no post then this code will work.

<?php get_footer(); ?>
This code for calling footer area.


Write those code on your header area.
<title>Welcome to marksitbd</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <div id="wrapper"> 
     <div id="header">
                           <h1> Welcome to marksitbd </h1>
Welcome to marksitbd

Welcome to marksitbd



On footer.php write this code to beginning practice.

<title>footer</title><div id="footer">
  <h1>Designed By marksitbd</h1>



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'); ?>


Now we have to style our theme. Here is the code to styling our running wordpress theme.
  Theme Name:basic wordpress theme
  Theme URI:
  Description: Basic wordpress theme development tutorial.
  Author: Arif Ahmed
  Author URI:
  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;

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;
    margin:0px auto;

This will call your wrapper area.

#header {
            border: 1px #000000 solid;
            height: 140px;

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.

    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;

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.

1 Important comments: