WordPress Ajax call


<script>
	// Ajax call to get a single dealer
	// fetch_individual_dealer() in functions.php
	function fetch_individual_dealer_information(id) {
		// We'll pass this variable to the PHP function fetch_dealers
		var dealer_id = id;
		var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
		var mobile_dealer = $('#mobile-dealer');
		var loader = $('.uil-spin-css-container');
		loader.show();
		// This does the ajax request
		if (dealer_id) {
			$.ajax({
				url: ajaxurl,
				data: {
					'action':'fetch_individual_dealer',
					'dealer_id' : dealer_id
				},
				success:function(data) {
					// console.log(data);
					loader.hide();
					mobile_dealer.empty();
					mobile_dealer.append(data);
				},
				error: function(errorThrown){
					console.log(errorThrown);
				}
			}); 
		} else {
	}
}

$("#dealers").change(function() {
	fetch_individual_dealer_information(marker_id);
});

</script>

<div class='uil-spin-css-container'>
	<div class='uil-spin-css'>
		<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
	</div>
</div>

<div id="mobile-dealer" class="visible-xs">
	<article>
		<div class="row">
			<div class="col-xs-4"><img src="http://website.com/wp-content/uploads/2016/04/image-150x150.jpg" class="img-responsive"></div>
			<div class="col-xs-8">
				<h5>Outdoor World</h5>
				<h6>Bunbury</h6>
				<p>4 Halifax Road, Bunbury, WA, 6230<br>
				<strong>Phone:</strong> 08 9725 6166</p>
			</div>
		</div>
		<a href="https://www.google.com/maps?daddr=-33.358775,115.66869199999996" class="btn white">Get Directions</a>
		<a href="http://website.com/blog/dealer/bunbury/" class="btn arrow black">Dealer Details</a>
	</article>
</div>

In Functions.php


function fetch_individual_dealer() {
	// The $_REQUEST contains all the data sent via ajax
	if ( isset($_REQUEST) ) {
		$dealer_id = $_REQUEST['dealer_id'];
		$dealer_suburb = get_the_title($dealer_id);
		$dealer_name = get_field('dealer_name', $dealer_id);
		$dealer_phone = get_field('delaer_phone', $dealer_id);
		$dealer_address = get_field('dealer_store_address', $dealer_id);
		$dealer_image = get_field('featured_image', $dealer_id);
		$dealer_image_thumbnail = $dealer_image['sizes']['thumbnail'];

		$categories = get_the_terms( $post->ID, 'dealer_state' );
		if ($dealer_image_thumbnail) {
			$image_column = '<div class="col-xs-4"><img src="'.$dealer_image_thumbnail.'" class="img-responsive"></div>';
		} else {
			$image_column = '';
		}
		$html = '
			<article>
				<div class="row">
					'.$image_column.'
					<div class="col-xs-8">
						<h5>'.$dealer_name.'</h5>
						<h6>'.$dealer_suburb.'</h6>
						<p>'.$dealer_address['address'].'<br>
						<strong>Phone:</strong> '.$dealer_phone.'</p>
					</div>
				</div>
				<a href="https://www.google.com/maps?daddr='.$dealer_address['lat'].','.$dealer_address['lng'].'" class="btn white">Get Directions</a>
				<a href="'. get_permalink($dealer_id).'" class="btn arrow black">Dealer Details</a>
			</article>
		';
		echo $html;
	}
	// Always die in functions echoing ajax content
	wp_die();
}

add_action( 'wp_ajax_nopriv_fetch_individual_dealer', 'fetch_individual_dealer' );
add_action( 'wp_ajax_fetch_individual_dealer', 'fetch_individual_dealer' );
 

Bootstrap 3 change grid column count and gutter width using SASS

/************************************
***** column vars
*************************************/

$new-columns :                  12;
$new-gutter-width :             40px;

$grid-columns :                 $new-columns;
$grid-gutter-width :            $new-gutter-width;



@mixin column-adjust($column,$gutter) {

    // set custom variables for our grid structure
    $grid-columns: $column !global;
    $grid-gutter-width: $gutter !global;

    .row {
        @include make-row();
    }
    @include make-grid-columns();
    // @include make-grid(xs);
    @media (min-width: $screen-sm-min) {
        @include make-grid(sm);
    }
    @media (min-width: $screen-md-min) {
        @include make-grid(md);
    }
    @media (min-width: $screen-lg-min) {
        @include make-grid(lg);
    }

    // reset global vars;
    $grid-columns: $new-columns !global;
    $grid-gutter-width: $new-gutter-width !global;

}

@import 'vars';
@import 'mixins';

/************************************
***** grid changes
*************************************/

.grid {
    &.grid-10-across {
        @include column-adjust(10, $grid-gutter-width );
    }
    &.grid-24-across {
        @include column-adjust(24, $grid-gutter-width );
    }
}

.gutter-slim {
    &.gutter-slim-10 {
        @include column-adjust($new-columns, 10px );
    }
    &.gutter-slim-6 {
        @include column-adjust($new-columns, 6px );
    }
}

List terms in a given taxonomy using wp_list_categories

list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)

[code]
$taxonomy = ‘location’; $orderby = ‘name’;
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = ”;
$args = array(
‘taxonomy’ => $taxonomy,
‘orderby’ => $orderby,
‘show_count’ => $show_count,
‘pad_counts’ => $pad_counts,
‘hierarchical’ => $hierarchical,
‘title_li’ => $title,
‘child_of’ => 9 );
?>
[/code]

Simple, use-anywhere, semantic, pure CSS spinner. – JSFiddle

Find extension of a file

 /**
 *
 * find extension of a file
 */
 private function findExtension(str : String) : String
 {
 return String(str.split(".")[1]).toLowerCase();
 }

Resize image to fit in a rectangle

/**
 * resize image to fit in a rectangle
 */
 public function resizeToFit(mc : MovieClip, width : Number, height : Number) : void
 {
 var largeWidth : Number = mc.width;
 var largeHeight : Number = mc.height;
initialContainerWidth = largeWidth;
 initialContainerHeight = largeHeight;
mc.width = int((fitPercent / 100) * largeWidth);
 mc.height = int((fitPercent / 100) * largeHeight);
 mc.x = Math.round((componentWidth - mc.width) / 2);
 mc.y = Math.round((componentHeight - mc.height) / 2);
 }