Automatically assign parent taxonomy terms to posts

How it works:

Using hook set_object_terms anytime the categories are updated, this function will check whether they belong to a parent category and select the parent categories as well (and parent of parent, etc).

Note:

Do not use save_post to update categories.. because when you save a post where you only update the categories.. the save_post hook is not called.

add_action( 'set_object_terms', 'auto_set_parent_terms', 9999, 6 );
/**
 * Automatically set/assign parent taxonomy terms to posts
 *
 * This function will automatically set parent taxonomy terms whenever terms are set on a post,
 * with the option to configure specific post types, and/or taxonomies.
 *
 *
 * @param int    $object_id  Object ID.
 * @param array  $terms      An array of object terms.
 * @param array  $tt_ids     An array of term taxonomy IDs.
 * @param string $taxonomy   Taxonomy slug.
 * @param bool   $append     Whether to append new terms to the old terms.
 * @param array  $old_tt_ids Old array of term taxonomy IDs.
 */
function auto_set_parent_terms( $object_id, $terms, $tt_ids, $taxonomy, $append, $old_tt_ids ) {

    /**
     * We only want to move forward if there are taxonomies to set
     */
    if( empty( $tt_ids ) ) return FALSE;

    /**
     * Set specific post types to only set parents on.  Set $post_types = FALSE to set parents for ALL post types.
     */
    $post_types = array( 'post' );
    if( $post_types !== FALSE && ! in_array( get_post_type( $object_id ), $post_types ) ) return FALSE;

    /**
     * Set specific post types to only set parents on.  Set $post_types = FALSE to set parents for ALL post types.
     */
    $tax_types = array( 'category' );
    if( $tax_types !== FALSE && ! in_array( get_post_type( $object_id ), $post_types ) ) return FALSE;

    foreach( $tt_ids as $tt_id ) {

        $parent = wp_get_term_taxonomy_parent_id( $tt_id, $taxonomy );

        if( $parent ) {
            wp_set_post_terms( $object_id, array($parent), $taxonomy, TRUE );
        }

    }

}

jQuery – detect click event on pseudo-element

How it works:

It grabs the height, width, top, and left positions(based on the position away from the edge of the window) of the parent element and grabs the height, width, top, and left positions(based on the edge of the parent container) and compares those values to determine where the pseudo-element is on the screen.

It then compares where the mouse is. As long as the mouse is in the newly created variable range then it returns true.

Note:

It is wise to make the parent element RELATIVE positioned. If you have an absolute positioned pseudo-element, this function will only work if it is positioned based on the parent’s dimensions(so the parent has to be relative…maybe sticky or fixed would work too….).

Code:

function pseudoClick(parentElem) {

    var beforeClicked,
      afterClicked;

  var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
      parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);

  var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
      parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);

  var before = window.getComputedStyle(parentElem, ':before');

  var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
      beforeEnd = beforeStart + parseInt(before.width, 10);

  var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
      beforeYEnd = beforeYStart + parseInt(before.height, 10);

  var after = window.getComputedStyle(parentElem, ':after');

  var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
      afterEnd = afterStart + parseInt(after.width, 10);

  var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
      afterYEnd = afterYStart + parseInt(after.height, 10);

  var mouseX = event.clientX,
      mouseY = event.clientY;

  beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false); afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);

  return {
    "before" : beforeClicked,
    "after"  : afterClicked

  };      

}

Usage:

$('.user-details-expand').click(function (e) {
  // console.log("Logging the object..." + JSON.stringify(pseudoClick(this)));
  // console.log("Before has been click..." + pseudoClick(this).before);
  // console.log("After has been clicked..." + pseudoClick(this).after);
  if ( pseudoClick(this).after==true) {
    $(this).hide();
  }
});

Support:

IT SEEMS TO WORK WELL IN ALL BROWSERS IF DIMENSIONS ARE SET IN CSS. So…set your height and width on your pseudo-elements and only move them with top and left. I recommend using it on things that you are okay with it not working on. Like an animation or something. Chrome works…as usual.

