how to display a footer button only on certain pages?

December 30, 2021

I have a page called footer.php which is included on all of my pages through PHP like so:

<?php require_once "inc/footer.php"; ?>

In the footer, I have a back to top button which I don’t want on some of my pages since they are small pages. What I have done so far is shown below.

CSS (applying to all pages):

.footer-btn{
  display: none;
}

I then put the following code in the head on pages where the button shall be displayed:

<style>
.footer-btn{
 display: block;
}
</style>

Although this works, I don’t like using internal CSS and I feel there is a better way of doing it through jquery/js (not sure how to use either well). Suggestions are appreciated.

>Solution :

just write the name of the page into the body class using php. You can then target that page, using CSS, to hide / show the footer.

<style>
.page-index .footer-btn,
.page-about-us .footer-btn {
   display: none;
}
</style>
<body class="page-about-us">
   <footer>
      <button class="footer-btn">
          Footer Btn
     </button>
  </footer>
</body>