Development BuSo Lightning - The Fastest Wordpress Theme

Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Hey @Ryuzaki, can you help me out?

What if I wanted to have the featured image above the headline and in full width of the container?

How would I go around doing it?
Go edit single.php from this:
Code:
<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->
to this:

Code:
<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                      <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
<h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->
The images are set by default to fill the container... I believe. Because I had issues getting it to not do that. Do you mean like, completely full screen stretch without any container?

Edit: Oh, were you talking about category pages?
 

TacoCat

Bueno...
BuSo Pro
Joined
Apr 2, 2015
Messages
422
Likes
392
Degree
2
Go edit single.php from this:
Code:
<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->
to this:

Code:
<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                      <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
<h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->
The images are set by default to fill the container... I believe. Because I had issues getting it to not do that. Do you mean like, completely full screen stretch without any container?

Edit: Oh, were you talking about category pages?
I mean something like this:

http://www.developgoodhabits.com/

On home page, where it lists all the articles, I want to get the same result as this page has.
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
@TacoCat Yeah, so, its essentially the same code that I posted above, you just have to edit index.php instead of single.
Code:
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
         
              <?php if ( has_post_thumbnail() ) { ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
              <?php } ?>

              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p>This was put in a cat: <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php the_excerpt(); ?>
         <?php endwhile; ?>
Now, the image full width is already set for small screens, you'll just need to change the break point / remove it.
Code:
@media (min-width: NUMBER px;)
img.attachment-thumbnail {
    float: left;
    padding-right: 25px;
    width: 240px
    height: auto;
}
 

TacoCat

Bueno...
BuSo Pro
Joined
Apr 2, 2015
Messages
422
Likes
392
Degree
2
@TacoCat Yeah, so, its essentially the same code that I posted above, you just have to edit index.php instead of single.
Code:
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        
              <?php if ( has_post_thumbnail() ) { ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
              <?php } ?>

              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p>This was put in a cat: <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php the_excerpt(); ?>
         <?php endwhile; ?>
Now, the image full width is already set for small screens, you'll just need to change the break point / remove it.
Code:
@media (min-width: NUMBER px;)
img.attachment-thumbnail {
    float: left;
    padding-right: 25px;
    width: 240px
    height: auto;
}
Thank you. There are two issues, that arise from this.

First:

I'm not sure what does this, I'm not sure that it is CSS or HTML as it probably has nothing to do with it. The image looks like shit. It automatically creates a thumbnaul from it 240x240 (640x640 if I put it like that) so it cuts off parts of the image and makes the quality absolutely terrible, although, the same size in MEDIA looks terrific.

Second:

About the thumbnail, how to I make it use the pictures proportions? Right now it is 640x640 or squeeze the image.

Thanks @Nat
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Thank you. There are two issues, that arise from this.

First:

I'm not sure what does this, I'm not sure that it is CSS or HTML as it probably has nothing to do with it. The image looks like shit. It automatically creates a thumbnaul from it 240x240 (640x640 if I put it like that) so it cuts off parts of the image and makes the quality absolutely terrible, although, the same size in MEDIA looks terrific.
@Nat
Whoops, my bad. I have a test site up with BuSo that I screw around with and I guess I must have changed the Wordpress thumbnail since it looked good on my end.

One way to mess with this would be to go into your functions.php and add this

Code:
set_post_thumbnail_size( 500, 300, true );
And change the dimensions to what you want. Not sure if that is good WP form/etiquette but I think it will do something.

This should be a helpful reference: https://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

Second:

About the thumbnail, how to I make it use the pictures proportions? Right now it is 640x640 or squeeze the image.
That's gonna be CSS plus getting a thumbnail thats the right size... I suck at CSS, but I think something like this will work. Play around with it
Code:
img {
  display: block;
  max-width:XXXpx;
  max-height:XXXpx;
  width: auto;
  height: auto;
}
I think you can also try adding two containers
Code:
.image-container{
  width: XXXpx;
}

.an-image{
  display: block;
  height: auto;
  width: 100%;
}
 

TacoCat

Bueno...
BuSo Pro
Joined
Apr 2, 2015
Messages
422
Likes
392
Degree
2
@Nat It seems that the problem with the quality of the image is that it sets the original thumbnail size 150x150 and therefore when it stretches it, it ruins the quality. Any ideas on that?

**EDIT**

@Nat it seems that the fix with set_thumbnail_size doesn't work. It still uploads images in the same proportion as before.

**EDIT 2**

