Below, you’ll find a detailed guide on how to add the WPZOOM Portfolio 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 WPZOOM Portfolio Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WPZOOM Portfolio Plugin and the shortcodes it provides:
"WPZOOM Portfolio is a powerful WordPress plugin designed to create stunning visual portfolios. It's ideal for photographers, designers, and artists looking to showcase their work efficiently."
- [wpzoom_block_portfolio]
- [wpzoom_portfolio_layout]
WPZOOM Portfolio [wpzoom_block_portfolio] Shortcode
The WPZOOM Portfolio shortcode is a powerful tool for displaying portfolio items. It allows customization of layout, content, and style attributes. It generates a portfolio grid with options like alignment, number of items, category filter, and more. The grid can be tailored to always play background video, show author, date, excerpt, thumbnail, and a ‘Read More’ button. The shortcode also supports lightbox feature for images and customizable ‘View All’ button. It provides control over the order of items and color scheme.
Shortcode: [wpzoom_block_portfolio]
Parameters
Here is a list of all possible wpzoom_block_portfolio shortcode parameters and attributes:
align– sets the alignment of the portfolio block.amount– specifies the number of portfolio items to display.alwaysPlayBackgroundVideo– if set to true, background video will always play.categories– determines which categories of portfolio items to show.columnsAmount– sets the number of columns in the portfolio grid.layout– defines the layout style of the portfolio grid.lightbox– if set to true, opens portfolio items in a lightbox.lightboxCaption– if set to true, displays captions in the lightbox.order– sets the sort order of the portfolio items.orderBy– determines the parameter by which items are ordered.readMoreLabel– sets the label of the ‘Read More’ button.showAuthor– if set to true, displays the author of the portfolio items.showBackgroundVideo– if set to true, shows a background video for the portfolio items.showCategoryFilter– if set to true, displays a filter by category.showDate– if set to true, displays the date of the portfolio items.showExcerpt– if set to true, displays an excerpt of the portfolio items.showReadMore– if set to true, shows a ‘Read More’ button.showThumbnail– if set to true, displays a thumbnail of the portfolio items.showViewAll– if set to true, displays a ‘View All’ button.source– determines the source of the portfolio items.thumbnailSize– sets the size of the portfolio item thumbnails.viewAllLabel– sets the label of the ‘View All’ button.viewAllLink– sets the URL for the ‘View All’ button.primaryColor– sets the primary color of the portfolio block.secondaryColor– sets the secondary color of the portfolio block.
Examples and Usage
Basic example – A simple usage of the ‘wpzoom_block_portfolio’ shortcode to display a portfolio grid with default settings.
[wpzoom_block_portfolio /]Advanced examples
Example 1: Using the shortcode to display a portfolio grid with 4 columns, sorted by date in ascending order, and including a ‘Read More’ button with custom label.
[wpzoom_block_portfolio columnsAmount=4 order="asc" readMoreLabel="See More" /]Example 2: Using the shortcode to display a portfolio grid from a specific category, with a ‘View All’ button linking to a custom URL, and changing the primary and secondary colors of the portfolio grid.
[wpzoom_block_portfolio categories="design" viewAllLink="https://yourwebsite.com/all-projects" primaryColor="#FF6347" secondaryColor="#800080" /]Example 3: Using the shortcode to display a portfolio grid with a lightbox feature turned off, and hiding the author and date from the portfolio items.
[wpzoom_block_portfolio lightbox=false showAuthor=false showDate=false /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpzoom_block_portfolio] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpzoom_block_portfolio', array( __CLASS__, 'render_shortcode' ) );Shortcode PHP function:
function render_shortcode( $atts, $content = '' ) {
if( !empty( $atts ) && is_array( $atts ) ) {
foreach( $atts as $key => $att ) {
$atts[ $key ] = esc_attr( $att );
}
}
// Defining Shortcode's Attributes
$shortcode_args = shortcode_atts(
array(
'align' => '',
'amount' => 6,
'alwaysPlayBackgroundVideo' => false,
'categories' => '',
'columnsAmount' => 3,
'layout' => 'grid',
'lightbox' => true,
'lightboxCaption' => false,
'order' => 'desc',
'orderBy' => 'date',
'readMoreLabel' => 'Read More',
'showAuthor' => true,
'showBackgroundVideo' => true,
'showCategoryFilter' => true,
'showDate' => true,
'showExcerpt' => true,
'showReadMore' => true,
'showThumbnail' => true,
'showViewAll' => false,
'source' => 'portfolio_item',
'thumbnailSize' => 'portfolio_item-thumbnail',
'viewAllLabel' => 'View All',
'viewAllLink' => '',
'primaryColor' => '#0BB4AA',
'secondaryColor' => '#000'
),
$atts
);
$block_portfolio = new WPZOOM_Blocks_Portfolio;
$block_portfolio_render = $block_portfolio->render( $shortcode_args, $content );
return sprintf(
'<div class="wpzoom-block-portfolio-shortcode">%1$s</div>',
$block_portfolio_render
);
}
Code file location:
wpzoom-portfolio/wpzoom-portfolio/classes/class-wpzoom-portfolio-shortcode.phpWPZOOM Portfolio [wpzoom_portfolio_layout] Shortcode
The WPZOOM Portfolio Layout shortcode allows you to display a specific portfolio layout on your WordPress site. This shortcode accepts an ‘id’ attribute, which corresponds to the ID of the portfolio layout you wish to display. If no ‘id’ is provided, it returns an empty string. The layout content is retrieved from the post content and displayed within a div with the class ‘wpzoom-portfolio-layout-shortcode-content’.
Shortcode: [wpzoom_portfolio_layout]
Parameters
Here is a list of all possible wpzoom_portfolio_layout shortcode parameters and attributes:
id– Specifies the unique identifier of the portfolio layout
Examples and Usage
Basic example – The shortcode displays the portfolio layout of a specific post, where the post ID is provided as a parameter.
[wpzoom_portfolio_layout id=123 /]Advanced examples
Displaying the portfolio layout of a post by providing the ID. If the post with the provided ID does not exist, the shortcode will not output anything.
[wpzoom_portfolio_layout id=456 /]Using the shortcode without any parameter. In this case, the shortcode will not output anything since the post ID is not provided.
[wpzoom_portfolio_layout /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpzoom_portfolio_layout] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpzoom_portfolio_layout', array( __CLASS__, 'render_portfolio_layout_shortcode' ) );Shortcode PHP function:
function render_portfolio_layout_shortcode( $atts ) {
global $post;
static $i;
// Defining Shortcode's Attributes
$shortcode_args = shortcode_atts(
array(
'id' => '',
), $atts );
$post_id = isset( $shortcode_args['id'] ) ? $shortcode_args['id'] : null;
if( !$post_id ) {
return '';
}
$layout = get_post_field( 'post_content', intval( $post_id ), 'display' );
return sprintf(
'<div class="wpzoom-portfolio-layout-shortcode-content">%1$s</div>',
apply_filters( 'the_content', $layout )
);
}
Code file location:
wpzoom-portfolio/wpzoom-portfolio/classes/class-wpzoom-portfolio-shortcode.phpConclusion
Now that you’ve learned how to embed the WPZOOM Portfolio 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