1

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="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
    wp_enqueue_scripts hook with the is_* conditional tags in functions.php – Pieter Goosen Apr 2 '16 at 13:45
  • @PieterGoosen Well this is what I am looking for! Only need to find out how I can add CSS/JS files depending on the Template Name: (Can't use page name or id because the theme will be in multiple languages). – Jeff Apr 2 '16 at 14:54
6

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="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('/', $url);
$name = $parts[count($parts) - 2];

if('authentic' == $name) { 

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

}
  • Thanks for your help man, really appreciate it! Could you please help out a bit more? I got the default CSS and JS working, for some reason I can not get the custom CSS and JS depending on the Template Name:. JSFiddle: jsfiddle.net/dwbuyhp1/1 . I need to have an if/else statement to check the Template Name and then wp_enqueue_style('homeCSS'); and stuff. – Jeff Apr 2 '16 at 18:31
  • Yes, I tried it a few times and nothing changes. My style.css en default.js will be added, but not contact.css or anything. – Jeff Apr 2 '16 at 18:41
  • 1
    Glad you figured it out – BrandonZ Apr 3 '16 at 15:53
2

Don't include CSS and JavaScript manually, there are special functions for this purpose. Modify this code to meet your requirements and put it to the functions.php of your theme.

<?php
$template_file_name = basename( get_page_template() ); // get template file name

if('my_template.php' == $template_file_name) { // check  file name
    wp_enqueue_style(
        'my_style_name',
        '/path/to/style.css',
        array(), // dependencies
        NULL, // version
        all // media
    );
    enqueue_script(
        'my_script_name',
        '/path/to/script.js',
        array(), // dependencies
        NULL, // version
        true // in footer
    );
}

Minimal header.php

<html>
<head>
</head>
<?php wp_head(); // this function will place your CSS here ?>
<body>

Minimal footer.php

<?php wp_footer(); // this function will place your JavaScript here?>
</body>
<html>

Minimal my_template.php

<?php
/*
Template Name: Contact Template
*/
get_header();
// your content goes here
get_footer();

For more information see:

wp_enqueue_style()

enqueue_script()

Theme Development

  • Thanks for your comment! Could you please help me a bit more? I have the following code: jsfiddle.net/6buxrf98 . I only get style.css and default.js and not my template files. Do you know what is wrong? ( I deregister jquery because it is in my default.js file ;) ) – Jeff Apr 2 '16 at 17:09
  • Check echo $template_file_name. – Max Yudin Apr 2 '16 at 17:30
  • Where should I place it? When I place it in index.php or in contactTemplate.php it doesn't show anything.. – Jeff Apr 2 '16 at 17:46
  • Place the following code anywhere in Contact Template file and you will see the file name: echo basename( get_page_template() );. Does it prints front-page.php? And enable debug mode in wp-config.php to check if there are any errors, warnings or notices. – Max Yudin Apr 3 '16 at 7:22
  • Yes, it will give me the template file name (contactTemplate.php). So this works. Now I need to check if I can get the if else statement to work. – Jeff Apr 3 '16 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.