Looking For Anything Specific?

  Theme Creation Of Wordpress.

  •  First of all we have to identify the basic thing like header,footer,sidebar,main content area.
  •  Here we demonstrate how wordpress theme look.  
                                             Basic Structure Of Wordpress Theme.
 
 
       Here We Have To Create a Several Files.

  • Header.php - File Contain The Header Section Of Our Theme.
  • Index.php    - This The Main File Of Our Theme.In This Other Files Included.
  • Sidebar.php - This file will contain the Sidebar Of Our Theme.
  • Footer.php  -  This File Contain The Footer Of Our Theme.
  • Style.css     -  This file will handle the styling of your new theme;

      Here We are Going  Create Our First File  Header File 
  •      To Create a Header File Open Your favorite Text Editor  Like Notepad.
  •      Save File as header.php 
       Add The Following Code To Header.php.

<html>
<head>
 <title>Tutorial theme</title>
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
     <div id="wrapper">
         <div id="header">
                <h1>HEADER</h1>//Heading Of Our Blog.
         </div>
     </div> 
</html> 

 Save File as Header.php.
  •   Now We Are Going To Create Index.php File.
  •   Add Following Code To Index.php File. 

<?php get_header(); ?>//It Include The Header File
<div id="main">
       <div id="content">
         <h1>Main Area</h1>
           <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <h1><?php the_title(); ?></h1>
              <h4>Posted on <?php the_time('F jS, Y') ?></h4>
              <p><?php the_content(__('(more...)')); ?></p>
              <hr> <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts Has Been Found.'); ?></p><?php endif; ?>
       </div>
             <?php get_sidebar(); ?>//Get sidebar
      </div>
<div id="delimiter">
</div>
   <?php get_footer(); ?>//Get Footer 
Save This File as index.php
 
  •   Now We Are Going To Create sidebar.php File.
  •   Add Following Code To sidebar.php File. 
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
 <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
 <?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
 
Save This File As sidebar.php
 
  •   Now We Are Going To Create footer.php File.
  •   Add Following Code To footer.php File.
<html> 
     <div id="footer">
               <h1>FOOTER</h1>
     </div>
</html>
Save This File As footer.php
  •   Now We Are Going To Create Style.css File.
  •   Add Following Code To style.css File.
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;  margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; } 
  •   At This Stage Our Simple Wordpress File Has Been Created.
  • We Are Going to Test It.
  • To Test It Copy The Folder Where Our All Files(index.php,header.php etc) Are stored.
  • And Paste This Folder web directory where Your Wordpress  Project Is Located 
  • C:\xampp\htdocs\wordpress\wp-content\themes
  • Paste Your Theme Here.
 Now Open Your Browser And Login In To The Admin Panel Of Wordpress.
  •  After Login Click On Appearance->themes
  • Find Your Theme Here And Click On Active..................
Simple Theme Creation Tutorials Has Ends Here.


Have Fun With Wordpress..........................................