LiveCanvas FAQ

LiveCanvas saves plain HTML inside the post_content field.

This results in zero customer lock-in, and in extreme speed when the page is served.

LiveCanvas will help you build clean and lean  Bootstrap  – based markup.

As a WordPress theme,  our own picostrap theme is heavily recommended for best results.

Picostrap, simply said, is the best way to experience Bootstrap and WordPress together: it allows you use WordPress Customizer to create your very own, fully  customized version of Bootstrap – set your own project colors, typography, styles…and generates a single minified CSS file.

It also removes loads of built in bloat from WordPress – and has an easy way to add SASS if you want to your CSS workflow.

Visit the picostrap theme’s website to know more about it.

It’s free and open source, and it was born forking the UnderStrap theme and melting it with CustomStrap, our former theme. Stripping out a LOT and  trying to keep things as DRY as possible. And some more decent starter templates.
It’s the reliable theme choice for your top performance WordPress-based stack.

FAQ permalink

Many page builders can run out of the box on any given WordPress Theme.

From a technical point of view, this is very easy to achieve – as simply the page builder plugin will typically load its own CSS library ON TOP of your Theme’s CSS. Of course this is a source of bloat, duplication, disorder, and poor performance.

LiveCanvas has a different approach, for the sake of keeping things as DRY as possible.

The LiveCanvas plugin assumes you are using a theme which is based on Bootstrap (v4 or v5) – and does NOT load ANY extra CSS or JS file.

These are the themes that we suggest for having a powerful yet lightweight core:

1. Picostrap: our recommended choice

The picostrap Theme allows you to brew your own Bootstrap CSS easily: using the WordPress Customizer, you can totally control site typography, colors, spacings.
Hit “Publish” and it will recompile the Bootstrap SCSS code “on the fly”.

Picostrap is a free and open source solution for frontend developers, implementing a SASS pipeline and a “live reloading” tool – without requiring to install command line tools.

Plus it makes WordPress lighter and faster removing useless HTML tags which slow down your pages.

It comes with a specific blank child theme so you have a safe place for your hacking.

It focuses on speed – delivering a lightweight yet fully featured integration of Bootstrap 5 and WordPress. It will help you achieve good PageSpeed results without getting crazy – just keeping your pages reasonable, will be enough.

For more information, check out the picostrap.com microsite.

 

2. UnderStrap: a vanilla starter theme

UnderStrap is a very solid and efficient open source WordPress starter Theme based on Bootstrap 4.

It’s the GitHub project that received most “stars” from worldwide developers between Bootstrap-based WordPress Themes.

It’s SASS pipeline is based on command-line tools that you should install to take profit of Bootstrap.

 

3. Your own Bootstrap 4/5 – based custom theme

The LiveCanvas plugin will work like a charm with your own  themes, providing that they’re based on Bootstrap 4 or v5 (recommended).

There are very few requirements:

  1. Your Theme must include the Bootstrap 4 or 5 CSS and JS files – this should sound pretty obvious.
  2. On the LiveCanvas backend settings panel, enable the option: “Use on any Theme
  3. If using Bootstrap 5, like we really recommend, please enable the option: “Use Bootstrap 5“.

 

4. Your Custom theme – but with “native compatibility”:

This is 99% similar in practice to #3 – but this more peculiar way allows for a couple more perks:

  • No options are required to be set in the LiveCanvas backend settings panel,  as basically you will  “hardcode” the settings in the theme
  • If you switch off the LiveCanvas plugin, the right page template will still be called to display your content correctly on pages where LiveCanvas is enabled.

There are very few steps required:

  1. Your Theme must include the Bootstrap 4 or 5 CSS and JS files – this should sound pretty obvious
  2. If you’re using Bootstrap version 5, please add to your functions.php file the code below:
     
     function lc_theme_bootstrap_version() { return 5;}
    
  3. Your Theme must have an “empty.php” page template called “empty” – this template should only call header and footer and the vanilla wp  loop.
    This template file has to be placed in a directory of your theme named “page-templates“.
    Here is a sample code:

     
    
    /* Template Name: Empty */
    
    defined( 'ABSPATH' ) || exit;
    
    get_header();
    
    while ( have_posts() ) :
    the_post();
    the_content();
    endwhile;
    
    get_footer();
      
  4.  Add the code below to your functions.php file to get rid of the annoying dialog recommending the Picostrap Theme:
 

function lc_theme_is_livecanvas_friendly(){} 

 

FAQ permalink

No PHP code is allowed directly into LiveCanvas pages, but you can insert ordinary WordPress shortcodes – and there’s a nice helper to make the process smoother and “live”.
This way you can have dynamic elements inside  LiveCanvas pages – which to begin with are mostly a chunk of static HTML (albeit they can contain some inline JS and CSS if you wish).

How to insert Shortcodes in a LiveCanvas page

In the LiveCanvas Blocks browser open the  WordPress Integration panel > then choose the Shortcode element.
This way you can use any kind of WordPress plugin which leverages shortcodes – like most WP plugins do – and to instantly preview their output without saving the page.

A special shortcode: Get Posts

In the WordPress Integration panel there is also a tool to pull data from your site/ blog: Get Posts.

Implemented by a shortcode which is directly defined by LiveCanvas, this tool will basically display a posts loop in a neat and configurable way. It has a visual interface to build custom posts queries with all the parameters offered by WordPress. You can of course pull data from custom post types, filter posts by category, author, post_id, custom fields.

The outputted post listing  can be displayed as Bootstrap cards or within a plain HTML structure with configurable headings and class names, or with your own custom php callback function.

This feature has been introduced in version 1.24 and you can read more about in this post.

FAQ permalink

LiveCanvas is basically a HTML editor under the hood –  running in your browser, and enriched with some “point-and-click” interface to help build HTML scaffolds.

LiveCanvas is using WordPress as a backend – to save the full HTML data of your page – and it does it into the standard post_content field.

On some WordPress installs, due to strict security settings of the environment, LiveCanvas can have problems while saving the HTML.

In these cases, upon clicking the saving button in the editor, you will see a ‘Saving Error’ pop-up.

Depending on the actual content of the page, you could see more or less this message. Embedding some image URLs, or JS code is a typical trigger.

This issue has been traced many times at:

  • Security [at application level] plugins like WordFence
  • Security [at server level] settings / tools  like Imunify 360

What’s happening behind the scenes?

Basically when you hit the save button, all the page’s <main> HTML is sent via $_POST to your WordPress backend.

This can trigger some false positives in security software.

What to do?

Try tweaking settings / disabling your security plugins, or in case of server level tools / settings, contact your host and ask them to tweak settings / disable the offending tool.

How to fix issues with  WordFence

Some users are reporting problems with this famous security plugin, but it’s easy to get around it.

If you do see that turning off WordFence fixes your saving problem with LiveCanvas, just look at the live traffic and when the request from LiveCanvas comes through, add it to a whitelist:

FAQ permalink

Some times it’s useful to have a special page in your site which just works better without the header and footer – just the content at full display.

To achieve this, just go the WordPress page editing screen and select the template: Blank Page Template.

This way you can create immersive landing pages, informational pages, or whatever. As you see it’s very easy and you can revert your choice switching back to the Empty Page template.

Of course this information is relevant only if you’re using the UnderStrap theme,  or any child theme of it – like our own CustomStrap.

FAQ permalink