Home > front end >  how to display a footer button only on certain pages?
how to display a footer button only on certain pages?

Time:12-31

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.

CodePudding user response:

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 >
   <footer>
      <button >
          Footer Btn
     </button>
  </footer>
</body>
  • Related