Which Themes should I use with LiveCanvas?
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.