Buy Visual Portfolio Pro

WordPress Filters

Table of Contents
  1. Options and query
  2. Items and templates
  3. Lightbox
  4. Controls and blocks
  5. Extend Layouts
  6. Extend Tiles
  7. Extend Items Styles
  8. Extend Filters
  9. Extend Sorts
  10. Extend Paginations
  11. Assets, images, lazy loading
  12. Settings, breakpoints, sitemap
  13. Pro
  14. Deprecated

Visual Portfolio exposes filters along the whole render path: the options a gallery resolves, the query it runs, the items it builds, the markup of each item, and the assets it loads. Every filter name is prefixed vpf_.

add_filter( 'vpf_extend_query_args', function ( $args, $options ) {
    $args['post_status'] = array( 'publish', 'private' );
    return $args;
}, 10, 2 );

Options and query

FilterArgumentsPurpose
vpf_get_options$optionsThe resolved options of a gallery before anything is rendered or queried.
vpf_control_value$value, $name, $post_idThe value of one option of a Saved Layout.
vpf_extend_options_before_query_args$optionsOptions right before the query arguments are built.
vpf_extend_query_args$args, $optionsArguments of the WP_Query (Posts source) or the images array (Media source). Pro sources inject their items here.
vpf_custom_query_result$result, $optionsReturn a query object or an items array to replace the built-in query. Also asked for the page count.
vpf_custom_items$items, $optionsThe resolved items before rendering.
vpf_custom_output$output, $optionsReturn a string to replace the whole gallery output.
vpf_custom_filter_terms$terms, $optionsTerms the Filter element lists.
vpf_extend_filter_items$items, $optionsThe filter items: label, URL, active state and count.
vpf_extend_sort_items$items, $optionsThe sort options, as slug => label.
vpf_extend_sort_item_url$url, $slug, $optionsURL of one sort item.
vpf_get_pagenum_link$url, $query_argURLs used by filter, sort and pagination.
vpf_pagination_args$args, $optionsArguments of the pagination renderer.
vpf_pagination_item_data$item, $args, $optionsOne pagination item.
vpf_allow_taxonomy_for_filter$allow, $taxonomyLet a taxonomy into the Filter. See Custom taxonomy for filter.
vpf_extend_posts_source$sourcesEntries of the Posts source selector.

Items and templates

FilterArgumentsPurpose
vpf_post_item_args$args, $postData of one post-based item.
vpf_image_item_args$args, $imageData of one Media item.
vpf_each_item_args$argsData of any item right before its template renders.
vpf_each_item_tag_name$tag, $argsThe item tag, article or div.
vpf_each_item_tag_attrs$attrs, $argsAttributes of the item element.
vpf_item_aria_label$label, $argsThe aria-label of the item link.
vpf_each_item_meta_author_enabled, ..._categories_enabled, ..._comments_enabled, ..._date_enabled, ..._reading_time_enabled, ..._views_enabled$enabled, $args, $optionsSwitch one meta element on or off per item.
vpf_each_item_inline_meta_enabled$enabled, $args, $optionsWhether the inline meta line (comments, views, reading time) renders.
vpf_extend_portfolio_class$class, $optionsClasses of the gallery wrapper.
vpf_extend_portfolio_items_class$class, $optionsClasses of the items wrapper.
vpf_extend_portfolio_data_attributes$attrs, $optionsThe data-vp-* attributes of the wrapper.
vpf_layout_element_options$optionsOptions used when the layout elements of a position are printed.
vpf_include_template$template, $name, $argsPath of a PHP template.
vpf_include_template_args$args, $nameArguments of a template.
vpf_include_template_style$style, $name, $deps, $ver, $mediaStylesheet of a template.
vpf_allowed_template_dirs$dirsDirectories a template may be loaded from. This is a security allow-list.
FilterArgumentsPurpose
vpf_popup_image_data$data, $image_id, $argsData of a lightbox image: URL, sizes and caption.
vpf_popup_custom_image_data$data, $image_idProvide lightbox data for an image that is not an attachment. Pro social images use it.
vpf_popup_output$output, $argsThe <template> markup of a lightbox slide.

Controls and blocks

FilterArgumentsPurpose
vpf_register_control$argsArguments of a control at registration.
vpf_registered_control_args$argsArguments of each control when it is printed.
vpf_registered_controls$controlsAll controls.
vpf_registered_categories$categoriesSidebar panels.
vpf_register_block_attributes$attributes, $controlsBlock attributes generated from controls.
vpf_register_block_attribute_data$data, $controlThe definition of one attribute.
vpf_extend_image_controls$controls, $nameFields of the per-image modal of the Media source.
vpf_extend_layouts / vpf_extend_layout_{name}_controls$layouts / $controlsAdd a layout, or extend one.
vpf_extend_tiles$tilesTiles presets.
vpf_extend_items_styles / vpf_extend_item_style_{name}_controls$styles / $controlsAdd a skin, or extend one.
vpf_items_style_builtin_controls, vpf_items_style_builtin_controls_options$controls, ...The generated skin controls and their option lists.
vpf_extend_filters / vpf_extend_filter_{name}_controls$filters / $controlsAdd a filter style, or extend one.
vpf_extend_sort / vpf_extend_sort_{name}_controls$sorts / $controlsSort styles.
vpf_extend_pagination / vpf_extend_pagination_{name}_controls$paginations / $controlsPagination styles.
vpf_controls_dynamic_css_value, vpf_controls_dynamic_css_styles_arraysee ControlsDynamic CSS generated from controls that carry a style key.

