Recommended Themes

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(){}