Bootstrap slider convert to Wordpress theme Home page

Question

I have a question of bootstrap slider element, each slider has the background image, and I want people can custom their background image and text content the customize tool from the homepage in Wordpress.

I check out a lot of tutorials, but most of them are pulling post image and title to show up, that’s not what I want. I want it's a feature slider for the site and they can upload in on their customize tools.

Not sure which wp PHP code I can use with that, I download the advanced custom fields plugin, and read their documentation, still kind of confused.

Thanks for the help!

Here’s my HTML code

<div class="w-slider-mask">
  <div class="slide w-slide">
    <div class="div-block slider-wrapper">
      <div class="div-block-2">
        <h1 class="heading">start fresh of day</h1>
        <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
          cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
      </div>
    </div>
  </div>

      <!--   slider 2-->
      <div class="slide-2 w-slide">
        <div class="div-block slider-wrapper">
          <div class="div-block-2">
            <h1 class="heading">Deslicious</h1>
            <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
              cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
          </div>
        </div>
      </div>

      <!--  slider 3 -->
      <div class="slide-3 w-slide">
        <div class="div-block slider-wrapper">
          <div class="div-block-2">
            <h1 class="heading">Desert time</h1>
            <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
              cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
          </div>
        </div>
      </div>
  </div>
  </div>

Big Thanks!

Answer 1

I saw that you mentioned you're still confused by ACF. Below is the code that would simulate the exact thing you're looking for. Although you never mentioned in the code where the background image is added so I cannot add this, but it is easy to do.

Paste the code below and remove the long html code you was using before.

<div class="w-slider-mask">
    <?php if( have_rows('homepage_banner') ): ?>
        <?php $i = 1; ?>
        <?php while( have_rows('homepage_banner') ): the_row(); ?>
            <div class="slide<?php $a = $i++; if($a !== 1): ?>-<?php echo $a; endif;?> w-slide">
                <div class="div-block slider-wrapper">
                    <div class="div-block-2">
                        <h1 class="heading"><?php the_sub_field('homepage_banner_headline');></h1>
                        <p class="paragraph"><?php the_sub_field('homepage_banner_desc');?></p>
                    </div>
                </div>
            </div>
        <?php endwhile :
    endif;?>
</div>

Once you have this code, you'll see that it isn't working. This is because you need to add a field in order to get this to work.

You will need to install the following: - ACF (Advanced Custom Fields) - ACF Repeater Field

You will then need to create a new custom field called a repeater field. And fill out the field like so:

Making the repeater field:

Field Label: Homepage Banner Field Name: homepage_banner Field Type: Repeater Repeater Fields: Add 2 Rows

Row 1 (that you just created inside the repeater field): Field Label: Banner Heading Field Name: homepage_banner_headline Field Type: Text/Text Area/Wysiwig Editor (your choice)

Row 2 (that you just created inside the repeater field): Field Label: Banner Description Field Name: homepage_banner_desc Field Type: Text Are/Wysiwig Editor (your choice)

Now scroll further down the page and select from the section title Location, on which pages would you like the banner fields to be available for filling out. Since you are using the homepage I would recommend selecting from the dropdowns:

Page Type - Is Equal To - Front Page

If you are planning on doing A&B split testing, I would create a homepage template instead of using front-page.php so you can replicate the exact look. If you did do this you would have to select from the dropdowns:

Page Template - Is Equal To - Homepage Template (or whatever you name the template)

Now click Save or Update depending on if you're creating a new field set or updating an existing one.

Populating the fields

Navigate to the homepage, now you should see some extra boxes underneath the main content box and any additional plugins such as Yoast SEO meta box.

Simply click Add Row and fill out the fields for each row, this will populate the slider (without a background image).

If you can supply me with the code that displays the image, I can explain how you can make this ACF as well.

If you need any further clarifications, please let me know. Thanks!