why does wordpress override bootstrap?
Question
I'm trying to put a theme I made with bootstrap into WordPress. I have enqueued all style sheets and my console shows no errors. when I look at my page through WordPress i have a border around everything and my rounded circles with images inside are now square. how do i stop WordPress from changing that?
<?php
function load_stylesheets(){
wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');
wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
wp_enqueue_style('custom');
/*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');*/
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs(){
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
<a href="#" class="navbar text-uppercase"> sites by bryan </a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<!-- -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a href="#navBar" class="nav-link">home</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">contact</a>
</li>
</ul>
</div>
</nav>
<!-- end nav element -->
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- end headder section -->
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<!-- section title -->
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<!-- end of section title -->
<div class="row">
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-html5"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">html</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
clean written code and layout that includes comments to ease the
process future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<svg
width="1em"
height="1em"
viewBox="-1 0 18 18"
class="bi bi-bootstrap"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12 1H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zM4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4z"
/>
<path
fill-rule="evenodd"
d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"
/>
</svg>
</a>
<h6 class="text-uppercase font-weight-bold my-3">bootstrap</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
used for quick production to make scaleable sites that view on any
device
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-css3-alt"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">css</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
written to match the layout of the page from top to bottom in
order with coments to ease the process for future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-js"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">js</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
front-end javascript to bring a site to life and give the viewer a
pleasent and smooth experience
</p>
</div>
<!-- end of single skill -->
</div>
</div>
</section>
<!-- end of skills section -->
<!-- contact section-->
<section class="contact py-5" id="contact">
<div class="container">
<div class="row">
<div class="col-8 mx-auto col-md-6">
<form>
<div class="form-group">
<input
type="email"
class="form-control contact-input p-3"
placeholder="Enter Email"
/>
</div>
<button
type="submit"
class="btn btn-outline-secondary btn-block contact-btn"
>
submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end of contact section-->
<?php get_footer(); ?>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root {
--mainBlue: #40acf1;
--transparentBlue: rgba(64, 172, 241, 0.7);
--mainWhite: #ffffff;
--mainBlack: #292f36;
--mainGrey: rgb(216, 214, 214);
--mainYellow: #e3b505;
}
body {
font-family: "Roboto", sans-serif;
color: var(--mainBlack);
background: var(--mainWhite);
}
/* navbar */
.navbar {
background: var(--mainGrey);
}
.navbar-icon {
font-size: 2rem;
color: var(--mainBlue);
}
.navbar-toggler {
outline-color: var(--mainBlue) !important;
}
.nav-link {
color: var(--mainBlack);
text-transform: capitalize;
}
.nav-link:hover {
color: var(--mainBlue);
}
/* header */
.header {
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%, 0 0);
color: var(--mainWhite);
overflow: hidden;
}
.height-max {
min-height: calc(100vh - 76px);
background: url(../img/openbridge.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: zoom;
animation-duration: 20s;
animation-delay: 5s;
animation-iteration-count: infinite;
}
@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2) translate(-5%);
}
100% {
transform: scale(1);
}
}
/* skills section*/
.skills-icon {
font-size: 3rem;
color: var(--mainYellow);
background: var(--mainGrey);
}
.skills-icon:hover {
color: var(--mainYellow);
}
.skills-underline {
width: 4rem;
height: 0.3rem;
background: var(--mainBlue);
margin: 1rem auto;
}
/*contact section*/
.contact {
clip-path: polygon(25% 15%, 75% 15%, 100% 0, 100% 100%, 0 100%, 0 0);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/trainstation.jpg") center/cover fixed no-repeat;
}
.contact-input {
font-size: 1.5rem;
text-transform: capitalize;
background: transparent;
border-color: var(--mainYellow);
color: var(--mainYellow) !important;
}
.contact-input::placeholder {
color: var(--mainYellow);
}
.contact-input:focus {
background: transparent;
border-color: var(--mainYellow);
}
.contact-btn {
text-transform: uppercase;
color: var(--mainYellow);
border-color: var(--mainYellow);
}
.contact-btn:hover {
background: var(--mainYellow);
color: var(--mainBlack);
}
/* footer icons */
.footer {
background: var(--mainGrey);
}
.footer-icon {
font-size: 1.5rem;
text-decoration: none;
color: var(--mainYellow);
transition: all 1s ease-in-out;
}
.footer-icon:hover {
color: var(--mainBlue);
}
1 answers
solution1
0 2021-01-13 19:53:35
The following should be working, I've jus tested it. I've added a CDN check, a fallback and a the proper required attributes ( integrity and crossorigin ). You must place that in your function.php file. You can't enqueue file on the front end, like in your example.
Just make sure you update the fallback path.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
/**
* Deregister Wordpress jquery core version
* @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to jquery_js
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if( $test_jquery_js !== false ) {
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', false );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery-3.5.1.min.js', array(), '3.5.1', false );
};
wp_enqueue_script( 'jquery_js' );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if( $handle === 'jquery_js' ) {
$integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='; // ... integrity key @link https://code.jquery.com/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue bootstrap_bundle_js
* Dependency to jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_bundle_js
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_bundle_js = @fopen( 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', 'r' );
if( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'bootstrap_bundle_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src ) {
if( $handle === 'bootstrap_bundle_js' ) {
$integrity = 'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx'; // ... integrity key @link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue magnific_popup_js
* Dependency to jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_js = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', 'r' );
if( $test_magnific_popup_js !== false ) {
wp_register_script( 'magnific_popup_js', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'magnific_popup_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
};
wp_enqueue_script( 'magnific_popup_js' );
/**
* Register then enqueue bootstrap_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_css
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_css = @fopen( 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', 'r' );
if( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', array(), '4.5.3', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'bootstrap_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.min.css', array(), '4.5.3', 'all' );
};
wp_enqueue_style( 'bootstrap_css' );
add_filter( 'style_loader_tag', 'data_bootstrap_css', 10, 3 );
function data_bootstrap_css( $tag, $handle, $src ) {
if( $handle === 'bootstrap_css' ) {
$integrity = 'sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2'; // ... integrity key @link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<link rel='stylesheet'",
"media='all' />",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='style' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<link rel='stylesheet'",
"integrity='" . $integrity . "' crossorigin='anonymous' type='text/css' media='all' />",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue fontawesome_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_fontawesome_css = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', 'r' );
if( $test_fontawesome_css !== false ) {
wp_register_style( 'fontawesome_css', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', array(), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'fontawesome_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array(), '5.15.1', 'all' );
};
wp_enqueue_style( 'fontawesome_css' );
/**
* Register then enqueue magnificpopup_css
* Dependency to bootstrap_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_css = @fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', 'r' );
if( $test_magnific_popup_css !== false ) {
wp_register_style( 'magnific_popup_css', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'magnific_popup_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
};
wp_enqueue_style( 'magnificpopup_css' );
/**
* Register then enqueue bsite_css
* Dependency to bootstrap_css, magnificpopup_css
* @link https://developer.wordpress.org/reference/functions/wp_register_style/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_register_style( 'bsite_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'magnificpopup_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'bsite_css' );
};
}; ?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why does id not override class in bootstrap?
Why does Bootstrap override my CSS definition for a non Bootstrap id?
Does Bootstrap CSS override theme?
Why bootstrap override internal style?
My own css does not override bootstrap css
Custom CSS Won't Override Bootstrap on Wordpress Theme
Adding bootstrap in WordPress theme seems to override nav styles
Input button does not work in Wordpress (Bootstrap)
Why does a class property not override the Universal Property?
Wordpress child theme does not override parent theme css
Related Tags