The main html in Wordpress front-page is not displaying, how can i fix it?

0
votes

The html inside the main tag is not displaying but when I inspect the code, the html is there. This happens after I added the get_header function which gets a new header that is only for the front-page (other pages will get the normal header). The header and the footer are displaying without issues, only some listed items in the hero section aren't displaying either. I'm new to Wordpress and PHP, what is the best way to fix this?

My header-new.php code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Title</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <?php wp_head();?>
</head>

<body>

  <!-- ======= Hero Section ======= -->
  <section id="hero">
    <div class="hero-container">
      <img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
        <ul data-aos="fade-up">
          <li>Listed Item 1</li>
          <li>Listed Item 2</li>
          <li>Listed Item 3</li>
          <li>Listed Item 4</li>
        </ul>
      <a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
    </div>
  </section><!-- End Hero -->

  <!-- ======= Header ======= -->
  <header id="header" class="d-flex align-items-center">
    <div id="navbar-container">

      <div class="logo d-block d-lg-none">
        <a href="index.html"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Maite Richert Logo" class="img-fluid"></a>
      </div>

      <nav class="nav-menu d-none d-lg-block">
        <ul class="nav-inner">
          <li class="active"><a href="#about">Meet Me</a></li>
          <li class="drop-down"><a href="#services">Programs</a>
            <ul>
              <li><a href="./one-to-one-coaching.html">One-to-one Coaching</a></li>
              <li><a href="./posing-lessons.html">Posing  Lessons</a></li>
            </ul>
          </li>
          <li class="nav-logo"><a href="index.html"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Logo" class="img-fluid logo-image"></a></li>
          <li><a href="./shop.html">Shop</a></li>
          <li><a href="#contact">Contact</a></li>

        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <main id="main">

My footer.php code:

  </main><!-- End #main -->

<!-- ======= Footer ======= -->
  <footer id="footer">

    <div class="footer-top">

      <div class="container">

        <div class="social-links">
          <a href="" id="tiktok" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/tiktok.png" alt="TikTok Icon" class="tiktok"></a>
          <a href="" class="instagram" target="_blank"><i class="bx bxl-instagram"></i></a>
          <a href="" class="youtube" target="_blank"><i class='bx bxl-youtube'></i></i></a>
        </div>
      </div>
    </div>

    <div class="container footer-bottom clearfix">
      <div class="copyright">
        &copy; <strong><span>Maite Richert</span></strong>. All Rights Reserved. 2020
      </div>

    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <?php wp_footer();?>

</body>

</html>

