Personal notes
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/
Make Bootstrap Columns All the Same Height
HTML:
<div class="container">
<div class="row is-flex">
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 1</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 2</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Ttitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a class="btn btn-primary" href="#">Link 3</a></div>
</div>
</div>
</div>CSS:
.row.is-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
Solution 2 using table
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
More Different Tricks on How to Make Bootstrap Columns All the Same Height: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height
Get the page ID with a page template assigned to it
$sql = "select post_id from $wpdb->postmeta where meta_key like '_wp_page_template' and meta_value = 'template-products.php'";
$result = $wpdb->get_results( $sql );
foreach ( $result as $value ) {
$page_id = $value->post_id;
}
wp_reset_query();
See the Pen Flexbox list grid by Lottejackson (@lottejackson) on CodePen.
Add a horizontal menu displaying on the full container width.
HTML and WordPress menu function:
CSS code:
ul#horizontal-menu-list {
display: table;
width: 100%;
padding: 60px 0;
margin-left: 0;
}
ul#horizontal-menu-list li {
display: table-cell;
}
ul#horizontal-menu-list li:first-child a {
text-align: left;
}
ul#horizontal-menu-list a {
display: block;
border: 0;
text-align: center;
margin: 0 5px;
font-weight: 700;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #777;
}
Go To Top smooth scroll
$('a[href^="#"]').click(function() {
$('html, body').animate({
scrollTop: $("body").offset().top
}, 700);
});
Smooth scroll to an element ID on the page
$("#clickedElement").click(function() {
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 700);
});
Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.
var $window = jQuery(window);
function bucket_boxed_height() {
var bucket_boxed = $('.bucket-box');
var Max_bucket_height = 0;
var windowsize = $window.width();
if (windowsize > 991) {
bucket_boxed.each(function( index ) {
$( this ).removeAttr('style');
if (Max_bucket_height < $( this ).innerHeight()) {
Max_bucket_height = $( this ).innerHeight();
}
console.log('innerHeight = ' + innerHeight);
});
bucket_boxed.each(function( index ) {
$( this ).innerHeight(Max_bucket_height);
});
}
else {
bucket_boxed.each(function( index ) {
$( this ).removeAttr('style');
});
}
}
bucket_boxed_height();
// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);
Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):
// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.spritesheet,
#faqs-accordion button.accordion h3::after {
content: '' !important;
background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
background-size: 800px !important;
}
#faqs-accordion button.button-bg:after {
content: '' !important;
background: url(../images/menu-items-bg@2x.png) no-repeat !important;
background-size: 50px 52px !important;
width: 50px !important;
height: 52px !important;
}
#faqs-accordion button.accordion:hover:after,
#faqs-accordion button.accordion:focus:after {
content: '' !important;
background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
background-size: 50px 52px !important;
width: 50px !important;
height: 52px !important;
}
}
An example how to deactivate the whole Flexslider, Nivoslider and Owl Carousel sliders in the Visual Composer plugin.
add_action( 'wp_enqueue_scripts', 'remove_vc_modules', 99 );
function remove_vc_modules() {
wp_deregister_style( 'flexslider' );
wp_deregister_script( 'flexslider' );
wp_deregister_style( 'nivo-slider-css' );
wp_deregister_style( 'nivo-slider-theme' );
wp_deregister_script( 'nivo-slider' );
wp_deregister_style( 'owl-carousel' );
wp_deregister_script( 'owl-carousel' );
}
This site can convert text from any case to any case.