Cross-browser @media (width) and @media (height) values

Cross-browser @media (width) and @media (height) values 

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth and .innerHeight

  • gets CSS viewport @media (width) and @media (height) which include scrollbars
  • initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
  • zoom may cause values to be 1px off due to native rounding
  • undefined in IE8-

document.documentElement.clientWidth and .clientHeight

  • equals CSS viewport width minus scrollbar width
  • matches @media (width) and @media (height) when there is no scrollbar
  • same as jQuery(window).width() which jQuery calls the browser viewport
  • available cross-browser

Resources

Aoda Accessible Menu

Adobe has an active public repo for an accessible menu. It’s called “Mega Menu”. It’s adds classes, aria tags, and keypad controls for you! Here is the link for the js file. In my example I’ve assigned the classes hover, and open. You can use the enter, tab, and esc keys to go through the menus. I’ve included an example, and the code you’ll need below.

Here is a exmaple

You’ll have to add JS to target the menu, menu and sub-menus

$('.menu-primary-menu-container').accessibleMegaMenu();

setTimeout(function () {
	$('body').removeClass('init');
}, 500);

$(".menu-primary-menu-container").accessibleMegaMenu({
	/* prefix for generated unique id attributes, which are required
	   to indicate aria-owns, aria-controls and aria-labelledby */
	uuidPrefix: "accessible-megamenu",

	/* css class used to define the megamenu styling */
	menuClass: "navbar-nav",

	/* css class for a top-level navigation item in the megamenu */
	topNavItemClass: "menu-item-has-children",

	/* css class for a megamenu panel */
	panelClass: "sub-menu",

	/* css class for the hover state */
	hoverClass: "hover",

	/* css class for the focus state */
	focusClass: "focus",

	/* css class for the open state */
	openClass: "open"
});

Ensure the open class will show the sub-menu

.navbar-nav .sub-menu.open {
	display: block;
	opacity: 1;
	visibility: visible;
}

Display cleaner excerpts – get rid of all shortcodes in excerpts

If you want to simply get rid of all shortcodes in excerpts, try this:

add_filter('pre_excerpt_content', 'shortcodes_trim');
function shortcodes_trim($content) {
	$content = preg_replace('/\[.*?\]/s', '', $content);
	return $content;
}

For Divi Page Builder, use this:

add_filter('pre_excerpt_content', 'trim_divi_shortcodes');
function trim_divi_shortcodes($content) {
    $content = preg_replace('/\[\/?et_pb.*?\]/', '', $content);
    return $content;
}

For Visual Composer, use this:

add_filter('pre_excerpt_content', 'trim_vc_shortcodes');
function trim_vc_shortcodes($content) {
    $content = preg_replace('/\[\/?vc.*?\]/', '', $content);
    $content = preg_replace('/\[\/?mk.*?\]/', '', $content);
    return $content;
}

get_the_content() WITH formatting

Normally the get_the_content() tag returns the content without formatting. I found out a solution to make get_the_content() tag return the same content as the_content().

For me and others that can be a problem if you expect them to behave the same. I looked into the WordPress core and found a solution. Put this code into your functions.php in your theme folder.

function get_the_content_with_formatting ($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	return $content;
}

In your theme, call the function within the loop:

WordPress – Add Author Profile Fields

function wpb_new_contactmethods( $contactmethods ) {
// Add Twitter
$contactmethods['twitter'] = 'Twitter';
//add Facebook
$contactmethods['facebook'] = 'Facebook';

return $contactmethods;
}
add_filter('user_contactmethods','wpb_new_contactmethods',10,1);

Find our more tips and tricks – 32 Extremely Useful Tricks for the WordPress Functions File: http://www.wpbeginner.com/wp-tutorials/25-extremely-useful-tricks-for-the-wordpress-functions-file/