Add page template for creating unique layouts

[amdrew]

trafficstars

Similar to https://github.com/easydigitaldownloads/vendd/issues/216, Themedd will have some way in the near future to customize the homepage. It would be super cool to take this a step further and allow the user to build a layout for any page.

The cleanest/easiest way seems to be with widgets, as suggested in https://github.com/easydigitaldownloads/vendd/issues/216. The way I see it working is:

1. Create a new page template for Themedd. Something like "Custom Layout" or "Page Builder", though with those names, it might get confused with an actual page builder. Perhaps something with "widget" in the name.

2. When this template is assigned to a page, a dynamic sidebar will be created using the page's title. The page ID will be used to register the sidebar.

3. In the customizer, and when navigating to the page with the template applied, you'll be able to click to add widgets, rearrange them etc.

Shortcodes don't work on text widgets by default so we'll need to add a line of code to allow this:

add_filter( 'widget_text', 'do_shortcode' );

This means you could then add a text widget and add the [downloads] shortcode, using all of the available parameters. Even better, a custom Themedd: Downloads widget could be created which would lead to a much nicer experience for the user. They could select the column count, toggle thumbnails and buy buttons etc.

Some things that might work well:

1. A downloads widget to output a grid of downloads.
2. An integration with EDD Featured Downloads so the user can output featured downloads. This could simply integrate with the downloads widget.
3. A testimonials widget which pulls testimonials from Jetpack.
4. A widget for showing "features".
5. A text + image widget with some basic settings for positioning of image etc
6. A download widget. Similar to the text and image widget but will show information from the download + a purchase button
7. A call to action widget. Title, sub-heading, button + ability to set link.
8. A pricing table widget if https://github.com/easydigitaldownloads/edd-pricing-tables is active

The above would provide some really interesting layouts.

[arraypress]

Really like this idea @amdrew! Being usable on all pages would be extremely useful and more than likely if the actual widgets were versatile enough would stop users using actual page builders in place of this cleaner approach.

Some suggestions for you:

• You could call the template Widgetized Layout or Widgetized Page.

• It should be possible build sectioned pages/layouts with alternating or assigned coloured section classes like you do on Affiliate WP to break the page layouts into more readable sections.

• A recent blog/post widget would be useful to highlight blog posts on the homepage (or any page). This would take a similar approach to the EDD Downloads widget in that you could select columns, to show thumbnails, etc.

• It would be useful to be able to build hero sections. This could be enable within the customizer or have a dedicated widget for adding a hero section with the ability to set the text, buttons, background, etc. Naturally it would need to be possible to move the menu location as well (for example converting the primary menu to secondary like you do with RCP/AWP - this would be more a customizer setting though).

• This is probably more child theme territory, but having a section slider widget like you do on AWP would be really cool! Though it would add slick.js to mix which could takes away from the lightweight nature of the theme.

Will post more ideas as they come to me...

[arraypress]

On the CTA widget it would be useful to also be able to setup the "30 Day Money Back Guarantee", "Secure Online Payment" text icons as well. Similar to what you have here: https://affiliatewp.com/integrations/woocommerce/

[amdrew]

Here's a rough prototype of a "Featured Download" widget that could be used in combination with other widgets to build out a unique page layout. The download would be selected via a searchable dropdown menu, but you get the idea.

Shown are two Featured Download widgets, each with a download specified. All information about the download is pulled in and shown on the page. Possible options for this widget could include:

1. The ability to swap the positioning of the image + text
2. Toggling the vendor name
3. Toggling social icons
4. Changing the column ratio. At the moment it's 50/50 but you could change it to show more text/less image or vice-versa.

[arraypress]

Looks great @amdrew! I really like the idea of this page builder widget approach btw, nice and lightweight.

[amdrew]

👍 Another option would be Gutenberg, I see that as extremely valuable. Could create these as "blocks" and drag them into any page and configure.

[arraypress]

One thing (before I forget!) would be the ability to have full-width page sections like on the actual Themedd website. Where you could have features, downloads, CTA, newsletter, etc with alternating sections. These "types" of site layouts are pretty common these days and it would be cool to build different widgets for different purposes - like screenshots, integrations (like AWP), etc.

[amdrew]

👍 The "builder" template could have a full-width layout for the main section where the widgets are added (or Gutenberg blocks). To get the alternating widths of sections, perhaps each widget has a control for it. Or maybe it can be based on the overall site layout configured in the customizer and leave it as that. Guess we'll cross that bridge when we need to.

[amdrew]

Shopify do this concept really nicely though you can only build a homepage layout from it (I'd imagine they are working to expand this to other pages).

What's great about using widgets is the experience is controlled. Page builders create unexpected results because of all the different rows and columns you can add, leading to some overly complex layouts.

If you set the limits for each widget, providing decent styling becomes easy since you know the possible combinations of what everything can look like. Not to mention the support burden is much less.

[arraypress]

Completely agree, one of the things that drew me to Themedd was the fact it focuses on content and minimalism (plus it's lightweight). A lot of these "bigger" themes contain layouts that simply aren't intuitive to look at (or read) and it's moving more towards minimalism and clean layouts with bigger brands like YouTube, Airbnb, Shopify, etc.

[arraypress]

This might be unrelated to the scope of the above, but it would be useful to be able to create a hero section on the homepage with title, subtitle and buttons. This is pretty common on a lot of sites and useful for a lot of purposes.

[arraypress]

Just a note, since the introduction of WordPress 4.9, shortcodes are now supported in widget content.

So the line add_filter( 'widget_text', 'do_shortcode' ); is no longer required.

[arraypress]

@amdrew, what are your thoughts on doing this using Gutenberg over widgets?

[amdrew]

@davidsherlock Been thinking about this a lot. Although it seems widgets are going to stick around for the time being, I do think that creating blocks in Gutenberg is the better option. Creating a page and then dragging out all the relevant blocks to create a unique layout will be a better experience than using widgets in sidebars. There's also a tonne of blocks already being planned on the Gutenberg repo, all Themedd needs to do it style them, and potentially create additional ones.

[arraypress]

It's worth noting (though I am sure you are already aware), that out of the box most of the Gutenberg default blocks work (and look) fine in Themedd. It definitely feels like the best way to go using Gutenberg blocks over widgets, but I wasn't 100% sure when the intended official release would be.

[amdrew]

It's also going to be the expected way going forward from whenever Gutenberg is released (April or May 2018 is likely). If people are using blocks to create pages but Themedd requires widgets to be dragged into sidebars, there's going to be some confusion. I also don't like the idea of putting all the effort into widgets and then having to support them for a long time, while also including blocks etc.

Although some of the default blocks look fine with Themedd, I'll most likely re-style all blocks from within Themedd (so everything is consistent) and disable G.B's CSS file that is loaded.

Will also declare theme support for full-width images (and cover images once they can go full-width), though might need to rethink some of the CSS.

For example, if the main content area of a page is 700px, but an image is set to be full-width, the image needs to break out of that content area and be edge to edge in the browser.

Though there are CSS solutions for breaking an image out of the content area (using vw as a unit) and making it 100% width, I have seem some quirks. The most reliable solution IMO would be to remove the width on the content area altogether. All blocks now have 100% of the browser width to play with, so things like paragraphs and headings stay at 700px width.

[HandyGadget]

Did the orignal idea of "adding a page template to creat unique layouts" actually get any further?

I would really like to find out if it did or not.

[amdrew]

@TerenceMilbourn Themedd will support Gutenberg and its blocks (+ some custom ones we will build) so you'll be able to create unique layouts that way.

[HandyGadget]

Thanks for coming back to me on that @amdrew