How To Load the Contact Form 7 Script for a Contact Page Only

Contact Form 7 loads its JavaScript and CSS files on every page and this cause load problems in the whole site specialy in the home page with PageSpeed Insights when i notice the CSS and JavaScript and there was no contact form there so what we need to fix this is to remove these js and css from any page who is not contact page that contains the contact form itself

all u need is to replace the word (contact-us) with the page name in your site

also this code need to be added to functions.php of your theme (or child theme) at the end of it

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('contact-us') ) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( !is_page('contact-us') ) {
wp_deregister_style( 'contact-form-7' );
wp_deregister_style( 'contact-form-7-rtl' );
}
}

hope i saved you 2 or 3 sec in load time 🙂

Good Luck

Different logo per language

I use theme called “betheme” a lot and lately used wpml and i wanted to use

different logo for each language as client requested so i find nice way yo

do it without changing the header code. This should work on all themes by

the way

1. Go to WPML > String translation, scroll all the way to the bottom and look for a “Translate texts in admin screens”, Select the logo field, if it appears,

2. go to WPML > String translation and search for “logo” and in the drop-menu beside Select strings within domain choose “admin_texts_betheme”
and press search u should see the link for the logo for the current language just replace it with the new logo link and u done

isotope right to left support

isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.

See test: Right to left

WHAT I DID IS TO ADD THIS TO THE JQUERY CALLING THE ISOTOPE

isOriginLeft: false,

for example



function applyIso()
{
container.isotope({
layoutMode : '',
itemSelector : '.isotope-item',
transitionDuration: '0.6s',
isOriginLeft: false,
//transformsEnabled: false,
filter: "*"
}, function()

You’ll need to make the following changes:

  • Modify Isotope’s _positionAbs method
  • Set transformsEnabled: false in the Isotope options
  • Add CSS transition property styles for right/top

JavaScript for right-to-left support

/ modify Isotope's absolute position method
$.Isotope.prototype._positionAbs = function( x, y ) {
  return { right: x, top: y };
};

// initialize Isotope
$('#container').isotope({
  transformsEnabled: false
  // other options...
});

CSS for right-to-left support

.isotope .isotope-item {
  -webkit-transition-property: right, top, -webkit-transform, opacity;
     -moz-transition-property: right, top, -moz-transform, opacity;
      -ms-transition-property: right, top, -ms-transform, opacity;
       -o-transition-property: right, top, -o-transform, opacity;
          transition-property: right, top, transform, opacity;
}