Visual Portfolio has several WP hooks that let you extend functionality.
<?php
add_filter( 'vpf_control_value', 'my_filter_vpf_control_value', 10, 3 );
function my_filter_vpf_control_value( $value, $name, $post_id ) {
var_dump( $value );
var_dump( $name );
var_dump( $post_id );
return $value;
}All Filters
Filter Name Attributes Description vpf_include_template $template, $template_name, $args include php template vpf_include_template_args $args, $template_name filter arguments added to the template vpf_include_template_style $template, $template_name, $deps, $ver, $media include css template vpf_control_value $value, $name, $post_id get option for Layout vpf_registered_control_args $args called for each control printed in the Layouts editor. Helpful when you need to change controls default values vpf_registered_controls $controls called for all available controls printed in the Layouts editor. Helpful when you need to change controls default values vpf_register_block_attributes $attributes, $controls filter registered block attributes vpf_register_block_attribute_data $data, $control filter each control attribute data separately vpf_extend_posts_source $sources extend posts sources vpf_extend_portfolio_data_attributes $attrs, $options portfolio data attributes array vpf_extend_portfolio_class $class, $options portfolio class string vpf_extend_query_args $items, $options arguments for items query vpf_extend_image_controls $controls, $name single image options in content source image vpf_each_item_tag_name $tag_name, $args change each item tag name (article or div by default used) vpf_each_item_tag_attrs $attrs, $args customize each item tag attributes vpf_each_item_args $args extend data of each item vpf_post_item_args $args extend data of each post-based item vpf_image_item_args $args extend data of each image item vpf_popup_image_data $args extend data of each popup image vpf_get_pagenum_link $current_url, $query_arg filter pagenum URLs used in filters and pagination
Extend Layouts
Filter Name Attributes Description vpf_extend_layouts $layouts custom layouts vpf_extend_layout_NAME_controls $controls extend specific layout controls by NAME
<?php
add_filter( 'vpf_extend_layouts', 'my_filter_vpf_extend_layouts' );
function my_filter_vpf_extend_layouts( $layouts ) {
return array_merge( $layouts, array(
'new_layout' => array(
'title' => esc_html__( 'New Layout', 'text_domain' ),
'icon' => '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.75" width="7.35714" height="7.35714" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><rect x="11.8929" y="0.75" width="7.35714" height="7.35714" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><rect x="11.8929" y="11.8929" width="7.35714" height="7.35714" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><rect x="0.75" y="11.8929" width="7.35714" height="7.35714" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/></svg>',
'controls' => array(
... controls (read below) ...
),
),
) );
}Note: On the portfolio will be added data attribute [data-vp-layout=”new_layout”] , so you can play with it and use jQuery events to initialize the new layout.
Extend Tiles
Filter Name Attributes Description vpf_extend_tiles $tiles custom tiles
<?php
add_filter( 'vpf_extend_tiles', 'my_filter_vpf_extend_tiles' );
function my_filter_vpf_extend_tiles( $tiles ) {
return array_merge( $tiles, array(
array(
'value' => '1|1,0.5|',
),
array(
'value' => '2|1,1|',
),
) );
}Example: 3|1,0.5|2,0.25|
3 columns in row
First item 100% width and 50% height
Second item 200% width and 25% height
Extend Items Styles
Filter Name Attributes Description vpf_extend_items_styles $items_styles custom items styles vpf_extend_item_style_NAME_controls $controls extend specific items styles by NAME vpf_items_style_builtin_controls $options extend the list of default builtin_controls
<?php
add_filter( 'vpf_extend_items_styles', 'my_filter_vpf_extend_items_styles' );
function my_filter_vpf_extend_items_styles( $items_styles ) {
return array_merge( $items_styles, array(
'new_items_style' => array(
'title' => esc_html__( 'New Items Style', 'visual-portfolio' ),
'icon' => '<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="5.89285" y1="22.25" x2="14.1071" y2="22.25" stroke="currentColor" stroke-width="1.5" fill="transparent" stroke-linecap="round" stroke-linejoin="round"/><rect x="0.75" y="0.75" width="18.5" height="18.625" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/></svg>',
'builtin_controls' => array(
'images_rounded_corners' => true,
'show_title' => true,
'show_categories' => true,
'show_date' => true,
'show_author' => true,
'show_comments_count' => true,
'show_views_count' => true,
'show_reading_time' => true,
'show_excerpt' => true,
'show_icons' => true,
'align' => true, // true, false, 'extended'
),
'controls' => array(
... controls (read below) ...
),
),
) );
}Note: Make sure that you added template in your_theme/visual-portfolio/items-list/items-style/new_items_style . See the structure of default templates to getting started.
Extend Filters
Filter Name Attributes Description vpf_extend_filters $filters custom filters vpf_extend_filter_items $items, $options array with filter items vpf_extend_filter_NAME_controls $controls extend specific filters by NAME
<?php
add_filter( 'vpf_extend_filters', 'my_filter_vpf_extend_filters' );
function my_filter_vpf_extend_filters( $filters ) {
return array_merge( $filters, array(
'new_filter' => array(
'title' => esc_html__( 'New Filter', 'visual-portfolio' ),
'icon' => '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="5.89286" width="18.5" height="7.07143" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><path d="M0.857143 11.1071V12.8214C0.857143 13.2948 1.2409 13.6786 1.71429 13.6786H18.2857C18.7591 13.6786 19.1429 13.2948 19.1429 12.8214V11.1071L19.5714 10.25C19.8081 10.25 20 10.4419 20 10.6786V12.8214C20 13.7682 19.2325 14.5357 18.2857 14.5357H1.71429C0.767512 14.5357 0 13.7682 0 12.8214V10.6786C0 10.4419 0.191878 10.25 0.428571 10.25L0.857143 11.1071Z" fill="currentColor"/></svg>',
'controls' => array(
... controls (read below) ...
),
),
) );
}Note: Make sure that you added template in your_theme/visual-portfolio/items-list/filter/new_filter . See the structure of default templates to getting started.
Extend Sorts
Filter Name Attributes Description vpf_extend_sort $sort custom sorts vpf_extend_sort_items $items, $options array with sort items vpf_extend_sort_NAME_controls $controls extend specific sorts by NAME
<?php
add_filter( 'vpf_extend_sort', 'my_filter_vpf_extend_sort' );
function my_filter_vpf_extend_sort( $sorts ) {
return array_merge( $sorts, array(
'new_sort' => array(
'title' => esc_html__( 'New Sort', 'visual-portfolio' ),
'icon' => '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="5.89286" width="18.5" height="7.07143" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><path d="M0.857143 11.1071V12.8214C0.857143 13.2948 1.2409 13.6786 1.71429 13.6786H18.2857C18.7591 13.6786 19.1429 13.2948 19.1429 12.8214V11.1071L19.5714 10.25C19.8081 10.25 20 10.4419 20 10.6786V12.8214C20 13.7682 19.2325 14.5357 18.2857 14.5357H1.71429C0.767512 14.5357 0 13.7682 0 12.8214V10.6786C0 10.4419 0.191878 10.25 0.428571 10.25L0.857143 11.1071Z" fill="currentColor"/></svg>',
'controls' => array(
... controls (read below) ...
),
),
) );
}Note: Make sure that you added template in your_theme/visual-portfolio/items-list/sort/new_sort . See the structure of default templates to getting started.
Filter Name Attributes Description vpf_extend_pagination $pagination custom pagination vpf_extend_pagination_NAME_controls $controls extend specific paginations by NAME vpf_pagination_item_data $item_data, $args, $vp_options filter each pagination item data
<?php
add_filter( 'vpf_extend_pagination', 'my_pagination_vpf_extend_pagination' );
function my_pagination_vpf_extend_pagination( $pagination ) {
return array_merge( $pagination, array(
'new_pagination' => array(
'title' => esc_html__( 'New Pagination', 'visual-portfolio' ),
'icon' => '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="5.89286" width="18.5" height="7.07143" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/><path d="M0.857143 11.1071V12.8214C0.857143 13.2948 1.2409 13.6786 1.71429 13.6786H18.2857C18.7591 13.6786 19.1429 13.2948 19.1429 12.8214V11.1071L19.5714 10.25C19.8081 10.25 20 10.4419 20 10.6786V12.8214C20 13.7682 19.2325 14.5357 18.2857 14.5357H1.71429C0.767512 14.5357 0 13.7682 0 12.8214V10.6786C0 10.4419 0.191878 10.25 0.428571 10.25L0.857143 11.1071Z" fill="currentColor"/></svg>',
'controls' => array(
... controls (read below) ...
),
),
) );
}Note: Make sure that you added template in your_theme/visual-portfolio/items-list/pagination/new_pagination . See the structure of default templates to getting started.
Lazy Loading
Filter Name Attributes Description vpf_lazyload_images_blocked_classes $blocked_classes skip image from lazy loading if image tag contains one of the provided classes vpf_lazyload_images_blocked_src $blocked_src skip image from lazy loading if image src contains one of the provided strings vpf_lazyload_images_blocked_attributes $blocked_attributes skip image from lazy loading if image tag contains one of the provided attributes vpf_lazyload_skip_image_with_attributes $skip, $attributes manually skip image from lazy loading by return true vpf_lazyload_images_new_attributes $attributes filter the new set of attributes in lazy loaded image vpf_lazyload_image_placeholder $placeholder image URL for of placeholder displayed on the images while lazy loading
Dynamic CSS Render
Helpful filters for controls dynamic CSS render.
Filter Name Attributes Description vpf_controls_dynamic_css_value $value, $options, $control, $selector, $data filter dynamic CSS value of control vpf_controls_dynamic_css_styles_array $styles_array, $selector, $val, $data, $options, $control filter dynamic styles of control
