{"id":2686,"date":"2026-02-07T16:45:54","date_gmt":"2026-02-07T16:45:54","guid":{"rendered":"https:\/\/devad.io\/guides\/?p=2686"},"modified":"2026-02-07T16:45:55","modified_gmt":"2026-02-07T16:45:55","slug":"portfolio-showcase-theme-complete-setup-guide","status":"publish","type":"post","link":"https:\/\/devad.io\/guides\/site-devad-io-docs\/portfolio-showcase-theme-complete-setup-guide\/","title":{"rendered":"Portfolio Showcase Theme \u2013 Complete Setup Guide"},"content":{"rendered":"\n<p>Get your professional portfolio website up and running in minutes with our comprehensive setup guide. This document walks you through each essential step to create a stunning portfolio showcase that impresses clients and simplifies project management.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"admin-role\">Admin Role<\/h2>\n\n\n\n<p>This section details the essential configuration steps required to activate and prepare Theme Twelve for portfolio management. It includes theme selection, category setup, and foundational content workflows tailored for the <strong>Portfolio Owner<\/strong> role.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-activating-theme-twelve\">Step 1: Activating Theme Twelve<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"path-1-selecting-theme-twelve-from-available-templates\">Path 1: Selecting Theme Twelve from Available Templates<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-94-1024x396.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-491\" \/><\/figure>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Log in to your admin dashboard at <a href=\"https:\/\/web.devad.io\/user\/\">https:\/\/web.devad.io\/user\/<\/a><\/li>\n\n\n\n<li>Navigate to <strong>Settings &gt; Themes<\/strong> via the sidebar menu<\/li>\n\n\n\n<li>In the <strong>Theme Settings<\/strong> card, locate the <strong>Theme Twelve<\/strong> preview tile (labeled \u201cTheme Twelve\u201d)<\/li>\n\n\n\n<li>Click the radio button associated with <strong>home_twelve<\/strong><\/li>\n\n\n\n<li>Scroll to the bottom of the form and click <strong>Update<\/strong><\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> Only one theme can be active at a time. Activating Theme Twelve will immediately apply its layout, styles, and portfolio-specific features across the frontend.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-managing-portfolio-categories\">Step 2: Managing Portfolio Categories<\/h2>\n\n\n\n<p>Portfolio categories are used to group and filter projects on the public portfolio page. Proper categorization enhances visitor navigation and SEO structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"path-1-adding-a-new-portfolio-category\">Path 1: Adding a New Portfolio Category<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-95-1024x473.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-492\" \/><\/figure>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>From the dashboard sidebar, go to <strong>Portfolio &gt; Category<\/strong><\/li>\n\n\n\n<li>Click the <strong>Add Portfolio Category<\/strong> button (top-right corner)<\/li>\n\n\n\n<li>In the modal form, complete the following fields:\n<ul class=\"wp-block-list\">\n<li><strong>Language<\/strong>: Select the target language (e.g., English)<\/li>\n\n\n\n<li><strong>Name<\/strong>: Enter a descriptive category name (e.g., \u201cWeb Development\u201d)<\/li>\n\n\n\n<li><strong>Status<\/strong>: Choose <strong>Active<\/strong> to display it publicly<\/li>\n\n\n\n<li><strong>Serial Number<\/strong>: Assign a numeric order (lower numbers appear first)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Submit<\/strong><\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> The serial number controls display order\u2014<strong>not alphabetical sorting<\/strong>. Use consistent intervals (e.g., 10, 20, 30) to allow future insertions.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"path-2-editing-an-existing-portfolio-category\">Path 2: Editing an Existing Portfolio Category<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-96-1024x460.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-493\" \/><\/figure>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>On the <strong>Portfolio Categories<\/strong> page, locate the target row in the table<\/li>\n\n\n\n<li>Click the <strong>Edit<\/strong> button in the <strong>Actions<\/strong> column<\/li>\n\n\n\n<li>The modal will auto-fill with current values<\/li>\n\n\n\n<li>Modify any field as needed (name, status, serial number)<\/li>\n\n\n\n<li>Click <strong>Save Changes<\/strong><\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> Changing a category\u2019s status to <strong>Deactive<\/strong> hides all associated portfolios from public view but retains them in the database.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-creating-a-portfolio-item\">Step 3: Creating a Portfolio Item<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-97-1021x1024.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-494\" \/><\/figure>\n\n\n\n<p>Portfolio items represent individual case studies or projects. Each supports rich media, metadata, and client details.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"path-1-adding-a-new-portfolio-entry\">Path 1: Adding a New Portfolio Entry<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Navigate to <strong>Portfolio &gt; Portfolios<\/strong> in the sidebar<\/li>\n\n\n\n<li>Click <strong>Add Portfolio<\/strong> (top-right)<\/li>\n\n\n\n<li>Complete the multi-section form:<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"media-section\">Media Section<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thumbnail<\/strong>: Upload a featured image (JPG\/PNG, recommended 800\u00d7600px)<\/li>\n\n\n\n<li><strong>Slider Images<\/strong>: Use the Dropzone area to upload multiple high-res images for the project gallery<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"basic-information\">Basic Information<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Language<\/strong>: Select the content language<\/li>\n\n\n\n<li><strong>Title<\/strong>: Enter a clear, SEO-friendly project title<\/li>\n\n\n\n<li><strong>Category<\/strong>: Choose from active portfolio categories<\/li>\n\n\n\n<li><strong>Serial Number<\/strong>: Set display priority (e.g., 100 for early display)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"project-details\">Project Details<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Status<\/strong>: Mark as <strong>Completed<\/strong> or <strong>In Progress<\/strong><\/li>\n\n\n\n<li><strong>Client Name<\/strong>: Optional but recommended for credibility<\/li>\n\n\n\n<li><strong>Start Date \/ Submission Date<\/strong>: Use date pickers for accurate timelines<\/li>\n\n\n\n<li><strong>Website Link<\/strong>: Add live URL if applicable<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"content-seo\">Content &amp; SEO<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content<\/strong>: Use the WYSIWYG editor (Summernote) to describe the project<\/li>\n\n\n\n<li><strong>Meta Keywords<\/strong>: Enter comma-separated keywords (e.g., \u201cUI design, React, Figma\u201d)<\/li>\n\n\n\n<li><strong>Meta Description<\/strong>: Write a 120\u2013160 character summary for search engines<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Click <strong>Submit<\/strong><\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> All fields marked with <strong>**<\/strong> are required. Slider images must be JPG, JPEG, or PNG and under 2MB each.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-editing-an-existing-portfolio-item\">Step 4: Editing an Existing Portfolio Item<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-98-725x1024.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-495\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"path-1-updating-portfolio-content-and-metadata\">Path 1: Updating Portfolio Content and Metadata<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Go to <strong>Portfolio &gt; Portfolios<\/strong><\/li>\n\n\n\n<li>Find the desired entry and click the <strong>Edit<\/strong> icon (pencil) in the <strong>Actions<\/strong> column<\/li>\n\n\n\n<li>The edit page loads with all fields pre-populated<\/li>\n\n\n\n<li>You may:\n<ul class=\"wp-block-list\">\n<li>Replace the thumbnail or add\/remove slider images<\/li>\n\n\n\n<li>Update title, category, dates, or client info<\/li>\n\n\n\n<li>Revise content using the embedded editor<\/li>\n\n\n\n<li>Adjust SEO metadata<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Scroll to the bottom and click <strong>Update<\/strong><\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:<\/strong> At least <strong>one slider image must remain<\/strong>\u2014the system prevents deletion below this threshold to ensure frontend integrity.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"guest-experience-viewing-portfolios\">Guest Experience \u2013 Viewing Portfolios<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-portfolio-homepage-listing-page\">1 Portfolio Homepage (Listing Page)<\/h4>\n\n\n\n<p>When guests visit your <strong>Portfolios<\/strong> page, they see a professional gallery of your best work.<br><\/p>\n\n\n\n<p><strong>Page Layout<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Breadcrumb<\/strong>: &#8220;Home &gt; Our Projects&#8221; navigation path<\/li>\n\n\n\n<li><strong>Category Filters<\/strong>: Buttons at top (&#8220;All&#8221;, &#8220;portfolio1&#8221;, etc.) for instant filtering<\/li>\n\n\n\n<li><strong>Project Grid<\/strong>: Cards showing portfolio items.<\/li>\n\n\n\n<li><strong>Project Card Shows<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Featured image (thumbnail)<\/li>\n\n\n\n<li>Project title<\/li>\n\n\n\n<li>Category tag<\/li>\n\n\n\n<li>Smooth hover animation<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>How Guests Browse<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/devad.io\/blogs\/wp-content\/uploads\/sites\/12\/2026\/01\/image-99-1024x644.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-496\" \/><\/figure>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Click <strong>&#8220;Portfolios&#8221;<\/strong> in main menu<\/li>\n\n\n\n<li>(Optional) Filter by category using top buttons:\n<ul class=\"wp-block-list\">\n<li><strong>&#8220;All&#8221;<\/strong>: Shows every project<\/li>\n\n\n\n<li><strong>Category name<\/strong>: Shows only matching projects<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click any project card to view full details<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-portfolio-detail-page-what-guests-see\">2 Portfolio Detail Page \u2013 What Guests See<\/h4>\n\n\n\n\n\n<p>When a guest clicks a portfolio item, they see a rich, immersive project showcase:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Section<\/th><th>Content<\/th><th>Purpose<\/th><\/tr><\/thead><tbody><tr><td><strong>Breadcrumb<\/strong><\/td><td>&#8220;Home &gt; Portfolio Details&#8221;<\/td><td>Easy navigation back<\/td><\/tr><tr><td><strong>Image Gallery<\/strong><\/td><td>Multiple high-quality images with lightbox popup<\/td><td>View enlarged images in modal window<\/td><\/tr><tr><td><strong>Project Title<\/strong><\/td><td>Large heading (e.g., &#8220;Jone Doe&#8221;)<\/td><td>Clear project identification<\/td><\/tr><tr><td><strong>Project Details Sidebar<\/strong><\/td><td>Structured information:<br>&#8211; Category<br>&#8211; Client Name<br>&#8211; Start\/End Dates<br>&#8211; Website Link (clickable)<\/td><td>Quick reference of key facts<\/td><\/tr><tr><td><strong>Full Description<\/strong><\/td><td>Rich text content with headings, paragraphs, lists<\/td><td>Tells the project story professionally<\/td><\/tr><tr><td><strong>Social Sharing<\/strong><\/td><td>Facebook, Twitter, LinkedIn buttons<\/td><td>Share project with others<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Key Features Guests Experience<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Lightbox Gallery<\/strong>: Click any image to view full-screen with navigation arrows<\/li>\n\n\n\n<li>\u2705 <strong>Mobile-Optimized<\/strong>: Layout adapts perfectly to phones\/tablets<\/li>\n\n\n\n<li>\u2705 <strong>Easy Sharing<\/strong>: One-click sharing to social media<\/li>\n\n\n\n<li>\u2705 <strong>Professional Presentation<\/strong>: Clean layout that builds trust<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-step-by-step-guest-journey\">3 Step-by-Step Guest Journey<\/h4>\n\n\n\n<p><strong>Step 1: Discover Portfolios<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Guest clicks &#8220;Portfolios&#8221; in main menu<\/li>\n\n\n\n<li>Sees visually appealing grid of your best work<\/li>\n\n\n\n<li><em>What they gain<\/em>: Immediate visual proof of your hotel&#8217;s quality<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 2: Filter Projects (Optional)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clicks category filter (e.g., &#8220;Wedding Events&#8221;)<\/li>\n\n\n\n<li>Sees only relevant projects instantly<\/li>\n\n\n\n<li><em>What they gain<\/em>: Saves time finding what matters to them<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 3: View Project Details<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clicks a project that catches their eye<\/li>\n\n\n\n<li>Sees beautiful image gallery with lightbox functionality<\/li>\n\n\n\n<li>Reads professional description with project timeline<\/li>\n\n\n\n<li>Checks client name and website for credibility<\/li>\n\n\n\n<li><em>What they gain<\/em>: Confidence in your capabilities through real examples<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 4: Share or Take Action<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shares project on social media <\/li>\n\n\n\n<li>Clicks client&#8217;s website link (sees real results)<\/li>\n\n\n\n<li><em>What they gain<\/em>: Social validation and inspiration to book<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Get your professional portfolio website up and running in minutes with our comprehensive setup guide. This document walks you through each essential step to create&#8230;<\/p>\n","protected":false},"author":49,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","pgc_sgb_lightbox_settings":"","footnotes":"","_siteseo_titles_title":"","_siteseo_titles_desc":"","_siteseo_analysis_target_kw":"","_siteseo_robots_canonical":"","_siteseo_robots_index":"","_siteseo_robots_follow":"","_siteseo_robots_primary_cat":"","_siteseo_social_fb_title":"","_siteseo_social_fb_desc":"","_siteseo_social_fb_img":"","_siteseo_social_twitter_title":"","_siteseo_social_twitter_desc":"","_siteseo_social_twitter_img":""},"categories":[8,127],"tags":[],"class_list":["post-2686","post","type-post","status-publish","format-standard","hentry","category-site-devad-io-docs","category-setup-basics2"],"acf":[],"menu_order":0,"_links":{"self":[{"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/posts\/2686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/comments?post=2686"}],"version-history":[{"count":2,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/posts\/2686\/revisions"}],"predecessor-version":[{"id":2706,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/posts\/2686\/revisions\/2706"}],"wp:attachment":[{"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/media?parent=2686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/categories?post=2686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devad.io\/guides\/wp-json\/wp\/v2\/tags?post=2686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}