New template, where to place CSS?

by

Till today I never used header.php and footer.php because my theme has multiple templates and I do not know how or where to place the CSS and JS files. Could someone please explain how to have a header.php and use get_header(); but also include new CSS files depending on the template?

Normal Code And how I see it

<?php /* Template Name: Contact Template */ ?>
<!-- HERE STARTS HEADER PHP? -->
<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="https://wordpress.stackexchange.com/questions/222452/style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>
<!-- HERE STOPS FOOTER PHP? -->

As you can see, where I place my CSS and JS files are in the header.php or footer.php so I can not add more depending on the template. How do you add CSS files if you use multiple templates?

===================================================

Problem is almost solved. Just need to create an if/else statement to check the Template Name:.

2 Answers
2

Include CSS and JavaScipt in the functions.php.

Create an empty PHP file, call it header.php, and yes wp_head() goes just before </head> not before <body> tag.

<!DOCTYPE html>
<html>
<head>
   <title>Website</title>
   <link href="https://wordpress.stackexchange.com/questions/222452/style.css" rel="stylesheet" type="text/css" />
   <?php wp_head(); ?>
</head>

Create an empty PHP file, call it footer.php and place your footer there:

   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>

In functions.php:

function my_scripts_styles() {

  wp_enqueue_script('jquery_flexslider_js', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array('jquery'),'3.0.0', true );

  wp_enqueue_style('flexslider_css', get_template_directory_uri() . '/css/flexslider.css', false ,'3.0.0'); 

}
add_action('wp_enqueue_scripts', 'my_scripts_styles');

With wp_enqueue_script() add JavaScript, the last argument true means it will be placed at the bottom. You need to give it a unique name e.g. flexslider_js_my. Include as many js files as you need.

With wp_enqueue_style() you add CSS files. The last argument false means it will be placed in the header. Give it a unique name, include as many as you need.

The rest of your code stays in index.php. header.php, footer.php, functions.php they are all in the home directory where your index.php is.

index.php:

<?php get_header(); ?>
<body>
   <header>
       <!-- MENU AND STUFF -->
   </header>
   <main>
   <!-- HERE STOPS HEADER PHP ? -->

      <!-- SOME CONTENT -->

   <!-- HERE STARTS FOOTER PHP? -->
   </main>
   <footer>
     <!-- SOME CONTENT -->
   </footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
<?php get_footer(); ?>

Btw, in your case you don’t need to include <?php /* Template Name: Contact Template */ ?> at the top. You can do just like in my example.

Update, the template name:

In my case get_page_template() will output the whole template path for example:

/homepages/133/htdocs/dd/myheme/wp-content/themes/authentic/page.php

where ‘authentic’ is my template name. So the if construct to include in functions.php:

$url = get_page_template();
$parts = explode("https://wordpress.stackexchange.com/", $url);
$name = $parts[count($parts) - 2];

if('authentic' == $name) { 

  wp_enqueue_style('homeCSS', get_template_directory_uri() . '/css/home.css', false ,'3.0.0'); 

}

Leave a Comment