BuSo Lightning - Official Support Thread

Great theme! And easy to customize. One problem, maybe it's my fault... When I have installed it I experienced some problems with getting logo right. Background was white while my logo is transparent PNG file. I sorted it out, but maybe it's some glitch so you may want to check it out... Also, Clicky code is still there.
 
Sorry about Clicky AGAIN. I keep letting that slip back in there, forgetting to remove it from the footer.php. Anyone can check to see if it's there and just cut out the <script>. It's 3 lines. I've fixed it on the downloadable zip.
 
Is it possible in the future to have change logs between versions?
I've done a few editing here and there based on Ryu's posts, so that a nawb like me can understand what I need to override in case of updates et al. Thank you. Great theme btw.

The first time I read I was like, man how much this is going to be, thought about buying it, but it was FREE.
Men, I cried for years. Ok maybe not, but nearly enough.
 
Ok, so there is a problem with theme and SEO plugins creating META description. If you install plugin you will have two meta description tags. The first one comes with a theme and doesn't work properly, it doesn't display description, instead it shows: http://www.site.com/description. And Google is showing info from that tag unfortunately, ignoring second one which is correct (generated by plugin).

To fix, just remove this from header:

Code:
<meta name="description" content="
  <?php if ((is_home()) || (is_front_page())) {
    echo home_url('description');
  }
    elseif(is_category()) {
    echo category_description();
  } elseif(is_tag()) {
    echo 'Tag archive page for this blog - ' . single_tag_title();
  } elseif(is_month()) {
    echo 'Archive page for this blog - ' . the_time('F, Y');
  } else {
    echo get_the_excerpt();
  } ?>" />
 
I've been running some speed tests on buso light with w3tc cache plugin. Some of my css and js files were loaded as XY.JS?=version1.2.3. Pingdom and other speed tests cried that this is not fun.

Pingdom complaint:
Remove query strings from static resources.
Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources...

Then I found the following code which can be added to functions.php:

//Removes query strings from static resources
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

So far it works for me. Any feedback?

Also, a noob question. How can I combine jss and css files?

Google gives me the creeps:
Your page has 4 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Just copy paste them into each other and update plugin and php file dependencies?
 
Is it possible in the future to have change logs between versions?

There is a rudimentary change log included, but it's not technical at all. Just your typical "Made a change to this function" kind of log. Ultimately, the plan is to include a versioning and updating feature.

Our plan was to have this featured in the Wordpress repository, which is why Clicky kept sneaking in, and other small things that could be better, like minification of CSS and JS, etc. Wordpress is a stickler about these things so I've left them undone for now.

However, I've given up on Wordpress. They are NOT on the ball. It's been months of them playing hot potato with this theme and getting nowhere. So I do plan on issuing a larger update for this theme soon and just forgetting about Wordpress altogether. This way, I can give you guys the best, including features Wordpress won't allow in their repository. Being able to ping you guys in the dashboard for updates will be awesome. One-click updates.

To deal with your question, what I would do is create a child theme rather than changing the core of Lightning, that way any time you update, you won't lose your changes.

Ok, so there is a problem with theme and SEO plugins creating META description.

Good catch. Dynamically producing meta descriptions is not ideal, so I threw that if/else statement together and totally forgot to check it. I'd recommend using a plugin like Yoast SEO to manage your descriptions. I will fix this issue though for those who don't want to add any plugins. Yoast, for instance, lets you write custom descriptions and save them to the database. That should be a feature in Wordpress by now, but everyone's of the opinion that descriptions don't matter and that Google is smart enough to pull the most relevant piece of the page.

Some of my css and js files were loaded as XY.JS?=version1.2.3.