And my front-page.php code:

  <!-- ======= About Us Section ======= -->
  <section id="about" class="about">
    <div class="container">

      <div class="section-title" data-aos="fade-up">
        <h2>Meet Me</h2>
      </div>

      <div class="row">
        <div class="col-lg-6" data-aos="fade-right">
          <div class="image">
            <img src="<?php bloginfo('template_directory');?>/assets/img/maite.jpg" class="img-fluid" alt="Fitness Coach">
          </div>
        </div>
        <div class="col-lg-6" data-aos="fade-left">
          <div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
            <h3>Hi, I'm Maite</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
              <li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </section><!-- End About Us Section -->

  <!-- ======= Services Section ======= -->
  <section id="services" class="services">
    <div class="container">

      <div class="section-title" data-aos="fade-up">
        <h2>Programs</h2>
      </div>

      <div class="row" style="margin-bottom: 10vh;">
        <div class="col-lg-6 order-2 order-lg-1 services-box">
          <div class="icon-box mt-5 mt-lg-0" data-aos="fade-up">
            <i class="icofont-muscle-weight"></i>
            <h4>One-to-one coaching</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="./personal-training.html"><div class="learn-more-btn">Learn More</div></a>
          </div>
          <div class="icon-box mt-5" data-aos="fade-up" data-aos-delay="100">
            <i class="icofont-trophy"></i>
            <h4>Posing Coach</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="./one-to-one-coaching.html"><div class="learn-more-btn">Learn More</div></a>
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100"><img class="img-fluid" src="<?php bloginfo('template_directory');?>/assets/img/services.jpg" alt="Fitnees posing"></div>
      </div>
    </div>
  </section><!-- End Services Section -->

  <!-- ======= Why Us Section ======= -->
  <section id="why-us" class="why-us">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-stretch">
          <div class="content" data-aos="fade-up">
            <h3><b>Why should you choose me?</b></h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <h4>How can you help you?</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <h4>Will this work for you?</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <h4>Aren't all the personal trainers the same?</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </div>
  </section><!-- End Why Us Section -->

  <!-- ======= Sponsors Section ======= -->
  <section id="sponsors" class="sponsors">
    <div class="container">
      <h3>Sponsors</h3>
      <div class="row sponsor-img-container">

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="400">
          <a href="https://womens.best/maiterichert" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-5-1.png" id="womens-best" class="img-fluid" alt="Women's Best"></a>
        </div>

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="500">
          <a href="https://www.ryderwear.com/maite" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-6.png" class="img-fluid" alt="Ryderwear"></a>
        </div>

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="300">
          <a href="https://wbffshows.com" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-4-1.png" id="wbff" class="img-fluid" alt="WBFF"></a>
        </div>

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="100">
          <a href="https://www.amazon.de/stores/node/19654276031?_encoding=UTF8&field-lbr_brands_browse-bin=Fitgriff&ref_=bl_dp_s_web_19654276031&_encoding=UTF8&tag=maite03-21&linkCode=ur2&linkId=45540dc51e0b104622d7d53318ee6fc2&camp=1638&creative=6742" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-2.png" class="img-fluid" alt="FitGriff"></a>
        </div>

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="200">
          <a href="https://factory4.lu" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-3-1.png" id="f4" class="img-fluid" alt="Factory 4"></a>
        </div>

        <div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in">
          <a href="https://www.basic-fit.com" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-1.png" class="img-fluid" alt="Basic Fit"></a>
        </div>

      </div>

    </div>
  </section><!-- End Sponsors Section -->

  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact section-bg">
    <div class="container">

      <div class="section-title">
        <h2>Contact</h2>
        <p>If you are interested in my services or if you have any questions, don't hesitate to contact me!</p>
      </div>

      <div class="row">

        <div class="col-lg-8 mt-5 mt-lg-0 form-box">

          <form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-left">
            <div class="form-row">
              <div class="col-md-6 form-group">
                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                <div class="validate"></div>
                <p>So I can get to know you better.</p>
              </div>
              <div class="col-md-6 form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                <div class="validate"></div>
                <p>Only to reply you back. No marketing.</p>
              </div>
            </div>
            <div class="form-group" style="padding-bottom: 2rem;">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validate"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validate"></div>
            </div>
            <div class="mb-3">
              <div class="loading">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent. Thank you!</div>
            </div>
            <div class="text-center form-btn-container"><button type="submit">Send Message</button></div>
          </form>

        </div>

      </div>

    </div>
  </section><!-- End Contact Section -->

<?php get_footer();?>
1
phphtmlwordpress
This is a longshot but when you press ctrl+A on the page does the content show (selected)? Could the text be white and therefore the new header is pulling a stylesheet that has something like div { color: #FFFFFF; } – fraggley
No, the the css is linked in the functions.php and is working ok but is only the HTML inside the main tag that is not displaying at all but you can find it in the source code. – joyjames97

1 Answers

2
votes

This is not a direct answer to your question, but it may solve your problem, so I hope the answer is helpful for you.

If you only want to add a hero section to your front page, I think you do not need a page template and header template only for this one case. You could add a if clause inside of your default header.php checking if you are on frontpage. If it is true, your hero section is being inserted:

<body>
    <?php  if (is_front_page()) { ?>
        <!-- ======= Hero Section ======= -->
        <section id="hero">
        <div class="hero-container">
          <img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
            <ul data-aos="fade-up">
              <li>Listed Item 1</li>
              <li>Listed Item 2</li>
              <li>Listed Item 3</li>
              <li>Listed Item 4</li>
            </ul>
          <a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
        </div>
      </section><!-- End Hero -->
    <?php } ?>
.
.
.

This would be my solution. Does it work for you? If not, try chaning the content of your hero-container to check if something is wrong with this code. Just add a <p>test</p> to see that the if clause is working and that only the frontpage is outputting the paragraph with "test".

If you want to have a different page template (maybe because there are more pages you want to show the hero section), make sure you use the right file names to make wordpress template hierarchy work: https://developer.wordpress.org/themes/basics/template-hierarchy/

Page Template can be created with copying the page.php, renaming it page-frontpage.php and adding /* Template Name: Frontpage */ at the top of it. Go to your wordpress backend and edit your frontpage. On the right side under "page attributes" select the created page template.

Inside of your page-frontpage.php change the get_header() function to:

get_header('frontpage');

Then create a copy of your header.php and name it "header-frontpage.php".

Now every page that has the "frontpage" page template, will use the header with the name "frontpage". In the header-frontpage.php you make your changes.

For me a template only makes sense, if it is applied to more pages. For one case, you can do more easy and faster using an if clause.

Hope this can help you.