Referencing css within Wordpress custom template

Question

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

Nathan Dawson · Accepted Answer · 2017-05-10 03:33:25Z

0

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/

answered May 10, 2017 at 3:33

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jessica McKinnon Over a year ago

Thank you for the input! I knew that something like this needed to be done but I just didn't know how to even start. I will look through the links you included and rework the code and see if it works. Thanks again.

Collectives™ on Stack Overflow

Referencing css within Wordpress custom template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related