How difficult would it be to create this?

[built]

So I'm attempting to customize buso lightning, I would like to add a slider just before the latest posts. I made this to better illustrate. Is something like this difficult to do? I don't have the coding skills so i have no idea where to start.

I was thinking of using a plugin and then adding the shortcode into the page or something like that

I honestly feel overwhelmed but my current theme is insanely bloated

 

[Ryuzaki]

The easiest way, unless you plan on coding an entire slider or dealing with all of that, would definitely be using a plugin.

But heads up, when you use a shortcode in PHP, it's not as simple as typing [shortcode]. You'll need to use this variant in the main index php file:

<?php echo do_shortcode('[slider-shortcode]'); ?>

And then of course, put it inside the right container in there and use a responsive slider styled correctly.

 

[built]

The easiest way, unless you plan on coding an entire slider or dealing with all of that, would definitely be using a plugin.

But heads up, when you use a shortcode in PHP, it's not as simple as typing [shortcode]. You'll need to use this variant in the main index php file:

<?php echo do_shortcode('[slider-shortcode]'); ?>

And then of course, put it inside the right container in there and use a responsive slider styled correctly.

Thanks for the help, I just realized something else, is there a way to offset the latest posts so that its not showing the same posts in the slider and the latest posts.

So like I'll have 1-2 post in the slider and then the latest posts I will need to offset by 1-2

 

[Ryuzaki]

Try this... in the index.php, starting at the top you'll see this chunk of 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(); ?>

Try adding this...

query_posts('offset=X');

Where X is the number of posts you want to skip, whether that's 1, 2, 3, etc.

So in the end it should look something like this:

<div class="main-wrap">
          <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php query_posts('offset=X'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

[built]

@Ryuzaki worked perfectly Thanks so much man, now to try and the slider

 

[lion1978]

Thanks for the help, I just realized something else, is there a way to offset the latest posts so that its not showing the same posts in the slider and the latest posts.

So like I'll have 1-2 post in the slider and then the latest posts I will need to offset by 1-2

well spotted and good thinking, I wish more blog/website owners would realize that very same issue, I see it far to often

 

[Andrewkar]

So I'm attempting to customize buso lightning, I would like to add a slider just before the latest posts. I made this to better illustrate. Is something like this difficult to do? I don't have the coding skills so i have no idea where to start.

I was thinking of using a plugin and then adding the shortcode into the page or something like that

I honestly feel overwhelmed but my current theme is insanely bloated

I liked your idea about slider on the top of the content so I've added one to my theme as well, but I have a little problem with mobile menu. It looks like slider is overlapping part of mobile menu, I have three links/buttons in menu and the last button is covered by slider while menu is extended... I can see it there during slides transition but it's behind...

Anyone any solution to this?

I'm using https://wordpress.org/plugins/simple-responsive-slider/installation/

 

[built]

I liked your idea about slider on the top of the content so I've added one to my theme as well, but I have a little problem with mobile menu. It looks like slider is overlapping part of mobile menu, I have three links/buttons in menu and the last button is covered by slider while menu is extended... I can see it there during slides transition but it's behind...

Anyone any solution to this?

I'm using https://wordpress.org/plugins/simple-responsive-slider/installation/

I had loads of trouble with the slider I tried to add, screwed up pagination etc for some reason. What I did instead was make the first image big and then thumbnails underneath. But I have minimal knowledge so maybe I did something wrong lol.

But I used revolution slider and didnt have a problem with menus, you could try that

I'm sure @Ryuzaki might know

Heres what I did instead

https://www.buildersociety.com/thre...-how-do-i-make-buso-lightning-wider-pic.1560/

 

[Andrewkar]

I did that as well, but I have all images bigger now, not just the first one. Actually, I can use images of any height with 200px being minimum. I did that by accident, but it's cool
Also, I've managed to get that slider to work properly:

.mobile-menu ul {
    display: none;
    height: 120px;
    line-height: 70px;
    list-style: outside none none;
}

This did the job. Just changed height from 70px to 120px.

 

[built]

I did that as well, but I have all images bigger now, not just the first one. Actually, I can use images of any height with 200px being minimum. I did that by accident, but it's cool
Also, I've managed to get that slider to work properly:

.mobile-menu ul {
    display: none;
    height: 120px;
    line-height: 70px;
    list-style: outside none none;
}

This did the job. Just changed height from 70px to 120px.

Did you have trouble with images not being centered? Whenever I center align images in a post it stays to the left for some reason.

 

[Andrewkar]

Thanks for pointing this out, yeah I have the same problem actually.... Hmm...

Did you have trouble with images not being centered? Whenever I center align images in a post it stays to the left for some reason.

Ok so go to editor, ctrl + F, type "aligncenter" and I have following inisde and it works now

.aligncenter {
    margin: 0 auto;
   text-align: center;
   display: block;
   max-width:100%;
   height:auto;
}

If you still want slider just install this plugin, paste code into your index.php

<div class="container">
<?php if ( function_exists( 'show_simpleresponsiveslider' ) ) show_simpleresponsiveslider(); ?>
    <div class="row">
    <div class="eight columns">

In slider settings choose wathever width and height of slider's images you need (I have the same with as my .container which is 1080px).
If you want no space between menu and slider, or you want whatever space there then in

.header-menu ul {
    display: block;
    float: right;
    height: 35px; (my custom values)
    line-height: 35px; (my custom values)
    list-style: outside none none;
    margin-bottom: 0;
}

play with margin-bottom. Also, you will probably have to play with this

.mobile-menu ul {
    display: none;
    height: 120px;
    line-height: 70px;
    list-style: outside none none;
}

To make mobile menu works good.

One important thing to note, I don't display automatically latest posts in my slider (or pages). So if I want to change slides and urls I have to do this manually. For me it's OK because I have it there to promote optin page and some other stuff. So if you want to add latest posts you would have to play with php a bit.

 

[built]

@Andrewkar I'll give this a try, thanks

 

[juliantrueflynn]

No hate on BUSO Lighting at all, but I've seen the corrections you're trying to do with your site and I think you would have an easier time with Firmasite. It has some PHP action hooks so you don't have to edit the theme as much and you can just go through functions.php. Plus it comes with a child theme all set up.

It's a Bootstrap theme, no real bells or whistles so it's lean but it's made for developers to hack around with. It seems to have a lot of the features you want too already pre-built.