My CSS is not enqueuing

  • jonathansmith702

    (@jonathansmith702)


    4 years ago

    My CSS not feed into my page when I used the enqueu method in the function.php. My styles do not even appear. This is my code below for the function.php:

    <?php

function load_stylesheets(){
wp_register_style('sj', get_template_directory_uri() . "/sj.css", array(), 1.0, 'all');

wp_enqueue_style('sj');
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

?>

    This is the page source of my custom template:

    
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel='dns-prefetch' href='//s.w.org' />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/127.0.0.1:81\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.5.3"}};
			!function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
	<link rel='stylesheet' id='dashicons-css'  href='https://127.0.0.1:81/wordpress/wp-includes/css/dashicons.min.css?ver=5.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='https://127.0.0.1:81/wordpress/wp-includes/css/admin-bar.min.css?ver=5.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='https://127.0.0.1:81/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=5.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='wp-mail-smtp-admin-bar-css'  href='https://127.0.0.1:81/wordpress/wp-content/plugins/wp-mail-smtp/assets/css/admin-bar.min.css?ver=2.5.1' type='text/css' media='all' />
<link rel="https://api.w.org/" href="https://127.0.0.1:81/wordpress/wp-json/" /><link rel="alternate" type="application/json" href="https://127.0.0.1:81/wordpress/wp-json/wp/v2/pages/12" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://127.0.0.1:81/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://127.0.0.1:81/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.5.3" />
<link rel="canonical" href="https://127.0.0.1:81/wordpress/" />
<link rel='shortlink' href='https://127.0.0.1:81/wordpress/' />
<link rel="alternate" type="application/json+oembed" href="https://127.0.0.1:81/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2F127.0.0.1%3A81%2Fwordpress%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://127.0.0.1:81/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2F127.0.0.1%3A81%2Fwordpress%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
	<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>
	
</head>
<body>
	<div class="parallax1">
	<video autoplay muted loop id="Welcome">
		<source src="./HelloJon.mp4" type="video/mp4">
		</video>
		
		</div>
		
		<section>
			<h1>Write something here</h1>
			<div class="two-col">
			
			</div>
		</section>
		
		<div class="parallax2">
			<div class="heading-sm">
			</div>
		</div>
		
		<section class="dark">
			<h2></h2>
			<p></p>
		</section>
		
		<div class="parallax3">
		</div>
		
		<section class="dark">
			<h3></h3>
			<div class="two-col">
			</div>
		</section>
		
		<div class="parallax4">
		</div>

		<footer>
<p>Developer: Jonathan Smith</p>
</footer>

    I tried the long path name and it still will not take my css. Please Help

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 23 total)
  • Thread Starter jonathansmith702

    (@jonathansmith702)

    sorry I also want to mention that I am using Bitnami and the address may not work, but it 127.0.0.1:81.

    Moderator bcworkz

    (@bcworkz)

    There’s nothing wrong with your actual PHP code, it works on my theme’s functions.php. Of course the .css file is missing, but the reference appears on my page source.

    Could it be you have nested <?php ?> blocks on the page? You shouldn’t. It’s unusual to add them to functions.php since it’s normally all PHP code. Yet you’ve included them in your snippet here. While there are exceptions, most functions.php files only have the one opening <?php tag at the start of the file. There’s normally no closing ?>, which helps prevent headers already sent errors.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    Okay I will try that and let you know…because I cannot even see where tye style sheet appears in the view source code. Also my none of my sj.css code changes the look of the home page.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    <?php

function load_stylesheets(){
wp_register_style('sj',get_template_directory_uri() . '/SMITTYJTHEME/sj.css' , false, 1.0, 'all');

wp_enqueue_style('sj');
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

    So I took the back tag off and it still does not take, I have the image of my view source:

    [ SNIP! ]

    • This reply was modified 3 years, 11 months ago by Jan Dembowski.
    • This reply was modified 3 years, 11 months ago by Jan Dembowski.
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Please do not post large code or responses like that here, it doesn’t work after ~10 lines or so.

    If you need share that data please use https://gist.github.com/ or https://pastebin.com/ instead and post the link to that paste.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    My apologies..

    Thread Starter jonathansmith702

    (@jonathansmith702)

    Is there another way to put the style sheet into the template I created?

    Moderator bcworkz

    (@bcworkz)

    Does your template call wp_head(); or at least do_action('wp_head');(just before the closing </head> tag)? Enqueuing will not work without it.

    You could put the link reference right on your header template, but bypassing the enqueuing system like this is not recommended. It makes it impossible for other plugins to properly integrate with your theme. But if the theme is for your own use and doesn’t conflict with plugins you want to use, I guess there’s little harm. You really ought to learn how to get enqueue working, but I understand the frustration.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    I put the wp header in…its for my persona use…so you saying I can just use the regular way to apply the style sheet in that case?

    Moderator bcworkz

    (@bcworkz)

    Yup, that’s what I said. Not ideal but it’ll work. If you submitted such a theme to the repository, it’d be rejected. But for your own use, meh, do as you wish ??

    ETA: 'wp_headers' and wp_head() are not the same thing. One is for HTTP headers, the other is what causes enqueuing to work.

    • This reply was modified 3 years, 11 months ago by bcworkz.
    Thread Starter jonathansmith702

    (@jonathansmith702)

    ah, got it to appear in the source code, but it is not applying any of my CSS code styles….why is this?

    Thread Starter jonathansmith702

    (@jonathansmith702)

    None of my images nor my video header is showing….could the video be causing the problems?

    Thread Starter jonathansmith702

    (@jonathansmith702)

    GET https://127.0.0.1:81/wordpress/SMITTYJTHEME/sj.css net::ERR_ABORTED 404 (Not Found)

    that is an error I found in the developer tools….why?

    Thread Starter jonathansmith702

    (@jonathansmith702)

    My Css Code

    Thread Starter jonathansmith702

    (@jonathansmith702)

    That is my css code…is it not agreeing with something in this code?

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘My CSS is not enqueuing’ is closed to new replies.