Below, you’ll find a detailed guide on how to add the Visual Portfolio, Photo Gallery & Post Grid Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Visual Portfolio, Photo Gallery & Post Grid Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Visual Portfolio, Photo Gallery & Post Grid Plugin and the shortcodes it provides:
"Visual Portfolio, Photo Gallery & Post Grid is a versatile WordPress plugin designed to help you create stunning visual portfolios, engaging photo galleries, and dynamic post grids with ease."
- [visual_portfolio]
- [visual_portfolio_filter]
- [visual_portfolio_sort]
Visual Portfolio, Photo Gallery & Post Grid [visual_portfolio] Shortcode
The Visual_Portfolio shortcode is a functional piece of PHP code that retrieves specific portfolio data. This shortcode uses an array to define attributes such as ‘id’, ‘class’, and ‘vc_css’. Then, it calls the Visual_Portfolio_Get function with these attributes to fetch the desired portfolio. This allows for dynamic content display based on the given parameters.
Shortcode: [visual_portfolio]
Parameters
Here is a list of all possible visual_portfolio shortcode parameters and attributes:
id– Unique identifier for the specific visual portfolioclass– CSS class to style the visual portfoliovc_css– Visual composer CSS code for additional styling
Examples and Usage
Basic example – Utilizing the ‘visual_portfolio’ shortcode to display a portfolio by referencing its ID.
[visual_portfolio id=1 /]Advanced examples
Using the ‘visual_portfolio’ shortcode to display a portfolio by referencing its ID and adding a specific class to it for custom styling.
[visual_portfolio id=1 class='my-custom-class' /]Utilizing the ‘visual_portfolio’ shortcode to display a portfolio by referencing its ID, adding a specific class, and applying custom Visual Composer CSS.
[visual_portfolio id=1 class='my-custom-class' vc_css='my-custom-css' /]PHP Function Code
In case you have difficulties debugging what causing issues with [visual_portfolio] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'visual_portfolio', array( $this, 'get_shortcode_out' ) );Shortcode PHP function:
function get_shortcode_out( $atts = array() ) {
$atts = shortcode_atts(
array(
'id' => '',
'class' => '',
'vc_css' => '',
),
$atts
);
return Visual_Portfolio_Get::get( $atts );
}
Code file location:
visual-portfolio/visual-portfolio/classes/class-shortcode.phpVisual Portfolio, Photo Gallery & Post Grid [visual_portfolio_filter] Shortcode
The Visual Portfolio shortcode allows you to customize the display of your portfolio filter. . It lets you set the ID, type, alignment, show count, and class. You can also change the “All” text.
Shortcode: [visual_portfolio_filter]
Parameters
Here is a list of all possible visual_portfolio_filter shortcode parameters and attributes:
id– Unique identifier for the filtertype– Determines the filter stylealign– Sets filter alignment to left, center, or rightshow_count– Toggles display of item counts in filterstext_all– Sets the text for the ‘All’ filter optionclass– Adds custom classes for additional CSS styling
Examples and Usage
Basic example – A simple usage of the ‘visual_portfolio_filter’ shortcode to display a portfolio filter with default settings.
[visual_portfolio_filter id=1 /]Advanced examples
1. Displaying a portfolio filter with a specific alignment and showing the count. The ‘align’ parameter is used to set the alignment of the filter (possible values are ‘left’, ‘center’, ‘right’). The ‘show_count’ parameter is a boolean value that determines whether to display the count of items in each filter category.
[visual_portfolio_filter id=1 align="right" show_count=true /]2. Customizing the text for the ‘All’ filter and adding a custom CSS class. The ‘text_all’ parameter is used to set the text for the filter that displays all items. The ‘class’ parameter can be used to add a custom CSS class to the filter for further customization.
[visual_portfolio_filter id=1 text_all="Show All" class="my_custom_class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [visual_portfolio_filter] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'visual_portfolio_filter', array( $this, 'get_shortcode_filter_out' ) );Shortcode PHP function:
function get_shortcode_filter_out( $atts = array() ) {
$atts = shortcode_atts(
array(
'id' => '',
'type' => 'default',
'align' => 'center',
'show_count' => false,
'text_all' => esc_attr__( 'All', 'visual-portfolio' ),
'class' => '',
),
$atts
);
return Visual_Portfolio_Get::get_filter( $atts );
}
Code file location:
visual-portfolio/visual-portfolio/classes/class-shortcode.phpVisual Portfolio, Photo Gallery & Post Grid [visual_portfolio_sort] Shortcode
The Visual Portfolio Sort shortcode is a powerful tool that allows you to customize your portfolio display. This shortcode enables users to sort their portfolios by various parameters. It accepts ‘id’, ‘type’, ‘align’, and ‘class’ attributes, allowing for customization and alignment of portfolio items. The ‘get_sort’ function retrieves the sorted list based on the specified attributes.
Shortcode: [visual_portfolio_sort]
Parameters
Here is a list of all possible visual_portfolio_sort shortcode parameters and attributes:
id– Unique identifier for the specific portfoliotype– Defines the style of the portfolio, ‘default’ is the standard stylealign– Determines the alignment of the portfolio, ‘center’ as defaultclass– Additional CSS classes to customize the portfolio’s appearance
Examples and Usage
Basic example – A straightforward usage of the visual_portfolio_sort shortcode, where we only specify the id of the portfolio we want to sort.
[visual_portfolio_sort id=1 /]For more advanced usage, the visual_portfolio_sort shortcode allows you to specify additional parameters to control the type of sorting, alignment, and even add custom classes for styling. Let’s see some examples:
Advanced examples
Sorting a visual portfolio with a specific type, let’s say ‘date’, and aligning it to the right:
[visual_portfolio_sort id=1 type=date align=right /]Adding a custom class to the visual portfolio sort shortcode. This can be useful if you want to apply custom styles using CSS:
[visual_portfolio_sort id=1 class=my-custom-class /]Combining all parameters to sort a visual portfolio. In this example, we’re sorting a portfolio with id=1, type=date, aligning it to the right, and adding a custom class:
[visual_portfolio_sort id=1 type=date align=right class=my-custom-class /]PHP Function Code
In case you have difficulties debugging what causing issues with [visual_portfolio_sort] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'visual_portfolio_sort', array( $this, 'get_shortcode_sort_out' ) );Shortcode PHP function:
function get_shortcode_sort_out( $atts = array() ) {
$atts = shortcode_atts(
array(
'id' => '',
'type' => 'default',
'align' => 'center',
'class' => '',
),
$atts
);
return Visual_Portfolio_Get::get_sort( $atts );
}
Code file location:
visual-portfolio/visual-portfolio/classes/class-shortcode.phpConclusion
Now that you’ve learned how to embed the Visual Portfolio, Photo Gallery & Post Grid Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply