Theme Integrations - Visual Portfolio

Visual Portfolio includes built-in compatibility for popular WordPress themes, ensuring portfolios display correctly and integrate seamlessly with theme features.

Avada

Automatic compatibility with Avada’s lazy loading system.

Features

Lazy Load Detection: Automatically detects when Avada’s native lazy loading is enabled
Smart Fallback: Disables Visual Portfolio’s lazy loading when Avada’s is active to prevent conflicts
Zero Configuration: Works automatically when both are active

How It Works

Location: classes/3rd/themes/class-avada.php:24 The integration checks Avada’s theme options and disables Visual Portfolio lazy loading if needed:

$avada_options = get_option( 'fusion_options' );

if ( 'Avada' === get_template() && 
     isset( $avada_options['lazy_load'] ) && 
     'avada' === $avada_options['lazy_load'] ) {
    
    // Disable Visual Portfolio lazyload
    add_filter( 'vpf_images_lazyload', '__return_false' );
    add_filter( 'vpf_enqueue_plugin_lazysizes', '__return_false' );
}

Setup

No setup required. The integration activates automatically when:

Avada theme is active
Avada’s lazy loading is enabled in theme options
Visual Portfolio is installed

Lazy Loading Priority

When both systems are available:

Avada’s lazy load enabled: Uses Avada’s system
Avada’s lazy load disabled: Uses Visual Portfolio’s system
Both disabled: No lazy loading applied

Enfold

Comprehensive compatibility with Enfold’s lightbox and lazy loading features.

Features

Lightbox Conflict Prevention: Disables Enfold’s lightbox for portfolio galleries
Lazy Load Compatibility: Detects and respects Enfold’s lazy loading settings
Automatic Integration: Works without configuration

Location: classes/3rd/themes/class-enfold.php:49 Visual Portfolio adds the noLightbox class to prevent Enfold’s lightbox from interfering:

public function disable_lightbox_class( $class_name ) {
    $class_name .= ' noLightbox';
    return $class_name;
}

This ensures Visual Portfolio’s PhotoSwipe or Fancybox lightbox is used instead.

Lazy Loading Detection

Location: classes/3rd/themes/class-enfold.php:61 The integration checks Enfold’s lazy loading option:

if ( function_exists( 'avia_get_option' ) ) {
    $enfold_option = avia_get_option( 'lazy_loading', '' );
}

if ( '' === $enfold_option ) {
    return false; // Disable VPF lazy load
}

Configuration

No manual configuration needed. The integration automatically:

Detects Enfold theme activation
Checks Enfold’s lazy loading settings
Disables conflicting features
Applies the noLightbox class to all portfolios

Performance Optimization

The integration caches Enfold’s lazy loading option to minimize database queries:

public $lazy_loading_option_cache = null;

Location: classes/3rd/themes/class-enfold.php:21

Blocksy

Deep integration with Blocksy’s customizer and post type system.

Features

Customizer Support: Enables Blocksy customizer options for portfolio post type
Meta Box Integration: Adds Blocksy’s page options panel to portfolio posts
Archive Customization: Supports Blocksy’s archive page settings
REST API Support: Full compatibility with block editor

Customizer Integration

Location: classes/3rd/themes/class-blocksy.php:55 Adds portfolio post type to Blocksy’s supported list:

public function add_portfolio_to_supported_list( $post_types ) {
    if ( ! in_array( 'portfolio', $post_types, true ) ) {
        $post_types[] = 'portfolio';
    }
    return $post_types;
}

This enables:

Single portfolio post customization
Archive page layout options
Header/footer settings
Sidebar configuration
Color schemes

Block Editor Meta Box

Location: classes/3rd/themes/class-blocksy.php:72 Enables Blocksy’s meta box in the block editor for portfolio posts:

public function add_portfolio_to_rest_field( $post_types ) {
    if ( ! in_array( 'portfolio', $post_types, true ) ) {
        $post_types[] = 'portfolio';
    }
    return $post_types;
}

The page options icon appears in the editor sidebar, allowing per-post customization.

What You Can Customize

With Blocksy integration, you can customize: Single Portfolio Posts:

Page layout (boxed, full-width, narrow)
Header visibility and style
Footer visibility and style
Sidebar position
Featured image display
Post meta information
Related posts section

Portfolio Archives:

Archive layout
Grid columns
Pagination style
Header configuration
Breadcrumbs
Filtering options

Setup

Install and activate Blocksy theme
Install Visual Portfolio
Navigate to Customize > Post Types > Portfolio
Configure your portfolio settings
Save and publish

Standalone Usage

Location: classes/3rd/themes/class-blocksy.php:9 The integration can also be used as a standalone code snippet:

// Can be used as a standalone Code Snippet or placed in the theme's functions.php.

Copy the class to your child theme’s functions.php if you want to maintain the integration independently.

Thrive Architect

Compatibility with Thrive Architect’s page rendering system.

Features

Dynamic Style Handling: Special rendering for inline styles
Content Override Support: Works with Thrive’s page output system
Shortcode Compatibility: Full support for Visual Portfolio shortcodes

Implementation

Location: classes/3rd/themes/class-thrive-architect.php:32 Because Thrive Architect overrides standard page rendering:

if ( function_exists( 'tcb_custom_editable_content' ) ) {
    add_filter( 'vpf_enqueue_dynamic_styles_inline_style', '__return_false' );
}

This ensures dynamic styles load correctly within Thrive’s rendering pipeline.

Why This Is Needed

Thrive Architect uses tcb_custom_editable_content() to override page output, which can prevent WordPress’s wp_add_inline_style() from working correctly. This integration ensures Visual Portfolio’s dynamic styles (colors, spacing, custom CSS) load properly.

Usage

Edit a page with Thrive Architect
Add a Custom HTML or Shortcode element
Insert your portfolio: [visual_portfolio id="123"]
Save and preview

Styles will load correctly without additional configuration.

General Theme Compatibility

Automatic Detection

All theme integrations activate automatically when:

The theme is active (checked via get_template())
Visual Portfolio detects theme-specific functions or options
No manual configuration is required

Lazy Loading Priority

When multiple lazy loading systems are available: Priority Order:

Theme’s native lazy loading (Avada, Enfold)
Visual Portfolio’s lazy loading
WordPress core lazy loading

Visual Portfolio automatically defers to theme lazy loading to prevent conflicts. For themes with built-in lightboxes: Enfold: Automatic noLightbox class added Other themes: May require manual lightbox disabling

CSS Conflicts

If you experience styling issues:

Check your theme’s CSS specificity
Use browser inspector to identify conflicts
Add custom CSS in Visual Portfolio > Settings > Custom CSS
Consider using !important for critical overrides

Hook References

Themes can customize Visual Portfolio behavior using these hooks:

// Disable lazy loading
add_filter( 'vpf_images_lazyload', '__return_false' );

// Disable lazysizes plugin
add_filter( 'vpf_enqueue_plugin_lazysizes', '__return_false' );

// Add custom classes to portfolio wrapper
add_filter( 'vpf_extend_portfolio_class', function( $class ) {
    return $class . ' my-custom-class';
});

// Modify dynamic styles enqueue method
add_filter( 'vpf_enqueue_dynamic_styles_inline_style', '__return_false' );

Custom Theme Integration

To create a custom integration for your theme:

1. Create Integration Class

class My_Theme_Visual_Portfolio_Integration {
    public function __construct() {
        // Only load for your theme
        if ( 'my-theme' !== get_template() ) {
            return;
        }
        
        $this->init_hooks();
    }
    
    public function init_hooks() {
        // Add your hooks here
        add_filter( 'vpf_images_lazyload', array( $this, 'handle_lazy_load' ) );
    }
    
    public function handle_lazy_load( $enabled ) {
        // Your logic here
        return $enabled;
    }
}

new My_Theme_Visual_Portfolio_Integration();

2. Place in functions.php

Add to your child theme’s functions.php:

// Visual Portfolio Integration
require_once get_stylesheet_directory() . '/inc/visual-portfolio-integration.php';

3. Reference Existing Integrations

Study existing implementations:

Avada: classes/3rd/themes/class-avada.php
Enfold: classes/3rd/themes/class-enfold.php
Blocksy: classes/3rd/themes/class-blocksy.php

Troubleshooting

Portfolio Not Displaying

Check theme compatibility
Disable theme lazy loading temporarily
Clear all caches (theme, plugin, server)
Check for JavaScript console errors

Styling Issues

Inspect element to find conflicting CSS
Check theme’s CSS specificity
Add custom CSS in Visual Portfolio settings
Consider adding !important declarations

Disable theme lightbox for portfolio galleries
Check for multiple lightbox scripts loading
Use browser console to identify conflicts
Contact theme support if persistent

Lazy Loading Problems

Check which lazy loading system is active
Disable one system if both are active
Test with Visual Portfolio lazy loading disabled
Verify images have correct attributes

Need Help?

If your theme isn’t listed:

Check if it uses a page builder (see Page Builders integration)
Test with a default WordPress theme to isolate the issue
Contact Visual Portfolio support with theme details
Consider creating a custom integration using the examples above

​Avada

​Features

​How It Works

​Setup

​Lazy Loading Priority

​Enfold

​Features

​Lightbox Integration

​Lazy Loading Detection

​Configuration

​Performance Optimization

​Blocksy

​Features

​Customizer Integration

​Block Editor Meta Box

​What You Can Customize

​Setup

​Standalone Usage

​Thrive Architect

​Features

​Implementation

​Why This Is Needed

​Usage

​General Theme Compatibility

​Automatic Detection

​Lazy Loading Priority

​Lightbox Handling

​CSS Conflicts

​Hook References

​Custom Theme Integration

​1. Create Integration Class

​2. Place in functions.php

​3. Reference Existing Integrations

​Troubleshooting

​Portfolio Not Displaying

​Styling Issues

​Lightbox Conflicts

​Lazy Loading Problems

​Need Help?

Avada

Features

How It Works

Setup

Lazy Loading Priority

Enfold

Features

Lightbox Integration

Lazy Loading Detection

Configuration

Performance Optimization

Blocksy

Features

Customizer Integration

Block Editor Meta Box

What You Can Customize

Setup

Standalone Usage

Thrive Architect

Features

Implementation

Why This Is Needed

Usage

General Theme Compatibility

Automatic Detection

Lazy Loading Priority

Lightbox Handling

CSS Conflicts

Hook References

Custom Theme Integration

1. Create Integration Class

2. Place in functions.php

3. Reference Existing Integrations

Troubleshooting

Portfolio Not Displaying

Styling Issues

Lightbox Conflicts

Lazy Loading Problems

Need Help?