0

I have a html bootstrap slider which works fine with captions and everything.I would like to integrate it into my Wp theme (my forst one, so total newbie).I found a code, which seems to helo, but it only shows the three pictures and nothing slides...if I hard code the slider, it works.I understand I can just leave it hard coded, but then it's not really WP ;) THANKS. Here is the code: functions.php - now complete file.

function load_stylesheets()
{

wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 1,'all');

wp_enqueue_style('style');

wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap-4.1.3-dist/css/bootstrap.min.css', array(), 1,'all');

wp_enqueue_style('bootstrap');

wp_register_style('fixedcss', get_template_directory_uri() . '/css/fixed.css', array(), 1,'all');

wp_enqueue_style('fixedcss');

wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1,'all');

wp_enqueue_style('custom');

}

add_action('wp_enqueue_scripts', 'load_stylesheets');


//load scripts

function load_javascript()
{

wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', 'jquery', 1, true);
wp_enqueue_script('custom');

wp_register_script('bootstrapjs', get_template_directory_uri() . '/bootstrap-4.1.3-dist/js/bootstrap.min.js',array('jquery'), 1 , true);
wp_enqueue_script('bootstrapjs');

}
add_action('wp_enqueue_scripts', 'load_javascript');


// normal menue theme support
add_theme_support('menus');

// register menus, =>__ is improtant for tansaltions!
register_nav_menus
(

array('top-menu' =>__('Top Menu', 'theme')
)

);

//woocommerce theme suport

function customtheme_add_woocommerce_support()
 {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'customtheme_add_woocommerce_support' );


//Images Slider

    function themename_slider_home_images_setup($wp_customize)
    {
        $wp_customize->add_section('home-slider-images', array(
            'title' => 'Home Slider',
            ));
    
            $wp_customize->add_setting('home-slider-first-image');
        $wp_customize->add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-first-image',
                array(
                    'label'      => __( 'First Image', 'theme_name' ),
                    'section'    => 'home-slider-images',
                    'settings'   => 'home-slider-first-image'
                )
            )
            );
    
            $wp_customize->add_setting('home-slider-second-image');
        $wp_customize->add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-second-image',
                array(
                    'label'      => __( 'Second Image', 'theme_name' ),
                    'section'    => 'home-slider-images',
                    'settings'   => 'home-slider-second-image'
                )
            )
            );
    
            $wp_customize->add_setting('home-slider-third-image');
        $wp_customize->add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-third-image',
                array(
                    'label'      => __( 'Third Image', 'theme_name' ),
                    'section'    => 'home-slider-images',
                    'settings'   => 'home-slider-third-image'
                )
            )
        );
    }
    add_action('customize_register', 'themename_slider_home_images_setup');`

front-page.php:

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="<?php echo get_theme_mod('home-slider-first-image');?>" alt="caption3!" >
   
  </div>

  <div class="item header-image"
    <img  src="<?php echo get_theme_mod('home-slider-second-image');?>" alt="caption2" >
  </div>

  <div class="item header-image">
    <img src="<?php echo get_theme_mod('home-slider-third-image');?>" alt="I am a caption" 
  </div>
</div>
5
  • Hi Anna. Do you get any output in the browser inspector in the sections where you are echoing out your functions? Is it empty or wrong?
    – t2pe
    Aug 18 '20 at 8:18
  • t2pe, sorry am really just learning, not sure what you mean?
    – Anna Moors
    Aug 18 '20 at 15:56
  • Ok, so in your browser you can right click on the page and select inspect. This will show you the code that your site is actually generating so you can compare it to what you're expecting. If you inspect the Carousel code itself, look within the item as thats where your function is creating an output. Just make sure it looks correct in there - that you're not for instance seeing an <img> within an <img>. Compare it to your hard-coded version.
    – t2pe
    Aug 18 '20 at 16:08
  • ;O) thanks!They are the same, just the class is called differntly.
    – Anna Moors
    Aug 18 '20 at 16:44
  • 1
    Ok, thats good as it proves your customizations are working correctly. Looking at your carousel code in front-page.php, it doesn't quite follow the bootstrap 4 conventions? Just check the documentation here as it might be that your html structure is the problem. The item classes in particular are different. getbootstrap.com/docs/4.0/components/carousel
    – t2pe
    Aug 18 '20 at 17:05
0

You've tagged your question correctly with wp_enqueue_script but it doesn't appear in your code so you are probably missing the jQuery library and bootstrap by the looks of it.

Try adding the following:

add_action('wp_enqueue_scripts', 'wp_add_jquery');

function wp_add_jquery () {
    wp_register_script( 'my_jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    // Add your other scripts here (bootstrap, etc.)

}
1
  • See edited code pls ;) tried yours did not work either.
    – Anna Moors
    Aug 18 '20 at 15:52
0

Check with bootstrap & Jquery dependency file enqueue.

You need to load your bootstrap style & Jquery by the action wp_enqueue_style and wp_enqueue_script.

Example: In functions.php

    function my_scripts() {

   wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Also in your custom js you need to put this $('.carousel').carousel();

2
  • Suresh, thank you, I think I am not getting it... put the code into my custom.js file, but bothing happens ;)
    – Anna Moors
    Aug 18 '20 at 16:39
  • Hello Anna, for carousel init you need to put this code $('.carousel').carousel(); in your js file Aug 19 '20 at 6:21
0

I added

wp_deregister_script('jquery');

to my funcitons.php and now it works, I suppose there must have been a conflict with my enqueued jquery.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.