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 :-)

Sample Wordpress Site :-)

Wordpress is the most used Content mangement system by the web developers. It is very easy to develop a small website with the wordpress site , even if you don't know much about php coding.
The wordpress offers default themes for you and also you can develop wordpress site with your own theme. So Iam explaining here how to develop your wordpress site With your own Theme...

First you want to download wordpress code from the wordpress.org. Download the latest version.
Now unzip the file and copy it to the localhost server. If you are using linux machine make sure that You have given it enough permissions.

Now create a database of any name. Then go into the root directory of site, Here you came to see wp-config-sample.php. Change it's name to wp-config.php.

In that file Rename details as per your requirement :-)


define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', 'root');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Now It's the time to intsall wordpress. In the browser navigate to http://localhost/wordpress.

For installing type http://localhost/wordpress/wp-admin/install.php

 and give corresponding username and password.

After installing you can access admin panel by http://localhost/wordpress/wp-admin/

and user side by http://localhost/wordpress/

Now you can see your user side with default theme from the wordpress.

Installing New Wordpress Themes

You can set new themes in wordpress by navigating in admin> Appearances>Themes>Add theme

You can download and add themes by searching new themes based on criteria and downloading zip file and installing it.

Adding Pages

You can add new pages by clicking on pages link in the menu and click on add page.

Here You can give title,content .etc... and while saving make sure that you have selected your desired theme for the page.Also for adding subpages for a page just select the parent page while saving. After doing this all click on the publish button, Your page will be saved. When You navigate to the userside you will able to see the added page.

Adding category's

For people looking to buil small blogs they have to create posts rather than pages. So Inorder to differentiate between posts you have to categorize posts.

In this adding category section add any name you wish as category, in the slug field give any recognizable name for it, If u have any description for category add in this field. After that click on the add new category button. Your category has been created.

Adding Posts

Just fill in fields title, content and select the category you like the post be under and click on publish your post will be published

Viewing Comments

If you are buliding your blogs with wordpress, may be users will comment under your post regarding their views about the post. You can mange this comments in the comment section in wordpress admin panel. You can delete unappropriate comments made to your posts

Above I have explained to bulid a wordpress basic site with default template. This may be useful for people Who are trying to bulid a blog or site with 2 or more pages without any difficult customizations or so on. 

Setting Default Browser in Linux

In the command line, type

 sudo update-alternatives --config x-www-browser

A list of installed browsers will be displayed with a different number next to each browser. Type the number corresponding to the browser of your choice and press enter.

Again type 

sudo update-alternatives --config x-www-browser

to see whether the change have been done......

To disable right click on your website

Most of clients ask you to disable right click in your site.. For doing this simply add this javascript into your site..

<script type="text/javascript">

    var message="Function Disabled!";

    function clickIE4(){

    if (event.button==2){

        alert(message);

        return false;

        }

    }

    function clickNS4(e){

        if (document.layers||document.getElementById&&!document.all){

            if (e.which==2||e.which==3){

                alert(message);

                return false;

                }

            }

        }

        if (document.layers){

            document.captureEvents(Event.MOUSEDOWN);

            document.onmousedown=clickNS4;

            }

        else if (document.all&&!document.getElementById){

            document.onmousedown=clickIE4;

        }

        document.oncontextmenu=new Function("alert(message);return false")

</script>

Add this script into the header section of the site..