8

I am coming from a Laravel background and using Bootstrap in Laravel is relatively easy. However I have a project I have been working on with Wordpress and I am using Bootstrap for my nav bars. The problem is that, they are messing up my header on the page. The theme I am using is Be Theme. This is my code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="tabbable">
<div class="panel panel-default">
<div class="panel-body">
    <ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;">  


    <form action="" method="get" name="" style="color: black;" class="form-inline">
    <br>

    <br>


<input type="submit" name="submit" class="btn btn-default" style="background-color: red;">
</form>

<table>

</table>




    </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>

   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>

I have created a template page using this code thanks to the help I got in previous question.

How do I use bootstrap without messing up WP themes and their headers?

EDIT: this is how my functions.php looks like

add_action( 'wp_enqueue_scripts', 'mfnch_enqueue_styles', 101 );
function mfnch_enqueue_styles() {

    // Enqueue the parent stylesheet
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //we don't need this if it's empty

    // Enqueue the parent rtl stylesheet
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Enqueue the child stylesheet
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

How do I edit this function to include Bootstrap ^? I tried on my own but it doesn't render it.

Thanks in advance!

8

You can add bootstrap in WordPress by following function in functions.php

You can change url as you need if you have cdn.

<?php 
/**
 * Enqueue scripts and styles
 */
function your_theme_enqueue_scripts() {
    // all styles
    wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.css', array(), 20141119 );
    // all scripts
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );
|improve this answer|||||
  • Do I need to add this to functions.php of the theme or the child theme? – R1ddler Oct 12 '17 at 10:10
  • You can add in child theme if you have. – Punitkumar Patel Oct 12 '17 at 10:12
  • Added my functions.php style function in the OP (without Bootstrap) – R1ddler Oct 12 '17 at 10:16
  • I have realized that it's this script that messes up my header <script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/…> – R1ddler Oct 12 '17 at 10:37
  • 1
    // will identify automatic page is coming from secure or non-secure webpage. i.e. http and https If we write direct : HTTP or HTTPS then will create Parser-blocking, cross site. – Punitkumar Patel Oct 13 '17 at 8:50

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.