Select Page
Free GeoIP!

Free GeoIP!

GeoIP can see where the IP address of a visitor originates from. You can have this location info displayed on a page for a custom welcome or go a step further and use that information for showing elements on a web page based on location too!

While it is not AI – it’s still kinda like giving your website a brain… 

😉

You are visiting from Ashburn, Virginia

The GeoIP plugin for WordPress is very cool!

A slick thing about this is that this plugin adds location specific CSS classes to your page and you can use these locations to display and hide content based on where somebody is

 

For example – this code: .geoip-country-US .geoip-continent-NA .geoip-province-CO was dynamically added as body classes on this page from my visit – you could use those classes to show or hide any element on the page – that’s very nifty and it was stupid easy to set up! 

AND you don’t even have to make an api call to an outside server (you can if you want) or you can just click a button to download Maxmind GeoIP Lite City database and keep it all internal!

Well done Yellow Tree guy!

GeoIP Detection

$record->city->name Denver

Denver

$record->mostSpecificSubdivision->isoCode CO

CO

$record->mostSpecificSubdivision->name Colorado

Colorado

$record->country->isoCode US

US

$record->country->name United States

United States

$record->location->latitude 39.6888

39.6888

$record->location->longitude -105.156

-105.156

$record->continent->code NA

NA

$record->location->timeZone America/Denver

America/Denver

API-Usage-Examples Code

via https://github.com/yellowtree/geoip-detect/wiki/API-Usage-Examples

 

API Usage Examples

Basic Use