That would be the Google Fonts css file. The Lightning CSS and JS don't have dynamic tags right now. Ultimately, now that I'm done worrying about Wordpress, I'm going to minify them. You can remove the Google Fonts if you're concerned, but I wouldn't worry about that. It's not going to impact speed so much as just affect some kind of score (by different amounts depending on which speed test or validator you're using.)

Using that function you included in your post... make sure it's not affecting the ability to load the Google Font, or you're pinging their servers and doing nothing with it, but loading a system font instead.

Also, you can't combine CSS and JS together. You can combine a lot of CSS files into one CSS file, same with JS. But you can't actually combine CSS + JS = CSS/JS. That'd be nice though.

Your page has 4 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.

To make this theme as speedy as it is, I designed it using CSS almost entirely. Here is the dilemma. To make the CSS not be a render blocking script, you'd have to take pieces out and include them in-line in the HTML header, which is equally as bad as it being render blocking. So that'd be your call. I made the choice I thought was most appropriate. On a more graphic heavy site, I'd go for the header inclusion method, but here it's just not necessary.

However, the JS can be moved to the footer and I'll do that. Again, it had to do with Wordpress. I'll be revisiting the entire theme and making it how I want it, not how Wordpress demanded, at this point. Freedom from tyranny!
 
Thanks for the detailed comment.

TLDR, JK
Meta keywords so 2006.

You don't need Yoast for that.

Add this to header.php:
<meta name="description" content="<?php if(get_post_meta($post->ID, "metadesc", true) !='' ) echo get_post_meta($post->ID, "metadesc", true); else bloginfo('description');?>" />
<meta name="keywords" content="<?php if(get_post_meta($post->ID, "metakey", true) != '') echo get_post_meta($post->ID, "metakey", true); else echo strtolower(get_bloginfo('name'));?>" />

On new post/page "page"(wp-admin/post-new.php), go the top right Screen Options, Enable Custom Fields.

Down at the bottom on custom fields, add these as custom fields:
Name Value
Metadesc Pretty meta descp, click here googler.
Metakey Who says KW stuffing doesn't work. Look at amazon.

The bolded variables, Metadesc and Metakey are what you need.
 
Can't edit the latest post of mine, but adding the bolded to category.php file will let you put your descriptions as content on category pages. No more deindexing them.
<div class="main-wrap">
<div class="post-wrap">
<p><?php echo category_description(); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 
I like the way you've added descriptions with custom fields. I've tried to make it automatic, because I realize not everyone who uses the theme is going to be that tech savvy. We could include an installation process and a set-up guide... I'll consider the options. Thanks!
 
Honestly, it's only copy pasting someone else's work and clicking a button here and there. I'm such a savage that nobody can tell me apart from a Neanderthal.

I like the way you've added descriptions with custom fields. I've tried to make it automatic, because I realize not everyone who uses the theme is going to be that tech savvy. We could include an installation process and a set-up guide... I'll consider the options. Thanks!
 
@Ryuzaki so if you are dropping WP are you going to focus on flat file CMS now?
 
@Ryuzaki so if you are dropping WP are you going to focus on flat file CMS now?

No, that's not what I meant. What I mean is that I'm not concerned with jumping through the hoops of Wordpress.org's volunteers to get the theme into the WP Repository. It'll still be on the Wordpress platform, but even faster and better because I won't have to worry about the approval of some random person or following their theme guidelines.
 
Ohh yeah. Sorry, I didn't get that. That sounds like a better way to go. Actually the only good way to go. Why would you give (some) control over your theme to people that have no idea why it was created in the first place.

Regarding META descriptions. While it may make no difference to G, it's still a good way to get some words in there to look better in SERPs than competitors. I know G is picky about that and can display what he thinks is best, but as far as I see "static" descriptions do better.
 
Anyone else noticed broken image uploads since the Wordpress 4.2.4 update?

Featured images are unusable right now. 9/10 or 10/10 image uploads fail for me.

I didn't change any wp-content/uploads permissions. Permissions stayed at 755 recommended levels. Checked with 777, but these don't work either.

Folders have been owned by the systemuser:systemuser, not www-data.
 
@qwianghomingh , I'm not able to replicate this issue on BuSo Lightning.

My guess, as you also suspect, is that it's an issue with your server. If it's not permissions, then maybe your server is set to an outdated version of PHP, or your wp-config needs to be tweaked to use more memory.

Or, actually, I'm betting that your server has a hard limit on the amount of data you can store (or # of files, etc) and you've hit it? Will you check and see if that's it?
 
It turns out it was a script I copied to my functions.php from here and it somehow deleted my uploaded images. It seems to work now.

@qwianghomingh , I'm not able to replicate this issue on BuSo Lightning.

My guess, as you also suspect, is that it's an issue with your server. If it's not permissions, then maybe your server is set to an outdated version of PHP, or your wp-config needs to be tweaked to use more memory.

Or, actually, I'm betting that your server has a hard limit on the amount of data you can store (or # of files, etc) and you've hit it? Will you check and see if that's it?
 
Here's an awesome looking related posts code from http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/ :

// To single.php, just after <?php comments_template(); ?> <== this could probably called from a php function, but I'm not that smart

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>4, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="relatedthumb">
<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,150)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>


