we provide information about gadget news and price information and specs samsung, huawei, Tecno Price products, Specifications, Features and more information about software from blackberry and android

Wednesday, August 21, 2013

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

How To Design or Develop a Wordpress Theme Easily :: Basic Tips - Did you know that every day there is always a new technology that is created? if you want to know please refer to the blog Gadget News well now we will discuss first about How To Design or Develop a Wordpress Theme Easily :: Basic Tips as you need now, we have compiled this article carefully, so please see to finish.

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.
                                                          



article How To Design or Develop a Wordpress Theme Easily :: Basic Tips has been completed in the discussion

hopefully the information How To Design or Develop a Wordpress Theme Easily :: Basic Tips that we provide can be useful for you to know the development of technology in the present

articles How To Design or Develop a Wordpress Theme Easily :: Basic Tips we have conveyed to you, if feel this information is useful and you want to bookmark or share so that more people who know please use link https://profsmythe.blogspot.com/2013/08/how-to-design-or-develop-wordpress.html.

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

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

0 comments:

Post a Comment