Golden Portfolio: WordPress Build Checklist

  1. Overview
  2. Websites Development
  3. Golden Portfolio: WordPress Build Checklist

This WordPress Implementation Checklist is designed to bridge the gap between your custom "Golden" vision and the technical structure of Directorist.

You can hand this directly to a developer or use it as your step-by-step build guide.

Golden Portfolios: WordPress/Directorist Technical Checklist

1. Global Styling (The "Luxury" Foundation)

  • Color Lock: Define a global CSS variable for your brand gold: --golden-brand: #da8d0f;.

  • Typography: Enqueue a high-end Serif font (like Libre Baskerville or Playfair Display) for headers and a clean Sans-serif (like Inter) for UI.

  • Global Rounding: Set a site-wide utility class for rounded-3xl (24px-32px) to apply to all professional portraits.

2. Custom Field Mapping (Directorist Builder)

Create these specific custom fields in the Directorist Listing Builder:

  • Professional Narrative: Text Area field. Enable "Allow HTML" so you can use centered styling.

  • Services Offered: Checkbox field. Add your list of deliverables here.

  • Portfolio Grid: Gallery field.

  • Challenge/Result Fields: Create individual Text or Text Area fields mapped to each gallery image (or use a Repeater field if using the Directorist Pro version).

3. Single Listing Page (The "Editorial Spine")

Use the Directorist Template Mapper or Elementor to enforce the center-aligned flow:

  • [ ] Hero Section: Center the name and title. Apply a grayscale filter to the Map widget.

  • [ ] Action Buttons: Ensure "Book Consultation" uses background-color: var(--golden-brand) and "View Work" uses an outline style.

  • [ ] Services Grid: Use CSS to force the checkbox list into a 2-column grid.

    • Code Snippet: display: grid; grid-template-columns: 1fr 1fr; gap: 16px;

  • [ ] Portfolio Overlays: This is the most critical part. If using Elementor, use the Directorist Gallery Widget and apply a custom CSS hover effect to reveal the "Challenge/Result" text using the #da8d0f gold.

4. Custom CSS for "The Golden Touch"

Add these to your WordPress Customizer to fix the alignment and details we discussed:

CSS

/* Gold Checkmarks for Services */
.directorist-listing-single-services i {
    color: #da8d0f !important;
}
 
/* The Editorial Spine - Center Headers */
.directorist-single-info-title,
.professional-narrative-header,
.portfolio-header {
    text-align: center !important;
    font-family: 'Serif Font Name', serif;
}
 
/* Spacious Law Padding */
.directorist-single-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

5. Navigation Logic (The "Comparison" Rule)

  • New Tab Logic: Install a "Open External Links in New Tab" plugin, or add a small jQuery snippet to your footer to target listing cards:

    $('.directorist-listing-title a').attr('target', '_blank');

  • Header Cleanup: Go to Appearance > Menus and remove the "Latest" link to match our updated documentation.

6. Final UX Polish

  • [ ] Smooth Scroll: Ensure the "View Work" button links to #directorist-gallery-section with scroll-behavior: smooth.

  • [ ] Closing CTA: Add a "Reusable Block" or "Elementor Template" at the bottom of the single listing page containing the final "Ready to collaborate?" section.

Project Status: Finalized

With this checklist, your "Open Brain" AI now knows how to translate:

  1. Identity (Zinc/Gold/Editorial)

  2. Logic (New Tabs/Smooth Scroll)

  3. Content (Narrative/Services/Portfolio)

  4. Platform (Directorist/WordPress)