Best PowerPack Module Customization Snippets #powerpack #beaverbuilder

*Best PowerPack Module Customization Snippets*

Collection of PowerPack module customizations I've gathered over the years

Close PP Off Canvas Panel.js

// JS method to close for a custom js solution
window.pp_offcanvas_<node_id>._close();

// or

// Add the following CSS class to an element that you want to click to close the off canvas panel
// https://wpbeaveraddons.com/docs/powerpack/modules/off-canvas-content/how-to-close-the-off-canvas-panel-by-clicking-on-any-element/
pp-offcanvas-<node_id>-close

Custom Device Skin Powerpack.php

<?php     // ignore this line - only for styling

add_filter( 'pp_devices_skin_path', 'my_device_custom_skin', 10, 2 );
function my_device_custom_skin( $path, $settings ) {
   if ( 'phone' == $settings->device_type ) {
      $path = get_stylesheet_directory() . '/phone.svg';
   }
   return $path;
}

// 1. Add the SVG code in a file and save the file in SVG format. For example, phone.svg
// 2. Upload this SVG file to your current child theme's root
// 3. Add the above code to theme's functions.php file

// This code will return the path of SVG file located in the child theme's root for the "phone" as device type. You can also change the path to the SVG file where it is placed. (Please note that this is a file path, not URL)

Custom Play Icon for PP Video module.php

<?php     // ignore this line - only for styling

//filter to change the video play icon: pp_video_play_button_html
add_filter( 'pp_video_play_button_html', function( $svg, $settings ) {
   $svg = 'Your custom code here';

   return $svg;
}, 10, 2 );

Custom PP module arrows.php

<?php     // ignore this line - only for styling

// Custom Powerpack arrows for these modules: Content Grid, Testimonials, Image Carousel, Logos Grid & Carousel, 3D Slider, Reviews Slider
add_filter( 'pp_prev_icon_svg', 'my_own_prev_icon' );
function my_own_prev_icon( $svg ) {
  $svg = 'Your SVG code.';
   return $svg;
}

add_filter( 'pp_next_icon_svg', 'my_own_next_icon' );
function my_own_next_icon( $svg ) {
  $svg = 'Your SVG code.';
   return $svg;
}

Override PP Accordion Image (Icon) Size.php

<?php     // ignore this line - only for styling

// Override image size for PP Accordion image (icon) output - it defaults to 'thumbnail'
// My use case here was using swapping the image with some javascript to change out the image next to the accordion depending on which item was 'open'

add_filter( 'pp_accordion_items', 'change_pp_accordion_item_image_size', 10, 2 );
function change_pp_accordion_item_image_size( $items, $settings ) {
	if ( ! isset( $settings->id ) || 'myModuleID' !== $settings->id ) { //you module's ID here
		return $items;
	}

	if ( empty( $items ) ) {
		return $items;
	}

	foreach ( $items as $item ) {
		if ( isset( $item->accordion_image_icon ) && ! empty( $item->accordion_image_icon ) ) {
			$image_src = wp_get_attachment_image_src( $item->accordion_image_icon, 'medium' ); // change the size here.
			if ( ! empty( $image_src ) && is_array( $image_src ) ) {
				$item->accordion_image_icon_src = $image_src[0];
				$item->accordion_image_icon = -1;
			}
		}
	}
	return $items;
}

PP Category Grid - Top Level Only.php

<?php     // ignore this line - only for styling

//Just make sure you have "Children of Current Category" selected for the taxonomy archive in the module
add_filter('pp_category_grid_query_args', function($args, $settings) {
	if ( is_tax() || is_category() || is_tag() ) {
	   $current_object = get_queried_object();
	   if ( 'children_only' === $settings->on_tax_archive ) {
		   $args['parent'] = $current_object->term_id;
	   }
	}
	return $args;
}, 10, 2);

PP Google Map Center.js

//Custom center for PP Map
//Especially useful for multi-pin maps since the center is determined by the first location that is added to the module

;(function($) {
  $(window).on('load', function() {
     if ( 'undefined' === typeof pp_map_<node_id> ) return; //add your map module's node id here prefixed with pp_map_
     var latlng = new google.maps.LatLng('35.846111', '-86.391945'); //add your custom lat/long here
     pp_map_<node_id>.mapObjects.map.setCenter(latlng); //add your map module's node id here prefixed with pp_map_
  });
})(jQuery);

PP One Dot Nav for Columns.js

// Powerpack One Dot Nav for Column IDs instead of Row IDs

(function($) {
    function updateDot() {
        $('.fl-col').each(function(){
            var $this = $(this);
            if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top >= $(window).scrollTop() || $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
                $( '#myOneDotModule .pp-dot a[data-row-id="'+$this.attr('id')+'"]' ).parent().addClass('active'); //give your module an id
            } else {
                $( '#myOneDotModule .pp-dot a[data-row-id="'+$this.attr('id')+'"]' ).parent().removeClass('active'); //give your module an id
            }
        });
    }

    $(window).on('scroll', function() {
        updateDot();
    });
})(jQuery);

PP Sliding Menu Custom Arrows.php

<?php     // ignore this line - only for styling

// PP Sliding Menu Custom Arrows

add_filter( 'pp_sliding_menus_arrow_left', function( $args, $settings ) {
   $args['before'] = '<span class="pp-slide-menu-arrow">';
   $args['before'] .= 'Put your own arrow icon HTML here';
   $args['before'] .= '</span>';

   return $args;
}, 10, 2 );

add_filter( 'pp_sliding_menus_arrow_right', function( $args, $settings ) {
   $args['before'] = '<span class="pp-slide-menu-arrow">';
   $args['before'] .= 'Put your own arrow icon HTML here';
   $args['before'] .= '</span>';

   return $args;
}, 10, 2 );

Unlink PP Infobox Icon.php

<?php     // ignore this line - only for styling

//Remove link from Powerpack Infobox Icon
add_filter( 'pp_infobox_icon_link_enabled', '__return_false' );