WordPress Tricks

Map With Different location pins and mouse activity disabled


This is for advanced users, just shared the code. You can use it in your site by changing the Pin Location name and address. Applicable for wordpress, html and php based sites. Feel free to do comments if you have any question regarding this.

<style type="text/css">
    .link_css {
        margin: 0 0 28px !important;
    }
    </style>    <style>
	#map-canvas {
		height: 450px;
	}
	#iw_container .iw_title {
		font-size: 16px;
		font-weight: bold;
	}
	.remove_op #map_canvas{
    	pointer-events: none;
	}
	.iw_content {
		padding: 15px 15px 15px 0;
	}
</style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaQ30B1mQCYWzcbhR5yobGjelfZVYKzNM&sensor=false"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    
    $('.remove_op .wpb_wrapper').click(function () {
    $('#map_canvas').css("pointer-events", "auto");
	});

	$( ".remove_op .wpb_wrapper" ).mouseleave(function() {
	  $('#map_canvas').css("pointer-events", "none"); 
	});
       
    });
     jQuery(function() {
    
    //jQuery(window).load(function(){
       if (window.location.hash) {
            jQuery('html,body').animate({scrollTop: 0}, 500);
            setTimeout(function(){
              
              //Executed on page load with URL containing an anchor tag.
	            if (jQuery(location.href.split("#")[1])) {

	                var target = jQuery('#' + location.href.split("#")[1]);

	                if (target.length) {
                        //jQuery('html,body').animate({scrollTop: 0}, 1500);
	                    jQuery('html,body').animate({scrollTop: target.offset().top - 120}, 1000);

	                    return false;

	                }

	            } 
            }, 200);    
            
               
            

                 

        }
        //});	
    });
    
    </script>
<div class="remove_op">
<div class="wpb_wrapper">
<div id="map_canvas" style="width:100%; height:545px;"></div></div></div>
<style>
#map-canvas {
   height: 460px;
}
#iw_container .iw_title {
   font-size: 16px;
   font-weight: bold;
}
#map-canvas {
        margin: 0;
        padding: 0;
   
}
.iw_content {
   padding: 15px 15px 15px 0;
}
</style>
<script>
var locations = [
    ['SINGAPORE HQ', '7 Kian Teck Ave Singapore 628897'],
    ['SHANGHAI', 'Room 2102, ShenXin Building, No. 200 NingHai(East) Road, Shanghai 200021'],
    ['GUANGZHOU', 'Room 2217, Baiyun Building, 111 Baiyun Road, Guangzhou 510100'],
    ['SHUNDE', 'No.8 Wei Ye Rd, Beijiao Industrial Park, Beijiao Town, Shunde 528311'],

];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
       center: new google.maps.LatLng(1.469771,103.8088943),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {


        geocodeAddress(locations, i);
    }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: url,
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

function infoWindow(marker, map, title, address, url) {
   google.maps.event.addListenerOnce(map, 'tilesloaded', function() {



        var html = "<div>" + title + "<p>" + address + "<br></div></div>";
        iw = new google.maps.InfoWindow({
            content: html,
            //maxWidth: 350
        });
        iw.open(map, marker);
    });
}

function createMarker(results) {
    var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
    })
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    infoWindow(marker, map, title, address, url);
    return marker;
}
initialize();
</script>
WordPress Tricks

Create Custom Post type and Category (taxonomy) for your Yoga, Teaching, travel, portfolio ,booking or gym workout based site


Just paste the following Code in your theme’s function.php

In the following Code, I have created Instruction post type with Weeks taxonomy (category) for one of my client. He requested me to show his workout plan based on Week and Day basis. So Just change the Name of Post type and taxonomy and save it.

function instruction_post_type_register(){

register_post_type('instructions',array(

'label'=> 'Instructions',
'public' =>true
));
register_taxonomy('weeks','instructions',array(
'labels'=> array(
    'name'=>'Weeks',
    'add_new_item'=>'Add New Week',
    'parent_item'=> 'Parent Week'
    ),
'hierarchical'=>true

));
}
add_action('init','instruction_post_type_register');

Feel free to do comments if you need any sort of helps.

My Own

Is your Laptop or computer performing slow? Also MS Word Excel Powerpoint slow to load?


Please read until the end of the post.

In short, here are the issues we generally face in our Laptop or PC

  1. Laptop takes time ( more than a minute ) to boot
  2. Microsoft Word, Excel, Powerpoint,  Adobe Photoshop and other software  takes time too open or load.
  3. Jpeg, png and other pictures don’t open instantly when you double click
  4. Videos and games also take time to start

What we generally do to solve this issue (which don’t solve the issue actually) ?

  1. Cleaning of temporary folder
  2. Clearing registry using C-Cleaner or any other third party software
  3. If pc or laptop goes much slower then we decide to upgrade ram
  4. Or  installing or resetting the windows again

