Sparrow Portfolio adds a dedicated \"Portfolio\" custom post type and category taxonomy to WordPress, so you can showcase your projects independently of any page builder.<\/p>\n\n
It works entirely on its own with the built-in Gutenberg block, or alongside the Sparrow Elementor Widgets plugin for Elementor-based layouts \u2014 both share the same portfolio content, so you only manage it once.<\/p>\n\n
\ud83d\uddbc\ufe0f Four Layout Types<\/strong><\/p>\n\n Grid, List, Masonry, or Carousel \u2014 switch between them from one panel without rebuilding your page. The Carousel layout runs on Swiper with configurable loop, autoplay, speed, mousewheel control, and centered slides.<\/p>\n\n \ud83c\udfaf Flexible Content Source<\/strong><\/p>\n\n Show all projects, filter by a single category or author, or hand-pick specific projects one by one with a searchable picker. Order by date, title, menu order, or random, in either direction.<\/p>\n\n \u2195\ufe0f Drag & Drop Ordering<\/strong><\/p>\n\n Reorder projects by dragging them right in the Portfolio list \u2014 the new order is saved instantly, no extra plugin needed. Set the block to order by menu order and the grid follows it.<\/p>\n\n \ud83d\udd0d AJAX Filter & Sort<\/strong><\/p>\n\n A category filter and a sort control, each switchable between an inline list or a dropdown select, with the position of the two fully configurable \u2014 left, right, center, or split to opposite edges (with a one-click Swap Sides). Everything updates over AJAX, no page reload.<\/p>\n\n \ud83d\udd0e Instant Project Search<\/strong><\/p>\n\n A search button that opens a dropdown with live results as you type \u2014 thumbnail, title with the matched part highlighted, and category. The list of projects is loaded once and filtered in the browser, so typing never hits the database. Place it above, below, or inline with the filter and sorting, or anywhere on the site with the \ud83c\udfa8 Three Matching Visual Styles<\/strong><\/p>\n\n Filter, sorting and pagination all ship with the same three styles \u2014 Underline Tabs, Filter Chips, and Outlined Buttons \u2014 so you can set them to match for a single, consistent design across the block.<\/p>\n\n \ud83d\udcc4 Numbers or Load More Pagination<\/strong><\/p>\n\n Classic numbered pagination or a Load More button, both AJAX-powered, with configurable alignment and button text.<\/p>\n\n \u270d\ufe0f Full Typography Control<\/strong><\/p>\n\n Independent color, font size (with a px \/ % \/ em \/ rem \/ vw \/ custom unit picker), font family (from a built-in list of Google Fonts), and weight for the title, category, and date \u2014 plus where the date sits, how it's separated, and whether a divider shows in the List layout.<\/p>\n\n \u2728 Hover Effects<\/strong><\/p>\n\n Built-in hover effects for thumbnails \u2014 zoom in, zoom out, grayscale to color, color to grayscale, and darken.<\/p>\n\n \ud83c\udfac Featured Video Support<\/strong><\/p>\n\n Attach a video to any project and choose whether it autoplays or only plays on hover, right on the grid thumbnail \u2014 no popup required.<\/p>\n\n \ud83e\udde9 Text Position<\/strong><\/p>\n\n Place the title, category and date below the thumbnail, above it, or on top of the image as a color-tinted overlay with a 9-point alignment picker \u2014 with text alignment, title\/meta gap and padding controls.<\/p>\n\n \ud83d\uddb1\ufe0f Click-to-Edit Preview<\/strong><\/p>\n\n Hover over any part of the portfolio right in the editor \u2014 title, category, date, thumbnail, filter, search or pagination \u2014 to see it outlined, then click to jump straight to its settings. No hunting through panels.<\/p>\n\n \ud83d\udcf1 Responsive Controls<\/strong><\/p>\n\n Columns, gaps, font sizes, letter spacing, padding, corner radius, thumbnail aspect ratio and text alignment can each be set separately for desktop, tablet and mobile. Pick the device next to a setting and the editor preview switches with it; an empty tablet or mobile value simply follows the larger screen.<\/p>\n\n \u27a1\ufe0f Project Navigation<\/strong><\/p>\n\n Previous \/ Next navigation on the project page in four styles \u2014 button group, arrows, titles, or cards with thumbnails. It steps through projects by date or in your drag-and-drop order, can stay inside the current category, can loop, and its middle button takes the visitor back to the grid they came from.<\/p>\n\n \ud83d\udd12 Password-Protected Projects<\/strong><\/p>\n\n Protect a project with the standard WordPress password and visitors get a clean, theme-independent password form with a show\/hide toggle, an \"incorrect password\" message, and an optional \"Contact the author\" link. Protected projects are marked with a lock badge in the grid.<\/p>\n\n \ud83c\udf17 Dark Mode<\/strong><\/p>\n\n Switch the filter, sorting, search and pagination to a dark color scheme \u2014 always, by the visitor's system setting, or in sync with your theme's own light\/dark switch (just enter the class or attribute your theme uses). Title, category and date can have separate colors for light and dark.<\/p>\n\n \u2699\ufe0f Settings Page<\/strong><\/p>\n\n Portfolio \u2192 Settings: URL bases for projects and categories, the portfolio page, your own names for the post type (\"Works\", \"Cases\"\u2026), a placeholder image for projects without a featured image, navigation and password form options, color scheme, and locally hosted fonts.<\/p>\n\n \ud83d\udee0\ufe0f Shortcode<\/strong><\/p>\n\n An auto-generated, always-in-sync shortcode so the same design can be dropped into Elementor, the classic editor, or any theme template.<\/p>\n\n \ud83c\udfad Theme-Overridable Templates<\/strong><\/p>\n\n Ships its own single and archive templates for classic themes so it works out of the box, and uses the theme's own templates on block themes. A theme can override either one by simply providing its own This plugin can load fonts from Google Fonts, a font delivery service provided by Google.<\/p>\n\n It is used only when you pick a font family for the project title, category or date in the block settings. In that case, each time a page with that block is displayed, the visitor's browser requests the font stylesheet from If you enable \"Load Google Fonts locally\" in Portfolio \u2192 Settings \u2192 Performance, your server downloads the font files once and serves them from your own site; visitors' browsers then make no requests to Google.<\/p>\n\n The block's scripts and styles in the The scripts in Yes. The block brings its own styles and works with classic and block themes. On classic themes the plugin provides simple single and archive templates; on block themes your theme's own templates are used.<\/p><\/dd>\n Go to Portfolio \u2192 Settings \u2192 General. You can set the base for project URLs and for category pages, and choose which page is your main portfolio page.<\/p><\/dd>\n Yes. Set the project's visibility to \"Password protected\" in the editor. Visitors see the plugin's own password form, and the project shows a lock badge in the grid.<\/p><\/dd>\n Go to Portfolio \u2192 Settings \u2192 Color Scheme, choose \"Follow the theme\" and enter the class or attribute your theme adds to the page in dark mode, for example Only if you choose a Google font for the title, category or date in the block. See \"External services\" below. You can also turn on \"Load Google Fonts locally\" in Portfolio \u2192 Settings \u2192 Performance, and the font files are then served from your own site.<\/p><\/dd>\n[sparrow_portfolio_search]<\/code> shortcode.<\/p>\n\narchive-portfolios.php<\/code> or single-portfolios.php<\/code> \u2014 no filters or hooks required.<\/p>\n\nExternal services<\/h3>\n\n
fonts.googleapis.com<\/code> and the font files from fonts.gstatic.com<\/code>. As with any web request, the visitor's IP address and browser details are sent to Google. No other data is sent.<\/p>\n\n\n
Source code<\/h3>\n\n
build\/<\/code> folder are compiled with @wordpress\/scripts<\/code>. Their readable source is included in the plugin, in the src\/<\/code> folder. To rebuild them, run npm install<\/code> and then npm run build<\/code> in the plugin folder.<\/p>\n\nassets\/js\/<\/code> and the styles in assets\/css\/<\/code> are not compiled; they ship as readable, unminified source.<\/p>\n\n\n\n
sparrow-portfolio<\/code> folder to the \/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n\n
Does it work with any theme?<\/h3><\/dt>\n
How do I change the \"portfolio\" part of the URL?<\/h3><\/dt>\n
Can I protect a project with a password?<\/h3><\/dt>\n
How does dark mode work with my theme's light\/dark switch?<\/h3><\/dt>\n
.dark-theme<\/code> or [data-theme=\"dark\"]<\/code>. The portfolio controls switch together with your theme, without a page reload.<\/p><\/dd>\nDoes the plugin load anything from external servers?<\/h3><\/dt>\n