---
title: "WordPress Filters"
date: 2018-09-09
author: "nK"
---

# WordPress Filters

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``$options`The resolved options of a gallery before anything is rendered or queried.`vpf_control_value``$value, $name, $post_id`The value of one option of a Saved Layout.`vpf_extend_options_before_query_args``$options`Options right before the query arguments are built.`vpf_extend_query_args``$args, $options`Arguments of the `WP_Query` (Posts source) or the images array (Media source). Pro sources inject their items here.`vpf_custom_query_result``$result, $options`Return a query object or an items array to replace the built-in query. Also asked for the page count.`vpf_custom_items``$items, $options`The resolved items before rendering.`vpf_custom_output``$output, $options`Return a string to replace the whole gallery output.`vpf_custom_filter_terms``$terms, $options`Terms the Filter element lists.`vpf_extend_filter_items``$items, $options`The filter items: label, URL, active state and count.`vpf_extend_sort_items``$items, $options`The sort options, as `slug => label`.`vpf_extend_sort_item_url``$url, $slug, $options`URL of one sort item.`vpf_get_pagenum_link``$url, $query_arg`URLs used by filter, sort and pagination.`vpf_pagination_args``$args, $options`Arguments of the pagination renderer.`vpf_pagination_item_data``$item, $args, $options`One pagination item.`vpf_allow_taxonomy_for_filter``$allow, $taxonomy`Let a taxonomy into the Filter. See [Custom taxonomy for filter](https://staging.visualportfolio.com/docs/developers/custom-taxonomy-for-filter/).`vpf_extend_posts_source``$sources`Entries of the Posts source selector.## Items and templates

FilterArgumentsPurpose`vpf_post_item_args``$args, $post`Data of one post-based item.`vpf_image_item_args``$args, $image`Data of one Media item.`vpf_each_item_args``$args`Data of any item right before its template renders.`vpf_each_item_tag_name``$tag, $args`The item tag, `article` or `div`.`vpf_each_item_tag_attrs``$attrs, $args`Attributes of the item element.`vpf_item_aria_label``$label, $args`The `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, $options`Switch one meta element on or off per item.`vpf_each_item_inline_meta_enabled``$enabled, $args, $options`Whether the inline meta line (comments, views, reading time) renders.`vpf_extend_portfolio_class``$class, $options`Classes of the gallery wrapper.`vpf_extend_portfolio_items_class``$class, $options`Classes of the items wrapper.`vpf_extend_portfolio_data_attributes``$attrs, $options`The `data-vp-*` attributes of the wrapper.`vpf_layout_element_options``$options`Options used when the layout elements of a position are printed.`vpf_include_template``$template, $name, $args`Path of a PHP template.`vpf_include_template_args``$args, $name`Arguments of a template.`vpf_include_template_style``$style, $name, $deps, $ver, $media`Stylesheet of a template.`vpf_allowed_template_dirs``$dirs`Directories a template may be loaded from. This is a security allow-list.## Lightbox

FilterArgumentsPurpose`vpf_popup_image_data``$data, $image_id, $args`Data of a lightbox image: URL, sizes and caption.`vpf_popup_custom_image_data``$data, $image_id`Provide lightbox data for an image that is not an attachment. Pro social images use it.`vpf_popup_output``$output, $args`The `<template>` markup of a lightbox slide.## Controls and blocks

FilterArgumentsPurpose`vpf_register_control``$args`Arguments of a control at registration.`vpf_registered_control_args``$args`Arguments of each control when it is printed.`vpf_registered_controls``$controls`All controls.`vpf_registered_categories``$categories`Sidebar panels.`vpf_register_block_attributes``$attributes, $controls`Block attributes generated from controls.`vpf_register_block_attribute_data``$data, $control`The definition of one attribute.`vpf_extend_image_controls``$controls, $name`Fields of the per-image modal of the Media source.`vpf_extend_layouts` / `vpf_extend_layout_{name}_controls``$layouts` / `$controls`Add a layout, or extend one.`vpf_extend_tiles``$tiles`Tiles presets.`vpf_extend_items_styles` / `vpf_extend_item_style_{name}_controls``$styles` / `$controls`Add 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` / `$controls`Add a filter style, or extend one.`vpf_extend_sort` / `vpf_extend_sort_{name}_controls``$sorts` / `$controls`Sort styles.`vpf_extend_pagination` / `vpf_extend_pagination_{name}_controls``$paginations` / `$controls`Pagination styles.`vpf_controls_dynamic_css_value`, `vpf_controls_dynamic_css_styles_array`see [Controls](https://staging.visualportfolio.com/docs/developers/wordpress-filters/controls/)Dynamic 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``$enqueue`Return false to skip a vendor library. See [Disable enqueued plugins](https://staging.visualportfolio.com/docs/developers/disable-enqueued-plugins-js-css/).`vpf_enqueue_dynamic_styles_inline_style``$inline`Print per-block CSS inline or through a script.`vpf_global_data``$data`The `VPData` object printed in the head.`vpf_images_lazyload``$enabled`Global switch of the plugin’s lazy loading.`vpf_lazyload_images_blocked_classes`, `vpf_lazyload_images_blocked_src`, `vpf_lazyload_images_blocked_attributes``$list`Images to skip.`vpf_lazyload_skip_image_with_attributes``$skip, $attributes`Skip one image.`vpf_lazyload_images_new_attributes``$attributes`Attributes of a lazy-loaded image.`vpf_lazyload_image_placeholder``$placeholder`Placeholder URL.`vpf_wp_get_attachment_image``$html, $attachment_id, $size, $attr`The `<img>` of a gallery item.## Settings, breakpoints, sitemap

FilterArgumentsPurpose`vpf_settings_sections`, `vpf_settings_fields``$sections` / `$fields`Tabs and fields of the settings page.`vpf_default_breakpoint_xs`, `_sm`, `_md`, `_lg`, `_xl` and `vpf_breakpoint_xs`, `_sm`, `_md`, `_lg`, `_xl``$px`Default 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_images`Images 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_images`Taxonomies 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_instance`Social feeds.`vpf_pro_settings_sections`Pro 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`.