Connecting a custom bootstrap stylesheet to WordPress

I'm having trouble linking my WordPress Stylesheet to a child theme in a different directory/subfolder. The code I placed in the functions.php file doesn't seem to be working correctly. Here is the code snippet:

function theme_add_bootstrap()
{
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . 'assets/css/bootstrap.min.css' );
    wp_enqueue_style( 'style-css', get_template_directory_uri() . 'assets/css/custom.css' );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . 'assets/js/bootstrap.min.js', array(), '3.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

I also tried adding an @import statement inside style.css, but that didn't work either.

csswordpresstwitter-bootstrap

Answer №1

Consider using the following code snippet:

function load_bootstrap_styles_scripts()
{
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
    wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/assets/css/custom.css' );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), '3.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'load_bootstrap_styles_scripts' );

Keep in mind that get_template_directory_uri() returns the directory URI path without a trailing slash, so you'll need to add it after this function.

Give this code a try and let me know if it works for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to determine the smallest and largest dimensions of two values using CSS3

Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the ...

cssionic-frameworkimage-size

Can an element contain two different classes at the same time?

Apologies if the title was unclear. I am trying to customize the color of my font awesome social media icons individually. Although I have successfully changed the color for all of them, that is not the desired outcome. Here is the icon: <i class=& ...

htmlcssfont-awesome

Attempting to align a banner image in the middle using CSS styling

I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...

css

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

cssmedia-queries

Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

<div id="a">A</div> <div id="b">B</div> <div id="c">C</div> <style> #a, #b, #c { height: 100px; width: 100px; background-color:red; font-size: 100px; margin-bottom: 20px; } ...

javascripthtmlcss

Leveraging the power of Bootstrap in combination with Angular 2, integrate both ng-bootstrap and the traditional Bootstrap to enhance

Beginning a fresh Angular 2 Project, I am inclined to incorporate Bootstrap 3 for the user interface. What would be the most advisable approach in this scenario? Is it feasible to blend ng-bootstrap and the original Bootstrap components? I noticed that th ...

twitter-bootstrapangular

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

Vertical centering menu adjustment

Can anyone help me with centering an image on my website? I've tried the following code: top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); You can see what's happening on my site here: ...

htmlioscss

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

What is the difference between class at DOM and className at component?

When passing the className props to the child component, sometimes the className for the active link is not correctly reflected in the DOM element during production: The child component (Link) receives the className prop for the active link from the paren ...

cssnext.js

Tips for getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

htmlcssreactjsmaterial-ui

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

cssbrowserfontscross-browserhtml-rendering

In what ways can the current theme be utilized to optimize spacing?

Greetings everyone, I need assistance with adding margins above and below a Button element. Below is the relevant code snippet: const useStyles = makeStyles(() => ({ progress: { display: 'block', margin: 'auto', }, })); ...

cssreactjsmaterial-ui

I am having difficulty combining 2 HTML pages without the output becoming distorted

Having encountered issues when combining two HTML pages, one for a navbar and the other for a contact form in my Django project. The resultant single page appears distorted as shown in the image below. I attempted to use sections but it does not seem to re ...

htmlcssdjango

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

javascripthtmlcsswidget

When the window is resized, the text and images become jumbled and distorted

As a beginner in CSS, I am encountering an issue where the text and images on my website get distorted when I resize the window. How can I resolve this? HTML <img src="images\titles_03.jpg" class="tt1" > <img src="images\titles_05.jpg ...

htmlcss

Hide the load more button when there is no additional content available for Ajax loading

Currently, I am working on a WordPress query for a custom post type and would like to implement a "load more" button using Ajax to allow users to load additional articles. To handle the scenario where there are no more posts to load, I have included an "el ...

jqueryajaxwordpress

What is the best way to prevent the span text from wrapping to the next line depending on the content of the previous span element using CSS?

i want to ensure the span elements text remains fixed to two lines within a flexbox. What is my goal? https://i.stack.imgur.com/k0GhL.png I am aiming to achieve something similar to the image above. The issue arises when the value in '/400' be ...

htmlcssreactjs

"Defining a CSS class specifically for styling the span element nested within an

The HTML structure I am working with is as follows: <p> <a href="#"> <span class = "class-for-span"> SOME TEXT HERE </span> </a> </p> Along with the following CSS: p a{ color: grey; text-decora ...

htmlcsscss-selectors

Achieving a fixed footer at the bottom with absolute positioning on a webpage

I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of t ...

htmlcsscss-positionfootersticky-footer