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.
acasperw Wrote: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').
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 } ?>
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