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

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

htmlcsssvgcss-shapes

How can we make sure the selected tab opens in jQuery tabbed content?

I'm trying to make my tabbed content open on a specific tab by changing the URL. I remember seeing something like this before but can't seem to find it! Here's the fiddle I created: http://jsfiddle.net/sW966/ Currently, the default tab is ...

javascriptjqueryhtmlcsstabs

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Adjusting color schemes for Twitter Bootstrap Tooltips according to their placement

I have been attempting to customize the colors of tooltips (specifically from Twitter Bootstrap), but I am encountering some difficulties. While changing the default color was straightforward, altering the colors for .tooltip and its related definitions ha ...

javascriptcsstwitter-bootstraptooltip

Preloaded background images are loaded twice

I have a background image that I am preloading and caching, but my code is not reading it from the cache. It keeps loading the image as if it is not cached. Even though I have 8 images in the "imgSrcArray," I have simplified this example by hard coding jus ...

jquerycss

Tips for arranging letters on separate lines using CSS

I have a set of four divs that display numbers, and I want to show the corresponding words below each number. Despite trying to use the p tag with white-space: pre; in CSS, I have not been successful: #c { padding-top: 30px; padding-bottom: 30px; } ...

htmlcss

Verify that all mandatory fields are completed in WooCommerce prior to displaying the popup

Is there a way to confirm that all required elements of the checkout form are filled out before displaying the confirmation popup for Cash on Delivery? // Implementing Popup Confirmation function create_confirmation_popup_for_cod() { if ( ! is_checkou ...

phpwordpresswoocommercehook-woocommerce

Is Material-UI suitable for use in Java applications?

Is it feasible to integrate Material-UI into a Java application? Currently, I am utilizing Bootstrap and Spring forms for the frontend, while the backend consists of Spring MVC. I would like to implement React for both desktop and mobile interfaces. The ...

twitter-bootstrapspring-mvcreactjsspring-bootmaterial-ui

Gradually appear/disappear div element with a delay added

Storing divs in an array and deleting them after appending is my current method. Now, I'm looking to incorporate a fade-in and fade-out effect on each div with a delay. Check out this code snippet : var arr = $(".notification"); function display ...

javascriptjqueryhtmlcssjquery-animate

What's the best way to modify HTML element classes using Javascript?

I have designed a custom cms theme with various customization options that I wish to showcase in a live demo. My goal is to implement Javascript style switchers or modifiers where users can choose values from checkboxes or select tags, and see their select ...

javascriptjqueryhtmlcss

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss

Wordpress is forwarding all pages to the homepage

I am facing an issue with my wordpress website www.spiderhost.asia. Every time I click on a link, it redirects to the homepage which is not what I want. This problem suddenly arose even though I have not made any changes to the configuration or content of ...

phpwordpress.htaccesshttp-redirect

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

htmlcssfirefoxopera

Issues with Bootstrap 5 Carousel Control Button Functionality

My carousel isn't responding when I try to move it by touching the buttons. How can I fix this issue? Code: <div class="container mt-4"> <div id="carouselExampleIndicators" class="carousel slide" data-ri ...

htmltwitter-bootstrapbootstrap-5

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Ways to adjust the background color

Is there a way to change the background color instead of font color in this code snippet? def cloud_height_style_function(vals): return pd.cut(vals,[-np.inf,199,499,999,3000, np.inf], # need to review the bin a bit labels=[f'color: ...

pythonhtmlcsspandasstyles

Aligning Content in the Header

Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...

jqueryhtmlcsswordpress

Tips on how to postpone the loading of an image when utilizing a CSS animation on a different element

I'm currently working on a webpage where I have integrated CSS animations to move images around. When you click on these images, a larger version of the image along with a related paragraph is supposed to appear in its place. Initially, I had set up a ...

javascripthtmlcss

Book of Tales displaying Emotion Styling upon initial load only

I'm currently working with the styled api provided by emotion in order to create a custom styled button. const StyledButton = styled(Button)` background-color: ${theme.palette.grey['800']}; width: 50; height: 50; &:hover { ba ...

csstypescriptmaterial-uistorybook

Incorporate adjustable div heights for dynamically toggling classes on various DOM elements

One of the challenges in developing a chat widget is creating an editable div for users to input text. In order to maintain the design integrity, the box needs to be fixed to the bottom. An essential requirement is to have javascript detect resizing as us ...

javascriptjqueryhtmlcsscontenteditable