Add CSS or Javascript to WordPress head for specific pages

Categories: ,

Often I find myself needing to add a lot of extra styling to one or two pages in WordPress but I don’t want to bloat my theme’s style.css with lots of extra code.

With a simple PHP switch I can add additional CSS, Javascript or other items to the page head.

First create a file in your theme called header-page-includes.php. Then add a switch statement and a case for each page that you want to add custom CSS or Javascript to:

if(is_page()) {
  switch (get_the_title()) {
    case "About":
      echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo( 'template_url' ).'/css/about.css" />';
    case "FAQ":
      echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo( 'template_url' ).'/css/faq.css" />';
      echo '<script src="'.get_bloginfo( 'template_url' ).'/js/faq.js"></script>';

I chose to evaluate the page title, but if you have multiple page titles that are the same you may want to use the page ID instead.

Then include that file in your header.php



  • Maintain page-specific CSS and Javascript without a plugin
  • Ability to reuse CSS and Javascript for multiple pages


  • Your switch statement could get long and difficult to maintain. I suggest keeping your pages in alphabetical order.
  1. Buffy says:

    Hey hey hey, take a gadner at what you’ve done

Add Yours
Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Contact Me

How can I help you?

Meta Certified Digital Marketing Associate
Google Ads Certified Professional
Google Analytics Certified Professional
© 2024 Seth Stevenson Marketing. All rights reserved.