Adding Bootstraps Collapse to a Beaver Builder button and module
If you have the Beaver Theme as your WordPress theme, here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle and data-target attribute. You need to have the full bootstrap enabled in the theme, not the minimal version. Let’s say you have…
Read MoreFlyout Overlay with CSS & Javascript
Building on from 2 previous posts on overly flyout content and animating hamburger icons – I did one more code example with a more minimal approach. The initial same approach is required with 2 x rows of content, one static and the other designated as the overlay flyout with a class of .overlay The toggle…
Read MoreShow All Loaded Scripts and Styles on a Page in WordPress
To show all loaded scripts and styles on a page in WordPress you can use a foreach loop and show the name of the script as referred to as a $handle add_action( ‘wp_print_scripts’, ‘prefix_show_me_the_scripts’ ); /** * Show what Scripts and Styles are running on a page */ function prefix_show_me_the_scripts() { global $wp_scripts; global $wp_styles; echo…
Read MoreAdd Javascript and CSS files to the Head and Footer in WordPress
Getting it right in the head As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme. This really is a no no! as this can result in script conflicts or duplications or just downright badness, there…
Read MoreAdding an offscreen content area with a toggle to a Genesis Theme
The latest Genesis Infinity Pro theme has a top right toggle icon which allows for some off screen content to come into prominence in the viewport, this can be great for lead capture, ecommerce, contact details etc Here is how you can add this to the Sample Theme, also should work ok in other Genesis themes…
Read MoreAdd Christmas Snow Effect to your WordPress Site
You can add a Christmas snow effect to your WordPress web site by using a snowstorm javascript which has been around for more than ten years. This used to be bundled with Jetpacks modules and I believe you can only access it now if your site is hosted on the main WordPress.com, but never fear…
Read MoreCreate a Masonry Layout on the Home/Blog Page in WordPress
WordPress already comes with Masonry either as pure Javascript or a jQuery plugin, here is how you can style a home blog page in a Masonry format with 3 columns. Enqueue the built in WordPress jQuery Masonry script and create a initiate file which targets our .home .entry posts. Add some CSS style for…
Read MoreUsing wp_localize_script with jQuery variables including strings, booleans and integers
The use of wp_localize_script is an API in WordPress is to retrieve PHP values from the database to use in javascript/jquery scripts, it can also be utilized to make string values language translatable if required, but also used to pass user defined variables/settings say from a plugin to load via a jQuery init file for a jQuery plugin. By…
Read MoreUsing ScrollReveal.js in a WordPress Genesis Theme
ScrollReveal.js is a javascript resource for animating objects as they appear in the viewport, here’s how to get it going in a Genesis theme for WordPress. Above are four colored balls set to animate with scrollreval each time they enter into the viewport. For the elements to animate they need to have an attribute set, data-sr=”” and…
Read More