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-
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
  
 
    
                          

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.
                                                          

Post a Comment