// The CSS, I've added the css to the bottom of style.css

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

It didn't break my site yet and doesn't look bad on desktop and mobile resolution either from firefox.
 
Last edited:
Based upon @CCarter 's revelations, the following code work nicely for facebook and twitter, for now. Note, there should be an else if statement in there for pages when there isn't a featured image, such as your home page. I don't have that solved, yet. If you use buffer to post with social media, it lets you scrape some images from your site anyway, so you're not stuck with the featured image upon posting, but the following code will provide a somewhat good looking link if someone links to a post of yours:
Code:
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitterusername">
<meta name="twitter:creator" content="@twitterusername">
<meta name="twitter:title" content="<?php wp_title(); ?>">
<meta name="twitter:description" content="<?php if(get_post_meta($post->ID, "metadesc", true) !='' ) echo get_post_meta($post->ID, "metadesc", true); else bloginfo('description');?>">
<meta name="twitter:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 1024,1024 ), false, '' ); echo $src[0]; ?> ">
Code:
<!-- Facebook OG -->
<meta property="og:type" content="article" />
  <meta property="og:title" content="<?php wp_title(); ?>"/>
  <meta property="og:description" content="<?php if(get_post_meta($post->ID, "metadesc", true) !='' ) echo get_post_meta($post->ID, "metadesc", true); else bloginfo('description');?>"/>
  <meta property="og:url" content="<?php echo "https://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; ?> "/>
  <meta property="og:site_name" content="Domain.com - Your Headline whatever"/>
  <meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 1024,1024 ), false, '' ); echo $src[0]; ?> "/>
  <meta property="fb:app_id" content="123456789123456789"/>
Code:
<?php if(get_post_meta($post->ID, "metadesc", true) !='' ) echo get_post_meta($post->ID, "metadesc", true); else bloginfo('description');?>
:
is based upon the manual meta description I've shared in this thread earlier.

Code:
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 1024,1024 ), false, '' ); echo $src[0]; ?>
:

gets your featured image for social media sites when they scrape you. It provides a fairly high quality image from https://cards-dev.twitter.com/validator . I assume it works for facebook just as well.

Perhaps @Ryuzaki can shed some php code for
Code:
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 1024,1024 ), false, '' ); echo $src[0]; ?> "/>
and
Code:
<meta name="twitter:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 1024,1024 ), false, '' ); echo $src[0]; ?> ">
to include a fallback image for category and tags pages and home page.
 
Last edited:
The following code adds rotating images to your 404 pages, if you are interested. Inspired by serpwoo. This is just for decor, not much use, if any. Based on http://www.dyn-web.com/code/basics/random_image/random_img_php.php

I think I'm gonna link my images to my amazon affiliate link. Shouldn't be too difficult:

Code:
<a href="/"><img src="<?php echo $path . $img ?>" alt="" /></a>

