Web Developer's Portfolio

[wd_portfolio] will output all portfolio items (images and excerpts, styled using Flexbox).
[wd_portfolio_single id=”{id}”] (for example [wd_portfolio_single id=”5″]) will output the portfolio item with the id specified (images and excerpt, styled using Flexbox).

While the purpose of this plugin is to enable you to display portfolio items via shortcodes linking to custom pages, you may choose to create custom pages on your site for your portfolio items based on the content you add directly in the portfolio editor. In the WordPress Admin Menu, you will see a setting called ‘Web Developers Portfolio Plugin’ (Administrator-level access only). If you check the box in this settings page it will enable you to view each portfolio listing as a page. You will need to get your hands dirty with code and create a single-portfolio.php template in order to customize the page layout or an archive-portfolio.php template for an archive page – alternatively you can use the default portfolio page that is created for each portfolio item and make adjustments with php or css, depending on your theme / template.

The content within the content field will be what displays on the custom portfolio page created by this post-type.

Add this to your child theme’s style sheet:

// Main button background:
.wdp-btn {
background: #yourhexvaluehere !important; // eg. background: #27a6bc !important;
}

// On hover and active button background
.wdp-btn:hover, .wdp-btn:active {
background: #yourhexvaluehere !important; // eg. background: #52B8C9 !important;
}

For desktop screenshots, aim for an image ratio of width:height = 1.5:1 (for example 2550px x 1700px).

For mobile screenshots, aim for an image ratio of width:height = 1:2 (for example 250px x 500px).

WDP plugin is best suited to display on full-width pages, with reasonable excerpts (not too long). Though excerpts are capped at 70 words, your site’s font size may mean this can distort the layout of the preview. Experiment with excerpt sizes until you find the display that works best for your site.

The mobile screenshot is designed to sit over the bottom right of the desktop screenshot, with an overlap into the white space below. Depending on the size of the image you’ve uploaded, as well as the width of the screen space available (full-width recommended), this might not sit perfectly. The recommended image proportion for the mobile screenshot is width: height = 1:2 (height double the width). If you want to increase the width of the displayed mobile image (the height is automatic based on the width) add the following to your child themes style sheet:

.wdp-mobile-preview {
max-width: yourwidthvalue !important; // adjust appropriately, for example 20%, 10em, etc.
}

No, you can use this plugin to create the portfolio custom post type and customize the portfolio page output as you wish through single-portfolio.php and archive-portfolio.php.

I had a need to display both desktop and mobile screenshots for individual portfolio items, and didn’t want to have to hand-code every new item into the page template. I created this plugin to allow the process to be quick, efficient and scalable.