Cari Blog Ini

Diberdayakan oleh Blogger.
Rabu, 21 Agustus 2013

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

How To Design or Develop a Wordpress Theme Easily :: Basic Tips - welcome to the blog Software Gadget the end of this much calm product information launcing, yes every day there are always products that are removed from various brands, both physical hardware products and software that need new knowledge to use it, well now we will discuss first about How To Design or Develop a Wordpress Theme Easily :: Basic Tips as you search we have collected a lot of data to make this information as complete as possible for you, please read:

Articles : How To Design or Develop a Wordpress Theme Easily :: Basic Tips
full Link : How To Design or Develop a Wordpress Theme Easily :: Basic Tips
Article wp theme development,

You can also see our article on:


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



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

hopefully the information How To Design or Develop a Wordpress Theme Easily :: Basic Tips that we provide can be useful for you in the set of technology products that fit your daily needs,

have just read the article titled How To Design or Develop a Wordpress Theme Easily :: Basic Tips if you feel useful information and you want to bookmark or share please use the link https://ramblingsofker.blogspot.com/2013/08/how-to-design-or-develop-wordpress.html and do not forget to go back to this blog if you want to know information about the latest gadgets.

Tag : ,
Share on Facebook
Share on Twitter
Share on Google+

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

0 komentar:

Posting Komentar