How to create a presentation page without Visual Composer & co?


(Ionuț Staicu) #1

Hi guys. I’m planning a theme that is mostly presentational and I want to make the whole thing as less plugin dependant as possible. This means no Visual Composer or ACF plugins (or something similar). That’s a result of my preference and my client choice (main reason is that it is desired to work on a vanilla WordPress, for any user)

Anyhow, how would one manage the content for a layout similar to this:

http://zephyr.us-themes.com/

So, basically the requirement would be to manage various sections content in an easy way that also allows reordering, editing and so on.


The best way I could come up with is to make use of hierarchy and templates in pages:

  • top level page (parent=0) would act like a container and will have nothing to edit (maybe the title)
  • sections will be pages, that are children of the previous top page. You can change the section type by changing template. Basically something similar to this:

Home
|- Slideshow
|- Portfolio
|- Contact
|- Footer

I have few big…ish issues here:

  • i’ll have quite a lot of template files in the theme directory;
  • displaying all section means extra queries to the DB;
  • Editing each section would be a bit couterintuitive (because you need to go and edit other page every time);
  • probably some issues on Search functionality.

The second idea would be to make a lot of metaboxes that are dynamic enough to be added/removed/sorted/edited in page (basically this means replicating some ACF functionalities).

For some reasons, metaboxes seems a bit hackish for me and i’d like to avoid them if possible (also search is tricky)


Any other ideas?

Thanks!


#2

The best way would be to use the Customizer with widgets. You can add almost anything in widgets, from customizations (output css in the header) to complex form fields, and the best thing is you can reorder them and see modifications made live.


(Ionuț Staicu) #3

Widgets sounds good, thanks for suggestion.

But I’m thinking that editing wide content boxes (e.g. section called „DETAILS DONE RIGHT” in the theme mentioned above) would make things a bit less… visual.

Also, wonder if this would play nice on:

  • multiple pages (maybe adding a widget area for each page?)
  • search functionality

#4

You can also use a function like this to register a sidebar based on page template. You can make a page template called “builder” and:

function reg_sidebars() {

	// Get all pages with Page Builder template selected
	$pages = get_pages(array(
		'post_status' => 'publish',
		'meta_key' => '_wp_page_template',
		'meta_value' => 'page-builder.php',
		'parent' => -1
	));

	// Register a sidebar for each page using the Page Builder template
	foreach( $pages as $page ){
		$this->reg_page_builder_sidebar( $page->ID, $page->post_title );
	}
}

(Mauel Vicedo) #5

It’s not possible.

Well, technically it is possible, but pretty difficult to do without sacrificing something in return. Either you use some sort of page builder to manage all the content elements, or you add the styling yourself in exchange for flexibility.

The way we do it in some themes is through Custom Post Types, like here:
http://demos.cpothemes.com/brilliance

The theme is set so it has Slides, Features, and Portfolios, and all of them are fixed into the theme. This makes everything stupidly simple to set up: you just need to start creating posts in each section to populate the homepage. However, it’s not an elegant solution from a standards standpoint, nor it is a flexible way to implement it. For the lock-in issues, we have a separate plugin that implements all the custom post types.

You can do this with widgets, theme options, or any other feature of WordPress, but the problem is always going to be flexibility. What if the user wants to change the order of the elements? the number of columns? You can add options to manage those too, but there will always be more use cases to cater to.

The other way around is to use a page builder. This gives you control over pretty much each element, even if it is at the expense of simplicity. I’ve also coded themes meant for use with Visual Composer, and in some cases it can be daunting to create a homepage.

To keep things manageable, what we do is to provide a separate plugin that contains all the required functionality: the portfolio, testimonials, shortcodes to handle VC elements… But the problem is, if you want flexibility you WILL need some sort of tool to manage all the content.

I guess it all boils down to picking two of the following:

  • Flexibility
  • Ease of Use
  • Compliance with WordPress standards

(Benjamin Intal) #6

One way would be what @acosmin suggested: widgets.

In my opinion you can take another approach to this. Instead of allowing your user to do anything and everything regarding the layout, make that one a fixed layout. Create 1 page template and call it the “frontpage” page template, then use the Customizer and create options on what to display for all pages that use your “frontpage” page template.

Use Customizer Panels for organizing all frontpage options. Create options for the slideshow, portfolio, contact, and footer for the frontpage template. Keep the Customizer simple, and settings that can complicate it - like reordering - can be just left out.

You can opt to not have meta boxes this way also.

[plug] You can use Titan Framework to create those Customizer panels/sections :smile:


(Adrian Diaconescu) #7

I agree with @bfintal here. I think just having a couple of widgetized front page templates and some Customizer settings should do the trick. It’s something I’m doing myself in my latest theme. The user won’t have as many “options” at his disposal as you see in your example, but that’s a good thing! And here’s where I go into a short rant:

I know this is the “trend” these days, but who decided long home pages crammed full of everything work for every site? Sure, multiple vertical sections work in some cases, when used in moderation and with careful planning. Most people however will not exert moderation and just create a kitchen sink of content, that helps nobody.

I’ve been struggling with this a bit, but in the end I can’t deny the fact that people who are not coders will want options. So it’s our job as developers and designer to at least present and use those options in a clever way.