How To: Add A Portfolio Section To A WordPress Page

The Portfolio Widget section displays a portfolio of posts from a selected category or the Jetpack custom post type. It’s like an art gallery for your website! Use it to showcase your projects, artwork, photography – anything really! After installing and activating the Organic Customizer Widgets plugin, you’ll be able to add a Portfolio section by following simple steps within the customizer:

  1. Apply the Organic Custom page template to your page.
  2. Update or Publish the page.
  3. Click the Customize Page button.
  4. Click the + Add A Widget button.
  5. Select the Organic Portfolio widget.
  6. Give your Portfolio section a title and description.
  7. Select a Portfolio Category.
  8. Complete the remaining fields, as desired (Max Number Of Posts, Number Of Columns, and Section Background Options).

Here is an example of an Organic Portfolio section.

2 Comments on “How To: Add A Portfolio Section To A WordPress Page

  1. I love this widget, but the featured image on my website ends up pixelated and distorted. Any way to have the featured image in the portfolio gallery, but not on the actual project page?

    • Hi John,

      The single portfolio isn’t really built to display without the featured image. If you upload a higher quality image with a width of about 1800px, it should display better on the single portfolio. Have you tried doing this already? Otherwise you could change which image loads in each single portfolio with CSS like this:

      #post-172 .feature-img.banner-img {
      background-image: url(image-url) !important;
      }

      You’ll need to first upload the image to your media library and find the URL, then you can target the specific post using the ID for that post. This way a different image will load as the background banner for your portfolio post. If you wanted to use the same image for all portfolio posts you would use something like this instead:

      .jetpack-portfolio-template-default .feature-img.banner-img {
      background-image: url(image-url) !important;
      }

      Add this to the Additional CSS section of the customizer.

      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *