By:

Add bootstrap on Worpdress

April 22, 2024Programming

The below code must be written on functions.php

function rubinastheme_enqueue_scripts_and_styles() {
    // Enqueue Bootstrap CSS from CDN
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');

    // Enqueue Bootstrap JavaScript from CDN
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js');
}
add_action('wp_enqueue_scripts', 'rubinastheme_enqueue_scripts_and_styles');
  • Function Name:
    • rubinastheme_enqueue_scripts_and_styles(): This is a custom function. The name suggests that it’s for enqueueing scripts and styles specific to the “Rubina’s Theme” theme( you can use your own ). The name of the function can be anything, but it should be unique to avoid conflicts with other functions.
  • Enqueuing Bootstrap CSS:
    • wp_enqueue_style(): This WordPress function is used to enqueue CSS stylesheets.
    • ‘bootstrap-css’: This is the handle for the stylesheet. It’s a unique identifier used to later refer to this stylesheet.
    • ‘https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css’: This is the URL of the Bootstrap CSS file hosted on a CDN (Content Delivery Network). Bootstrap is a popular CSS framework used for building responsive and mobile-first websites. This line loads the Bootstrap CSS file from the CDN.
  • Enqueuing Bootstrap JavaScript:
    • wp_enqueue_script(): This WordPress function is used to enqueue JavaScript files.
    • ‘bootstrap-js’: This is the handle for the JavaScript file. It’s a unique identifier used to later refer to this script.
    • ‘https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js’: This is the URL of the Bootstrap JavaScript file hosted on a CDN. It includes both Bootstrap’s JavaScript and its dependencies bundled together (bootstrap.bundle.min.js).
  • add_action(‘wp_enqueue_scripts’, ‘rubinastheme_enqueue_scripts_and_styles’);: This line hooks the rubinastheme_enqueue_scripts_and_styles() function to the wp_enqueue_scripts action.
  • The wp_enqueue_scripts action is fired on the front end (i.e., the public-facing side) when scripts and styles are enqueued.
  • So, when WordPress generates the HTML output for a webpage, it will automatically include the CSS and JavaScript files specified in the rubinastheme_enqueue_scripts_and_styles() function.

Related Posts