CODEWITHSUNDEEP
wordpress
Jessica McKinnon
Jessica McKinnon

Reputation: 11

Referencing css within Wordpress custom template

I have created a Wordpress site that is pretty well complete. I am working on the last part - the static custom landing page where the visiter clicks "Enter Site" before they actually enter the Wordpress site. I have created a custom template in Wordpress using the HTML file I previously created for the landing page. The landing page involves an image centered on the page that the visitor clicks on to enter the site. It also contains a background image that is called in my stylesheet (css). Problem I am having is that the page is not referencing the stylesheet at all. I'm assuming there is a special way that the stylesheet needs to be called within the HTML (now a .php) because I had to change how the jpeg image was called which I stumbled across online somewhere. This is my code in the .php file used as the template:

<?php
/*
Template Name: Your Template Name
*/
?>
<html>
<head>
<title>Site Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stylesheet_example.css" rel="stylesheet" type="text/css">
</head>

<body>
<a href="example.com">
<img src="<?php bloginfo('template_url'); ?>/images/landing_page.jpg" />
</a>
</body>
</html>
<?php ?>

And my CSS:

body {
background-image:url(landingpage_shadow.jpg);
background-repeat: none;
background-size: 100%;
text-align: center;
width: 100%;
margin-top: 50px;
}

If anyone could help me with this, it would be greatly appreciated! I've spent hours searching online for an answer and cannot find anything. Thanks

Upvotes: 0

Views: 107

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19308

You're using a relative URL for the CSS file. It's relative to the URL of the landing page rather than the theme folder where the PHP file resides therefore your CSS can't be found.

The solution to your direct issue is to use get_template_directory_ur();.

<link href="<?php echo get_template_directory_uri(); ?>/stylesheet_example.css" rel="stylesheet" type="text/css">

The code above assumes your CSS file is in the root of your theme directory.

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

More broadly, you need to look at how this template is displayed. It should be using WordPress' enqueue functionality with wp_head() called in the head section. I can understand why it isn't in the example provided however in my view the code needs some restructuring.

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

Upvotes: 0

Related Questions