CodeHQ

Creating a custom route / endpoint in WordPress

The PHP

add_action(
	'rest_api_init',
	function () {
  		register_rest_route(
  			'myname/v1',
  			'/thethingimgetting',
  			array(
				'methods' => 'GET',
				'callback' => 'thefunctionwiththeloop',
			)
		);
	}
);
function thefunctionwiththeloop() {
	$args = array(
		'post_type' 	=> 'posts',
		'numberposts'   => -1,
	);
	$query = new WP_Query($args);
	$myPosts = array();
	if ($query->have_posts()) {
		foreach ($query->posts as $post) {
			$myPosts[] = $post;
		}
	}
	return rest_ensure_response($myPosts);
}

The JS

var api_url = '/wp-json/myname/v1/thethingimgetting';
$.ajax({
	url: api_url,
	method: 'GET'
})
.done(function(response){
	console.log(response);
})

Flex – justify content: space-between fill white space

To get rid of the horrible spacing between the last two elements on a row of elements which are being aligned with 

justify-content: space-between

… try the following:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

@Supports CSS function

In this example .article-grid will be block unless the browser has support for display: grid, at which case, the styles within the @supports block will kick in and override the previous display declaration.

.article-grid {
    display: block;
}

@supports (display: grid) {
    .article-grid {
        display: grid;
    }
}

Create your own social share buttons

Add this HTML for the buttons:
(Download HTML here)

Add this javascript for the button popup function:

function newPopup(url) {
	popupWindow = window.open(
url,'popUpWindow','height=450,width=600,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}

Find elements on page by their CSS Properties

Drop this in to your console in dev tools and all elements with position: absolute will render with a border.

var absElements = [];
$("*").css("position", function(i, pos){
   if(pos==="absolute") absElements.push(this);
});

$(absElements).css({border:"5px solid red"});

Remove spaces in tel href links

/* Remove all spaces in tel: href links so click to call works */
$('a[href^="tel:"]').attr('href', function(_,v){
    return v.replace(/\(0\)|\s+/g,'')
});

SASS Mixin for fluid type sizes | CSS

Add the following in your mixins .scss file:

// RESPONSIVE FONTS @include fluid-type(1.3rem, 1.7rem);
@mixin fluid-type($min-font-size: 1.3rem, $max-font-size: 2.2rem, $lower-range: 540px, $upper-range: 960px) {
  font-size: calc(#{$min-font-size} + #{(($max-font-size / ($max-font-size * 0 + 1)) - ($min-font-size / ($min-font-size * 0 + 1)))} * ( (100vw - #{$lower-range}) / #{(($upper-range / ($upper-range * 0 + 1)) - ($lower-range / ($lower-range * 0 + 1)))}));
  @media screen and (max-width: $lower-range) {
    font-size: $min-font-size;
  }
  @media screen and (min-width: $upper-range){
    font-size: $max-font-size;
  }
}

Then call that mixin within your theme .scss files with:

.div {
	@include fluid-type(1rem, 3rem);
	font-weight: 300;
}

Finally, make sure you set your html tag to have a set font-size as a percentage e.g. 62.5%…

html {
    font-size: 62.5%;
}

Custom query on taxonomy page | WordPress

This will go in taxnonomy.php or taxonomy-name.php templates.

$term = get_term_by( 'slug', get_query_var('term'), get_query_var('taxonomy') ); 

$customField = get_field('custom_field_name')];
$args = array(
	'posts_per_page' => '-1',
	'post_type' 	 => 'service_centres',
	'tax_query' => array (
		array (
			'taxonomy' => 'regions',
			'field' => 'slug',
			'terms' =>  $term->slug
		)
	),
	'meta_key'	 => 'custom_field_name',
	'meta_value'	 => 'custom_field_value_value'
);

Grab first image from post

Function for grabbing image from post and using it instead of a featured image for example.

Add this to functions.php

// Get URL of first image in a post
function catch_that_image() {
	global $post, $posts;
		$first_img = '';
		ob_start();
		ob_end_clean();
		$matches[1][0] = '';
		if(preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches)){
		  	$first_img = $matches[1][0];
		}

	// no image found display default image instead
	return $first_img;
}

And call in the theme with

<img src="<?php echo catch_that_image() ?>" onerror="this.style.display = 'none';"/>

Query posts by current post category

Great for showing ‘related posts’ by current post category. The current post has an ID, the query grabs that ID, checks with categories are associated with that post, creates an array and passes these through to the query, also excluding this current post from the loop.

Output is posts from the same category/categories as the current post (active page).

<?php 
	$args = array(
		'posts_per_page' => 3,
		'post__not_in'   => array( get_the_ID() ),
		'no_found_rows'  => true, //Np pagination needed so query is quicker
		'post__not_in' 	 => array($post->ID)  //Excludes current post
	);
 
	$cats = wp_get_post_terms( get_the_ID(), 'category' ); 
	$cats_ids = array();  
	foreach( $cats as $wpex_related_cat ) {
		$cats_ids[] = $wpex_related_cat->term_id; 
	}
	if ( ! empty( $cats_ids ) ) {
		$args['category__in'] = $cats_ids;
	}
	$wpex_query = new wp_query( $args );
 
	foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>
 
	//CONTENT HERE i.e. post data and title
 
<?php endforeach; wp_reset_postdata();?>

Preparing for Gutenberg

If you want to pre-disable Gutenberg for when it launches, install the following plugin, activate and untick the checkbox in the settings: https://wordpress.org/plugins/classic-editor/

If you also want to avoid the 5.0 update, you can always hide the update banner:

//Add to functions.php file to remove WordPress update notice 

function hide_update_notice() {
remove_action( 'admin_notices', 'update_nag', 3 );
}
add_action( 'admin_notices', 'hide_update_notice', 1 );

Slide up animation for active state | CSS

This is a great addition to jQuery tabs, for when you want to animate the new active tab body.

@keyframes tabSlide{
	0% {
		opacity: 0;
		-moz-transform:translateY(30px);
		-webkit-transform:translateY(30px);
		-o-transform:translateY(30px);
		-ms-transform:translateY(30px);
		transform:translateY(30px)
	}
	100% {
		opacity:1;
		-moz-transform:translateY(0px);
		-webkit-transform:translateY(0px);
		-o-transform:translateY(0px);
		-ms-transform:translateY(0px);
		transform:translateY(0px)
	}
}

.active-tab {
	animation-name: tabSlide;
    animation-duration: 500ms;
    animation-timing-function: ease;
}

Limit WordPress Revisions

Add this to you wp-config.php file and change the number for how many revisions you want to limit your pages to:

define('WP_POST_REVISIONS', 10);

Or use the below to globally turn off post revisions:

define('WP_POST_REVISIONS', false);