Development BuSo Lightning - The Fastest Wordpress Theme

[Tao]

I am looking to start using Lightning now that Gutenberg has been released, migrating away from the bloat that is Thrive Architect.

 

[Ryuzaki]

To @Tao and anyone else wanting to start using Lightning, I posted this is another thread yesterday:

If you can hold out, I'm going to update Lightning fairly soon (early January?). Or if you do move forward, don't change the CSS that comes with it, just add your new CSS below the stuff that ships with it in the style.css (or preferably use a child theme). It won't be huge changes visually but the CSS will change quite a bit. It's going to get faster too.​

​

If you do decide to get started, I'll update the changelog and give a set of directions on exactly what changed and how to fix it for your site. Part of that will be adding styling for the Gutenberg blocks so you'll know what to change versus having to figure out what to add.

 

[Ryuzaki]

BuSo Lightning 3.0 has arrived!
​

What's New?
To hit on the main points, the mobile menu has been completely recreated from the ground up. The breakpoint to tablet makes more sense now and keeps the main content area from being too thin on desktop. Tons more Wordpress bloat reduction. Faster everything. And Lightning is now Gutenberg ready!

Watch Out!
CSS Changes - Hopefully you created a child theme after you installed this, right? If so, you'll have no issues unless you drastically have changed any existing CSS versus only adding to it. If that's the case you should have no problem fixing any minor issues that appear.

Robots.txt - I'm now packaging a robots.txt file with the installation, so if you have an existing one, back it up before you upload this update. You can port your changes into it or replace the robots.txt with your own copy, but definitely do a comparison and keep what I added.

Changelog

= 3.0 =​

* Robots.txt is packaged internally now, watch out for that​

* Completely rebuilt mobile menu, it's much better now​

* Mobile menu only supports a depth of one sub-menu, meaning no sub-sub-menus​

* Breakpoint to Tablet now at 1100px instead of 1000px​

* jQuery unpackaged & enqueued​

* Style removed from header & now enqueued​

* Removed version parameters from enqueued files​

* Favicon included for easy replacement​

* WP emoji bloat removed​

* WP header bloat removed​

* WP version footprint removed​

* Empty search results no longer redirect to homepage​

* Empty search results return no posts & indicates an empty search query​

* Search results now display identically to homepage & categories​

* Google Fonts link now protocol-relative​

* Google Fonts loading deferred to footer. FOUT can be reduced by pre-connecting to Google Fonts domain​

* Added padding to top-level comments​

* Fixed extra paragraph tags around category description​

* Fixed a header & footer padding issue regarding main content​

* Fixed pagination margin issue​

* Reduced padding around main content on mobile​

* Excerpts now show 75 words instead of 55​

* Added Gutenburg Block Editor styling​

What You Should Do
First, head on over to the BuSo Lightning Demo and play with the new mobile menu. It's smarter and prettier. Then while you're there, check out the new post concerning the new Gutenberg Blocks, because, yes, Lightning is now fully compatible with the Block Editor.

Then take a long look at this:

That's right. Lightning was and is and will remain the fastest Wordpress theme available for you to build on. With further optimizations on your side that I can't do for you, you can get even faster.

How to Upgrade
You should know this because you're only supposed to be using this if you're enough of a developer to style the theme and add new functionality. So you should definitely be able to update a theme. But I know many people are using it for the speed gains and not styling it at all, so here's the skinny on updating. Download the busolightning.zip below and upload it to the wp-content/themes/ folder through FTP or File Manager, and then unzip it there and allow it to overwrite the parent theme.

*WARNING* - If you customized your Lightning install without a child theme, this will overwrite ALL of your changes. You're better off not updating if that's the case.
​

If you have a child theme, you're fine. If you did heavy customization you may find a few small CSS issues to fix, but otherwise you'll be fine.

How to Download BuSo Lightning 3.0
First, you have to be a member of Builder Society and be logged into your account. Then click the image below to be taken to the special download page:

​

If you're new, you can also check out the demo by clicking on the image below:

​

If you need a little incentive, just take a look at this:

​

And finally, I have a question to ask of you all:

What Would You Like Added?
I'm not promising I'll get to any of this immediately, but I more than welcome any suggestions regarding additions that stay within the BuSo Lightning philosophy of SPEED, SLIM CODE, NO BLOAT.

For instance, I almost added the Sticky Post ability but I didn't want to spend time on a feature I wasn't sure whether people used or not. I don't use them and never have. Would you? What else would you like to see?

I just remembered that I need to add a Tag template, so that's coming next time. Anything else?

Feedback
If you find any issues, please report them to me in a PM or in this thread and I'll fix it up ASAP. Let me know anything you like or dislike.

And remember, the design is minimal. You are meant to add to the design. This theme is meant to be a fast-as-lightning launch pad for you to build your site off of, and not a fully fledged design in and of itself. All of this means you're supposed to be at least a front-end developer to some degree, if not a Wordpress developer who can add more functionality too. If you're a newbie, then consider visiting the official BuSo Lightning Support Thread in the DevOps section here on BuSo and we'll all be glad to help out.

 