Extend Layouts

Filter NameAttributesDescription
vpf_extend_layouts$layoutscustom layouts
vpf_extend_layout_NAME_controls$controlsextend 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 NameAttributesDescription
vpf_extend_tiles$tilescustom 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 NameAttributesDescription
vpf_extend_items_styles$items_stylescustom items styles
vpf_extend_item_style_NAME_controls$controlsextend specific items styles by NAME
vpf_items_style_builtin_controls$optionsextend 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 NameAttributesDescription
vpf_extend_filters$filterscustom filters
vpf_extend_filter_items$items, $optionsarray with filter items
vpf_extend_filter_NAME_controls$controlsextend 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 NameAttributesDescription
vpf_extend_sort$sortcustom sorts
vpf_extend_sort_items$items, $optionsarray with sort items
vpf_extend_sort_NAME_controls$controlsextend 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.

Extend Paginations

Filter NameAttributesDescription
vpf_extend_pagination$paginationcustom pagination
vpf_extend_pagination_NAME_controls$controlsextend specific paginations by NAME
vpf_pagination_item_data$item_data, $args, $vp_optionsfilter 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.

Assets, images, lazy loading

FilterArgumentsPurpose
vpf_enqueue_plugin_isotope, vpf_enqueue_plugin_flickr_justified_gallery, vpf_enqueue_plugin_swiper, vpf_enqueue_plugin_photoswipe, vpf_enqueue_plugin_fancybox, vpf_enqueue_plugin_simplebar, vpf_enqueue_plugin_lazysizes$enqueueReturn false to skip a vendor library. See Disable enqueued plugins.
vpf_enqueue_dynamic_styles_inline_style$inlinePrint per-block CSS inline or through a script.
vpf_global_data$dataThe VPData object printed in the head.
vpf_images_lazyload$enabledGlobal switch of the plugin’s lazy loading.
vpf_lazyload_images_blocked_classes, vpf_lazyload_images_blocked_src, vpf_lazyload_images_blocked_attributes$listImages to skip.
vpf_lazyload_skip_image_with_attributes$skip, $attributesSkip one image.
vpf_lazyload_images_new_attributes$attributesAttributes of a lazy-loaded image.
vpf_lazyload_image_placeholder$placeholderPlaceholder URL.
vpf_wp_get_attachment_image$html, $attachment_id, $size, $attrThe <img> of a gallery item.

Settings, breakpoints, sitemap

FilterArgumentsPurpose
vpf_settings_sections, vpf_settings_fields$sections / $fieldsTabs and fields of the settings page.
vpf_default_breakpoint_xs, _sm, _md, _lg, _xl and vpf_breakpoint_xs, _sm, _md, _lg, _xl$pxDefault and effective breakpoints: 320, 576, 768, 992 and 1200.
vpf_parse_sitemap_images_from_blocks, vpf_parse_sitemap_image_id_from_blocks$images, ...Images a post contributes to the Yoast, Rank Math and AIOSEO sitemaps.

Pro

FilterPurpose
vpf_album_imagesImages of an album, used by Pro albums in REST and on render.
vpf_taxonomy_query_args, vpf_taxonomy_item_args, vpf_taxonomy_available_taxonomies, vpf_taxonomy_album_max_imagesTaxonomies source.
vpf_pro_social_settings, vpf_social_storage_networks, vpf_social_max_accounts_per_run, vpf_social_continuation_delay, vpf_social_sync_lock_timeout, vpf_social_item_lock_timeout, vpf_social_sync_use_queue, vpf_social_should_queue_media, vpf_social_video_url_needs_refresh, vpf_social_migration_batch_size, vpf_social_migration_batch_delay, vpf_social_api_instanceSocial feeds.
vpf_pro_settings_sectionsPro settings tabs.

Deprecated

These filters still run, and each has a replacement: vpf_print_layout_control_args is now vpf_registered_control_args, vpf_get_layout_option is now vpf_control_value, vpf_extend_popup_image is now vpf_popup_image_data, vpf_extend_custom_popup_image is now vpf_popup_custom_image_data, vpf_print_popup_data is now vpf_popup_output, and vpf_wp_get_attachment_image_extend is now vpf_wp_get_attachment_image.

Was this page helpful?
Yes No