Tip & Tricks

http://www.alexa.com/

Refer:

http://thethemefoundry.com/blog/html-wordpress/
http://www.wphub.com/tutorials/convert-a-html-template-into-a-wordpress-theme/

Step1: Split the html index file into three parts(this three files are most essential to make a wp template )
            header.php (contains header of the template)
            index.php (contains main content of the template)
            footer.php (contains footer part of the template).

Step2: index.php loads first so In index.php at start of the code  add  <?php get_header; ?>  to call header part and at the end of the code add <?php get_footer(); ?> to call footer part.

Step3: Then create style.css file and copy all html css to this file and also  add a template information  at the top.
This is the template description to be added in style.css, without this we cannot install theme.

/* Theme Name: Replace with your Theme's name. Theme URI: Your Theme's URI Description: A brief description. Version: 1.0 Author: You Author URI: Your website address. */

Step4:To call external css use
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Step5:To call image in wordpress file
<img src="<?php bloginfo('template_directory'); ?>/images/image-name.jpg" width="631" height="307" alt="">
To call image in css
background:url('images/image-name.jpg');

Step6:To display post in home page add code in index.php as mentioned below in main content area


<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
        <div class="date"><?php the_time( 'M j y' ); ?></div>
        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
        <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
        <?php the_content(); ?>
        <?php edit_post_link(); ?>
        <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div class="post-footer">
        <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer--
  </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
  <div class="navigation index">
    <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
    <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
  </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Step7: To make pages as menu add this code in header.php 

<?php wp_page_menu('show_home=1&sort_column=menu_order'); ?>

Awesome templates

Main HTML Page

<script type="text/javascript">
var infowindow = null;
var lat, lng;
var map;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
    $(document).ready(function () { initialize('1');  }); // on doc ready call initialize

    function initialize(id) {
        //alert(id);
        directionsDisplay = new google.maps.DirectionsRenderer();  // create direction render object
        <?php $city_name = Configure::read('pre_city_select'); ?>  // select city name to create canvas
        <?php //$city_name = '2/3A 2nd Floor, Medavakkam, Chennai'; ?>
     
        geocoder = new google.maps.Geocoder(); // create new geocoder object to find lat lang
     
        /* find lat and lng for city name  */
        geocoder.geocode({ 'address': '<?php echo $city_name; ?>' }, function(results, status) {
        //var myLatLng = results[0].geometry.location;
        var myLatLng = new String(results[0].geometry.location);
        var removebrace = myLatLng.replace(/\(/g,"");
        var str = removebrace.replace(/\)/g, '');
        var latlng1 = str.split(',');
        lat = parseFloat(latlng1[0]);
        lng = parseFloat(latlng1[1]);
        //alert(lat);
     
        //alert(lng);
        var centerMap = new google.maps.LatLng(lat, lng);
        /* Setting options for new map */
        var myOptions = {
            zoom: 11,
            center: centerMap,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

       /* Drawing map in the page */
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);

        //setMarkers(map, sites);
        /* Create new global info window */
   infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
     
        if(id == 'SearchMap') {
        var loc = document.getElementById('LocationmasterName').value;
        var cat = document.getElementById('SubcatName').value;
        var QueryString = loc + '&subcatname=' + cat;
        /* get input for placing markers */
        /* Note - dataType should be specified as json in ajax call, so that it can interpret */
        $.ajax({
           type : "POST",
           //data : $('#UserAjaxloginForm').serialize(),
           url  : myBaseUrl+('/deals/search_map?locationname=')+QueryString,
           dataType: 'json',
           //url  : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
           success : function(opt){
                    alert(opt);
                    setMarkers(map, opt);
                }
           });          
        }
        else {
               $.ajax({
                type : "POST",
                //data : $('#UserAjaxloginForm').serialize(),
                url  : myBaseUrl+('/deals/maplatlng?id=')+id,
                dataType: 'json',
                //url  : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
                success : function(opt){
                    //alert(id);
                    setMarkers(map, opt);
                }
            });
        }
     
            });
         
    }

/* Actual Input for marker should be like this */
   /* var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
]; */


/* Function to place markers in the map drawn */
    function setMarkers(map, markers) {
       /* Setting up image for marker. If not set, default from google will be used. */
        markerimage = myBaseUrl+'/theme/dealzbuy/img/z1.png'
        for (var i = 0; i < markers.length; i++) {
            var siteLatLng = new google.maps.LatLng(markers[i][1], markers[i][2]);
            var title = markers[i][0];
            //var zIndex = markers[i][2];
            var html = markers[i][3];
            var marker = new google.maps.Marker({
                position: siteLatLng,
                animation: google.maps.Animation.DROP,
                icon: markerimage,
                map: map,
                title: title,
                //zIndex: zIndex,
                html: html
            });

            var contentString = "Some content";
            /* On click of marker open info window */
            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
            $('#container').slideUp(2000);
           // $('#container2').show();
        }
    }
 
  /* Function to find direction from start to destination */
      function calcRoute(a,b) {
        //var stlat = google.loader.ClientLocation.latitude;
        //var stlng = google.loader.ClientLocation.langitude;
        //var start = new google.maps.LatLng(stlat, stlng);
       /* Get start place from user */
        var startplace = prompt("Please type your origin point");
        var start = startplace;
        var end = new google.maps.LatLng(a, b);
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }  
 
</script>

Finding Lat Lng for place in a php page
/* Set up an google URL to get details */
/* Note - 
        Address should be specified in the same format as shown below. There should not be any spaces or new line characters. Better is to replace them with a plus symbol.
       Sensor=false is mandatory. 
*/
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address=123,+100feet+road,+Velachery,+Chennai+600042&sensor=false';

$google_response = json_decode(file_get_contents($url));
$lat = $google_response->results[0]->geometry->location->lat;
$lng = $google_response->results[0]->geometry->location->lng;



PHP Page to provide dynamic input on ajax call


<?php

$input = array(
array("Bondi Beach", "-33.890542", "151.274856", "4", "This is Bondi Beach."),
array("Coogee Beach", "-34.028249", "151.157507", "3", "This is Coogee Beach.")
);

echo json_encode($input);
?>

Online photoshop

http://pixlr.com

Links to get multiple file uplaod

http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples

http://www.cult-f.net/multiple-file-uploaders/