CodeHub

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);

Decorative elements

For use on decorative elements – this is so accessibility is not spoiled by non-important content elements.

div class="foo" aria-hidden="true" role="presentation">

This …aria-hidden=”true” role=”presentation”… is important.

Text-decoration-skip-ink | CSS | Control underlined text on descenders

Ever wondered how you can stop underlines going over the top of descenders i.e. a word with letters that hang down… such as… empathy?

Underlined, that word looks like this empathy

In Chrome and Firefox it’s now possible! With text-decoration-skip

 

.underline {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

The same word empathy now looks like this empathy

Enjoy.

Default comments SCSS | WordPress

/* =========================================================
Comments
========================================================= */
.comments-area {
	padding: 20px 40px;
	 textarea#comment {
	    width: 100%;
    }
	#submit {
		@extend .button;
	}
	 ol.commentlist {
	
	     list-style:none; 
	     margin:0 0 1em; 
	     padding:0; 
	     text-indent:0;
	    
	
	 	li {}
	 	li.alt {}
		li.bypostauthor {}
		li.byuser {}
		li.comment-author-admin {}
	
	
		.comment-body {
			border-bottom: 1px solid #ddd; 
			padding:1em;
	
			.comment-author {} // end .comment-author
	
			
			div.vcard {
	
				font-weight: 14px;
				
				cite.fn {
					a.url {}
				 } // end cite.fn
	
				 img.avatar {
				 	border:5px solid #ccc; 
				 	float:right; 
				 	margin:0 0 20px 20px;
				 } // end .avatar
	
				 img.avatar-32 {} // end .avatar-32
				 img.photo {} // end .photo
				 span.says {} // ebd .says
	
			}  // end .vcard
	
			div.commentmetadata {} // end .commentmetadata
			div.comment-meta {
	
				font-size: 11px;
	
					a {
						color: #ccc;
					} // end a
	
			} // end div.comment-meta
	
			p {font-size: 12px;} // end p
	
			ul {
				font-size: 12px;
				list-style: none;
				margin: 0 0 0 20px;
			} // end ul
	
			div.reply {
	
				font-size: 11px;
	
				a {font-weight: bold;} // end a
	
			} // end reply
	
			 ul.children {
				list-style:none; 
				margin: 12px; 
				text-indent:0;
	
				li {} // end li
	
				li.alt {} 
				li.bypostauthor {}
				li.byuser {}
				li.comment {}
				li.comment-author-admin {}
	
				li.depth-2 { border-left: 5px solid #ccc; margin:0 0 10px 10px; }
				li.depth-3 { border-left: 5px solid #bbb; margin:0 0 10px 10px; }
				li.depth-4 { border-left: 5px solid #aaa; margin:0 0 10px 10px; }
				li.depth-5 {} // you get the idea
	
				li.odd {} // end .odd
	
			}  // end ul.children
	
		}  // end li.comment
	
		li.even {background:#fff;}
		li.odd {background:#f6f6f6;}
		li.parent {border-left:5px solid #ddd;}
		li.thread-alt {}
		li.thread-even {}
		li.thread-odd {}
	
	 } // end commentlist
}