Enqueue Style and JS

Topic: Enqueue Style and JS

Daniel pro asked 10 years ago

Hello Great stuff Could you illustrate how to correctly enqueue this to 25% of the Websites out there? WordPress :) CSS seems to work fine with this:

wp_enqueue_style( 'google-styles', get_template_directory_uri() . '/css/mdb.css');
    wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri() . '/css/goldbootstrap.css', array(), '3.3.4', 'all' );
    
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0', 'all' );
    
	wp_enqueue_style( 'theme-style', get_stylesheet_uri() );

While JS does not with this:

wp_enqueue_script('mdb-js', get_template_directory_uri() . '/js/mdb.js');
	wp_enqueue_script('hammer-js', get_template_directory_uri() . '/js/hammer.js/hammer.min.js');
	wp_enqueue_script('jquery-hammer-js', get_template_directory_uri() . '/js/hammer.js/jquery.hammer.js');
	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.4', true );

Thank you!!

Add comment

Luke Marshall free answered 9 years ago

0 0 Best answer

I just learned that get_template_directory will look in the Parent theme while get_stylesheet_uri will lok in the Child theme . it got me before . Cheers

Add comment

Smith free answered 10 years ago

0 0 Best answer

Add comment

Daniel pro answered 10 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello Yes, meanwhile playing a bit around, I came to the same result, although I did not yet enqueue the hammer-scripts. Perhaps that is the reason why (as example) the Badge-DropDown is not firing on my end. All the rest works great by now and I figured out how to enqueue the scripts. Thanks though to share your solution, it is a good example and I hope others will profit. BTW I already made use of the (by me previously suggested) gold bootstrap, I just enqueued it in place of the "normal" BootsTrap. Works fine. Of course some CSS is overwriting gold bootstrap, due to dependencies, and that is what I meant by my "suggestion" of including gold bootstrap relation in CSS :) Not sure it can be done easily though Thanks again for the help, I like the mix of Google Material, Materialize and Bootstrap very much.

Add comment

Dawid Adach pro answered 10 years ago

0 0 Best answer

Hi Daniel!

Could you let us know what kind of conflicts do you face? 
I can also see that you are missing MDB.js files.

This how do we enqueue scripts on MDBootstrap.com

CSS
<pre><code>function theme_enqueue_scripts() {

wp_enqueue_style( 'MD_icons', 'https://fonts.googleapis.com/icon?family=Material+Icons' );
        wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.css' );
        wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
        wp_enqueue_style( 'Custom', get_template_directory_uri() . '/css/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
</code></pre>

JS
<pre><code>

function MDB_scripts() {
  wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array(), '1.0.0', true );
  wp_enqueue_script( 'Hammer', get_template_directory_uri() . '/js/hammer.js/hammer.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'jQuery-Hammer', get_template_directory_uri() . '/js/hammer.js/jquery.hammer.js', array(), '1.0.0', true );
  wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.js', array(), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'MDB_scripts' );
</code></pre>

If that doesn't work, you can try to load scripts in footer.php as below:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hammer.js/hammer.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hammer.js/jquery.hammer.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/js/mdb.js"></script>
</code></pre>

Please insert min. 20 characters.

Hi Daniel! Could you let us know what kind of conflicts do you face? I can also see that you are missing MDB.js files. This how do we enqueue scripts on MDBootstrap.com CSS

function theme_enqueue_scripts() {

        wp_enqueue_style( 'MD_icons', 'https://fonts.googleapis.com/icon?family=Material+Icons' );
        wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.css' );
        wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
        wp_enqueue_style( 'Custom', get_template_directory_uri() . '/css/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );



function MDB_scripts() {
  wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array(), '1.0.0', true );
  wp_enqueue_script( 'Hammer', get_template_directory_uri() . '/js/hammer.js/hammer.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'jQuery-Hammer', get_template_directory_uri() . '/js/hammer.js/jquery.hammer.js', array(), '1.0.0', true );
  wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.js', array(), '1.0.0', true );

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

If that doesn't work, you can try to load scripts in footer.php as below:



<!-- jQuery Plugins Initialization -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script>

<!-- SideNav Slide Out -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hammer.js/hammer.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hammer.js/jquery.hammer.js"></script>

<!-- Material Design Bootsgtrap scripts -->
<script src="<?php bloginfo('template_directory'); ?>/js/mdb.js"></script>

Add comment

Daniel pro answered 10 years ago

0 0 Best answer

simply forget my above question. I see you use WordPress too. So I think, best would be you simply share the code you use to enqueue all styles and scripts, as I am sure you follow WP best practices and do not call your files from <head></head> or after </body> tag...but do it with enqueue_scripts Can you share your code? Locally I have conflicts with JS. Thank you!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Daniel

Pro User 10Support score
15Questions 21Answers 0Snippets