But NOT ALL OF THESE WORKS PROPERLY BECAUSE PC  OR LAPTOP GOT SLOW AGAIN

HERE IS THE SOLUTION

So, clearing temp folder or registry  or  upgrading Ram or installing / resetting Windows don’t solve the issue permanently . PC may perform little better but with the advent of time it goes slower again.

Slow performance of the windows operating system occurs due to Hard Disk.   If you Replace Hard Disk  with SSD  your issue will be solved.

What Benefits you will get using SSD?

  1.  Windows slow booting issue will be solved ( it will be booted in 10 to 15 seconds)
  2. Windows hang or Lagging issue will be solved
  3. MS Word, Excel, Powerpoint , Adobe Photoshop and other software slow loading or opening issue will be solved
  4. Your laptop battery backup will increase almost an hour
  5. You can use SSD in old laptop too

So enjoy the computing and use SSD instead of HDD

WordPress Tricks

TwentySeventeen Theme Sidebar in Static Homepage with Comments Form


The main requirement was, to show sidebar in static homepage in twentyseventeen theme with comments form. Check the screenshot

Solution

I have created a template,named Home Sidebar for twentyseventeen theme . I am sharing the template with you

Put this template in your twentyseventeen theme folder and use it to create page with sidebar and comments form.

Continue reading “TwentySeventeen Theme Sidebar in Static Homepage with Comments Form”

Contact Form 7 Issues Tricks and Solution

Promo Code or Coupon Code field in Contact Form 7 or changing value based on specific key typed


Few days ago one of my client requested me to implement a promo code field ( screenshot attached) in payment form (which i helped him created using contact form 7) to show a discounted price. I helped him implemented this and sharing you the code.

Procedure

  1. Here is the Contact form 7 field to use
[text couponcode placeholder "Promo Code"]

<span class="discountedPrice"> </span>

2. Here is the jQuery code ( Use Simple Custom CSS and JS plugins for this)

jQuery(document).ready(function(){
 
  
     jQuery('input[name="couponcode"]').on('input keyup', function(e){	
 
	let couponcode= jQuery( 'input[name="couponcode"]' ).val().trim(); 
       
if(couponcode=="ab123"){
	   jQuery('span.discountedPrice').html("$100");
	   }

         if(couponcode=="BC9287"){
	   jQuery('span.discountedPrice').html("$499");
	   }     
     
     });

  	});

Feel free to do ask comments in the comments box if you face any issue.

Contact Form 7 Issues Tricks and Solution

Click on Paypal button or Redirect to Paypal page after successful submssion or mail sent.


Suppose you have a paypal button to collect money or sale product and you want your client to submit Contact form 7 form too. To make that work easy for your client it is wise to redirect your client to paypal payment collection after successful submission of the form. Here is the procedure

  1. Add this plugins Contact Form 7 Redirection

2. Like the image a new tab “Redirect Settings” will be added

3. Like the Screenshot above you can put the External URL or Paypal url and select “Use External URL”

Instead or redirecting to external url or paypal url if you want to Click Automatically to Paypal Payment button, then use this technique

jQuery(document).ready(function() {
 
jQuery('button.paypal-button.large').click();
 
  });

please replace this selector button.paypal-button.large with your payment button selector.

If you face issue or need help please do comments in the comments box.

WordPress Tricks

Common CSS For GutenBerg Editor To modify Headers, blockquotes and titles


To change Font size, color and font family of BlockQuote in Gutenberg Editor

blockquote.wp-block-quote, blockquote, blockquote p {
    font-size: 23px !important;
    color: darkred !important;
    font-family: cursive !important;
    font-style: italic !important;
    text-transform: uppercase;
    line-height: 27px !important;
}

To change header ( say h5) font size, color, italic style, uppercase and more in Gutenberg Editor

.wp-block-column h5 {
    font-size: 20px !important;
    color: darkred;
    font-family: cursive;
    text-transform: uppercase;
    text-align: center;
    font-style: italic;
    border-bottom: 2px solid red;
}

In Single page if you want to change the Page Titl’e font size, color, uppercase , alignment in Gutenberg Editor ( applicable for single post too)

h1.entry-title {
    font-size: 27px;
    color: darkred !important;
    font-family: cursive !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

WordPress Tricks

Radiate By ThemeGrill : Modifications of Header, Footer, Sidebar, menus,titles and more


Radiate By ThemeGrill is a clean, creative and minimal personal blogging responsive WordPress theme. The theme has full width slider to highlight some of your unique posts and has featured pages section to tell more about you. Just focus on writing beautiful content and everything else will be handled by this theme in a simple manner.

Continue reading “Radiate By ThemeGrill : Modifications of Header, Footer, Sidebar, menus,titles and more”