Techno Life, Micromax New Version Official Firmware, Winmax official firmware, Nokia Flash File, WhatsApp Messenger, Lenovo, huawei, xiaomi, samsung galaxy

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 - these days more and more blogs that talk about technology, including blogs Techno Life but we are very experienced in this case because we have been there from a few years ago always present information about techno for you, well now we are about How To Design or Develop a Wordpress Theme Easily :: Basic Tips hopefully the information we will convey can answer your question to google, please see:

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.
                                                          



information How To Design or Develop a Wordpress Theme Easily :: Basic Tips has been discussed

hopefully the meaning of How To Design or Develop a Wordpress Theme Easily :: Basic Tips that we write can be useful for you in adding insight about gadgets.

you just finished reading the article titled How To Design or Develop a Wordpress Theme Easily :: Basic Tips if you want to bookmark or share your links use the link https://lifeandeating.blogspot.com/2013/08/how-to-design-or-develop-wordpress.html do not forget to go back to this blog if you want to get the latest information about 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