诗语，作者 WP Portfolio 文档

How to Show Specific Portfolio Items using Shortcode?

The WP Portfolio plugin allows you to display a specific portfolio item with the help of categories, other categories, and tags assigned to the portfolio.
Categories assigned to portfolios sort them on an initial level. Other categories can be further used to filter portfolios from assigned categories. Tags can be used further to filter the portfolios.
Below is the example that will explain how the sorting works –

Let us say we have 4 portfolios named Restaurant, Gardening & Landscaping, Sports Lounge and Wanderlust Travel Diary.
We have assigned the following categories, other categories, and tags to these portfolios as shown in the screenshot.

Categories – Free and Premium
Other categories – Elementor and Beaver Builder
Tags – website portfolio

Below are the IDs for categories, other categories, and tags. See How to Get the ID for Categories, Other Categories, and Tags?

Update Navigation Link Strings on Single Portfolio Page

While using WP Portfolio with Astra theme you will see navigation links on a single portfolio page. These links will allow navigating to the next/previous single page portfolio.

In case you need to alter this navigation link text use the following filter. Paste the filter code into the child theme』s functions.php file.
function astra_child_change_nav_links( $defaults )
{
if( 'astra-portfolio' === get_post_type() ) {
$defaults['string-single-navigation-next'] = __( 'My Next Custom Text', 'astra' ) . ' →';
$defaults['string-single-navigation-previous'] = '← ' . __( 'My Previous Custom Text', 'astra' );
}
return $defaults;
}
add_filter( 'astra_default_strings', 'astra_child_change_nav_links' );

How to Create a Detailed Single Portfolio Page?

The WP Portfolio plugin allows you to create a single page portfolio. You can then customize various things on such a page. You can decide whether you want the title to be visible or not. You can also choose how many related products to be shown or the number of columns the items should be placed in.
In order to set up a single page portfolio, you can follow the steps mentioned below.
Click on WP Portfolio → Add New

Single portfolio section looks like posts. Each item in the portfolio can be modified like a simple WordPress post.

Items in Portfolio section can be placed into different categories.

To create a single portfolio item thumbnail please use the Portfolio Settings section on the item editing page.

Working with the WP Portfolio you may have noticed that Portfolio page content can be displayed in several columns: 1 column, 2 columns 3 and 4 columns. Portfolio page layout can be controlled through the settings or shortcode.

No Items Found message – flush the permalinks.

After adding WP Portfolio shortcode to the page or post, sometimes you might see No Items Found message in the front end. In this case, try to flush the permalinks once.
Below are the steps to follow –
Step 1: In the WordPress admin area, go to 「Settings > Permalinks」.
Step 2: Click 「Save Changes」.
Step 3: Permalinks and rewrite rules are flushed.

How to Add CTA on the Preview Bar?

When you click on the Quick View button the website portfolio will open in an iframe. It shows the preview bar at the bottom with website portfolio name and responsive buttons. You can add CTA on this preview bar. Below are the steps to add CTA to the preview bar of the website –
Step 1: Edit the website portfolio.
Step 2: Add a CTA code to Add Call-to-action section.
Step 3: You can add HTML for the button and add a link to it.

Step 4: Default button style from the theme will be applied to the button.

How to Add Tags in WP Portfolio?

The WP Portfolio plugin allows you to add tags that will help sort items within various categories.
Let us see how we can create a new tag in WP Portfolio.
1. Click on the Tags option seen under Portfolio in your WordPress backend.
2. Name the tag and add a slug and description for it.

This tag can now be used for any Portfolio item that you add through the plugin.

How to add ACF into the WP Portfolio markup?

Sometimes you may need to create Advanced Custom Fields (ACF) for custom requirements. These fields can be added to portfolio edit pages. Once added, ACF will appear on all portfolio types [Website, Video, Image, Single Page].
Here are the steps to add ACF to WP Portfolio markup –
Step 1 – Add required ACF to your site: You can do it with the external plugin or custom code. Save the meta key for ACF.
Step 2 – Add below code snippet into the child theme』s functions.php file. Note: Replace field-1 with your own field name.
/**
* Add Extra rest field
*
* @todo Change the `prefix_` and with your own unique prefix.
*
* @since 1.0.0
*/
if( ! function_exists( 'prefix_add_post_meta' ) ) :

