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 8 replies - 16 through 23 (of 23 total)
  • Moderator bcworkz

    (@bcworkz)

    The 404 error appears to be because the path to your theme is incorrect. I’d expect it to be more like https://127.0.0.1:81/wordpress/wp-content/themes/SMITTYJTHEME/sj.css

    Is that the file you’re trying to enqueue? If it’s part of a primary theme (not a child theme), the second argument to wp_enqueue_script() should be something like get_template_directory_uri() . '/sj.css', assuming the file is in your theme’s main folder, where style.css and functions.php reside.

    Your CSS appears to be OK, but it’s out of context for me, so it’s difficult to say for sure. It seems your trouble may be your code isn’t generating proper paths to resources. I’m wildly extrapolating from the 404 error due to the wrong path to the CSS file. It may or may not carry over to other issues like images not showing. The most common reasons for images not appearing is wrong path, wrong permissions, or the file simply does not exist.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    Ah yes…the sj.css is inside of my theme folder….so I have to use a different enquene technique…okay will try that.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    So I went back and did the enqueue as you mentioned. The CSS still did not take, here is my view source code: View source code

    here is my function code and front-page.php code:
    Front-page.php

    Function.php

    Moderator bcworkz

    (@bcworkz)

    I put your front-page.php file and the enqueue code into my test site’s theme and the proper link reference does appear in page source, so there’s nothing wrong there. The problem lies elsewhere.

    Do you have WP_DEBUG defined as true in wp-config.php? It might flag an issue that I cannot see. It’s a useful configuration for development, but it should be defined as false on production sites for improved security.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    yes, it is set to true, what do I do next?

    Thread Starter jonathansmith702

    (@jonathansmith702)

    and you say it appears on the test environment correct…I use control F to try to find it and it does not bring up anything, I name the id sj.

    Thread Starter jonathansmith702

    (@jonathansmith702)

    the WP_DEBUG does not show any issues with the site..but it is turn to true

    Moderator bcworkz

    (@bcworkz)

    what do I do next?

    Good question. The problem isn’t with the code you posted to pastebin. (well, the page source shows the problem, the other pastebin code I mean)

    At some point something was semi-working because you got a 404 error. The path was wrong, but getting the link in page source by enqueuing was apparently working.

    Since I cannot examine your site and there’s no issue with the code you posted, I’m at a loss to suggest what might be wrong. If you have any plugins active, try deactivating them all in case they are causing a conflict.

    One approach you could try is to start with an essentially blank theme. Only the bare minimum style.css with the information header but no actual CSS. You need an index.php file, you can use a copy of your front-page.php if you wish, I know it’s OK. The functions.php file should only contain the code you posted to pastebin. Of course you also need your sj.css file. Activate this new theme and I’d expect your sj.css link to show up on pages. You can then add parts of your current theme, testing frequently. At some point you’ll add something that causes the link to fail to appear. The problem will be in what was just added. Divide that part up and refine what’s added until you zero in on the cause.

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