Add and Colour an SVG background

Add and Colour an SVG background

#swipebox-next {
	background-color: #000;
	mask: url('../images/Arrow.svg') no-repeat 50% 50%;
	-webkit-mask: url('../images/Arrow.svg') no-repeat 50% 50%;
}

Add SVG background with the default color and set the width and height

#swipebox-close {
	background-image: url('../images/Close_Black.svg');
	background-position: center;
	background-size: cover;
	right: 30px;
	top: 15px;
	width: 30px;
	height: 30px;
}

Input placeholder style

The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder attribute:

You can style that text across most browsers with this smattering of vendor-prefixed selectors:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Important warning: this syntax is non-standard, thus all the naming craziness. It doesn’t appear in the spec at all. :placeholder-shown is standard, and even spec authors seem to think ::placeholder will be the standardized version.

Like any psuedo, you can scope it to specific elements as needed, like:

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}

Prevent BODY from scrolling when a modal is opened

Bootstrap’s modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the above code belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Note: to prevent the underlying page from jumping left/right when showing/hiding modals.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

Clearfix

A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements.

A clearfix is performed as follows:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don’t require IE<8 support, the following is fine too:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Read about it in this article – by Chris Coyer @ CSS-Tricks

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

    {clear: both;}
    clearfix

Once you understand what is happening, use the method below to “clearfix” it.

.clearfix:after {	
    content: ".";	
    display: block;	
    clear: both;	
    isibility: hidden;	
    line-height: 0;	
    height: 0;
} 

.clearfix {	
    display: inline-block;
} 

html[xmlns] .clearfix {	
    display: block;
} 

* html .clearfix {	
    height: 1%;
}

Responsive Lightbox & Gallery

Description

Responsive Lightbox & Gallery allows users to create galleries and view larger versions of images, galleries and videos in a lightbox (overlay) effect optimized for mobile devices.

For more information, check out plugin page at dFactory or see the Live demo on our site.

FEATURES INCLUDE:

  • Powerful, but easy to use gallery builder
  • 3 beautiful basic gallery templates – Grid, Slider and Masonry
  • 8 responsive lightbox scripts (SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, Image Lightbox, Tos “R” Us, Featherlight, Magnific Popup)
  • Create galleries from Media Library or Post attached images
  • Drag n drop reordering of images
  • Gallery picker to insert shortcodes
  • Iframe, Ajax, HTML5 and Inline lightbox content support
  • Advanced pagination, incl. AJAX and infinite scroll
  • Automatically add lightbox to WordPress image galleries
  • Automatically add lightbox to WordPress image links
  • Automatically add lightbox to WordPress video links (YouTube, Vimeo)
  • Automatically add lightbox to widgets content
  • Automatically add lightbox to WordPress comments content
  • WooCommerce product gallery support
  • Visual Composer compatibility
  • Gallery widget
  • Single image widget
  • Option to display single post images as a gallery
  • Option to modify native WP gallery links image size
  • Option to set gallery images title from image title, caption, alt or description
  • Option to force lightbox for custom WP gallery replacements like Jetpack tiled galleries
  • Option to trigger lightbox on custom jquery events
  • Option to conditionally load scripts and styles only on pages that have images or galleries in post content
  • Enter a selector for lightbox
  • Highly customizable settings for each of the lightbox scripts
  • Multisite support
  • Filter hook for embeddding different scripts based on any custom conditions (page, post, category, user id, etc.)
  • .pot file for translations included

Premium Extensions:
Photo & Art bundle
Justified Gallery
Expander Gallery
Hidden Gallery
Masonry Image Gallery
Slider Gallery
Lightcase Lightbox
PhotoSwipe Lightbox
Lightgallery Lightbox
Strip Lightbox
Fancybox Pro

WP Video Lightbox

The WordPress Video Lightbox plugin allows you to embed videos on a page using lightbox overlay display.

