I wonder how can I integrate only bootstrap 4 grid system instead of :

<link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Try to this, I download source codes from this link:

/

and I added

bootstrap-4.0.0-alpha.6/dist/css/bootstrap-grid.min.css

but it crashed my website.

Also I want to save me reload jquery to wordpress

• I read on somewhere that wordpress contains self jquery. -

My jquery version:

 <script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Last question is how can I integrate css and jquery better to wordpress? Thanks.

Also can somebody add bootstap 4 tag to wordpress.stackexchange because it is frequenly used tag.

I wonder how can I integrate only bootstrap 4 grid system instead of :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Try to this, I download source codes from this link:

https://v4-alpha.getbootstrap/getting-started/download/

and I added

bootstrap-4.0.0-alpha.6/dist/css/bootstrap-grid.min.css

but it crashed my website.

Also I want to save me reload jquery to wordpress

• I read on somewhere that wordpress contains self jquery. -

My jquery version:

 <script src="https://code.jquery/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Last question is how can I integrate css and jquery better to wordpress? Thanks.

Also can somebody add bootstap 4 tag to wordpress.stackexchange because it is frequenly used tag.

• css
• jquery
• wp-enqueue-script
• wp-enqueue-style

1 Answer 1

Including only Bootstrap Grid System

If you are not familiar with SaSS, just use their custom tool to generate your CSS file.

Customize Bootstrap's components

You will be able to enqueue it after (see below).

Take a new version of jQuery with wp_enqueue_script()

Documentation : https://developer.wordpress/reference/functions/wp_register_script/

Instead of loading the scripts directly in your head, WordPress has a function named wp_head() that let you work in files to enqueue your files.

In you functions.php file or into an other configuration file of your WordPress theme, you can create something like this.

$handle

(string) (Required) Name of the script. Should be unique.

$src

(string|bool) (Required) Full URL of the script, or path of the script relative to the WordPress root directory. If source is set to false, script is an alias of other scripts it depends on.

$deps

(array) (Optional) An array of registered script handles this script depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$in_footer

(bool) (Optional) Whether to enqueue the script before instead of in the . Default 'false'.

Default value: false

Here is a sample code that you can add to the function WPScripts_enqueue.

// Removing default jQuery
wp_deregister_script( 'jquery' );
    
// Enqueue the new jQuery
wp_enqueue_script('jquery', 'https://code.jquery/jquery-3.2.1.slim.min.js', false, '3.2.1', false);

Integrating CSS with wp_enqueue_style()

Documentation : https://developer.wordpress/reference/functions/wp_enqueue_style/

$handle

(string) (Required) Name of the stylesheet. Should be unique.

$src

(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. Default value: ''

$deps

(array) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$media (string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.

Default value: 'all'

Here is a sample code that you can add to the previous function WPScripts_enqueue.

wp_enqueue_style('css_style_name', get_template_directory_uri() . '/dist/css/styles.css', array(), false, 'all');

Final result

The final result should look like this in your functions.php file.

if ( ! function_exists( 'WPScripts_enqueue' ) ) {
    function WPScripts_enqueue() {
        
        // Removing default jQuery
        wp_deregister_script( 'jquery' );
        
        // Enqueue the new jQuery
        wp_enqueue_script('jquery', 'https://code.jquery/jquery-3.2.1.slim.min.js', false, '3.2.1', false);

        // Enqueue custom Bootstrap file
        wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), false, 'all');

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

Note : Registering scripts or styles is technically not necessary, but highly recommended nonetheless. Read documentation for more information.

Hope it will help and guide you in your development!