Skip to content


In this section of the User Guide we will discuss the creation of portfolio items, as well as how to add portfolio lists to your website pages.

Portfolio Items

To create a new portfolio item:

  1. Navigate to Portfolio > Add new from your WordPress admin panel.

    Portfolio New

  2. Enter a title for your portfolio item in the text field near the top of the page.

  3. On the right side of the screen you will see a section named Portfolio Categories. Here you can select the categories that you would like to add this portfolio item to. If you would like to create a new category, click on the + Add New Category link. A text field will appear in which you can enter a category name, and then click Add New Category.

    Portfolio Categories

  4. Once you have checked the categories you would like to add your post to, click the Publish button.

Beneath the Portfolio Categories section are the Portfolio Tags, Attributes, and Featured Image sections. In the Portfolio Tags section, you can enter tags for this portfolio item. In the Attributes section, you can set the order in which you would like this portfolio item to appear in portfolio lists. In the Featured Image section, you can set an image to be displayed for this item on portfolio lists.

Now that you have set up your first portfolio item, let’s go over the available custom fields for portfolio items.


Note that most of them are the same custom fields you'll find when creating standard pages.

Codebean Portfolio Images (multiple upload)

Portfolio Gallery

This section allows you to upload multiple images at once:

  1. Click the Upload button.
  2. Fill your gallery with images. You can do this by simply dragging and dropping them into the window. Alternatively, click on Add to Gallery on the left, and select files from your media library to add.
  3. Once added to the gallery, you can write captions for the images and reorder them by clicking and dragging.
  4. Click the Update gallery button.

Codebean Portfolio Images/Videos (single upload)

This section is meant for uploading single files. The advantage of using this method is that you can upload videos, whereas in multiple upload, only images can be used. Note that you can combine both upload methods.

Codebean Additional Portfolio Sidebar Items

If you wish to add additional items to your portfolio sidebar, you can do so here by clicking the Add New Item button.

Codebean Portfolio Settings

  • Portfolio Type - Choose a layout for your portfolio single project. You can choose from the following portfolio types:
    1. Portfolio Full Width Images
    2. Portfolio Images
    3. Portfolio Small Images
    4. Portfolio Slider
    5. Portfolio Small Slider
    6. Portfolio Gallery
    7. Portfolio Small Gallery
    8. Portfolio Masonry
    9. Portfolio Small Masonry
    10. Portfolio Custom
    11. Portfolio Full Width Custom

You can also choose one of the Portfolio Custom types, if you would like to build your portfolio from scratch via shortcodes, like you would any other page.

  • Number of Columns - When using the "Gallery" and "Masonry" types of portfolio, you can choose a number of columns to display your images in.
  • Space Between Items - When using the "Gallery" and "Masonry" types of portfolio, you can set a predefined spacing between images.
  • Show Title Area - Set this option to "Yes" if you would like to display the title area on the portfolio single page.
  • Portfolio Info Top Padding - Set a top padding for the info section of the portfolio.
  • "Back To" Link - Chose the page you would like the "back to" link to lead to
  • Portfolio External Link - This applies to portfolio lists. If you wish to take viewers to an external site once they click on this portfolio item, enter its full URL here. If you enter a URL in this field, when you click on this portfolio item in the portfolio list, instead of opening the portfolio item it will open the URL you entered.
  • Featured Image - Upload a featured image for your Portfolio Lists when the Hover Type option is set to "Switch Featured Images".
  • Dimensions for Masonry - Image Fixed Proportion - Choose a dimension for the featured image when it is displayed in the "Masonry" type of portfolio list and you have set the "Enable Fixed Image Proportions" option to "Yes".
  • Dimensions for Masonry - Image Original Proportion - Here you can choose to double the width of your portfolio featured image when using the "Masonry" type of portfolio list with the "Enable Fixed Image Proportions" option set to "No".
  • Choose Color Scheme for Text - Color scheme for text used on fullscreen portfolio slider only.
  • Background Color - Choose background color for slider background used for fullscreen portfolio only.

Portfolio Lists

A portfolio list displays a listing of your portfolio items, each of which can be clicked on for a detailed overview of the single portfolio item.

Portfolio lists are added to pages via the Portfolio List shortcode. You also have the option to create a portfolio slider using the Portfolio Slider shortcode. To add a portfolio list to a page, navigate to the backend of that page and add the Portfolio List element to the page via Visual Composer (by clicking on the Add Element button, and then choosing the Portfolio List element from the element selection screen). For a comprehensive overview of all the options provided in the Portfolio List and Portfolio Slider elements, please see the Custom Shortcodes section of this User Guide.