Development BuSo Lightning - The Fastest Wordpress Theme

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,107
Likes
5,678
Degree
7
Somewhere I wrote about this but I can't seem to find them. I code my own with the social network's old sharing API's:

Code:
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a>
 
<a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a>

<a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>
You can wrap the anchors in <span>'s and design responsive buttons entirely out of CSS, including the logos. This will have zero speed impact versus using the buttons they provide that make a million HTTP requests.

I use this in the footer and sidebar. You can do it above the post content too. If you do it in the sidebar don't forget to reset your loop if you have a loop for related or popular posts after the content.
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Somewhere I wrote about this but I can't seem to find them. I code my own with the social network's old sharing API's:

Code:
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a>
 
<a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a>

<a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>
You can wrap the anchors in <span>'s and design responsive buttons entirely out of CSS, including the logos. This will have zero speed impact versus using the buttons they provide that make a million HTTP requests.

I use this in the footer and sidebar. You can do it above the post content too. If you do it in the sidebar don't forget to reset your loop if you have a loop for related or popular posts after the content.
This works great, I love it. I got the Pinterest code to work too.
However... I'm either retarded with CSS or there is something about this theme I don't understand because I cannot get my child theme to override the default buttons. I'm getting a weird mix of some aspects overriding and others that aren't. This is the CSS I'm adding to my child:
Code:
.social_button {
    border: none;
    color: #fffff ;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px ;
    cursor: pointer;
}
.fb-button {background-color: #3B5998;}
.tw-button {background-color: #00aced;}
.gp-button{background-color: #dd4b39;}
.pin-button{background-color: #cb2027;}
And the html is
Code:
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> <button class="social_button fb-button" style="width:49%">Facebook</button></a>
I've tried !important and all: revert; and its not changing.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,107
Likes
5,678
Degree
7
Are you re-minifying and placing these changes in the style.min.css as well?
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Are you re-minifying and placing these changes in the style.min.css as well?
I've got a child theme enqueued like this

Code:
function example_enqueue_styles() {
    wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
   
    wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
   
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');
And I haven't min the child's css at all. It was my understanding that a child theme rests on top of the parent theme, so I didn't think I would ever need to mess with the parent css?
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,107
Likes
5,678
Degree
7
Try a bit more specificity in the CSS like:

button.social_button {}
If that doesn't work, feel free to PM me the site or you can do what I would do, which is use the browser's dev tools to see which CSS files are loading first (or if at all) and figure out why the problem is occurring.
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Try a bit more specificity in the CSS like:

button.social_button {}
If that doesn't work, feel free to PM me the site or you can do what I would do, which is use the browser's dev tools to see which CSS files are loading first (or if at all) and figure out why the problem is occurring.
Finally got it to work, fml I hate styling. Good idea to throw the buttons into post template right above the footer? Not well-versed about best practices. I can't really see why I wouldn't want to have social buttons at the end of every post. And if I decide I want a post w/o I can just make that one post use another template.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,107
Likes
5,678
Degree
7
Finally got it to work, fml I hate styling. Good idea to throw the buttons into post template right above the footer? Not well-versed about best practices. I can't really see why I wouldn't want to have social buttons at the end of every post. And if I decide I want a post w/o I can just make that one post use another template.
That's how I do it. If you want a post to not have it you can wrap a conditional around the buttons that says:

IF {
Don't show for these Post ID's​
} ELSE {
Show the buttons​
}

Versus another template.

By the way, what was the problem with the styling? What made it work?
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
That's how I do it. If you want a post to not have it you can wrap a conditional around the buttons that says:

IF {
Don't show for these Post ID's​
} ELSE {
Show the buttons​
}

Versus another template.

By the way, what was the problem with the styling? What made it work?
The problem had to be some weird combination of enqueuing and CSS. I tweaked the enqueuing and I ended up just deleting everything I had written and starting from scratch with new names etc. The format that eventually worked was
Code:
button.sharebutton{}
.fb-button{}
.tw-button{}
I think one of the issues was that when I had tried the button.sharebutton the first time all of the formatting elements from button were still being applied and it was difficult to tell what was influencing class-"sharebutton fb-button."
Also pretty sure my dumbass had .button.sharebutton for quite some time and that screwed things up lol.
Most likely just me making a dumb slip up once that I never passed over again :smile: :(
 
Joined
Oct 15, 2016
Messages
115
Likes
85
Degree
0
For anyone wanting to go full HTTPS and avoid mixed media error on client browsers:
Go to Theme Header and change:
HTML:
<!-- FONT -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
to
HTML:
<!-- FONT -->
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
 
Joined
Oct 15, 2016
Messages
115
Likes
85
Degree
0
So I'm seeing some issues with this theme - maybe I'm off base here.
1. Theme logo would stretch to max. Even after implementing changes to .logo-strip-text img Width. It still stretched. I got mine to work by setting a style tag on the img property itself in the Header.
2. Images in post are stretched to width of container. If i set it to be 150x150 it will just streatch the image to the width of text box.
3. mixed media error - fixed in above post.

Are the above two errors common for anyone else. I'll continue looking through the CSS till I get it fixed.
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
So I'm seeing some issues with this theme - maybe I'm off base here.
1. Theme logo would stretch to max. Even after implementing changes to .logo-strip-text img Width. It still stretched. I got mine to work by setting a style tag on the img property itself in the Header.
2. Images in post are stretched to width of container. If i set it to be 150x150 it will just streatch the image to the width of text box.
3. mixed media error - fixed in above post.

Are the above two errors common for anyone else. I'll continue looking through the CSS till I get it fixed.
Did you try this?
Logo
Code:
.logo-strip-text img{
max-width: 400px;
display: block;
margin: 0 auto;
padding-bottom: 5px;
}
To stop images from stretching across the width you can just do something like this
Code:
img.smallsize{
    width: auto;
    height: auto;
    padding-bottom: 10px;
    padding-top: 10px;
    max-width: 150px;
}
...
<img class="alignright smallsize" src="">
 
Joined
Oct 15, 2016
Messages
115
Likes
85
Degree
0
@Nat I ended up up modding some of the media settings, changing the width to the desired size, and adjusting the float and margins in CSS. Thanks for the tips though!! I also occasionally forget to run it through a mimimizer :/
 
Joined
Jul 30, 2015
Messages
18
Likes
8
Degree
0
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
 
Joined
Oct 15, 2016
Messages
115
Likes
85
Degree
0
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
Just use the minifier mention earlier in this thread. Do your changes in Style.css then minify and paste into minimal style file.
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
Make changes --> copy CSS --> https://cssminifier.com/ --> copy CSS --> paste into css.min
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
If embedded YouTube videos are causing the sidebar to drop too early (I don't think the default theme has this issue, but I made some modifications and mine was doing it) you can tweak it like this:
Code:
/*Responsive YouTube Container CSS*/
.responsive-container {
        position: relative;
        padding-bottom: 50.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-bottom: 1em;
}
.responsive-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 95%;
        height: 100%;
}
Code:
//Change Video Embed (functions.php)
add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
        return "<div class=\"responsive-container\">".$html."</div>";
}
 
Joined
Apr 19, 2016
Messages
18
Likes
10
Degree
0
Where did you put the meta_date function? Looking to remove the posted by blah and posted on date's for all the posts/pages?

Did a search and can't find those functions, did you rename them?
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,107
Likes
5,678
Degree
7
Where did you put the meta_date function? Looking to remove the posted by blah and posted on date's for all the posts/pages?
It's in the single.php for blog posts and page.php for pages.

single.php:
Code:
<p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?>
page.php:
Code:
<p>Posted on <?php the_time( get_option( 'date_format' ) ); ?></p>
Right below the <h1> tags for the title in both.
 
Joined
Apr 19, 2016
Messages
18
Likes
10
Degree
0
Deleted both of those lines and it's still coming up?

Ahh, it's in category as well. got it, thanks :D
 
Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Ever since reading about WP on this forum I'm super paranoid about adding any plugins. What is the safest and fastest way to add images to recent posts widget?

I'm trying to copy the way BuzzFeed does it
 

Andrewkar

...
BuSo Pro
Joined
Nov 6, 2014
Messages
381
Likes
200
Degree
1
Hi @Ryuzaki
Can you tell me where are the files for search form located? I want to adjust it a bit and have troubles locating it, for example I want to change label etc.
Help appreciated!

Edit: No worries, got it. Just forgot how it works in WP.
 
Joined
Oct 15, 2016
Messages
115
Likes
85
Degree
0
Starting on new project soon, figured I'd build part of it on BuSo. Did some more tweaking and so far so good.

I thought I was doing good:


Then I made one more change and was doing great:


Lightning is literally unbeatable on speed if you must have WP. Can't wait for BuSo WildFire

*edit: this is on shared. time to move up these changes to a vps.
 

Michael

BuSo Pro
Joined
Sep 4, 2016
Messages
313
Likes
204
Degree
1
Starting on new project soon, figured I'd build part of it on BuSo. Did some more tweaking and so far so good.

I thought I was doing good:


Then I made one more change and was doing great:


Lightning is literally unbeatable on speed if you must have WP. Can't wait for BuSo WildFire

*edit: this is on shared. time to move up these changes to a vps.
Post a screenshot back here when you've changed over please. I want to actually see how much further down you get cant the already blazing fast 113ms lol.
 

TacoCat

Bueno...
BuSo Pro
Joined
Apr 2, 2015
Messages
422
Likes
392
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?