if (function_exists('geoip_detect2_get_info_from_current_ip')) {
	$userInfo = geoip_detect2_get_info_from_current_ip();
	if ($userInfo->country->isoCode == 'DE') {
		echo 'Hallo! Schön dass Sie hier sind!';
	{
} else {
	echo '<!-- Warning: The plugin GeoIP Detection is not active. -->';
}

CSS Use – THIS RIGHT HERE IS AWESOME!

Hide/Show text only if a visitor is from Germany:

In your CSS file:

.geoip { display: none !important; }
.geoip-country-UK .geoip-show-UK { display: block !important; }
.geoip-country-DE .geoip-show-DE { display: block !important; }

.geoip-hide { display: block !important; }
.geoip-country-UK .geoip-hide-UK { display: none !important; }
.geoip-country-DE .geoip-hide-DE { display: none !important; }

In your HTML (e.g. in the post content, when switching the editor to the HTML mode):

<div class="geoip geoip-show-DE">
This text is shown only in Germany
</div>
<div class="geoip-hide geoip-hide-DE">
This text is hidden only in Germany
</div>

You need to enable the option Add a country-specific CSS class to the <body>-Tag to make this work.

 

Complete Solutions

Add the city name to the hash of the URL

add_action('wp_head', 'geoip_add_city_to_hash', 5);
function geoip_add_city_to_hash(){
	if (!function_exists('geoip_detect2_get_info_from_current_ip'))
		return;
	$userInfo = geoip_detect2_get_info_from_current_ip();
	$city = $userInfo->city->name;
	if ($city) {
?>
<script>
window.location.hash = <?php echo json_encode('#' . $city) ?>;
</script>
<?php
	}
}

Redirect depending on country

add_action('template_redirect', 'geoip_redirect', 5);
function geoip_redirect(){
	if (is_admin() || !function_exists('geoip_detect2_get_info_from_current_ip'))
		return;
	// This condition prevents a redirect loop:
	// Redirect only if the home page is called. Change this condition to the specific page or URL you need.
	if (!is_home())
		return;
	if (!function_exists('geoip_detect2_get_info_from_current_ip'))
		return;
	$userInfo = geoip_detect2_get_info_from_current_ip();
	$countryCode = $userInfo->country->isoCode;
	switch ($countryCode) {
		case 'DE':
			$url = '/germany';
			break;
		case 'US':
			$url = '/usa';
			break;
		default:
			$url = '';
	}
	if ($url) {
		wp_redirect(get_site_url(null, $url));
		exit;
	}
}

Calculate distance from a known location

/**
 * Calculates the great-circle distance between two points, with
 * the Haversine formula. 
 * @param float $latitudeFrom Latitude of start point in [deg decimal]
 * @param float $longitudeFrom Longitude of start point in [deg decimal]
 * @param float $latitudeTo Latitude of target point in [deg decimal]
 * @param float $longitudeTo Longitude of target point in [deg decimal]
 * @param float $earthRadius Mean earth radius in [km]
 * @return float Distance between points in [km] (same as earthRadius)
 * @see https://stackoverflow.com/a/10054282
 */
function haversineGreatCircleDistance(
  $latitudeFrom, $longitudeFrom, $latitudeTo, $longitudeTo, $earthRadius = 6371)
{
  // convert from degrees to radians
  $latFrom = deg2rad($latitudeFrom);
  $lonFrom = deg2rad($longitudeFrom);
  $latTo = deg2rad($latitudeTo);
  $lonTo = deg2rad($longitudeTo);
  $latDelta = $latTo - $latFrom;
  $lonDelta = $lonTo - $lonFrom;
  $angle = 2 * asin(sqrt(pow(sin($latDelta / 2), 2) +
    cos($latFrom) * cos($latTo) * pow(sin($lonDelta / 2), 2)));
  return $angle * $earthRadius;
}
// Los Angeles
$location['lat'] = 37.6293;
$location['lon'] = -122.1163;
$myLocation = $location; // Change if default Location should be something else
$record = geoip_detect2_get_info_from_current_ip();
if ($record->location->longitude) {
  $myLocation['lon'] = $record->location->longitude;
  $myLocation['lat'] = $record->location->latitude;  
}
$distance = haversineGreatCircleDistance($location['lat'], $location['lon'], $myLocation['lat'], $myLocation['lon']); // Returns distance in km. If you need a different unit, change the $earthRadius

Use Maxmind Precise only for customers in Germany.

(Since 2.7.0)

if (function_exists('geoip_detect2_get_info_from_current_ip')) {
	$record = geoip_detect2_get_info_from_current_ip();
	if ($record->country->isoCode == 'DE') {
		$record = geoip_detect2_get_info_from_current_ip(null, array('source' => 'precise'));
	}
} else {
	echo '<!-- Warning: The plugin GeoIP Detection is not active. -->';
}

For this to work, you need to first activate the precise datasource, enter the credentials. Then activate ‘Maxmind automatic update’ (or any other source) to use as default source.

Get Country Information from GeoNames database instead of Maxmind lookup

(Since 2.6.0)

The plugin contains the geonames database that is also included in the Maxmind mmdb-Files. In this way, you can look up the translated names of a country and its continent by using this function:

/**
 * Get the information from GeoNames Database
 * @param string $iso_code 2-letter ISO code of country
 * @return array Information about country and its continent,
 *               in the same format as the geoIP records but as array instead of object.
 */
function get_info_from_country($iso_code) {
	if (!function_exists('geoip_detect2_get_info_from_current_ip'))
		return array();
	$countryInfo = new \YellowTree\GeoipDetect\Geonames\CountryInformation;
	$data = $countryInfo->getInformationAboutCountry($iso_code);
	return $data;
}

Enrich the country select box with select2

Select2 is useful for the country select box as it contains so many entries. Here is what you need to add to your theme’s function.php (thanks KoolPal):

function geoip_detect_enqueue_select2_jquery() {
    wp_enqueue_style( 'select2css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css' );
    wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'geoip_detect_enqueue_select2_jquery' );
function geoip_detect_init_select2_jquery() {
?>
<script>
jQuery(document).ready(function($){
    $('.wpcf7-geoip_detect2_countries, .geoip_detect2_countries').select2();
});
</script>
<?php
add_action('wp_footer', 'geoip_detect_init_select2_jquery');

(Of course you can save the files into your theme folder and change the urls accordingly, and you should update the versions if needed.)

CSS Media Queries Aren’t Complicated…

CSS Media Queries Aren’t Complicated…

Just like ANY CSS – all you need to know is the name of the class or id that you want to change…

Here’s something I just did a few minutes ago. There was WAY too much padding on the mobile version of a page title on a Divi site –  so the element in question was .et_pb_section class, but it could be anything.

Meaning you will need to find out what the name of the element you need to change/fix before you can setup media queries to set different css styles to your responsive theme. I would like to believe that if you are reading this, you don’t need css dumbed down THAT much, right?  😉

So this is the default padding for this section:

 

.et_pb_section {padding: 50px 0;}

50 pixels isn’t THAT much on a full sized monitor but it is HUGE on tablets and phone! It looked like the title was hanging out in the middle of the screen…

So here’s how it works:

This goes right into your custom css just like any other css code:

@media all and (max-width: 980px) {

.et_pb_section {padding: 0;} <- this is a “normal/regular” css rule

}

@media all and (max-width: 980px)this is the media query – it means all screens UP TO 980px should use this code.

That’s it – media queries in a nutshell – it’s just a container that has a width at which it should be applied.

And you can use different screen sizes to customize anything you can control via css – which is damn near everything…

Check Out The New Life Coach Directory!

Check Out The New Life Coach Directory!

We’re launching a new Life Coach Directory that is FREE for you!

Right now it’s in BETA mode for a soft launch with minimal listings so we could use a little help from a few of you so take a few minutes and post a free profile on this up and coming site right now while it’s fresh in your mind!

Profiles on the Life Coach Directory are free forever and you will see this site climbing up the rankings in the near future – so it’s a win-win for you!

🙂

Divi Media Queries

Divi Media Queries

http://bit.ly/get_your_divi_on

https://www.elegantthemes.com/blog/divi-resources/how-to-identify-divis-responsive-breakpoints-and-fine-tune-your-designs-with-media-queries

Here is a list of the main media queries used in the Divi Theme. You can use this as a helpful template for your custom CSS.

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {

}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {

}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}

 

The Importance of UPDATES!

The Importance of UPDATES!

Updates are the first line of defense! It doesn’t matter if it’s your website, your computer, your phone or your tablet – you should install updates an a regular basis to keep your data safe.

The server your domain resides on has to be updated regularly too!

Does your host keep their servers fully patched?

Do you remember that Equifax breech that exposed half of the populations personal data? That was hacked via a not updated library on the server. That boggles my mind because keeping a linux server up to date can be literally as simple as running ONE command!

You could run webmin on the server and simplify that down to a CLICK!

Yeah – I know it can be scary because sometimes things can break and at the very least something WILL change but all you have to do to make this easier is knowing that you have a backup ready right there to roll back into just in case!

You can make it totally stress free by just having me do it for you!

Sign up for optimized WordPress hosting @ Spin The Web.com today and Get CONNECTED!