I'm having trouble getting my customized CSS to work properly in a WordPress theme that's using Bootstrap

Currently diving into the world of Wordpress development and creating my own theme. Utilizing bootstrap along with some custom CSS, but having trouble getting everything to work together in harmony.

Below is a snippet of my functions code:

<?php 

function smartwp_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // Removing WooCommerce block CSS stylesheet
} 
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );

function load_stylesheets() {
wp_register_style('bootstrap',get_template_directory_uri() . '/css/bootstrap.min.css',
array(),false,'all');
wp_enqueue_style('bootstrap');

wp_register_style('style',get_template_directory_uri() . '/style.css',
array(),false,'all');
wp_enqueue_style('style');
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

function loadjs() {
wp_register_script('customjs',get_template_directory_uri() . '/js/scripts.js','',true);
wp_enqueue_script( 'customjs');

}

add_action('wp_enqueue_scripts','loadjs');

I even attempted some code found online to disable Guttenberg css, unfortunately, with no success. Checking the console, I can confirm that my style.css is being included and bootstrap is functioning correctly.

Below is a snippet of my current CSS styles:

   /*
Theme name: 
Author: 
*/

body {
  background: "#ff03ab";
}

Can't seem to figure out what's going wrong, could it be typos lurking around somewhere? I've also tried clearing browser history and experimenting with different CSS properties in my style.css file.

Answer №1

In order to ensure the custom CSS file is loaded following bootstrap, it is necessary to include bootstrap as a dependency within the wp_register_style() function:

https://developer.wordpress.org/reference/functions/wp_register_style/

wp_register_style( 'custom-style', get_template_directory_uri() . '/custom-style.css', array( 'bootstrap' ), false, 'all' );

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

Ways to align div elements

I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play ...

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

To ensure W3C validation, I must remove the target attribute from all anchors where the target value is null. Here is the code snippet inside the body: <div> <a href="#" target="">home empty</a> <a href="#" target="blank">home&l ...

Passing $index variable from a bootstrap modal window does not work in AngularJS

I'm running into a wall here. My issue involves using ng-repeat to populate a table with two buttons in each row - one for updating the row content and another for uploading files. The upload button triggers a bootstrap modal window where users can se ...

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

Issue with Bootstrap 5 offcanvas when placed inside a fixed div

I am currently incorporating the bootstrap navbar with offcanvas functionality. All nested within a fixed positioned div. The styling of the div is outlined below: .whiteHeader { position: fixed; display: flex; align-items: center; height: ...

Stop angular material css styles from affecting neighboring components

Currently, I have overridden the angular material style in my global SCSS style as follows: .mat-form-field-infix{ padding: 0.5em 0 0.5em 0 !important; } However, I now need to apply a different padding to the same element in my component for addition ...

Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

This situation has been incredibly frustrating for me!! Let me explain what's going on - I have a callback data coming from my AJAX post method that needs to be passed to seven different HTML tables. Although I successfully received the data from the ...

Deactivate a modal in Bootstrap 4 once it is closed

Trying to find a resolution for my issue. Utilizing bootstrap4 in a Laravel project and facing a problem with modals. Here is the code snippet: $("#newAddressBtn").on('click', function () { $('#modalAddressees').modal(&apo ...

Stop Wordpress from automatically preloading html5 videos

I have a WordPress page containing numerous videos and I am looking to prevent them from preloading using HTML5. The challenge is that I am inserting the videos through the featured media options, which means I cannot directly add the preload="none" attrib ...

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

Issue encountered while trying to access PHP script within table data utilizing Ajax

I have a small project that involves displaying different news articles. I need to incorporate the news_all.php file into the table data in dashboard.php without using the include('news.php) function. Instead, I am utilizing Ajax methods to achieve th ...

Connecting to distinct sections on another webpage

The purpose is to create specific links to sections on merchandise.html from various html pages within the site. All sending links are established by a .dwt file to ensure consistency across all sending pages. While this functionality works in Internet Ex ...

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

Modify form layout upon selection of a specific radio button

Hey there! I'm a student currently diving into the world of JavaScript, CSS, and HTML. However, I've encountered a little problem while working on an exercise that involves using Bootstrap. function ShowForm(formId){ document.getElementByI ...

Why Bootstrap 4 collapse feature is not functioning correctly within a ReactJS map component?

I am currently working on a project that requires implementing a collapse feature. The idea is to display all available content when the user clicks the Read More button (which is functioning as intended for collapsing). However, I am facing an issue where ...

Creating an animated full-width SVG with a background image

This has been quite a challenge for me. I have successfully implemented the main functionality that I wanted in this codepen. The SVG is divided into 3 sections, with the middle section sliding away from the others when you click the "Find Out More" button ...

Creating combined rows in Pandas to_html tutorial

Here is the data frame I have: UK | FOOD | Sales | 4000 UK | FOOD | Order | 6000 US | DRINK | Sales | 4300 US | DRINK | Order | 6600 I am looking to use to_html to combine rows with similar values, resulting in the following output: UK | FOOD | Sales ...

Discover Angulajs ui-view to achieve a seamless 100% full-height screen experience

I am currently working on a web app using angularjs. The index.html file contains the navigation, content, and footer sections, with ui-view responsible for changing routes accordingly. My goal is to have a full-screen background image on the main page, wh ...