From Bootstrap to WordPress

  • Hi all,

    I build a Template using Bootstrap which fully works outside WordPress but now I want to use this template in WordPress and it′s not working.
    So far I added the Twitter Bootstrap CSS plugin into my page and actived all functions, so the grid system, navbar etc is working with no problems.
    The carousel on the other hand itsn′t working, first of all when I try to create a sidebar-carousel.php, I put the carousel that I did there and that′s what I get here

    So I tried to put all the code in my header.php file and that′s my current website
    As you can see, the image on slide 1 appears, and if I activate subtitles it′ll also work, but I don′t have arrows and it doesn′t goes to slide 2 at all.

    THe following lines has the carousel code that I′m using and the final scripts on index.php. If anyone here has any idea of how to fix that it′ll be grand.

    <!-- Carousel
    ================================================== -->
    <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="#myCarousel2" data-slide-to="1"></li>
        <li data-target="#myCarousel3" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="<?php bloginfo('template_directory'); ?>/imagens/manta.jpg" alt="Logo" />
          <div class="container">
            <div class="carousel-caption">
             <!-- <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
            </div>
          </div>
        </div>
        <div class="item">
          <img src="imagens/vermiculita.jpg" alt="Second slide">
          <!--<div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div> <!--
        <div class="item">
          <img src="" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div> -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->

    E os scripts

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.carousel').carousel({
  		interval: 1000
  	})
});
</script>
<?php get_footer(); ?>
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You are almost certainly having jQuery or other script conflicts. WP has it’s own resident version of jQuery, you need to use that if at all possible. If doing so should cause conflicts with your other scripts, it is possible to de-register the WP version, but avoid going there if you can.

    The other thing with WP is you cannot simply place script references in headers or footers. All scripts need to be enqueued. This establishes the proper dependencies and helps resolve conflicts. All of this is covered here: Function Reference/wp enqueue script

    Tip:
    There’s a lot of confusion on the difference between registering and enqueueing scripts. Maybe this will help:

    All scripts must be enqueued.

    You can register a script as well if it would be helpful. All registering does is establish a handle for your script so it can be referenced elsewhere in code, such as specifying it as a dependency for yet another script.

    Take a look at 320 Press’ wp_bootstrap theme. It is a bare theme built with Bootstrap and Bones. https://320press.com/wpbs/

    Also I used this tutorial to create my own Bootstrap based theme from scratch. https://www.creativewebdesign.ro/en/blog/wordpress/create-a-responsive-wordpress-theme-with-bootstrap-3-header-and-footer/

    There are many other tutorials on how to add Bootstrap to a wordpress theme.

    I had Zero experience with WordPress 6 months ago and after a lot of research and trial & error I am now trying to create my own Carousel Plugin.

    You scripts should be enqued in your functions.php file not hard-coded in your header or footer…

    Have a look at the roots theme (soon called sage)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘From Bootstrap to WordPress’ is closed to new replies.