Changing a href="/" to an easyazon pro affiliate short code.

This bit goes to functions.php

$path can be whatever you want anyway. Something like
Code:
$path = 'images/';
would also work.

Code:
//rotating images on 404 pages
$root = '';
$path = 'wp-content/themes/themefoldername/foldercontainingyourrotatingimages/';

function getImagesFromDir($path) {
  $images = array();
  if ( $img_dir = @opendir($path) ) {
  while ( false !== ($img_file = readdir($img_dir)) ) {
  // checks for gif, jpg, png
  if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
  $images[] = $img_file;
  }
  }
  closedir($img_dir);
  }
  return $images;
}

function getRandomFromArray($ar) {
  mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed
  $num = array_rand($ar);
  return $ar[$num];
}

// Obtain list of images from directory
$imgList = getImagesFromDir($root . $path);

$img = getRandomFromArray($imgList);

This is what my 404.php looks like:
Code:
<?php get_header(); ?>

  <!-- PRIMARY LAYOUT -->
  <div class="main-and-sidebar"> 
  <div class="container">
  <div class="row">
  <div class="eight columns">
  
  <div class="main-wrap">
  <div class="post-wrap">
  <h1>404 Error - Page Not Found</h1>
  <p>The page you've requested cannot be found.</p>
  <p>Please refine your search, try a link from the sidebar, or visit our <a href="<?php echo get_home_url(); ?>">homepage</a>.</p>
<div><img src="<?php echo $path . $img ?>" alt="keyword rich alt text" /></div>
  </div>

  </div> <!-- main wrap -->

  </div> <!-- eight columns -->

<?php get_sidebar(); ?>
  </div> <!-- row -->
  </div> <!-- container -->
  </div> <!-- main-and-sidebar -->
<?php get_footer(); ?>

Just forgot to add, search.php can also be customized with this code:
Code:
<?php get_header(); ?>
   
  <!-- PRIMARY LAYOUT -->
 
  <div class="main-and-sidebar">  
  <div class="container">
  <div class="row">
  <div class="eight columns">
   
  <div class="main-wrap">
  <h1><?php printf( __( 'Search Results for: %s', 'buso-lightning' ), '<span>' . get_search_query() . '</span>'); ?></h1>
  <div class="post-wrap">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <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 : ?>
<h2>Some awesome text to make them feel better!</h2>
  <p>Some funny text here so that you keep them on your site when your search result didn't bring up anything they looked for. </p>
  <p>Please refine your search, try a link from the sidebar, or visit our <a href="<?php echo get_home_url(); ?>">homepage</a>.</p>
  <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
<div><img src="<?php echo $path . $img ?>" alt="keyword rich alt text" /></div>
  <?php endif; ?>
  </div>
  </div>


  </div> <!-- eight columns -->

<?php get_sidebar(); ?>
  </div> <!-- row -->
  </div> <!-- container -->
  </div> <!-- main-and-sidebar -->
<?php get_footer(); ?>
 
Last edited:
ok is it possible to have page sections on the theme
Let's say i have my home page which is static, I'd like to have diffection section within that page with different background color.
 
ok is it possible to have page sections on the theme
Let's say i have my home page which is static, I'd like to have diffection section within that page with different background color.

Yes it is! This an HTML / CSS situation where you need to create a new <div> with a CSS class... and do this in the main index file, which is the homepage. <div class="new-area">. Then in the CSS file you'll need to design that section, so something like...

.new-area {
background-color: #xxxxxx;
}

But that's only part of the story. You'll need to also understand how to make it responsive. Look through the rest of the HTML inside the templates and notice how I'm creating a grid using containers, rows, and column classes.
 
@Ryuzaki

I'm trying to change the post thumbnail size on the home page...

PHP:
add_image_size( 'new-size', 557.188, 150 );

PHP:
<?php the_post_thumbnail('new-size'); ?>

I've added the top line of code to functions.php and the second line of code to index.php but I'm not having any luck.

