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!

You must be logged in to submit content. Please login or register.

Language:           Keyword:             
Add Author Box to all Posts
Add an author box on all the posts without any plugin
add_filter( 'the_content', 'syn_x_add_author_post', 20 );

function syn_x_add_author_post( $content ) {

if ( is_singular( 'post' ) && in_the_loop() && is_main_query() ) {
// Add image to the beginning of each page
$content .= do_shortcode('
About the Author

XAdmin

'); }; // Returns the content. return $content; }
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.
#rev_slider_1_1_wrapper {width: 100%; max-width: 1200px;}
#rev_slider_1_1{position: fixed; width: inherit; max-width: inherit;}
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Parallax style footer reveal effect
.x-main {margin-bottom: whatever the height of your footer is;
z-index: anything higher than you are setting for the footer but not high enough that it interrupts other design} 

.x-colophon {position:fixed;
bottom:0;
left:0;
width:100%;
z-index: whichever works best and is lower than the other z-index you input}
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.
jQuery( function($) {
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var header = $(".x-navbar");
var navbarHeight = header.outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
header.removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
header.removeClass('nav-up').addClass('nav-down');
}
}

lastScrollTop = st;
}	
});





/*hides the navbar with the javascript*/
.nav-up {
top: -137px !important;
transition: all ease 0.5s;
}
.nav-down {
transition: all ease 0.7s;
}
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.
jQuery( function($) {
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var header = $(".x-navbar");
var navbarHeight = header.outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
header.removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
header.removeClass('nav-up').addClass('nav-down');
}
}

lastScrollTop = st;
}	
});





/*hides the navbar with the javascript*/
.nav-up {
top: -137px !important;
transition: all ease 0.5s;
}
.nav-down {
transition: all ease 0.7s;
}
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.
// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================
See this code in use here: 
Submitted by: Donald McGuinn
Language: PHP

Remove Sub Menu Fade In and Out in Pro
This will remove the fading in and out on sub menus in Pro. Not tested in X but might work.
.x-dropdown.x-active, .x-dropdown{
  transition-duration: 0s;
}
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS

Remove hyphens from The Grid
Paste this code in the global css in The Grid skin builder
.your-grid-name .the-grid-element {
-moz-hyphens: none !important;
-ms-hyphens: none !important;
-webkit-hyphens: none !important;
hyphens: none !important;
}
See this code in use here: 
Submitted by: Nikki Wells
Language: CSS

X Pro Cart Dropdown Mobile Fix
Using X Pro Header Builder and had a cart dropdown on the right hand side of a top bar above the main header. On mobile, 480px and down, cart was being cut off by the screen. Fixed with this snippet.
@media (max-width: 480px){
[data-x-stem*="r"] {
left: -148%;
}
[data-x-stem*="l"] {
right: -163%;
}
}
@media (max-width: 320px) {
[data-x-stem*="r"] {
left: -115%;
}
}
See this code in use here: 
Submitted by: matthewsparks75
Language: CSS

Navigation Background Fade
This is for a header that is transparent then fades into a solid color background on scroll.
.x-bar.x-bar-top.x-bar-fixed {
  background-color: #333 !important;
  -webkit-transition: background-color 300ms linear;
   -moz-transition: background-color 300ms linear;
   -o-transition: background-color 300ms linear;
   -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.x-bar{
    -webkit-transition: background-color 300ms linear;
   -moz-transition: background-color 300ms linear;
   -o-transition: background-color 300ms linear;
   -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}
See this code in use here: x-pro.wpdevurl.com/header-fade/
Submitted by: Donald McGuinn
Language: CSS

Contact Form 7 Horizontal W/ Flexbox
I am using it as a simple contact form on http://homepledgerealtors.com/about/ and will be using throughout the site. Here are a few of the selectors that i used. .wpcf7 .wpcf7-form .wpcf7-form-control .wpcf7-text .wpcf7-email .wpcf7-textarea .wpcf7-submit You can also add an id when setting up the form using the div tags. I believe that you can use these instead of the top to work with flexbox.
.wpcf7-form {
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
  }
.wpcf7-text
{max-width:200px;
}
.wpcf7-email
{max-width:200px;
margin-left:10px;}

.wpcf7-tel
{margin-left:10px;}

.wpcf7-submit
{max-width:200px;
margin-left:10px;}

.wpcf7-form input {font-size:1.2em;}
See this code in use here: 
Submitted by: JeremyBrummel
Language: CSS