BuSo Lightning - Official Support Thread

@Stephen, Correct. You could do it as a child theme or edit the theme itself at this point (go child theme though). There's no updates being pushed out or any way to auto-update anyways. It's in it's final stage, where everything that needs to be there is there, and anything extra is up to you to add.

The only update that might come in the future is entirely based on what Wordpress does with Gutenberg and how the CSS plays out with their "blocks" or whatever they're calling them. Even then, you'd have to add the update yourself, which will likely just be additional CSS you could add at the bottom of the current CSS file.

Child theme is the most future-proof method of adding onto it.
 
I’m not sure if this is a problem with the theme, but Wordpress doesn’t enqueue jquery or jquery-migrate when I switch to BuSo Lightning. My other themes don’t have this issue. I can’t find anything in Lightning’s functions.php that is stopping them from loading.

I guess I can just have them loaded in the header, but I don’t want to have the extra code if it isn’t required.

I’m in WP5 if that makes a difference. I discovered it since the mobile menu isn’t working in any of my browsers across all devices and I get a console error that the menu.min.js can’t find a function named $.
 
@mikey3times, just hang tight. I'll investigate that when I address the rest of the changes that I need to make for WP 5.0. I may be able to start working on it within a few days if I manage to clear some work off the table, which seems likely.
 
That's because the script is not enqueued. It's on the footer.
Delete it from the footer and add this on fuctions.php
Code: 
/**
 * Enqueue a script with jQuery as a dependency.
 */
function wpdocs_scripts_method() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/menu.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
 
I did what @DarkRed suggested, but I still had to make the following change to the menu.js and menu.min.js files:

