Custom Layouts – Post + Product + CPT Grids

Description

Build a list or grid layout of any post type (products, pages, posts + more).

  • Design post templates (cards) using our drag and drop builder
  • Built for both Gutenberg users and non Gutenberg users (block + shortcodes available)
  • Query editor – choose what to display using using multiple query parameters
  • Works with any theme
  • No coding required
  • Repsonsive options

Features

Layout Editor

  • Build single column or grid based layouts
  • Supports Masonry out of the box
  • Tons of design options to build the layout you want
  • Choose to add numbered Pagination ( ‘Load more’ and ‘Infinite scroll’ options coming soon )
  • Powerful query editor allows you to show the posts you want – choose from any post type with various ordering options
  • Responsive columns (choose how many columns to show for each device size – and set your own breakpoints)

Template editor

  • Design individual templates (cards) using our drag and drop editor – creativity is your only limit
  • Link them with your layouts to build beautiful designs
  • Hundreds of design options
  • Unique Elements system (based on the block system)
    • granular control over the elements you add to your design
    • choose from a (growing) list of unique elements and add them where you want
    • to re-arrange elements, just drag and drop
    • each element has it’s own sidebar full of options
  • Supports gradients + alpha transparencies

Gutenberg integration

  • Custom blocks for building layouts
  • Seamlessly integrates with our Template Editor
  • UI built using 90% Gutenberg components 👍

Built for speed

  • At its base – loads only 1 css file and 1 javascript file on the frontend – total bundle size approx 15kb.
  • Doesn’t load CSS + JS on pages not using Custom Layouts
  • CSS file dynamically created, saving resources and requests per page load (+ avoiding inline CSS)
  • Caches posts + queries for optimum performance
  • Not jQuery dependant

Includes 7 sample templates

We’ve included a pack of templates ready for you to customise – check the installation tab for how to import these to your site.

Known Issues

  • Admin Template Editor only works on desktop computers (tablets + mobiles not supported)
  • Admin Template Editor does not work on IE, all other major browsers supported – ** the frontend of this plugin supports IE 11+, no sweat

Roadmap

  • Support additional CSS unit types (currently only supports px)
  • Elements for WooCommerce
  • Elements for Custom Fields + ACF
  • More layout elements ( line breaks, custom text, icons etc)
  • Social/sharing elements
  • Single Post Block
  • More hover options
  • More font options ( Google fonts / Gutenberg api coming soon )

Screenshots

  • Using the layout block
  • The Template Editor - customize each individual result exactly how you want
  • Frontend result
  • Short demo animation
  • Responsive controls

Blocks

This plugin provides 1 block.

  • Custom Layouts - Post + Product + CPT Grids

Installation

Uploading in WordPress Dashboard

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Navigate to the ‘Upload’ area
  3. Select custom-layouts.zip from your computer
  4. Click ‘Install Now’
  5. Activate the plugin in the Plugin dashboard

Using FTP

  1. Download custom-layouts.zip
  2. Extract the custom-layouts directory to your computer
  3. Upload the custom-layouts directory to the /wp-content/plugins/ directory
  4. Activate the plugin in the Plugin dashboard

Importing the sample templates

To import the sample template data, follow these steps:

  1. Log in to your site as an administrator.
  2. Go to Tools: “Import” in the WordPress admin panel.
  3. Install the “WordPress” importer from the list.
  4. Activate & Run Importer.
  5. Upload the file from our plugin folder – custom-layouts/sample-data/sample-templates.xml – using the form provided on that page.
  6. You will first be asked to map the authors in this export file to users on the site. For each author, you may choose to map to an existing user on the site or to create a new user.
  7. WordPress will then import each of the templates into your site.
  8. Access your new templates via wp-admin -> “Custom Layouts” -> “Templates”

FAQ

How do I add a layout to a page? (Gutenberg way)

Then you can use the Custom Layouts block.

All of the layout options are available from within the block inspector.

How do I add a layout to a page? (Shortcode method)

You can find this shortcode in the sidebar of your Layout.

It will look something like: [custom-layouts id="123"]

Where 123 is the ID of your layout

How do I add a template to a layout?

  • First create a template by heading to “Templates” in the “Custom Layouts” admin menu or by clicking “add new” in the layout block.
  • Edit your template and when finished you can choose it from the “Post Template” dropdown in your layout.

Reviews