This plugin can be used to display images, flash, YouTube, Vimeo, iFrame etc in a lightbox overlay. The embedded videos can be viewed on iPhone and iPad too.

EMBEDDING VIMEO VIDEO
You can embed a vimeo video using the following shortcode in a WordPress post or page:

[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="click here to open vimeo video"]
[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="http://www.example.com/images/vimeo-thumb.jpg"]

You need to replace the value of “video_id” with your actual vimeo video ID. When a user clicks on the anchor text/image your vimeo video will pop up in lightbox.

EMBEDDING YOUTUBE VIDEO
You can embed a YouTube video using the following shortcode in a WordPress post or page:

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="click here to open YouTube video"]
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.jpg"]

You need to replace the value of “video_id” with your actual YouTube video ID. You can also control the size of the lightbox window by customizing the width and height parameters.

OPTIMIZING THE SEO OF YOUR THUMBNAIL IMAGE
When you are using a thumbnail image as the anchor, you can describe it using the “alt” parameter in the shortcode. It helps Search Engines understand what this image is about.

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.jpg" alt="text that describes this image"]

You need to replace the value of “alt” with your own description of the image.

FEATURES/SETTINGS CONFIGURATION

Once you have installed the plugin you can configure some options to customize the popup. The settings menu can be accessed from “Settings->Video Lightbox->prettyPhoto”.

  • Enable prettyPhoto: Check this option if you want to use the prettyPhoto library
  • Animation speed: fast / slow / normal [default: fast]
  • Autoplay slideshow: true / false [default: false]
  • Opacity: Value between 0 and 1 [default: 0.8]
  • Show title: true / false [default: true]
  • Allow resize: Resize the photos bigger than viewport. true / false [default: true]
  • Allow expand: Allow the user to expand a resized image. true / false [default: true]
  • Default width: default width of the lightbox window [default: 640, you can override it using the width parameter in the shortcode]
  • Default height: default height of the lightbox window [default: 480, you can override it using the height parameter in the shortcode]
  • Counter separator label: The separator for the gallery counter in lightbox [default: /]
  • Theme: theme for the lightbox window – Default, Light Rounded, Dark
  • Rounded, Light Square, Dark Square, Facebook
  • Horizontal padding: The padding on each side of the lightbox window [default: 20]
  • Hide Flash: Hides all the flash objects on a page, set to true if flash appears over prettyPhoto [default: false]
    wmode: the flash wmode attribute [default: opaque]
  • Autoplay: Automatically start videos: true / false [default: true]
  • Modal: If set to true, only the close button will close the window [default: false]
  • Deeplinking: Allow prettyPhoto to update the url to enable deeplinking. [default: true]
  • Overlay gallery: If this enabled, a gallery will overlay the fullscreen image on mouse over [default: true]
  • Overlay gallery max: Maximum number of pictures in the overlay gallery [default: 30]
  • Keyboard shortcuts: Set to false if you open forms inside prettyPhoto [default: true]
  • IE6 fallback: compatibility fallback for IE6 [default: true]

ADDITIONAL FEATURES

  • Automatically retrieve the thumbnail for your video and embed in lightbox
  • Load YouTube video over https. This is great if you have SSL installed on your site
  • Disable suggested videos at the end of a YouTube video
  • Flexiblity of using both shortcode/html code to pop up media in lightbox
  • Show description of a popup in overlay
  • For video tutorial, screenshots, detailed documentation, support and updates, please visit: WP Video Lightbox plugin page

Creating Custom Module In Divi

add_action( 'et_builder_ready', 'evr_initialize_divi_modules' );

function evr_initialize_divi_modules() {
    if ( ! class_exists( 'ET_Builder_Module' ) ) { return; }

    class EVR_Builder_Module_Testimonial extends ET_Builder_Module {
        function init() {
            $this->name       = esc_html__( 'Testimonial', 'evr' );
            $this->slug       = 'evr_pb_testimonial';
            $this->fb_support = true;

            // ...

        }
    }
}