[builder]

@Ryuzaki:
Props to you for keeping this updated year after year.

 

[mikey3times]

@Ryuzaki, thank you for your massive efforts on this. I'm sure many others also appreciate the work you put in.

I think the new mobile menu is a major improvement. However, I recommend adding this code to the stylesheet for desktop users with a narrow window:

.mobile-only, .sub-menu-toggle {cursor: pointer;}

I use manual excerpts and when I do that, the Read More button doesn't appear. It isn't a big deal (I added it in the category.php file), but it might be nice to set the default functionality to include it. Here is more detail.

I had a nightmare of a time getting the thumbnails to work. I kept getting the 150x150 thumbnail on category pages. I finally realized that you need to go into Settings > Media and change the Thumbnail Size to be 425 x 280 like so:

Feature Requests
These can be accomplished by plugins, but I find that most plugins add multiple server requests and include every conceivable option. BuSo members probably don't need that since they can do a lot on their own. Obviously, take these with a grain of salt. Maybe they belong in Wildfire.

Mega Menu
I'm looking for a very simple mega menu along the lines of what Nerdwallet has:

This would be very helpful in separating reviews from informational posts. As you can see, this is very basic and doesn't include images or anything crazy or annoying. However, it does help visitors find what they need easier.

Automatic TOC generator
This is a pretty common need and I assume a lot of people use it for longer pieces of content and on-page SEO. I use Easy Table of Contents, but it is pretty heavy. I'm thinking about combining more of their files, stripping others, and making my own version of their plugin that has fewer server requests. Although, it may not be worth it.

 

[Ryuzaki]

~ BuSo Lightning 3.1 ~
​

What's New?
- I added a lot more Gutenberg Block Editor styling, because the Columns block was basically useless beyond 2 columns. Wordpress had to make assumptions about breakpoints, and they totally sucked. I feel bad for every theme developer out there, especially if they didn't standardize their themes all at the same breakpoints.
- I added a Tag Template just for convenience. It's literally just a copy of the category.php template renamed as tag.php.

What Do You Need to Do?
If you're not using the Column Block any where then you don't really have to bother. Otherwise you can just copy the bottom-most portion from the CSS file for the Block Editor stuff and paste it over that section on your parent theme.

If you want a tag template you can download the theme and pull just that one tag.php template out and add it to yours in the same spot. Easy cheesy.

 

[Ryuzaki]

~ BuSo Lightning 3.1.1 ~​

Hotfixes

• Removed manual <title> tag from header.php and telling Wordpress to inject it through wp_head() instead.
• Increased the max-width of the container from 960px to 1100px, allowing for a better desktop experience while having no effect on mobile or tablet.

 

[Ryuzaki]

~ BuSo Lightning 3.1.1 ~​

Hotfixes

• Fixed JS issue where navigation menu text would be invisible exactly and only at 1100px

Shoutout to @mikey3times for finding this.

The basic explanation is that the switching between mobile menu and normal menu occurs at 1100px. CSS hides the desktop menu text at 1100px when shrinking the browser down, but I had the = for displaying the mobile menu text on the wrong part, so that there was a single pixel width where there'd be no text in the menu navigation area. We simply move the = to the other comparison operator and it fixes it.

Manual Fix:

Find this part of the code in the menu.js file:

// Functions for Above Operations
function resetNav() {
    if ( $(window).width() <= 1100 ) {
        $('.header-menu ul.menu').css('display', 'none');
        $('.sub-menu-toggle').html('&#9660;')
        closeMenu();
        closeSubMenu();
    }
    if ( $(window).width() > 1100 ) {
        $('.header-menu ul.menu').css('display', 'block');
        closeSubMenu();
    }
}

And simply move the equal sign from the if ( $(window).width() <= 1100 ) { line to the second similar line if ( $(window).width() > 1100 ) {.

Or you can replace that whole section with this corrected version:

// Functions for Above Operations
function resetNav() {
    if ( $(window).width() < 1100 ) {
        $('.header-menu ul.menu').css('display', 'none');
        $('.sub-menu-toggle').html('&#9660;')
        closeMenu();
        closeSubMenu();
    }
    if ( $(window).width() >= 1100 ) {
        $('.header-menu ul.menu').css('display', 'block');
        closeSubMenu();
    }
}

IMPORTANT:
Don't forget to then copy the entire menu.js file contents out into a website ilke https://javascript-minifier.com/ and minify it. Copy and paste the results out and replace the contents of menu.min.js. Then clear your cache on your browser and for your caching plugin as well.

If you want to understand better why this happened, you have to compare in the CSS at which width .mobile-only part was being hidden and displayed (< 1100px), but the desktop menu wasn't popping up until > 1100px, leaving a 1px gap.

I accounted for this put put the = in the wrong spot. Thanks again to @mikey3times for noticing and providing the solution.