Custom CSS and JS for each page on Wordpress

Question

I'm doing a website using wordpress. It's my first project using it. I'm looking for a way to create custom css for each page of my website because my pages are extremely different. I don't want to put all in the styles.css of my theme. I know I can do something like:

function initScriptsAndStyles()
{
    if ( is_post( 'home' ) )
    {
        wp_enqueue_style( 'style', get_template_directory_uri() . '/css/home.css');
    }
}
add_action( 'wp_enqueue_scripts', 'initScriptsAndStyles' );

But I don't want to do this for each post also, you will always be worried that no body changes the name or something... I found people that says it can be inserted dynamically, but i don't know the way to do that, didn't found any tutorial that explain step by step.

Anyone can help me?

Cheers!

Sandy J · Accepted Answer · 2018-10-18 20:34:32Z

1

You can create different headers, different footers and totally different style and JS files and include them just wherever you need it. You can create templates for each page if they look different.

In your theme directory, create an empty php page , page-home.php.

In the beginning of the page, write the following:

<?php
/**
 * Template Name: My Custom Home Pgae
 */

 get_header();
?>

Then write all your code in HTML / PHP

In the end, include footer like this:

<?php get_footer(); ?>

Now go to your wordpress dashboard and click on Pages. Add a new page and on the right hand side, (near the publish button), you will see an option to assign page a template. You will see "Test" there because you assigned that template name to your page-home.php

Assign you page that template and your page will reflect the code you assigned.

For CSS, you can even get rid of entire style.css

You can create a file or folder to keep your css files in your theme folder and include it in the header.php file that comes with wordpress.

answered Oct 18, 2018 at 20:34

Sandy J

543 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raikish Over a year ago

As i know you can have only one header, so with get_header() i will import always the same libraries? you are recommending to use <link href="css/style.css" rel="stylesheet"> before get_header() in each template.php?

Sandy J Over a year ago

If you want, you can also use multiple headers. Create a new file header-home.php, header-about.php, header-xyz.php and include them in your templates in following format: <?php get_header('home'); ?> <?php get_header('about'); ?> <?php get_header('xyz'); ?> You can also do this with footer. Just name them footer-abc.php and call them using <?php get_footer('abc'); ?> You can copy header.php in your header-home.php and then modify the links and logos and anything you want.

Raikish Over a year ago

Then, I should include like : <link rel="stylesheet" href="fonts.googleapis.com/css?family=Tangerine"> in each header?

Collectives™ on Stack Overflow

Custom CSS and JS for each page on Wordpress

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related