If I change line two to this...

PHP:
<?php the_post_thumbnail(); ?>

I can get a change, mirroring what's in single.php, but it's obviously not the size I tried to specify above in line 1.

I can't find where you've declared these settings to edit the original settings for the thumbnail sizes so I'm stumped.

Any advice?
 
I didn't declare the sizes for the thumbnails, leaving it up to the user to configure it in the Settings > Media page. For instance, on the demo it is set to be 240x150 and to be cropped (versus stretched).

Then Wordpress automatically pulls that information using specificity:

Code:
img.attachment-thumbnail.wp-post-image {
    width: 240px;
    height: 150px;
}

It also declares the width and height in the HTML for speedy rendering.

Definitely check your Media settings and see if that's overriding your thumbnail style. You can set it to zero and zero there I believe to disable the default and use your own, such as you did with new-size.

I should mention that the max-width for the img tag is 507px in the theme before customizations, which was a comfy choice for the largest width of the main content area at full screen.
 
I've made a custom php template file for the contact form to negate the use of any contact plugin. The e-mail goes through to the admin e-mail associated with the site.

The only issue at the moment is the validation doesn't work, not 100% sure why as it isn't my code, I just integrated the php into the BuSo Lightning markup. @Ryuzaki any ideas of better ways to validate? I think an improved version of this would be awesome for the next version of the theme.

PHP:
<?php
/*
Template Name: Contact me
*/
if($_POST[sent]){
  $error = "";
  if(!trim($_POST[your_name])){
    $error .= "<p>Please enter your name</p>";
  }
  if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
    $error .= "<p>Please enter a valid email address</p>";
  }                     
  if(!trim($_POST[your_message])){
    $error .= "<p>Please enter a message</p>";
  }
  if(!$error){
    $email = mail(get_option("admin_email"),trim($_POST[your_name])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nReply-To:".trim($_POST[your_email]));
  }
}
?>

<?php get_header(); ?>

  <!-- PRIMARY LAYOUT -->

  <div class="main-and-sidebar">
  <div class="container">
    <div class="row">
    <div class="eight columns">
   
      <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>Text here</p>


               <form action="<?php the_permalink(); ?>" id="contact_me" method="post">
          <input type="hidden" name="sent" id="sent" value="1" />
          <ul class="contactform">
            <li style="list-style-type:none;">
              <label for="your_name">Name</label>
              <input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" />
            </li>
            <li style="list-style-type:none;">
              <label for="your_email">Email</label>
              <input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" />
            </li>
            <li style="list-style-type:none;">
              <label for="your_message">Message:</label>
              <textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
            </li>
            <li style="list-style-type:none;">
              <input type="submit" name = "send" value = "Send email" />
            </li>
          </ul>
        </form>
         <?php endwhile; else : ?>
           
<?php if($email){ ?>
        <p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
      <?php } else { if($error) { ?>
        <p><strong>Your messange hasn't been sent</strong><p>
        <?php echo $error; ?>
      <?php } else { the_content(); } ?>
        <form action="<?php the_permalink(); ?>" id="contact_me" method="post">
          <input type="hidden" name="sent" id="sent" value="1" />
          <ul class="contactform">
            <li>
              <label for="your_name">Name</label>
              <input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" />
            </li>
            <li>
              <label for="your_email">Email</label>
              <input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" />
            </li>
            <li>
              <label for="your_message">Message:</label>
              <textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
            </li>
            <li>
              <input type="submit" name = "send" value = "Send email" />
            </li>
          </ul>
        </form>
        <?php } ?>
           
         <?php endif; ?>

     
           </div>

    <?php comments_template(); ?>

      </div> <!-- main wrap -->

    </div> <!-- eight columns -->

<?php get_sidebar(); ?>
  </div> <!-- row -->
  </div> <!-- container -->
  </div> <!-- main-and-sidebar -->
<?php get_footer(); ?>
 
Back