What is the best way to use Bootstrap for WordPress Theme Development?

I try to connect Bootstrap with WordPress Theme using this-

1st Method:

// Enqueue the latest version of Font Awesome
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/assets/css/fontawesome.min.css', array(), '6.1.1');

// Enqueue Bootstrap CSS
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), '4.6.2');

// Enqueue Bootstrap Icons
wp_enqueue_style('bootstrap-icons', get_template_directory_uri() . '/assets/css/bootstrap-icons.min.css', array(), '1.5.0');

---

Here, First, I download the code from the links that I mentioned below code. But not working.

But if I use this code-

2nd Method:

// Enqueue the latest version of Font Awesome
wp_enqueue_style('font-awesome', '.1.1/css/all.min.css');

// Enqueue Bootstrap CSS
wp_enqueue_style('bootstrap-css', '/[email protected]/dist/css/bootstrap.min.css', array(), '4.6.2');

// Enqueue Bootstrap Icons
wp_enqueue_style('bootstrap-icons', '.5.0/font/bootstrap-icons.min.css', array(), '1.5.0');

---

If I use 2nd method, the code works, but when I check the website SEO score, It shows 404 in the update version of Bootstrap CSS.

Now, My question, why 1st method not working?

I try to connect Bootstrap with WordPress Theme using this-

1st Method:

// Enqueue the latest version of Font Awesome
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/assets/css/fontawesome.min.css', array(), '6.1.1');

// Enqueue Bootstrap CSS
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), '4.6.2');

// Enqueue Bootstrap Icons
wp_enqueue_style('bootstrap-icons', get_template_directory_uri() . '/assets/css/bootstrap-icons.min.css', array(), '1.5.0');

---

Here, First, I download the code from the links that I mentioned below code. But not working.

But if I use this code-

2nd Method:

// Enqueue the latest version of Font Awesome
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');

// Enqueue Bootstrap CSS
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', array(), '4.6.2');

// Enqueue Bootstrap Icons
wp_enqueue_style('bootstrap-icons', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css', array(), '1.5.0');

---

If I use 2nd method, the code works, but when I check the website SEO score, It shows 404 in the update version of Bootstrap CSS.

Now, My question, why 1st method not working?

• theme-development

Share Improve this question asked Sep 27, 2024 at 17:56 Jahid ShahJahid Shah 9155 bronze badges 1

• 1st Method is the best way to use Bootstrap for WordPress Theme Development – Umesh Singh Commented Sep 28, 2024 at 16:13

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The first method is the preferred way. I usually go a step further. After the theme is almost complete. I go and trim down the bootstrap files in order to remove the redundant styles and reduce payload.

Also, in the second parameter of wp_enqueue_style, wrapping the URL in esc_url() is a good practice.

The issue with the 1st Method not working likely stems from one or more of the following reasons:

1. Incorrect File Paths

In the 1st method, you are loading Bootstrap and Font Awesome from your local assets/css/ directory using get_template_directory_uri(). If the files are not present in the specified location, they cannot be loaded, causing the styles to break.

Make sure the files (fontawesome.min.css, bootstrap.min.css, bootstrap-icons.min.css) are correctly downloaded and placed in the /assets/css/ folder of your theme directory.

2. Browser Caching

If you recently updated or added the files but are testing in a browser with cached resources, it might still be trying to load outdated or missing files. Clear your browser cache or check in incognito mode.

3. File Permissions

If the files exist but have incorrect file permissions on the server, they might not be accessible to the browser. Verify that the assets/css/ directory and its files are readable (usually 644 for files and 755 for directories).

4. Relative vs. Absolute Paths

Unlike the 2nd method, the 1st method uses locally hosted files. Using a CDN (as in the 2nd method) works because the files are fetched from an external source that guarantees availability and correct paths. If your local paths are incorrect, the 1st method will fail.

---

Why Does the 2nd Method Work?

The 2nd method works because it fetches resources from external CDNs (e.g., Bootstrap and Font Awesome CDNs), which always serve the files correctly. However, the "404" SEO issue is likely due to a typo in your CDN link for Bootstrap CSS. Ensure you're using the correct URL, like this:

// Correct Bootstrap 4.6.2 CDN
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', array(), '4.6.2');

---

Recommendation for the Best Approach

To fix the 1st method and ensure everything works:

1. Verify File Paths: Double-check that the CSS files are in the correct /assets/css/ folder.
2. Use Correct Enqueue Code: If hosting files locally, your code is fine, but ensure paths match the actual locations.
3. Prefer CDN (Recommended): Use the 2nd method with CDNs but ensure all URLs are valid. CDNs improve speed and reduce server load.
4. Debug SEO Issues: If SEO tools report a 404 error, test the URLs in the browser directly to confirm their validity.

This approach will resolve your issue and ensure better compatibility and performance. Let me know if you need more clarification!