Embedding a Youtube video has become a completely normal process for anyone involved with the web; copy, paste, done. However, pulling in an external resource like a Youtube video may slow down a web page’s load performance, especially if there are two or more videos embedded on the same page.

HTML Structure

<div class="wrapper">
  <div class="youtube" data-embed="AqcjdkPMPJA">
    <div class="play-button"></div>
  </div>
</div>

CSS

html {
  background-color: #f3f3f3;
}
.wrapper {
  max-width: 680px;
  margin: 60px auto;
  padding: 0 20px;
}

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.youtube img {
  width: 100%;
  top: -16.82%;
  left: 0;
  opacity: 0.7;
}
.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
  cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Javascript

( function() {

  var youtube = document.querySelectorAll( ".youtube" );
  
  for (var i = 0; i < youtube.length; i++) {
    
    var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
    
    var image = new Image();
        image.src = source;
        image.addEventListener( "load", function() {
          youtube[ i ].appendChild( image );
        }( i ) );
    
        youtube[i].addEventListener( "click", function() {

          var iframe = document.createElement( "iframe" );

              iframe.setAttribute( "frameborder", "0" );
              iframe.setAttribute( "allowfullscreen", "" );
              iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

              this.innerHTML = "";
              this.appendChild( iframe );
        } );  
  };
  
} )();

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.

Description

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.

If this plugin is installed before updating Contact Form 7 from v5.0.5 to v5.1.1 then it will carry over your old API keys. At that point you will just need to head to this plugins settings page to tell the website to use reCaptcha v2.

Once installed and configured it should be the same reCaptcha functionality you are used to in previous versions of Contact Form 7.

Simple, powerful way to strip out any tags you want from the_content() in wordpress, using regex:

Get the_content() in wordpress without image tags:

$content = get_the_content();
$content = preg_replace("/<img[^>]+\>/i", "(image) ", $content); 		  
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

Get the_content() in wordpress without image and video (iframe) tags:

$content = get_the_content();
$content = preg_replace("/<img[^>]+\>/i", "(image) ", $content); 		
$content = preg_replace("/<iframe[^>]+\>/i", "(video) ", $content);             
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

Strip out any html tags from the_content() wordpress:

$content = get_the_content();
$content = preg_replace("/<embed[^>]+\>/i", "(embed) ", $content); 		
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

To truly step up the search function of your WordPress site, you should better look into Smart Ajax Product Search plugin. By now you know that you could use something extra to offer your visitors to find exactly what they are after in a more efficient way. Smart Ajax Product Search is a powerful and convenient search plugin for WordPress with a solid stability and compatibility. Speaking of which, it smoothly integrates into the default search function, as well as WooCommerce and even other custom widgets you sport on your site.

Installation

• Unzip the downloaded .zip file.
• Upload the plugin folder into the wp-content/plugins/ directory of your WordPress site. Activate the plugin through the ‘Plugins’ screen in WordPress
• Use the Smart Search screen (/wp-admin/admin.php?page=smart-search) to configure the plugin

Content editing made easy Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.

Add fields on demand

Our field builder allows you to quickly and easily add fields to WP edit screens with only the click of a few buttons!

Add them anywhere!

Fields can be added all over WP including posts, users, taxonomy terms, media, comments and even custom options pages!

Show them everywhere!

Load and display your custom field values in any theme template file with our hassle free developer friendly functions!

1. Words Length:

<?php $content = get_the_content();
  $trimmed_content = wp_trim_words( $content, 60, '<a href="'. get_permalink() .'">...[ read more ]</a>' ); ?>
  <p><?php echo $trimmed_content; ?></p>
(Change the 60 to your desire words length)

2. Character Length :

<?php echo substr(strip_tags($post->post_content), 0, 46);?>
//(Change the 46 to your desire string length)

Build an Army of Engaged Visitors That Will Grow Your Site For You

Thrive Comments is the newest alternative to the native WP comments. It’s a WordPress plugin that will bring a whole array of previously unavailable features to your WordPress comments.

Key Differences: Thrive Comments vs. Disqus

The main difference between Thrive Comments and Disqus is the scope of the programs. Since Disqus is part of a universal, multi platform network, it adds some interesting functionality, as well as a few constraints.

The Disqus system outsources comments to their network, so while the comments appear on your website, everything is controlled and hosted on the Disqus network.

Google reCAPTCHA is becoming popular since the day of its announcement. The performance of this product is not been evaluated yet because of its age.

functions.php

/*Add Google captcha field to Comment form*/

add_filter('comment_form','add_google_captcha');

function add_google_captcha(){
echo '<div class="g-recaptcha" data-sitekey= "=== Your site key === "></div>';
}

/*End of Google captcha*/

single.php

<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
jQuery("#submit").click(function(e){
var data_2;
jQuery.ajax({
type: "POST",
url: "http://yourblog.com/wp-content/themes/yourtheme/google_captcha.php",
data: jQuery('#commentform').serialize(),
async:false,
success: function(data) {
if(data.nocaptcha==="true") {
data_2=1;
} else if(data.spam==="true") {
data_2=1;
} else {
data_2=0;
}
}
});
if(data_2!=0) {
e.preventDefault();
if(data_2==1) {
alert("Please check the captcha");
} else {
alert("Please Don't spam");
}
} else {
jQuery("#commentform").submit
}
});
</script>

google_captcha.php

<?php
$data;
header('Content-Type: application/json');
error_reporting(E_ALL ^ E_NOTICE);
if(isset($_POST['g-recaptcha-response'])) {
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
$data=array('nocaptcha' => 'true');
echo json_encode($data);
exit;
}
// calling google recaptcha api.
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Your secret key&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
// validating result.
if($response.success==false) {
$data=array('spam' => 'true');
echo json_encode($data);
} else {
$data=array('spam' => 'false');
echo json_encode($data);
}
?>

Using a good <title> tag is incredibly important for ranking high in the Search Engines. This code snippet will dynamically generate a dynamic <title> tag to improve your WordPress site’s SEO and should be placed in your WordPress site’s header.php replacing your existing <title>.

<title><?php bloginfo('name'); if(wp_title('', false)) { echo '|'; } else { echo bloginfo('description'); } wp_title(''); ?></title>

A jQuery plugin to display your Google Photos.