This wordpress website is powered by the amazing bootstrap responsive wordpress theme from 320press, that I personally thank for the great work.

Our goal was to render a professional-like website with wordpress and at the same time achieve to have a responsive layout on phones and tablets, so we installed the theme and all works fine on FF and Chrome.

But when we checked the website on iPhone there was an issue: the CSS system is client-compiled with LESS and on older devices (such as my iPhone 3) the javascript execution time was longer than 10 seconds. Safari throws an exception that generates an error, and the website does not show well.

Solution:

  1. Comment in wp-content/themes/wordpress-bootstrap/header.php the loading of LESS variables on line 41-42 
    <!--                                                                                                                 <link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/less/responsive.less">                                        
-->
  2. Substitute the theme_styles() function in wp-content/themes/wordpress-bootstrap/functions.php starting from line 455 with this code: 
    function theme_styles()
{
    // This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css.
    wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '1.0', 'all' );
    wp_register_style( 'bootstrap-responsive', get_template_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
    wp_register_style( 'wp-bootstrap', get_template_directory_uri() . '/style.css', array(), '1.0', 'all' );

    wp_enqueue_style( 'bootstrap' );
    wp_enqueue_style( 'bootstrap-responsive' );
    wp_enqueue_style( 'wp-bootstrap');
}

    (substantially you have to uncheck some comments already inserted by 320Press)

 

If this does not work, or you want to continue to utilize the power of LESS for customizing stylesheets, you can compile the LESS files into CSS, but… server side.

We achieved this using the optimum less compiler for PHP: http://leafo.net/lessphp/

note: the lessphp wordpress plugin did not work for us… if worked for you, please tell us!

  1. download http://leafo.net/lessphp/src/lessphp-0.3.8.tar.gz in your web root
  2. change permissions to your theme CSS dir
  3. untar on your web root
  4. create a PHP file that compile your CSS
  5. compile…

These are the root linux shell commands for this:

# cd /YOURWEBSITEROOT/wp-content/themes/wordpress-bootstrap/
# chown www-data.www-data css/
# wget http://leafo.net/lessphp/src/lessphp-0.3.8.tar.gz
# tar xzvfp lessphp-0.3.8.tar.gz
# echo "checkedCompile(\"less/bootstrap.less\", \"css/bootstrap.css\"); ?>" > compile.php
# chmod 600 compile.php
# php compile.php

 

And you’ll have your brand new bootstrap.css file ready to be interpreted.
Every time you’ll do modify your LESS files, you have to lauch the last command (php compile.php)
Final note: I invite you to download the theme, this is only a little issue on a great work!