// Add `field-1` for post type `astra-portfolio`.
function prefix_add_post_meta() {
register_rest_field(
'astra-portfolio', // Post type.
'field-1', // Post meta key.
array(
'get_callback' => 'prefix_rest_field_1',
'schema' => null,
)
);
}
add_action( 'rest_api_init', 'prefix_add_post_meta' );
endif;

// Callback of `field-1` for post type `astra-portfolio`.
if( ! function_exists( 'prefix_rest_field_1' ) ) :
/**
* Return meta value
*
* @since 1.0.0
* @param string $object Rest Object.
* @param string $field_name Rest Field.
* @param array $request Rest Request.
* @return mixed Null or Site Featured Image.
*/
function prefix_rest_field_1( $object, $field_name, $request ) {
return get_post_meta( $object['id'], $field_name, 1 );
}

endif;
Step 3 – Add ACF to the portfolio edit page: First copy the portfolio page template /includes/tmpl-responsive-view.php into the child theme. Then override it to add ACF at the position you want. You can access the ACF like –
data.items[ key ]['']
Use the above code to access and use ACF filed.

Slider doesn』t work on iOS Devices when Previewed in Portfolio

When you use a slider on your website and display it with the portfolio. You might face issue with a slider when previewed with the portfolio on iOS devices.
Why does this happen?
Mostly, a slick library is used to display a slider/carousel. The slick library contains CSS and JS needed for the slider to work. This library has an issue with iOS devices. Here is a GitHub link for the same issue.
So when you click on the Quick View button on the website portfolio, the website opens in the iframe. If that site has used a slider/ carousel then it breaks the markup of the website in iframe only on iOS devices.
How to fix?
To fix this issue you need to add custom code on the website. Note that you need to add this code specifically to the website that is displaying as a portfolio and uses a slider. No need add this code to the main site where you are displaying all portfolios.
Code Snippet can be found on GitHub on a link here. Paste the code to the child theme』s functions.php file.

How to Reorder Portfolio Items?

Have you ever thought of reordering the items when they are added to your portfolio?
Although you cannot do this using WP Portfolio itself, you can still use an external plugin that will help you rearrange/reorder all the portfolio items in the list.
We recommend you to use the Post Types Order plugin which is available for free on the WordPress repository.
Let us take a look at how we can reorder the portfolio items within WP Portfolio.
Once you install the Post Types Order plugin, you』ll find a Reorder option added under Portfolio in your WordPress backend.

When you open the page, you can drag and drop the items to reorder them as you want.

How to Create Websites Portfolio?

You can showcase all your websites in a nice portfolio easily with sorting and searching options. You can do this with the portfolio shortcode.
Have a look at the demo page of Website Portfolio. You』ll see how your portfolio will look when you add your own created websites in it.
In order to create a Website Portfolio, follow the steps mentioned below –
Step 1 – Add a new portfolio by clicking on the Add New link seen under Portfolio.
Step 2 – Add a Title and Set portfolio type as Website. Move to the next step by clicking on the Add Portfolio button.
Step 3 – Set Thumbnail Image and your website URL.

The thumbnail image is the image that will represent a website within a portfolio. When you click on the thumbnail image (within the portfolio), the respective website will be previewed on the same page.
Check option 「Open in New Tab」 if you want to open a website in a new tab.
「Add Call-to-action」 allows adding text/HTML on the preview bar. Preview bar displays when you preview website on the same page. (screenshot)

Step 4 – Set categories and other categories for the websites.

If you have set a similar category for different portfolio types (Website, Image, Video, Single Page) you can add a tag to make the website portfolio more specific.

Step 5 – Repeat above 4 steps to add all your websites to the portfolio.
Step 6 – Copy the IDs for all categories, other categories, and tags that are set for all websites in the portfolio. See how to get the ID for categories, other categories, and tags?
Step 7 – Go to a page where you wish to display the Website Portfolio. Use following shortcode with the IDs that you copied in step 6.
wp_portfolio show-categories="yes"categories="1,2,3,4" show-other-categories="yes" other-categories="5,6" tags="10" columns="2" show-search="no"
See more information about all shortcode attributes here.
Your Website Portfolio will be displayed on the page. You can use the above shortcode in posts as well.
Note: In case you get a No Items Found error after adding the shortcode to a page, try flushing the permalinks once. If this does not work, please get in touch with us.

Related Documents –
How to Show Specific Portfolio Items?
How to Hide Portfolio Menu Panel?
How to Create Video Gallery?
How to Create Image Gallery?