Shortcodes - Visual Portfolio

Overview

Visual Portfolio provides three shortcodes for displaying portfolios, filters, and sorting controls anywhere in your WordPress content:

[visual_portfolio] - Display a portfolio layout
[visual_portfolio_filter] - Display a standalone filter
[visual_portfolio_sort] - Display a standalone sort control

Portfolio Shortcode

The main shortcode for displaying portfolio layouts.

Basic Usage

[visual_portfolio id="123"]

Attributes

Defined in /home/daytona/workspace/source/classes/class-shortcode.php:33-40:

Attribute	Type	Default	Description
`id`	string	”	The ID of the saved layout to display
`class`	string	”	Additional CSS classes to add to the wrapper
`vc_css`	string	”	Visual Composer CSS classes (for VC compatibility)

Examples

Display a Saved Layout

[visual_portfolio id="456"]

With Custom CSS Classes

[visual_portfolio id="456" class="my-custom-class another-class"]

In PHP Template Files

echo do_shortcode( '[visual_portfolio id="456"]' );

Programmatic Usage

You can also call the shortcode function directly:

$output = Visual_Portfolio_Get::get( array(
    'id' => 456,
    'class' => 'my-custom-class',
) );

echo $output;

Filter Shortcode

Display a standalone category filter that controls a portfolio.

Basic Usage

[visual_portfolio_filter id="123"]

Attributes

Defined in /home/daytona/workspace/source/classes/class-shortcode.php:52-62:

Attribute	Type	Default	Description
`id`	string	”	The portfolio ID this filter controls
`type`	string	’default’	Filter type/style
`align`	string	’center’	Filter alignment (left, center, right)
`show_count`	boolean	false	Show item count for each category
`text_all`	string	’All’	Text for the “All” filter option
`class`	string	”	Additional CSS classes

Examples

Basic Filter

[visual_portfolio_filter id="456"]

With Item Count

[visual_portfolio_filter id="456" show_count="true"]

Custom Alignment and Text

[visual_portfolio_filter id="456" align="left" text_all="Show All Items"]

In PHP

echo Visual_Portfolio_Get::get_filter( array(
    'id' => 456,
    'type' => 'default',
    'align' => 'center',
    'show_count' => true,
    'text_all' => 'All Items',
) );

Sort Shortcode

Display a standalone sorting control for a portfolio.

Basic Usage

[visual_portfolio_sort id="123"]

Attributes

Defined in /home/daytona/workspace/source/classes/class-shortcode.php:74-82:

Attribute	Type	Default	Description
`id`	string	”	The portfolio ID this sort control affects
`type`	string	’default’	Sort control type/style
`align`	string	’center’	Sort control alignment (left, center, right)
`class`	string	”	Additional CSS classes

Examples

Basic Sort Control

[visual_portfolio_sort id="456"]

Custom Alignment

[visual_portfolio_sort id="456" align="right"]

In PHP

echo Visual_Portfolio_Get::get_sort( array(
    'id' => 456,
    'type' => 'default',
    'align' => 'center',
) );

Shortcode Registration

Shortcodes are registered in the constructor at /home/daytona/workspace/source/classes/class-shortcode.php:19-24:

public function __construct() {
    // add shortcode.
    add_shortcode( 'visual_portfolio', array( $this, 'get_shortcode_out' ) );
    add_shortcode( 'visual_portfolio_filter', array( $this, 'get_shortcode_filter_out' ) );
    add_shortcode( 'visual_portfolio_sort', array( $this, 'get_shortcode_sort_out' ) );
}

Combining Shortcodes

You can use multiple shortcodes together to create custom layouts:

<div class="custom-portfolio-wrapper">
    <div class="filter-section">
        [visual_portfolio_filter id="456" align="left" show_count="true"]
        [visual_portfolio_sort id="456" align="right"]
    </div>
    
    <div class="portfolio-section">
        [visual_portfolio id="456"]
    </div>
</div>

Advanced Usage

Dynamic Shortcode Generation

Generate shortcodes dynamically in PHP:

function display_category_portfolio( $category_id ) {
    $portfolio_id = get_term_meta( $category_id, 'portfolio_layout_id', true );
    
    if ( $portfolio_id ) {
        echo do_shortcode( sprintf(
            '[visual_portfolio id="%d" class="category-portfolio"]',
            absint( $portfolio_id )
        ) );
    }
}

Conditional Display

<?php if ( is_user_logged_in() ): ?>
    [visual_portfolio id="456" class="member-gallery"]
<?php else: ?>
    [visual_portfolio id="789" class="public-gallery"]
<?php endif; ?>

Shortcodes work in widget areas:

// In functions.php
add_filter( 'widget_text', 'do_shortcode' );

// In widget content
[visual_portfolio id="456"]

Shortcode Output

All shortcodes ultimately call Visual_Portfolio_Get::get(), which:

Processes attributes
Loads the layout configuration
Queries content based on settings
Renders the appropriate template
Returns HTML output

Output Structure

<div class="wp-block-visual-portfolio vp-portfolio">
    <!-- Portfolio content -->
</div>

Filtering Shortcode Output

You can filter shortcode output:

add_filter( 'vpf_shortcode_output', function( $output, $attributes ) {
    // Modify the output
    return $output;
}, 10, 2 );

WPML Integration

Shortcodes automatically support WPML for translated layouts:

// Layout ID is automatically translated
$attributes['id'] = apply_filters(
    'wpml_object_id',
    $attributes['id'],
    'vp_lists',
    true
);

Common Use Cases

Page Builder Integration

Use shortcodes in page builders: Elementor:

Add a Shortcode widget
Insert [visual_portfolio id="456"]

WPBakery Page Builder:

Add a Text Block element
Insert the shortcode
The vc_css attribute is automatically supported

Beaver Builder:

Add an HTML module
Insert the shortcode

Archive Pages

Display different portfolios on archive pages:

// In archive.php
if ( is_category( 'photography' ) ) {
    echo do_shortcode( '[visual_portfolio id="123"]' );
} elseif ( is_category( 'design' ) ) {
    echo do_shortcode( '[visual_portfolio id="456"]' );
}

Custom Post Type Archives

// In archive-projects.php
echo do_shortcode( '[visual_portfolio id="789" class="projects-archive"]' );

ACF Integration

Use with Advanced Custom Fields:

$portfolio_id = get_field( 'portfolio_layout' );
if ( $portfolio_id ) {
    echo do_shortcode( '[visual_portfolio id="' . $portfolio_id . '"]' );
}

Troubleshooting

Shortcode Not Working

Check ID: Ensure the layout ID exists and is published
Check Syntax: Verify shortcode syntax is correct
Check Filters: Ensure do_shortcode is applied where needed

Styling Issues

Enqueue Assets: Shortcodes automatically enqueue required CSS/JS
Theme Conflicts: Check for CSS conflicts with your theme
Custom Classes: Use the class attribute to add custom styling hooks

Performance

Caching: Use transients to cache shortcode output for heavy queries
Lazy Loading: Enable lazy loading for images in portfolio settings
Pagination: Use pagination for large galleries instead of loading all items

Best Practices

Use Saved Layouts: Create reusable layouts via Visual Portfolio → Add New
Validate IDs: Always validate layout IDs exist before display
Sanitize Attributes: When generating shortcodes dynamically, sanitize all values
Cache Output: Cache expensive shortcode output using transients
Test Responsiveness: Ensure shortcodes display correctly on all devices
Document IDs: Keep track of which layout IDs are used where

Gutenberg Block - Modern block-based approach
Visual Editor - Create and manage layouts
Settings Overview - Configure layout settings

​Overview

​Portfolio Shortcode

​Basic Usage

​Attributes

​Examples

​Display a Saved Layout

​With Custom CSS Classes

​In PHP Template Files

​Programmatic Usage

​Filter Shortcode

​Basic Usage

​Attributes

​Examples

​Basic Filter

​With Item Count

​Custom Alignment and Text

​In PHP

​Sort Shortcode

​Basic Usage

​Attributes

​Examples

​Basic Sort Control

​Custom Alignment

​In PHP

​Shortcode Registration

​Combining Shortcodes

​Advanced Usage

​Dynamic Shortcode Generation

​Conditional Display

​Widget Areas

​Shortcode Output

​Output Structure

​Filtering Shortcode Output

​WPML Integration

​Common Use Cases

​Page Builder Integration

​Archive Pages

​Custom Post Type Archives

​ACF Integration

​Troubleshooting

​Shortcode Not Working

​Styling Issues

​Performance

​Best Practices

​Related

Overview

Portfolio Shortcode

Basic Usage

Attributes

Examples

Display a Saved Layout

With Custom CSS Classes

In PHP Template Files

Programmatic Usage

Filter Shortcode

Basic Usage

Attributes

Examples

Basic Filter

With Item Count

Custom Alignment and Text

In PHP

Sort Shortcode

Basic Usage

Attributes

Examples

Basic Sort Control

Custom Alignment

In PHP

Shortcode Registration

Combining Shortcodes

Advanced Usage

Dynamic Shortcode Generation

Conditional Display

Widget Areas

Shortcode Output

Output Structure

Filtering Shortcode Output

WPML Integration

Common Use Cases

Page Builder Integration

Archive Pages

Custom Post Type Archives

ACF Integration

Troubleshooting

Shortcode Not Working

Styling Issues

Performance

Best Practices

Related