0

I’m using Ajax to load only the main content of my website, as I have a music player and I don’t want it to stop playing while browsing website.

Everything is working well, except that, as the body is not loading when I change pages, the body classes are not changing either.

How can I force the classes from <body <?php body_class(); ?>> to load even if the body is not loading itself?

Is there a way of adding classes to body after the ajax page is loaded?

I try to get something down inspired by that [old post][1], but i'm SO lost.

$.ajax({
  url: "yourloop.php",
  context: document.body
}).done(function() { 
  $(this).addClass("finished-loop");
});

1/ Should I put this code into functions.php or in the javascript file who call the ajax at the end? I tried putting it into functions.php but I get a fatal error, I tried in the .js and nothing happened.

2/ Should yourloop.php should be something like page.php or single.php (the wp templates)?

3/ So if I want to add different classes for a Page or a Post, I should write something like this?

$.ajax({
  url: "page.php",
  context: document.body
}).done(function() { 
  $(this).addClass("page");
});

$.ajax({
  url: "single.php",
  context: document.body
}).done(function() { 
  $(this).addClass("single");
});

4/ What I want is for the body class to be dynamic as the <body <?php body_class(); ?> >. How do I it ?

I would appreciate it if you can give me more detailed code. 🙂 Thank you for your help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.