i want to add an animated background to the front page of my website so i use the following plugin but the problem is that i must apply an id to the body and i don't know how can i do it in the right way, can anyone help me with that ?

<body id="UNIQUE_ID_HERE"> </body>

P.S :i'm using a child theme

5 Answers 5


Put this in your functions.php →


function body_id_dynamic() {

    if (is_home()) {

        echo ' id="home"';

    } elseif (is_single()) {

        echo ' id="single"';

    } elseif (is_search()) {

        echo ' id="search"';

    } elseif (is_archive()) {

        echo ' id="archive"';

and then this →

<body<?php body_id_dynamic(); body_class(); ?>>

P.S. → More customization is possible. This was to give you a clue. Add as many conditions as you want.


There's no filter or anything, so you'll need to edit the body tag directly in the child theme. It probably opens in header.php and looks something like:

<body <?php body_class(); ?>>

Just add the ID:

<body id="body" <?php body_class(); ?>

Then just conditionally load the script on the front page by checking is_front_page() first.

  • thank you for you response but it doesn't work for some reason that i don't know :(
    – sihamxxi
    Oct 10, 2017 at 11:30
  • What does work? The id not being added? Would find that hard to believe. Do you mean the script just isn’t working? Issue is probably somewhere else, possibly something to do with how the script was enqueued or a problem in your JS. Either way, nothing that makes this answer incorrect. Oct 10, 2017 at 12:01
  • the script is enqueued using PHP code Snippet like this [xyz-ips snippet="bg"] where bg is name of the script : is_front_page();
    – sihamxxi
    Oct 10, 2017 at 12:52
  • i did just like you said but i add id="UNIQUE_ID_HERE" in a div in templates/index-no-model.php and it works but for all pages in the website not only the front page
    – sihamxxi
    Oct 10, 2017 at 16:24

I don't think you need to add an ID to the body for two reasons :

1) The body is unique in all the pages so you can simply use body selector in CSS

2) Each page (including the front page) should have a unique class added to the body. So in case you want to apply a CSS to a specfic page you should check this CSS class. here is an example :

enter image description here

  • Normally you'd be right, but the specific script that they're trying to use, particles.js, only works with an actual ID. Oct 10, 2017 at 10:57
  • when integration the partical.js you may add a small jquery code to add the id usinth the CSS class i described. Oct 10, 2017 at 11:12
  • you may do this $(body).attr('id','particles-js') .. like that it will be a part of the script you include and you avoind touching your HTML Oct 10, 2017 at 11:13

The easiest way is to build a template for this page, and add the header and footer to it. This means create template, remove get_header() replace with the content of header.php, same with the footer. THEN you have full control over just that pages template. You can add the template name comment to the top of the page (just make a box and drop it in) and it will still technically function as a template within your theme. Just with its own header and footer.


In your header.php file you can find the body tag like Jacob said:


but to add a unique id only in the front page, you should add it like this:

<body id="<?php echo (is_front_page()) ? 'home' : 'not-home'; ?>" >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.