Including extra CSS/JS to header page level instead of new template

[acasperw]

Hey there,

Would it be be possible to add CSS ( <link> or <style> ) to the header on a page level, instead of having to create a new template?

JS too, but not as necessary as this can be done inline currently, however <link> or <style> wont validate if it is in the body tag.


Sure you could have it included in the template from the beginning, however, if its only required on one page, ie, a gallery page or video page, to save on loading times, you don't want to include it in the global template.

So now you need to make a clone of the template, adding in the local <link> to the style-sheet.

[mvlcek]

Would it be be possible to add CSS ( <link> or <style> ) to the header on a page level, instead of having to create a new template?

You can use I18N Custom Fields or I18N Special Pages to define an additional text/textarea field header for the pages, add the corresponding <link> or <style> into this field, if needed and include it in the template with get_custom_field('header') or get_special_field('header').

[acasperw]

Would it be be possible to add CSS ( <link> or <style> ) to the header on a page level, instead of having to create a new template?

You can use I18N Custom Fields or I18N Special Pages to define an additional text/textarea field header for the pages, add the corresponding <link> or <style> into this field, if needed and include it in the template with get_custom_field('header') or get_special_field('header').

Thanks !

[n00dles101]

No need to install a plugin just to do this.

Just put a conditional statement in the header of your template like so: $id is the slug name.

Code:

<?php if ($id=='index' ){ ?>
<script type="text/javascript" src="<?php get_theme_url(); ?>/js/yourscriptfile.js"></script>
<?php } ?>

EDIT

Although you should probably use the built in functions to get the slug name, so this will also work.

Code:

<?php if(return_page_slug()=='index' ){ ?>
<script type="text/javascript" src="<?php get_theme_url(); ?>/js/yourscriptfile.js"></script>
<?php } ?>

[alienee2]

I needed a way to load predefined scripts and css into the header and footer on a per page basis;

to make it easy, first i setup each set of scripts and css as unique components;

for example this component is called "prettyphoto-header":

Code:

<link rel="stylesheet" media="all" href="<?php get_theme_url(); ?>/style/css/prettyPhoto.css" />
    <script type="text/javascript" src="<?php get_theme_url(); ?>/style/js/quicksand.js"></script>
    <script type="text/javascript" src="<?php get_theme_url(); ?>/style/js/portfolio.js"></script>
    <script type="text/javascript" src="<?php get_theme_url(); ?>/style/js/jquery.prettyPhoto.js"></script>

then i created custom fields called "headercomp" and "footercomp" both as type dropdown box, and then listed all of the relevant components (leaving the first line blank so it defaults to nul);

then in each page, you can select any of the header/footer code (in the components) to load;

in the theme file, i put this in the head:

Code:

<?php $headercomp = return_custom_field('headercomp'); ?>
<?php get_component($headercomp); echo"\n" ?>

and this in the footer

Code:

<?php $footercomp = return_custom_field('footercomp'); ?>
<?php get_component($footercomp); ?>

it works great...!

Only issue is that i'm not sure if the php code is optimal; it does work, but if any php gurus out there know of a better way to code those tags, let me know!

-marc