CODEWITHSUNDEEP
phpjavascripthtmlcssinclude
Welly
Welly

Reputation: 315

What's the most efficient way to include .js and .css within pages already including other pages?

I've been playing with a number of different ways for including header.php and footer.php files for a site I am building.

What I'm not sure about is the most efficient place to reference the several .css and .js files that are required for different individual pages on the site. I have set up the included pages as follows (these are simplified to their minimum to make the point of the structure):

header.php:

<html>
    <head>
        <title>Example Page 1</title>
    <link rel="stylesheet" type="text/css" href="menu_styles.css"/>
    <script type="text/javascript" src="main_menu.js"></script>
    </head>
<body>
<!------MENU CODE HERE------>

Followed by whatever page .php:

<?php
include 'header.php'
?>

<div>Page Content 1</div>
<div>Page Content 2</div>

<?php include 'footer.php' ?>

Where footer.php in its simplest form is as follows:

</body>
</html>

I can see the logic in referencing menu_styles.css and main_menu.js in the header as that is where the menu code will always be written. However, if I have an individual page with, for example, an image scroller with its own required js/css files, where is the most efficient way to define these? Can I do it within the main page itself or do I have to define every single .css and .js within header.php? This would produce a long list and to me seems inefficient as many pages will not require the links defined to these files.

Upvotes: 0

Views: 3727

Answers (4)

mehdi
mehdi

Reputation: 1755

header:

<html>
    <head>
        <title>Example Page 1</title>
        <?php
        if ($css_inc != NULL) {
            foreach ($css_inc as $value) {
                echo '<link type="text/css" href="' . $value . '"></link>';
            }
        }
        if ($js_inc != NULL) {
            foreach ($js_inc as $value) {
                echo '<script type="text/javascript" src="' . $value . '"></script>';
            }
        }
        ?>
    </head>
    <body>
    <!------MENU CODE HERE------>

page.php

<?php
   $css_inc = array('style.css', '\public\css\gallery.css');
   $js_inc = array('public.js', '\public\js\jquery.js', '\public\js\jqueryui.js');
   include 'header.php'
?>

<div>Page Content 1</div>
<div>Page Content 2</div>

<?php include 'footer.php' ?>

Upvotes: 0

MMM
MMM

Reputation: 7310

I would do the following:

  1. Create a global variable containing all of the CSS files, and another one for all Javascript files
  2. In your "whatever php file", first change the global variables to contain the right CSS files and JS files.
  3. Call require or include to insert your header, which adds the CSS files based on the global variables
  4. Do whatever you need in your "whatever php" file
  5. include or require your footer file, which inserts all of the JS files based on the global variable (it is recommended to include JS files at the end of the document to prevent pageload delays)

Upvotes: 2

Jon Hudson
Jon Hudson

Reputation: 1184

You could use a different header template for the page with the image scroller, and just include the image scroller css in that header.

You can include Javascript files anywhere in your page, and in fact some consider it better practice to include them at the bottom of your page, so they load after your HTML content, and therefore don't delay the loading of content. However I believe CSS files must always be inlcuded within the head tags.

Upvotes: 0

Alytrem
Alytrem

Reputation: 2620

You can add the src of every needed css or JS to an array (PHP variable). Then at the end of your page (before closing body), add your and tags.

<?php
include 'header.php';
$css = array();
$js = array();
?>

<div>Page Content 1</div>
<div>Page Content 2</div>
// content and content imports may add sources to css and js arrays

// where footer.php prints <script> and <link> tags, importing needed css and js
<?php include 'footer.php' ?>
</body>
</html>

Upvotes: 2

Related Questions