A Custom shortcode example for your Video Background
add_shortcode('video-bg', function($attr){
$shortcode_atts = shortcode_atts( array(
'url' => '/wp-content/uploads/Welcome-to-Paia-Inn-1080p.mp4',
'poster' => 'https://mlmo7tmmvaed.i.optimole.com/w:auto/h:auto/q:mauto/f:avif/https://shimion.com/wp-content/uploads/hero-image-1.jpg',
'logo' => 'https://mlmo7tmmvaed.i.optimole.com/w:auto/h:auto/q:mauto/f:avif/https://shimion.com/wp-content/uploads/Paia-Inn-Logo-Alternate.png',
'title' => 'Where Surf & Sand Meet Sophistication Maui, Hawaii',
'book_now_url' => 'https://paiainn.client.innroad.com/',
), $atts );
$html = '<div class="ld-video_wapper">
<div id="video_background_img" class="video_background" style="background-image:url('.$shortcode_atts['poster'].');"></div><!-- The video -->
<video autoplay="" muted="" id="myVideo">
<source src="'.$shortcode_atts['url'].'" type="video/mp4">
</video>
<div class="video-itro-section" onclick="playPause()">
<div class="video-itro-section-inner">
<img width="1424" height="1261" src="'.$shortcode_atts['logo'].'" class="attachment-full size-full" alt="" style="max-width: 350px;">
<h2 class="elementor-heading-title elementor-size-default">'.$shortcode_atts['title'].'</h2>
<div class="elementor-button-wrapper">
<a href="'.$shortcode_atts['book_now_url'].'" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="readmore-button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Book Now</span>
</span>
</a>
</div>
</div>
</div>
<div class="video_overlay"></div>
<div id="video_instructio">Click to play/pause video</div>
</div>
<style>
.ld-video_wapper{
position: relative;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100vh;
cursor: pointer;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: absolute;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
}
.video_background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: top left;
/* min-width: 100%; */
/* min-height: 100%; */
/* z-index: 9999999999; */
}
.video_overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: top left;
background-color: #00000042;
}
.video-itro-section {
z-index: 9999;
position: absolute;
width: 100%;
height: 100%;
display: flex;
}
.video-itro-section-inner {
min-width: 0;
min-height: 0;
margin: auto;
display: inline;
text-align: center;
max-width: 767px;
}
.video-itro-section-inner h2 {
font-family: "Lato", Sans-serif;
font-size: 35px;
font-weight: 700;
text-transform: uppercase;
font-style: normal;
text-decoration: none;
color: #fff;
}
#video_instructio {
position: absolute;
top: 10px;
left: 10px;
color: #afdbd6;
font-weight: bold;
display: none;
}
.ld-video_wapper:hover #video_instructio {
display: block;
}
@media(max-width: 768px){
.hide-on-mobile{
display: none;
}
}
</style><script>
var video = document.getElementById("myVideo");
video.muted = false;
console.log(video);
video.onended = function() {
video.style.display = "none";
document.getElementById("video_background_img").display = "block";
document.getElementById("video_instructio").style.display = "none";
};
function playPause() {
if (video.paused)
video.play();
else
video.pause();
}
</script>';
return $html;
});Show Advanced Custom Fields specific group as ARRAY on frontend by group ID
Advanced Custom Fields is one of the best WordPress plugin that help to add additional meta data for post, page, post type. It also help to create theme option or additional user meta field vary easily.
It is easy to use and really well documented but for advance uses sometime we need to use specific group that we created on the Custom field group.
In this case you will need to get that specific field group ID. Check the screenshot below to get the group ID..
Now to get that specific group data you will need to use two ACF pre defined function.
- acf_get_field_group()
- acf_get_fields()
acf_get_field_group support needs ID, key or name. acf_get_fields support two parameter fields or parent (optional).
Please take a look at the below code to get the data of a specific ACF group data.
if(function_exists('acf_get_field_group') && function_exists('acf_get_fields')){
$aar = acf_get_field_group(341);
$fields = acf_get_fields( $aar );
print_r($fields);
}
I hope it will help… Thanks
Create Object Oriented Classes In JQuery
Create an object oriented style with jQuery. Make use of the constructor() method and access public and private methods from within the class scope.
/*
* myClass
*/
var myClass = function(options){
/*
* Variables accessible
* in the class
*/
var vars = {
myVar : 'original Value'
};
/*
* Can access this.method
* inside other methods using
* root.method()
*/
var root = this;
/*
* Constructor
*/
this.construct = function(options){
$.extend(vars , options);
};
/*
* Public method
* Can be called outside class
*/
this.myPublicMethod = function(){
console.log(vars.myVar);
myPrivateMethod();
};
/*
* Private method
* Can only be called inside class
*/
var myPrivateMethod = function() {
console.log('accessed private method');
};
/*
* Pass options when class instantiated
*/
this.construct(options);
};
/*
* USAGE
*/
/*
* Set variable myVar to new value
*/
var newMyClass = new myClass({ myVar : 'new Value' });
/*
* Call myMethod inside myClass
*/
newMyClass.myPublicMethod();
Function to Change TinyURL Shortcode Tags
/**
* code #20 - get TinyURL for any post or page via shortcode tag
* source - http://wordpress.stackexchange.com/a/5741/8922
* ex: [tinyurl] will output the TinyURL for the current page
* [tinyurl url="http://google.com/" title="google"] will output the TinyURL for Google.com
*/
function custom_tinyurl_shortcode($atts){
extract(shortcode_atts(array(
'url' => get_permalink(),
'title' => ''
), $atts));
if(!$title) $title = $url;
if(false === ($cache = get_transient(‘tinyurl_’+md5($url)))):
$cache = wp_remote_retrieve_body(wp_remote_get(‘http://tinyurl.com/api-create.php?url=’.$url));
// cached for 24 hours
set_transient(‘tinyurl_’+md5($url), $cache, 60*60*24);
endif;
return ‘<a href=”‘.esc_url($cache).'”>’.esc_attr($title).'</a>’;
}
add_shortcode(‘tinyurl’, ‘custom_tinyurl_shortcode’);
Many WordPress developers are creating shortcodes to embed into content. This makes it easier for writers to create full HTML widgets like video players and image slideshows. This snippet will create a shortcode which you may call in two ways. The first is simply [tinyurl] which will output the TinyURL version of the current page.
However you can pull a remote URL as a TinyURL by adding some optional parameters. The title=”” parameter will display link text inside the tag. Otherwise your output text will be the same as the new TinyURL. Check out my comments in the source code for some more detailed examples.
Function to Change Remove ‘comments’ Column from Manage Pages
/**
* code #18 - remove 'comments' column from pages admin table
* source - http://wordpress.stackexchange.com/a/9990/8922
* @param array
* @return array
*/
function remove_comments_column($defaults) {
unset($defaults['comments']);
return $defaults;
}
add_filter('manage_pages_columns', 'remove_comments_column');
When looking at the Pages table in the administrator panel you will notice there is a small column for the comments count. This is obviously helpful when going through posts, however pages are not formatted the same way and do not usually allow comments. Simply copy/paste this code snippet into your document and you’ll notice a much cleaner table when editing page content.
Function to Change Sharpen Resized JPEG Images
/**
* code #17 - sharpen JPG/JPEG images when auto-resized in WordPress
* source - http://wordpress.stackexchange.com/a/35526/8922
* @param string
* @return resource
*/
function sharpen_resized_jpeg_images($resized_file) {
$image = wp_load_image($resized_file);
if(!is_resource($image))
return new WP_Error('error_loading_image', $image, $file);
$size = @getimagesize($resized_file);
if(!$size)
return new WP_Error('invalid_image', __('Could not read image size'), $file);
list($orig_w, $orig_h, $orig_type) = $size;
switch($orig_type) {
case IMAGETYPE_JPEG:
$matrix = array(
array(-1, -1, -1),
array(-1, 16, -1),
array(-1, -1, -1),
);
$divisor = array_sum(array_map('array_sum', $matrix));
$offset = 0;
imageconvolution($image, $matrix, $divisor, $offset);
imagejpeg($image, $resized_file,apply_filters('jpeg_quality', 90, 'edit_image'));
break;
case IMAGETYPE_PNG:
return $resized_file;
case IMAGETYPE_GIF:
return $resized_file;
}
return $resized_file;
}
add_filter('image_make_intermediate_size', 'sharpen_resized_jpeg_images', 900);
Please note upfront that this code will only work for JPG/JPEG image types. However that being said, this is definitely worth using in your code if you ever upload jpegs. If you go to the original stack comment you can see a few example comparison images. There is clearly a huge different in quality and it’s a very impressive customization.
Function to Change Customize Admin Page Footer
/**
* code #16 - customize the admin page footer text
* source - http://wordpress.stackexchange.com/a/6005/8922
*/
function custom_admin_footer() {
echo 'add your custom footer text and html here';
}
add_filter('admin_footer_text', 'custom_admin_footer');
This isn’t a piece of the layout where many people think to look, but WordPress users love customizations. If you want to update some new links or text into your admin panel footer area, just copy over this block of code and edit the string value. Whatever is being output to the page will display in your admin footer text area.
Function to Change Get Current Template Details in Header
/**
* code #15 - output the current post/page template name in your header area
* source - http://wordpress.stackexchange.com/a/3848/8922
*/
function display_template_name() {
global $template;
print_r($template);
}
add_action('wp_head', 'display_template_name');
This small block of code is more useful when debugging than anything else. But there are often times when I’m building a template and I cannot figure out why one page is rendering different than all the others. This usually relates to a template type issue, especially with custom post types.
Just add this bit into your functions.php file for a couple of seconds, enough time to pull down your results. When you reload the page you’ll notice the PHP print_r() method directly outputs the content into your HTML. Be sure to remove this after using, or just comment out the block to hide it with /* */ syntax.
Function to Change Display D/B Query Times & Resources
/**
* code #14 - display WordPress database query times and memory consumption in footer
* source - http://wordpress.stackexchange.com/a/1866/8922
*/
function footer_stats_display($visible = false) {
$stat = sprintf( '%d queries in %.3f seconds, using %.2fMB memory',
get_num_queries(),
timer_stop( 0, 3 ),
memory_get_peak_usage() / 1024 / 1024);
echo $visible ? $stat : ">!-- {$stat} -->" ;
}
add_action('wp_footer', 'footer_stats_display', 20);
If you are curious about how your server handles each page load this may be worth adding into your document. This small block will add an HTML comment right at the end of each page in the wp_footer() function. You will see the total number of database queries, how long they took to perform, and how much memory was used on the server.
Function to Change Add Thumbnails into ‘Manage Posts/Pages’ Table
/**
* code #13 - add post thumbnails into "manage posts/pages" admin table
* source - http://wordpress.stackexchange.com/a/6021/8922
*/
if(!function_exists('add_thumb_column') && function_exists('add_theme_support')) {
add_theme_support('post-thumbnails', array('post', 'page'));
function add_thumb_column($cols) {
$cols['thumbnail'] = __('Thumbnail');
return $cols;
}
function add_thumb_value($column_name, $post_id) {
$width = 35;
$height = 35;
if('thumbnail' == $column_name ) {
$thumbnail_id = get_post_meta($post_id, '_thumbnail_id', true);
$attachments = get_children(array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image'));
if($thumbnail_id)
$thumb = wp_get_attachment_image($thumbnail_id, array($width, $height), true);
elseif($attachments) {
foreach($attachments as $attachment_id => $attachment) {
$thumb = wp_get_attachment_image($attachment_id, array($width, $height), true);
}
}
if(isset($thumb) && $thumb) {
echo $thumb;
} else {
echo __('None');
}
}
}
add_filter('manage_posts_columns', 'add_thumb_column');
add_action('manage_posts_custom_column', 'add_thumb_value', 10, 2);
add_filter('manage_pages_columns', 'add_thumb_column');
add_action('manage_pages_custom_column', 'add_thumb_value', 10, 2);
If your website is prominently using the featured images in posts then you may consider adding this large function to your file. The two filter/action sets will add another column into the ‘manage posts’ and ‘manage pages’ table within the admin panel. This column will display a smaller thumbnail shot of the featured image for each piece of content.
Be aware that loading your pages will probably take just a couple extra seconds. Pulling images into the page is always a bit more tedious, and tack on the database query results as well. But it’s a really nice piece of functionality worth testing out, if you have the time.