Layouts Cells API Lets you Add Drag-and-Drop to Your Logic

   Amir

Announcements

March 31, 2014
10

Layouts’ cells API allows theme and plugin authors to build their own logic and make it drag-and-droppable, with Layouts.

Standard Layouts cells
Standard Layouts cells

If you already tried Layouts, you probably noticed that it comes with a collection of cells, covering basic WordPress functionality. The built-in cells let you add texts, media, menus, widgets, post content and grids. All these cells were built using the cells API. This means that you can add your own cells just as easily.

Layouts cells API is more than a pretty wrapper. It’s a complete development framework, which lets you create unique functionality without wasting time.

Your custom cells can have the following (use what you need):

  • A cell insert / edit GUI
  • Cell storage with simple and repeating fields
  • Rendering functions

Let’s say that you’re creating a theme, which has a fancy slider. You can turn this slider into a Layouts cell, allowing users to place sliders on the page, resize and drag them around.

Layouts lets you create a GUI for the slider setting. The GUI can include simple fields, like the slider’s title and different transition settings. To allow users to choose slides, you can create repeating field groups. These groups can contain slide images, captions and links.

The great thing about using Layouts API is that you only need to indicate what you need. Layouts builds the GUI for you and takes care of storing and loading fields.

When you write the slider render function, you can load the slider settings fields, loops through the slides and load the data for every slide.

To build your own custom cells, start with the Layouts cells API. Then, look at the reference-cell folder in Layouts plugin, to see a fully featured example of a custom Layouts cell.

Questions? Ideas? Suggestions? Layouts API is new and we are eager to hear your thoughts. Leave your comments here and we’ll get back to you.

 

Comments 10 Responses

  1. Hi Amir,

    The way I typically use Toolset is to create a ‘page sections’ custom post type and associated view to use on Pages. For each page section I can select any one of my custom view templates (with associated custom fields) to create custom content layouts or use views (wrapped in a view template) to list content from other custom post types.

    What I would really like to see in Layouts is the ability to define a cell which allows me to add any number of child Posts (with associated View Templates) to each instance of a Page using the layout, which I can then set up to display content from the site (including View Templates which wrap a View that lists posts filtered using the parent-child relationship to the parent post type associated with the layout). An added bonus would be the ability to edit any of the custom fields related to the View Template of each child post directly in the parent post.

    This way I could create a ‘main content area’ and ‘side content area’ to which I could add any number of configurable content sections with other layout cells for the rest of the site’s content and layout.

    Tried to be concise with this, so I hope it makes sense. 🙂

    • Actually, Layouts 0.9 already lets you do this, although with a GUI that’s not complete. You can insert cells that display ‘post content’ for any post, with any Content Template. The next beta will include a nicer GUI that allows editing the templates right from inside the Layout.

      I’m not 100% sure that I understand the rest. Would you like to create a diagram that shows what you want to edit?

  3. This is really good!

    Layers really adds so much ease to the end user.

    I have a question about it tho, how would I display a row of posts or other post types?

    Will this be where the views integration comes in? Where you would design a view to display posts and insert that in layouts?
    Would individual views have their own cells?

    A simple way to add any post to a specific spot, or easily query a row of posts would be amazing.

    Thank you so much for your time and effort in developing this plugin it is really helpful.

    Hope you have a great day

    • Yes, this will be possible with Views integration. Right now, with Layouts 0.9, you can already achieve this by pasting a Views shortcode into a text cell. It will be a lot easier in the next version (about a week from now), which will include a View cell. Further, we are adding a Bootstrap grid output to Views, so it will be perfectly integrated with Layouts.

      • That’s excelent!
        Shortcodes are a smart workaround till the update.

        One more question tho, what is bootstrap? I have gathered that it’s a kind of css framework that lets you do grids amung other things but I’m not sure if I have to install this?

        Is it part of layouts or does my theme require it?

        Oh and a feature request since we are talking about grids.
        Will we see a pinterest style grid? I’m currently doing this with views and Masonry (http://masonry.desandro.com/)

        Here is an example http://artopiamagazine.com/markers/

        Having that grid style integrated into layouts would be massively cool!

        Thank you

        • Sure. Bootstrap is a CSS framework. Its highlights is the responsive grid. Layouts uses this CSS framework. If you want to experiment with Layouts, you can download one of our reference Bootstrap themes. They will come with everything that you need.

          I found a discussion on Masonary + Bootstrap here:
          https://github.com/desandro/masonry/issues/405

          (didn’t try it)

          Does this help?

  4. Could you explain if it´s possible to add some link or call to action button to sliders?
    Thanks.