January 22, 2021
Today, I bought a Search & Filter Pro license, and combined it with this plugin, and even though it took me a few tries and about 30 minutes or so to get things exactly how I wanted, I managed to create a front end advanced search form that works like a charm. Now, to be honest, things are not completely perfect with this plugin yet, as there are some things missing but are on the roadmap to come hopefully in the (very near) future. The 2 things that I'm looking forward, which will be nice, but not a deal breaker are responsive layouts and meta fields (ACF Fields) in the templates. One last point: It took me about 30 minutes and a few configuration tries to get things to work maybe because I totally ignored the documentation, and worked things with trial and error, but I can see how some won't have the patience or the willingness to do the same. Both plugins should have a short video tutorial how to combine them and get the desire results, and also recommending to use the shortcodes within Gutenberg Columns, as the Filter & Search forms are only vertical. It seems to me that both plugins on their own seem incomplete, missing pieces of the puzzle if you will, but combine them together, and without any coding, almost anyone will be able to get amazing results, all they have to do is to learn how to properly use the plugins. I am very thankful to this plugin as well as the Search & Filter Pro plugin, they will save me many hours of manual coding.
January 21, 2021
I'm so happy with this plugin; it's exactly what we needed for our website. Displays custom posts nicely and the interface is really easy to use. Works really well with Search and Filter.
January 20, 2021
Thanks for this great plugin. Lots of customizations and options make everything possible and quite easy to get nice results. Great job!
January 20, 2021
I am not sure if «Custom Layouts» is a good name for this plugin, but I like its approach. It basically allows you to publish not only static, but dynamic content on your pages by fetching certain posts (even from custom post types) from your WP database. I am looking forward to the further development of this plugin!
Read all 4 reviews

Contributors & Developers

“Custom Layouts – Post + Product + CPT Grids” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.1.7

  • Fix – a JS error when launching the template editor modal
  • New – the template editor modal now uses the query from the layout to display the set of posts for previews
  • New – responsive columns – choose how many columns to show for Mobile, Tablet and Desktop
  • New – settings page to set responsive breakpoints + regenerate CSS

1.1.6

  • Fix – missing files from bad commit

1.1.5

  • Fix – issue with the order paramters on the frontend
  • Fix – issue with the sticky post paramater on the frontend
  • Fix – issue with block align not working on the frontend
  • Fix – add loaders/placeholders to layout block + admin page
  • Fix – an issue with CSS not loading due to a https bug in wp_uploads_url()

1.1.4

  • New – Add visual editing to the layout admin page

1.1.3

  • Fix – an issue with Post Title not being displayed correctly

1.1.2

  • Fix – an issue with CSS generation
  • Fix – Rename “Custom Layouts” block to “Custom Layout”
  • New – Show a default image icon when no image is present + allow color to be changed

1.1.1

  • Fix – Enable link on featured image was not working
  • Fix – Modal template title not showing up correctly
  • Fix – Grid spacing not working
  • Fix – Border color not being set properly
  • Fix – Update CSS file when templates are drafted / trashed / deleted
  • Improvement – store queried IDs in transients (they will get complex eventually)
  • Improvement – update icon (still room for improvement)
  • Improvement – Theme colours + gradients now available in template editor admin page with WP 5.7 or Gutenberg 9.7+
  • Improvement – Update all frontend class names to use BEM naming conventions for predictable and reliable naming (we do increase the specificity, though)
  • New – Gradient picker for background colors
  • New – Alpha transparency for all color pickers
  • New – Create new templates directly from the layout block
  • New – Equal height rows (when not using masonry)
  • New – Featured Image options – set image size, ratio and fit mode
  • New – Add support for layout block alignment (supports wide and full width)
  • New – Demo templates

1.1.0

  • New – Gutenberg Integration – New block + modal editor
    • Layout Block – build layouts using the new layout block
    • Modal Template Editor – get the full template editor as a modal from within the layout block
  • Fix – update version number whenever templates are saved to prevent caching of frontend CSS
  • Fix – remove admin-ajax dynamic CSS and opt to use inline CSS as a fallback instead
  • Fix – store generated CSS in post meta for faster loading, and only regenerate the updated templates when needed
  • General UI fixes

1.0.1

  • Fix – issue with imagesLoaded & re-initialising the layout on frontend
  • Fix – issue with frontend date formatting when “custom” was chosen (thanks @paaljoachim)
  • Fix – issues with the padlock unsetting in our dimension controls
  • Fix – allow for multiple layouts on a single page + support for multiple masonry instances

1.0.0

  • Initial version.

0.0.1

  • Init project setup