Code Snippets

The quickest way to use this section is to search using a search term.

Have you contributed your favorite snippets yet? Check your submissions using the link attached to your welcome message in the header.

Snippets include php, javascript or css code to help customise your site. If you wish to add some helpful bits of code you can submit it here for review. All contributions welcome!

Language:           Keyword:             
Display ACF Gallery using included slider shortcode
It displays a gallery of images from ACF Gellery field as simple slider. The code should go in the template of the post/page.
See this code in use here: 
Submitted by: dshakya
Language: PHP

Content modal opening by link or url parameters
When using the V2 Element 'Content modal' you may find yourself wanting to open/close the modal by something else then the default button. This script enables you to do so. Steps: 1. Give the modal a unique ID 2. Set the ID as href on your link: ?x-toggleable-target=modal-id 3. To close any previous openend modal, append the following to your link: x-toggleable-closeall So for example: Appending these to an url will work as well: http://mywebsite.com/?x-toggleable-target=unique-modal-id
See this code in use here: 
Submitted by: dhunink
Language: JavaScript

To fade in top nav bar
I wanted something that was smoother than the default hide nav bar option in the Header builder in Pro so went searching on the web for something that would provide a smooth fade in. This code hides the top nav bar then gradually fades in on scroll. Select the bar that holds your nav bar and, in Customise, add the class topnavshowme. Alter the animate command - in the example it's 3500 - for the duration you desire in milliseconds. You can see it in action : https://kc-designs.co.uk
See this code in use here: 
Submitted by: KenCope
Language: JavaScript

Equal Height and Columns Per Screen
This code applies to a 4 column row in Cornerstone or Pro editor. Apply the css class .columnheight to a four column row to get the following results 1) all columns will be height matched 2) as the screen size is reduced the 4 column will reduce to 2 rows of 2 columns, and when reduced further to mobile proportions, will show 4 rows of 1 column.
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Add Dynamic Year anywhere using a Shortcode
Add the code to your Child Themes functions.php file, then where-ever you want to add the year, use the Shortcode [year]

Thanks to Donald McGuinn for finding this splendid Shortcode
See this code in use here: bell-lodge.nz
Submitted by: XAdmin
Language: JavaScript, PHP, Shortcode

Add Dynamic Year anywhere using a Shortcode
Add the code to your Child Themes functions.php file, then where-ever you want to add the year, use the Shortcode [year]

Thanks to Donald McGuinn for finding this splendid Shortcode
See this code in use here: bell-lodge.nz
Submitted by: XAdmin
Language: JavaScript, PHP, Shortcode

Add Author Box to all Posts
Add an author box on all the posts without any plugin
See this code in use here: quvor.com/10-mistakes-avoid-company-website/
Submitted by: XAdmin
Language: PHP

Fixes the rev slider to the top of the page
Content below the slider scrolls up over the slider as you scroll down the page.
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Parallax style footer reveal effect
See this code in use here: lucidmotors.com/
Submitted by: XAdmin
Language: CSS

Hide Menu After Scrolling then Appear on Scroll Up
Add this to customizer Custom section. This is for X only. Not Pro. This will allow your header to sticky for a bit on scroll and then when scrolling back up at any point, it will reappear.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS, JavaScript

Hide Menu After Scrolling then Appear on Scroll Up
Add this to customizer Custom section. This is for X only. Not Pro. This will allow your header to sticky for a bit on scroll and then when scrolling back up at any point, it will reappear.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS, JavaScript

Remove New WooCommerce Gallery Look
This will revert your Woo Products to have the thumbnails below the main product image. Place this code in your child theme functions.php file.
See this code in use here: 
Submitted by: Donald McGuinn
Language: PHP