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 4 – 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.
Picostrap lets you use WordPress Customizer to create your very own 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.
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 it’s CSS library ON TOP of your Theme’s CSS – another source of bloat, duplication, disorder, and poor performance.
LiveCanvas has a different approach, for the sake of DRYness.
The LiveCanvas plugin assumes you are using a theme which is based on Bootstrap 4 – and does NOT load ANY extra CSS or JS file.
So bloat is minimized – but there’s another interesting related fact.
If for some reason you want to switch off the page builder plugin, the site will still be there with LiveCanvas.
Not with any other page builder out there.
These are the recommended themes that we suggest for having a powerful yet lightweight core:
1. Our micro starter theme, picostrap. Batteries included
Picostrap is a fully free and LiveCanvas-friendly minimal Bootstrap starter theme.
Released in early Nov 2020, we are actually at the third iteration of our theme, and it’s lighter and faster than ever.
It has some unique power tools for frontend developers, like a built-in SASS pipeline, and a “live reloading” tool – all without requiring to install command line tools.
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 and WordPress. It will help you achieve good PageSpeed results without getting crazy – just keeping your pages reasonable, will be enough.
If you were used to CustomStrap, you’ll immediately feel at home with picostrap.
Why did we end up rewriting a theme for scratch?
Well times have changed; time to drop jQuery and embrace vanilla JS. Time to drop also FontAwesome and other icon fonts.
Picostrap recently got WooCommerce compatibility so it’s a no-brainer choice.
Please consider that picostrap was born merging the best of Understrap and CustomStrap, which are the other Themes listed below, and adding some polish.
So you may consider the reading below on a different perspective.
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 positive votes from worldwide developers in his league: WordPress and Bootstrap 4.
It’s Woocommerce-compatible, SASS command-line friendly, and includes a very basic and unopinionated styling – so you can “bend” it easily adding your own code if you want.
It lacks customization options, and it’s quite “geek” oriented – that’s why we created a child theme to add some sugar to it, CustomStrap.
It’s SASS pipeline is based on command-line tools that you should install to take profit of Bootstrap.
CustomStrap is our own former solution, and it comes as an UnderStrap child theme.
It’s free and open source as well. And it rocks.
While adding NO BLOAT to your pages (in fact removing some), it allows to customize the Bootstrap colors and variables without using the command line tools – thanks to its built-in SCSS compiler, directly via the WordPress Theme Customizer.
It adds some really nice options to UnderStrap – plus adding compatibility with the Custom Header & Custom Footer feature of LiveCanvas.
It does all this while keeping things lean and clean.
You can use it like it is or use it as a starter theme to build your perfect site with LiveCanvas.
4. Your own 100% custom theme
If you want to run LiveCanvas with your own custom WordPress Theme, you’re absolutely welcome to do it.
There are very few steps required:
- [mandatory] Your Theme must include the Bootstrap 4.xx min.CSS file – this should sound obvious.
- [recommended] Your Theme must include the Bootstrap 4.xx JS files – if you need to have BS elements that need js support like carousels.
- [mandatory] Your Theme must have an “empty.php” empty page template called “empty” – this template should only call header and footer and the loop. No strange things. Should take a second to do, butchering your own page.php for example. Here is a sample code:
&amp;lt;?php /* Template Name: Empty */ defined( 'ABSPATH' ) || exit; get_header(); while ( have_posts() ) : the_post(); the_content(); endwhile; get_footer();
- [mandatory] The file above shall be placed in a directory of your theme called “page-templates” (so, mimicking the UnderStrap structure, eventual theme switches will be flawless without hacks)
- [not more necessary as from LC 1.6 now uses inline SVG icons] Your Theme must include FontAwesome 4.7
- [mandatory] Your Theme must include the following line in the functions.php file to get rid of the annoying dialog recommending UnderStrap:
As you see it’s really easy to make your theme work with LiveCanvas.
If you are a theme developer and feel like dropping a question, get in touch. We like having educated email chats with theme developers.
On another side
Upon first launch, the LiveCanvas plugin will check if one of the themes listed above is used, and show a message if this is not the case.FAQ permalink
How to insert Shortcodes in a LiveCanvas 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
At LiveCanvas, we really love Bootstrap; so we cannot ignore any new wonderful release of this Project. V5 immediately caught our attention.
We have been experimenting with it, from the alpha versions, to the latest b1, to see how things work with picostrap & LiveCanvas.
Things look great – we have a fully functional picostrap5 theme as well – but still – this is just an “internal playground”. There is still quite a bit of homework to do.
To be honest, as the Bootstrap team stated, from Bootstrap 4.x to Bootstrap 5 there are not mind-blowing, paradigm-shifting changes.
No incredible new components, no new CSS silver bullets – like we had from v3 to v4 with utility classes, flex columns.
Most people will just notice the built-in responsive typography with RFS enabled by default. Our users have always had this, just ticking a box in the Customizer, as Bootstrap 4.x supports responsive typography as well – but as an opt-in feature.
Other people will love Bootstrap 5’s abandon of jQuery.
That makes a lot of sense. We already do it in picostrap, thus with Bootstrap 4, using BootstrapNative.
So, basically, using our recommended starter theme, picostrap, you can get most of the “available goodies” of Bootstrap v5 today – so don’t stress too much on using the latest.
On another side, no doubt LC will support BS5 in a few months (and continue supporting BS4 as well).
There’s a bright future out there for Bootstrap lovers!
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:
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