Tech News Today, Marshmallow Custom Rom, Huawei, Run Programs, Network, Chromebook, Bank Account

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 - To all visitors of this blog, I say welcome and thank you for visiting the blog Tech News Today Look for all the things you need that are available on this blog. If not available, please leave suggestions and comments for the development of this blog. now we will discuss first about How To Design or Develop a Wordpress Theme Easily :: Basic Tips we have collected a lot of information from sources to create this article, so 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 completed in the discussion.

hopefully the article we give the title How To Design or Develop a Wordpress Theme Easily :: Basic Tips can provide knowledge for you in living everyday life in determining the gadget that suits your needs.

you just read the article about How To Design or Develop a Wordpress Theme Easily :: Basic Tips if this article is useful for you and want to bookmark it or share it please use the link https://sihanandi.blogspot.com/2013/08/how-to-design-or-develop-wordpress.html thank you and do not forget to comment if anyone.

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

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

2 komentar:

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Looking Best Digital Marketing Company and Web Design Canada services? If yes then let your search come to an end with us. Web Axis has been offering a range of web solution services to businesses of all types and sizes.

    BalasHapus