Developing a Word press site With Your own Theme

In this post Iam trying to explain how to bulid a wordpress site with your own theme.

For this first step is create your own theme outside wordpress with css, js,images etc and index.php like what you do in the usual php sites.

After that for Preparing it as a wordpress template you have to customize like this...


Put the below code on top of index.php file.


<?php
/**

 * @package packagename
 *
   Template Name: theme name
 *
 * @file           index.php
 * @author         Author name

 */
?>

For an advanced theme development you have to seperate headers, footers and sidebars... and call them in the theme altogether.

name the header file as header.php and include in Theme folder.
name footer file as footer.php and include in Theme folder
name sidebar file as sidebar.php and include in Theme folder.

In header.php

for including style sheets code like this:-

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

If javascript is placed inside a js folder. Then call like this:-

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.7.2.min.js" type="text/javascript"></script>



Now in index.php  you have to call like this:-

<?php get_header(); ?>// for header
------------------------------------// content
------------------------------------------
--------------------------------------------
<?php get_sidebar(); ?>// sidebar

<?php get_footer(); ?>// calling footer

for eg:-

index.php looks like this:-

<?php
/**

 * @package Twenty_Eleven
 *
   Template Name: theme1
 *
 * @file           litto.php
 * @author         Manu

 */



?>
<?php get_header(); ?>

<div class="mid-box">
<div class="grid-left">
<h2>Tour Packages</h2>



<
</div><!--grid-left-->
<?php get_sidebar(); ?>


</div><!--mid-box-->




<?php get_footer(); ?>



Now your folder conatins

• index.php
• header.php
• footer.php
• sidebar.php
• style.css
• js folder// inside it js files
• images folder

After this zip the folder. make sure that it cannot exceed the limit of max size of uploading.

After that upload zip file through Appearance>themes>addthemes>upload

If you are working in the local server just copy the unzipped folder in to the themes folder located inside the wp-content folder.

Now Inorder to get a first look at the design u created.. Just create a page in admin panel and select the theme as new uploaded theme. When you visit the user side you can see your theme there. But may be it's not complete, so we can make it dynamic by adding page listing code.

To list all the pages under a parent code like this:-

<?php

$page_id=29;

 query_posts(array('showposts' => 20, 'post_parent' => $page_id, 'post_type' => 'page')); 

?>

<?php while (have_posts()) { //loop datas

the_post(); 

?>

<?php the_title(); ?>//title

<?php the_content(); ?>//content

<a href="single.php?<?php the_id();  ?>//getting id's

   </a>

<?php } ?>

To list a single page, code like this:-

<?php

$page_id=$_GET['page_id'];// getting page id

?>

<?php  $page_data =get_page($page_id) ;//retreiving page data

?>

<?php 

echo $page_data->post_title;// getting title

?>

<?php 

echo $page_data->post_content;// getting content

?>

You can create as many theme files in that folder u have to just change the header and change the theme name as i explained before in this post...

And select that particular theme for particular pages.

for developing a contact form just download contactform 7 , which is the most frequently used contact form in wordpress.
Download it from Here
 http://wordpress.org/extend/plugins/contact-form-7/

• Upload the entire contact-form-7 folder to the /wp-content/plugins/ directory.
• Activate the plugin through the 'Plugins' menu in WordPress.
• You will find 'Contact' menu in your WordPress admin panel.

After that add fields, or customize fields as required.

For adding captcha to ensure free spamming,

http://wordpress.org/extend/plugins/really-simple-captcha/

This is the mainly used captcha with contact form-7

• Upload the entire really-simple-captcha folder to the /wp-content/plugins/ directory.
• Activate the plugin through the 'Plugins' menu in WordPress.
• FYI: There is no "control panel" for this plugin.

After that while adding fields in contact form add field named captcha.. and it will gave you a code to be placed in contact form.. do it...

Now in the user side place below code where you want to call the contact form like:-

<?php echo do_shortcode( '[contact-form-7 id="96" title="Contact form 1"]' ); ?>

For adding simple galleries to your website download http://wordpress.org/plugins/simple-gallery-odihost/
Upload the Easy Gallery plugin to your blog, Activate it.

How to add gallery to post or page:

Click the "Add New" link
Fill the gallery name, type of gallery and images
Copy the shortcode and paste it into your page or post.
like <?php echo do_shortcode( '[easygallery id=1]' ); ?>

.

Thus, you have created a small wordpress site of your own :-)