I found the solution, pretty dumb of me. :D the function

the_post_thumbnail(' THIS IS THE SIZE OF THE IMAGE ')

I changed that from thumbnail to full and now it works like a charm.
 
Last edited:
Joined
Feb 17, 2017
Messages
41
Likes
34
Degree
0
As someone with no developer experience whatsoever (basic html and css, no php, etc.), is BuSo Lightning still a good theme to choose?
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
As someone with no developer experience whatsoever (basic html and css, no php, etc.), is BuSo Lightning still a good theme to choose?
If you like the way it functions, then sure. If you want to change colors and some minor things, sure. If you have something more substantial in mind and want a fast base theme to expand upon... sure (unless you're not a developer, in which case you should find something with ready-made options to choose from).

This is all about speed and a minimal design. All extras are up to you to provide. If you're capable, have at it. If you're going to install a million plugins to get it where you want it, you might as well not bother. You'll be better off choosing a more bloated theme that's closer to your vision.
 

Dreo

BuSo Pro
Joined
Jan 15, 2016
Messages
28
Likes
10
Degree
0
Any update on Wildfire? What will be so different vs Lightning? Going to build a new site or two on Lightning, but didn't know what else Wildfire will be packing.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
Any update on Wildfire? What will be so different vs Lightning? Going to build a new site or two on Lightning, but didn't know what else Wildfire will be packing.
Nothing right now. Definitely don't wait on it. One day it will be released but that day is not near.

The difference will be that it won't be restricted to developers. It won't be minimal. It will be optimized but I won't NOT add a feature just because of speed. I'll tie into the customizer. It'll have a full blown options panel with all types of template options. It will be perfect for viral and magazine sites, and it will be ready to go right out of the box after you go to the options panel and fill out your preferences.
 
Joined
Feb 9, 2015
Messages
26
Likes
15
Degree
0
In header.php I had to remove <?php bloginfo('name'); ?> from the title tag in order for the title to work correctly with my SEO Wordpress plugin.

Else the blog name was appended to the title without a separator or even a space character, when the SEO plugin was enabled. Never happened with any other theme so far.

If anybody is running into the same issue, the needed change in header.php is as follows:

Code:
  <title><?php if ( is_front_page() ) : ?><?php bloginfo('name'); ?><?php else : ?><?php wp_title('| ', true, 'right'); ?><?php bloginfo('name'); ?><?php endif; ?></title>
to

Code:
  <title><?php if ( is_front_page() ) : ?><?php bloginfo('name'); ?><?php else : ?><?php wp_title('| ', true, 'right'); ?><?php endif; ?></title>
 
Last edited:
Joined
Feb 9, 2015
Messages
26
Likes
15
Degree
0
The BUSO theme doesn't create a H1 tag for tag pages.

To fix this you can add the following code in index.php right below line (after opening of the div tag with class main-left):

Code:
    <?php if ( is_tag() && $paged < 2 ) { ?>
      <div class="main-wrap">
              <div class="post-wrap">
                   <h1><?php single_tag_title(); ?></h1>
              </div>
      </div>
    <?php } ?>
 
Joined
Oct 9, 2014
Messages
579
Likes
1,150
Degree
2
Just wanted to mention, tested Lightning the other day with WPEngine's PHP7 compatibility checker plugin. Lightning tests out 100% compatible with PHP7, so there's that option if you want to squeeze even more speed out of your site: PHP 7 performance overview
 

SSG

Dōmo arigatō, Mr. Roboto
Joined
Nov 20, 2016
Messages
33
Likes
33
Degree
0
Is the grid using GetSkeleton? Just want to clarify because I was going to use this as a base for a quick gig and your class names are so far identical.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
Is the grid using GetSkeleton? Just want to clarify because I was going to use this as a base for a quick gig and your class names are so far identical.
Yes, it's a combination of a normalization of CSS, the skeleton from there, and then everything is built up from there.
 
Joined
Jan 14, 2017
Messages
249
Likes
235
Degree
1
Just wanted to give another thumbs up for Buso Lightning! I used it for one of my recent projects and customizing it only took a few hours to get it looking pretty much how I want it. And it's blazing fast!

I do have one question, I edited the php and css files using the editor in the theme settings menu. If the theme ever gets updated in the future will I lose all of my changes? I have taken backups of all the files but since I never made a child theme I'm assuming my changes will be overwritten when the theme is updated.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
Just wanted to give another thumbs up for Buso Lightning! I used it for one of my recent projects and customizing it only took a few hours to get it looking pretty much how I want it. And it's blazing fast!

I do have one question, I edited the php and css files using the editor in the theme settings menu. If the theme ever gets updated in the future will I lose all of my changes? I have taken backups of all the files but since I never made a child theme I'm assuming my changes will be overwritten when the theme is updated.
Typically, yes, but I'm not pushing auto-updates to it. So in the event that you did want to update it, you'd do it manually, which gives you a chance to save your changes.

But also, Lightning is "done." There's no substantial updates to make to it at this point. The only time there'd be an update is if Wordpress deprecates one of their most common functions, which isn't likely to happen. And if that ever became the case, they'd replace it with another and I'd give instructions on exactly which PHP template to change on which line, copy and paste style.

You're okay, is what I'm saying, in the case of Lightning. But on other themes, most definitely use a child theme!
 
Joined
Apr 3, 2017
Messages
5
Likes
4
Degree
0
Hey,

Loving 2.0 so far, thank you so much!

I had a question though about the max width of .container. I changed it from 960px to 1060px. However, this leaves me with a gap in the padding, meaning the .main-left wont stretch to the new space. I tried adding a fixed width, like so:

Code:
@media (min-width: 1000px) {
    .main-left {
        float: left;
        width:65%; /* added */
        margin-right: 340px;
        padding-right: 30px;
    }
}
This fills out the gap but it messes up the responsive format. When I resize the sidebar jumps down until below 1000px, unlike the vanilla template. Any ideas?
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
@DavidStacks, I can't replicate the issue. You should be able to change the value to...
Code:
.container { max-width: 1060px }
Or whatever number you want, without having to change anything else. The .main-left class should auto-fill the space because it's floated. There's no width explicitly set, so it should go to 100%, minus the 340px margin & 30px padding for the sidebar. I just confirmed this on the demo using the browser's developer tools. Any width I chose and it auto-filled the space.

This is a shot in the dark, but if you're using Thrive Architect or one of those page builders, I've noticed they don't work well without an explicitly stated width. Obviously we can't do that here, but you can use the CSS method calc() to calculate the width. So you can do something like this on the .main-left:

width: 100% - 370px;

Which will calculate and repaint on the fly like normal. If it's not a case of a plugin causing problems, then another thing you may have missed is making sure you're changing the values in the style.css and the style.min.css too.

If you're doing a ton of work it's better to just use the style.css in the header so you can see those changes live, then re-minify it and then switch back to style.min.css after that for the speed optimization.

Let me know if either of those solutions were off the mark and we'll solve it.
 
Joined
Apr 3, 2017
Messages
5
Likes
4
Degree
0
Hi Ryuzaki,

Thanks for the elaborate answer. It turned out to be something very silly. The text of the hello world post was simply too short so it wouldn't stretch enough. It seems the text wraps earlier than it has to though, because technically speaking it was long enough if you know what I mean.

Anyway, it works fine now, cheers!

Btw, when I add "width: calc(100% - 370px);" it stretches out even when there is not enough text. That was what I was looking for but obviously it wont be needed as my post will be longer than "hello world" :cool:
 
Last edited:

Apex

To the top
Joined
Jul 8, 2017
Messages
97
Likes
70
Degree
0
In the case of using HTTPS, the Mixed Content error occurs. To fix it, you have to modify the HTTP link to the Google fonts in the header file and put it as HTTPS.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,103
Likes
5,672
Degree
7
In the case of using HTTPS, the Mixed Content error occurs. To fix it, you have to modify the HTTP link to the Google fonts in the header file and put it as HTTPS.
Good catch, I'll fix that and repackage it so that won't be necessary.
 
Joined
Nov 30, 2015
Messages
17
Likes
11
Degree
0
Okay, I've managed to more or less tweak everything to my liking but I'm having a minor issue which is giving me headaches...

On other themes, when I insert a 300x250 adsense ad I simply put it in between <p align="center"> and </p>. Not working here and it's driving me nuts :tongue: Any help would be greatly appreciated
 
Joined
Aug 2, 2017
Messages
43
Likes
22
Degree
0
Okay, I've managed to more or less tweak everything to my liking but I'm having a minor issue which is giving me headaches...

On other themes, when I insert a 300x250 adsense ad I simply put it in between <p align="center"> and </p>. Not working here and it's driving me nuts :tongue: Any help would be greatly appreciated
That is deprecated I think

Try <p style="text-align:center">
or
use a div instead <div style="display:block;margin-left:auto;margin-right:auto;width:300px">