Personal notes
Functional code pieces that we can use on projects
Prevents window resize event from triggering code on every pixel. Helpful for performing match heights and other intensive JS functions.
var resizeTimer;
$(window).on('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Code here
}, 250);
});
@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@media (width) and @media (height) which include scrollbarsinitial-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 valuesundefined in IE8-document.documentElement.clientWidth and .clientHeight@media (width) and @media (height) when there is no scrollbarjQuery(window).width() which jQuery calls the browser viewportmatchMedia to obtain precise dimensions in any unitSpecify browser styles with CSS
Positioning Element Tags with Flexbox in bootstrap.
Requires jquery, bootstrap CSS and JS.
HTML
//button Privacy Policy //modal
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;
}
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;
}
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:
Use the element width:
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
left:50%;
margin-left:-25px;
}
If you would like to not use calculations you can do this:
#logo {
background:red;
width:50px;
height:50px;
position:absolute;
left: 0;
right: 0;
margin: 0 auto;
}
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/