Code: 
// For Mobile Menu Expansion
jQuery(document).ready(function($){
    $(".mobile-only").click(function(){
        if ($(".mobile-menu ul").hasClass("expanded")) {
            $(".mobile-menu ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $(".mobile-menu ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});

The key is in the first line, where you need to use jQuery instead of $ and then add a $ inside the function ().

I also added the following code to the stylesheets to make the the cursor into a hand on the mobile menu when viewed on desktop:

Code: 
.mobile-menu {cursor: pointer;}

For what its worth, I think enqueuing the stylesheets is what should be done. I had to do that in my child's functions.php to make sure my child stylesheets get picked up. Again, I'm not a developer so I may be wrong.
 
mikey3times said:
For what its worth, I think enqueuing the stylesheets is what should be done. I had to do that in my child's functions.php to make sure my child stylesheets get picked up. Again, I'm not a developer so I may be wrong.
Click to expand...

You're right and I've already added that to the update that I'll roll out ASAP. This was built before many people were using HTTP/2. Now that that's becoming fairly widespread, I'm going back to enqueueing for this theme as well as using some newer methods that'll make things even faster in regards to jQuery and other render blocking files that are forced on us with Wordpress.
 
I'm bumping this so people know it exists.

I just migrated a ton of old posts from the marketplace to this new thread and highjacked the opening post. I'll drop links to this thread in the marketplace thread too. Thanks for all the support, questions, and usage of the theme!
 
@Ryuzaki I found BuSo Lightning theme have Double Title In the header, any solution?

iCXMLJN.png
 
@rsheng, Good catch. This is because Wordpress is now outputting the <title> tag through wp_head so we no longer need to do it manually and so SEO plugins can hijack it and overwrite them. Wordpress usually finds the "manual" title tag and strips it out, but that's not happening in this case since I've nested it within an if/else statement and added some extra magic to it.

I'll fix that up today and maybe make another change. Thanks for pointing that out.

All you need to do if you already have this installed is delete the following out of header.php:
Code: 
<title><?php if ( is_front_page() ) : ?><?php bloginfo('name'); ?><?php else : ?><?php wp_title('| ', true, 'right'); ?><?php bloginfo('name'); ?><?php endif; ?></title>
 
scottb said:
Is there a place to download the newest version of Buso Lightning? I could only find links to the 2.0 version.
Click to expand...

The Marketplace Thread here: BuSo Lightning - The Fastest Wordpress Theme

It contains the most up-to-date version. We don't host any old versions. @CCarter made me aware that I had failed to update the version in the CSS file, which is now done. The most current version is 3.1.1, and if you got your "2.0 version" from the thread linked above, then you have the 3.1.1 version. I had simply forgotten to increment the version number in the CSS / readme files.
 
I decided to try BuSo lightning for a side project.
I set it up, and wrote 2 blogposts. That's it.

I tried to check my websites mobile speed, and got this result:
d2f9105659c336c7fb97d9e30aa761a3.png

No images, just text. Not even an image for a logo.
I'm not sure of a checklist of where to start to increase the speed.

Some other tests:
9649588d393d6735d2f0638b5620af2f.png

-----
0b6bffd512de67ae75c1a408f692e19a.png

I know that I am not supposed to just use somebody else's work and expect it to be fast.
But from what I understood, BuSo lightning stripped everything back to it's essentials.

From that perspective it's hard to see how it can get a low grade. Especially since I haven't done anything to change it.

What I get out of my info, is that I should be caching more.
Not sure what "compress transfer" is, but at a guess it would be having my images compressed?

Everything else I'm inclined to blame on my hosting. I fear this is the noob way of looking at it.
It also seems to be completely wrong, because my other website scores like this:
85489eb90d01a6374bb45073669c0c89.png

This website is bigger, has images, and is on the same hosting.

I'm feel like an idiot having to ask this... But I really don't see how this can be.
The only difference is that my second website runs on Prestashop.

I find it hard to believe their performance is better than wordpress + BuSo lightning.

I must be doing something wrong.
 
WinMore said:
From that perspective it's hard to see how it can get a low grade. Especially since I haven't done anything to change it.
Click to expand...

All the above are before your request even hits wordpress nor BuSo theme:

1. First Byte Time (Time To First Bytes = TTFB) is your server's response time. Has nothing to do with Wordpress or your theme.

2. Compress Transfer - is whether you are using gzip to compress files before sending them to users. Has nothing to do with Wordpress or your theme.

3. Compress Image - Same as above - gzip setting is edited at the apache2 or nginx configuration file level.

4. Cache Static Content - that is the htaccess or nginx setting of how your website tells the user's browser to cache files: css, gifs, images, javascript, html, fonts, etc. This has nothing to do with Wordpress or your theme.

5. Effective use of CDN - this is whether you enabled a CDN like cloudflare (boo!) on your domain.

--

You can create a simple Hello World HTML file (Html Tutorial Hello World) and upload it to your server with FTP/SFTP, then run the pagespeed test on it and it will give you the exact same errors. That tells you that BuSo Lighting is not the problem.

Someone in the past on your other website did basic speed optimization like setup your htacces, apache & nginx configuration files. Perhaps the person who installed PrestaShop.

That's the thing about web development - we do a ton of ground work that's pretty much hidden from average website owners to make the user experience fast that's difficult to explain. The developer who setup your PrestaShop did a great job without you knowing about it.

Edit: Take a look at the Digital Strategy Crash Course: Day 27 - Page Speed Optimization Most of what I talked about above is touched on within it.
 
bernard said:
How do I set a Favicon on BuSo lightning?
Click to expand...
Hey bernard. Can't you just change it on Theme options > Site identity

If not, just use some code. Look on google for something like: how to change wordpress website favicon, and add the code to the header.php

If you are using a child theme, just use some code like this on functions.php to add HTML to the header:

function child_theme_header_script() { ?>
<!-- Your HTML goes here -->
<?php }
add_action( 'wp_head', 'child_theme_header_script' );
Click to expand...
 
MrSanti said:
Hey bernard. Can't you just change it on Theme options > Site identity

If not, just use some code. Look on google for something like: how to change wordpress website favicon, and add the code to the header.php

If you are using a child theme, just use some code like this on functions.php to add HTML to the header:
Click to expand...

Thanks but I'm sure @Ryuzaki made an easier option.
 
bernard said:
How do I set a Favicon on BuSo lightning?
Click to expand...

In header.php at the top (currently lines 13 and 14) you should see this:

PHP: 
<!-- Favicon -->
  <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" type="image/x-icon">

This tells the href="" part of the <link> tag to list the location for the favicon.ico file at the root of the /wp-theme/busolightning or whatever you called your version of the theme.

So then this HTML gets spit out at the top of the header for every page on your Lightning site. The browsers and Google and everyone knows to look for the favicon where linked in the <head>. And if you don't give it a location, it checks for a favicon.ico in the root folder, so you don't even have to tell them.

But telling them the location gives you the advantage of changing the location. It's also become acceptable to use PNG files if you want, and way larger than the typical 16 x 16 pixel choices we were given in the past. This is the best set of guidelines for making everyone happy (browsers, search engines, mobile devices, etc).

As far as there being an easier option... You simply need to replace the favicon.ico file on your server in your theme folder. If you want to change to a PNG file then delete the .ico file and add a .png and change the code in the PHP snipped above to .png instead of .ico.

There's no "theme options panel" method for doing it in Lightning. I wanted to avoid as much of that kind of stuff as possible.
 
First of all BIG THANKS for making and providing this theme.

So far I have been using it on 2 websites and got a question (I am not Tech at all as you will notice based on the question.)

How do I style up the"Read More »" buttons to look like this:

TRqOQjE.png


Thanks for the support.
 
Last edited by a moderator:
@Seventy, this isn't really a support question related to BuSo Lightning. It's an HTML and CSS question. I'm still happy to point you in the right direction.

The Read More link is an HTML anchor tag with the class read-more. It's final form ends up like <a class="read-more" href="#">Read More »</a>.

This tells you that you want to target the CSS class read-more with some CSS code within the style.css stylesheet (and then when you're done you need to re-minify it and replace the style.min.css stylesheet, which is the one being used).

So within the style.css, search for .read-more (that's how CSS classes are used, with a period in front) and find the existing code. It's:


CSS: 
.read-more {
    display: block;
    position: relative;
    text-align: right;
}

Plus any cascading code for the <a> tag itself, which is:

CSS: 
a {
    color: #4582BF;
    text-decoration: none;
}

Anything you add to or change within the .read-more class will change the appearance of this link. If you want to turn it into a button appearance, you can either edit the HTML to change it to a button class or button element, or change the existing CSS around. Based on your skillset, you'll probably want to do the latter.

So you might think of adding some padding, adding a background color, adding a border-radius, changing the text color and size, and adding a different color when the user hovers the button, etc.

I'm not going to spoonfeed you that. You'll want to find a CSS resource site that lists out these basics and explains how to use them. W3Schools is probably the best organized.
 
Been a long DAY, excuses for that.

Thanks a ton for the detailed answer, will figure it out from there!
 
Has anyone paired up Lightning with Elementor? (Ha just noticed how the names fit together so that's a good sign!)

I know there are mixed feelings about page builders but has anyone tried this combo?

Elementor comes with a "blank" theme but having some design in place already would save time (hence thinking about Lightning.) I'll try it out and report back eventually if I end up going down this path but I'm not launching my next site until November or December.
 
@TheCurator Buso Lightning works with Elementor.

Couple of things to keep in mind.
  1. Default Template (from Lighting) is content left, sidebar right.
  2. Full Width (from Lightning) is content only - no sidebar.
If you want to have a section span the full width of the page you can use the template overrides provided by Elementor (Elementor Full Width or Elementor Canvas)

If you plan to not add any major functionality to BuSo Lightning, but maybe some minor CSS tweaks, I'd suggest you add these to the WP Customizer (Frontend->Customize->Additional CSS).

When you're done with these you can have something like Autoptimize pick them up and aggregate them into one or more CSS files.

Based on the HTTP protocol (HTTP/1,1, HTTP/2.0) you can choose to let Autoptimize et al. create one single or multiple CSS files.

If you want to extend BuSO Lightning beyond a couple of minor CSS tweaks your best bet is to create a Child Theme

1: Create a folder (directory) on your desktop and name it "busolightning-child" (without the quotes!)
2: Inside the folder you just created (busolightning-child) you need to create and add a css file named "style.css"
3: Open your style.css file in a code editor like Visual Studio Code.
4: add the following:
CSS: 
/*
Theme Name: Buso Lightning Child Theme
Theme URI: https://www.buildersociety.com/threads/buso-lightning-the-fastest-wordpress-theme.763/
Template: busolightning
Author: Builder Society
Author URI: https://www.buildersociety.com
Description: The Fastest WP Child Theme Ever
Version: 1.0.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: busolightning-child
Tags: White, Blue, Light

BuSo Lightning Child, Copyright 2015-2020 BuilderSociety.com
BuSo Lightning Child is distributed under the terms of the GNU GPL
*/

/*
 * Add your custom styles below. The parent theme's styles are loaded automatically by default.
 * If you want to change this, see functions.php
 */
5: Save & close.
6: Create a file named "functions.php" inside the "busolightning-child" folder.
7: Open this in VS Code and add the following:
PHP: 
<?php
/*
 * Loads the language files of the BuSo Lighting child theme (if any).
 *
 * If you use any of the WordPress localization functions, you will need to provide the same text domain
 * exactly as the one mentioned below, i.e. 'busolightning-child'
 * If you change this value, then you'll need to modify your function calls accordingly.
 * Localization functions reference: https://codex.wordpress.org/L10n
 *
 * If you want to use localization, then uncomment the following line and don't forget to actually add a 'languages' folder inside the 'busolightning-child' folder.
 */
//load_child_theme_textdomain( 'busolightning-child', get_stylesheet_directory() . '/languages' );

add_action( 'wp_enqueue_scripts', 'busolightning_child_enqueue_scripts', 15 );
function busolightning_child_enqueue_scripts() {

    /*
     * The Buso Lightning theme's stylesheet is loaded by default by the parent theme itself.
     *
     * This means you can easily add your own CSS customizations by just adding them
     * inside the BuSo Lightning Child's style.css file.
     *
     * If you DON'T want the Buso Lightning Child stylesheet to load, then uncomment the following line.
     */
    wp_enqueue_style( 'ryu-child-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0.0', 'all' );

    /*
     * If you DON'T want the Buso Lightning (the parent) stylesheet to load, then uncomment the following line.
     */
    //wp_dequeue_style( 'ryu-style' );

}
8: Save & close.
9: Copy/paste "screenshot.png" from "busolightning" into "busolightning-child"
10: Done

Zip "busolightning-child" and you can upload it as a child theme into your WP install.
 
Hello everyone, I noticed that the theme is currently not available.
Not a big deal for me, I still have the version I downloaded a while back.
But some people I recommended it to are kinda bummed.
Is there a reason why it's currently not available and any idea when it will be back?

For now, I'll probably just share my version. In any case, thanks for the awesome theme it has worked wonders for me!
 
You must log in or register to reply here.
Back