HTML Template to ClassicPress Style not Styling

Themes
1

So I’ve been following a couple different YouTube videos to convert an HTML Template site to WordPress, while using ClassicPress. The videos in question are for specifically WP ver. 5.

Now I followed the basic setup per video. Such as Theme files needed (example: index.php, style.css, front-page.php. functions.php, etc.) Than following the videos I moved the Header and Footer to the corresponding PHP files; same with the body html (front-page.php).

At first I thought maybe ClassicPress devs changed some of the PHP tags Example:

wp_enqueue_style

TO

cp_enqueue_style

However, going to the ClassicPress documention and searching for these clearly showed I was using the right WP PHP syntax:

wp_enqueue_style
wp_enqueue_script

So I thought maybe I need to add “this” (this being JS, SASS, etc. that the template uses before it will style stuff). I even looked up how to try and call SASS files to see if it was different than:

wp_enqueue_script
wp_enqueue_style

But most of what I found suggested plugins for SASS well others suggested simply using:

wp_enqueue_style

To call SASS files.

So I don’t know if its the video tutorials that is the issue (them being for WP5) or if something is wrong in the code that is making the STYLE not show (note this is a locally hosted ClassicPress).

So here’s what I got:

header.php

<!DOCTYPE html>
<html lang="zxx">
<head>
<?php wp_head();?>
</head>
<body>
<div class="section-wrapper">
    <!-- ========== Preloader start ========== -->
    <div id="preLoader"></div>
    <!-- ========== Preloader end ========== -->
    <!-- ========== Header start ========== -->
    <header class="header">
      <div class="container">
        <div class="row">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="index.html">
              <!-- <h1 class="m-0">WONTED</h1> -->
              <img src="assets/images/wonted-logo.png" alt="Wonted" />
            </a>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul id="onepage-nav" class="navbar-nav menu ms-lg-auto">
                <li class="nav-item">
                  <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                  <a href="about-me.html" class="nav-link">About Me</a>
                </li>

                <li class="nav-item dropdown submenu">
                  <a class="nav-link scroll dropdown-toggle" href="#events" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">Events
                  </a>
                  <span class="sub-menu-toggle dropdown-toggle" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="icofont-rounded-down"></i>
                  </span>
                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="all-events.html" class="nav-link">All Events</a>
                    </li>
                    <li class="nav-item">
                      <a href="single-event.html" class="nav-link">Details Without Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="event-left-sidebar.html" class="nav-link">Event Left Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="event-right-sidebar.html" class="nav-link">Event Right Sidebar</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown submenu">
                  <a class="nav-link scroll dropdown-toggle" href="#events" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">Pages
                  </a>
                  <span class="sub-menu-toggle dropdown-toggle" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="icofont-rounded-down"></i>
                  </span>
                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="faq.html" class="nav-link">FAQ</a>
                    </li>
                    <li class="nav-item">
                      <a href="awards.html" class="nav-link">Awards</a>
                    </li>
                    <li class="nav-item">
                      <a href="gallery.html" class="nav-link">Gallery</a>
                    </li>
                    <li class="nav-item">
                      <a href="testimonial.html" class="nav-link">Testimonial</a>
                    </li>
                    <li class="nav-item">
                      <a href="all-book.html" class="nav-link">All Book</a>
                    </li>
                    <li class="nav-item">
                      <a href="terms-conditions.html" class="nav-link">Terms and Conditions
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="privacy-policy.html" class="nav-link">Privacy Policy
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="404.html" class="nav-link">404 Page</a>
                    </li>
                    <li class="nav-item">
                      <a href="page-without-sidebar.html" class="nav-link">Page Without Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="page-left-sidebar.html" class="nav-link">Page Left Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="page-right-sidebar.html" class="nav-link">Page Right Sidebar</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown submenu">
                  <a class="nav-link scroll dropdown-toggle" href="#blog" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">Blog
                  </a>
                  <span class="sub-menu-toggle dropdown-toggle" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="icofont-rounded-down"></i>
                  </span>
                  <ul class="dropdown-menu">
                    <li class="nav-item">
                      <a href="blog-grid.html" class="nav-link">Blog Grid</a>
                    </li>
                    <li class="nav-item">
                      <a href="blog-list.html" class="nav-link">Blog List</a>
                    </li>
                    <li class="nav-item">
                      <a href="left-sidebar.html" class="nav-link">Left Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="right-sidebar.html" class="nav-link">Right Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="single-blog.html" class="nav-link">Details Without Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="blog-left-sidebar.html" class="nav-link">Details Left Sidebar</a>
                    </li>
                    <li class="nav-item">
                      <a href="blog-right-sidebar.html" class="nav-link">Details Right Sidebar</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact-us.html">Contact Us</a>
                </li>
              </ul>
            </div>
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
              aria-label="Toggle navigation">
              <span></span><span></span><span></span><span></span><span></span><span></span>
            </button>
          </nav>
        </div>
      </div>
    </header>
    <!-- ========== Header end ========== -->

front-page.php

<?php get_header();?>
<!-- ========== Hero section start ========== -->
    <section id="hero" class="hero hero__padding overflow-hidden position-relative bg-one">
      <div class="circle x1"></div>
      <div class="circle x2"></div>
      <div class="circle x3"></div>
      <div class="circle x4"></div>
      <div class="circle x5"></div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 mb-4 mb-lg-0">
            <div class="hero__content position-relative">
              <h1 class="display-4 mb-2 text-capitalize" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="700">
                John Smith.
              </h1>
              <div class="badge-text fs-5 mb-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="750">
                Finance management book writer
              </div>
              <p class="mb-5 fs-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                I'm creative book writer based in Boston, and I'm very
                passionate and dedicate about my writings.
              </p>
              <a href="#author" class="button button__primary me-3" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="850">
                <span>Awarded books</span>
              </a>
              <a href="https://youtu.be/qg0_FinB6EE" class="glightbox3 btn__secondary" data-aos="fade-up"
                data-aos-duration="1000" data-aos-delay="900"><i class="icofont-play-alt-2"></i> About me</a>
            </div>
          </div>
          <div class="col-lg-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
            <div class="hero__author text-center">
              <div class="hero__author--inner3">
                <div class="hero__author--inner3--wrapper">
                  <img width="500" class="img-fluid" src="assets/images/writer-4.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Hero section end ========== -->
    <!-- ========== Author section start ========== -->
    <section id="about" class="section-padding authorv2">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 offset-xl-3 col-lg-10 offset-lg-1">
            <div class="section-title-center text-center">
              <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">About author</span>
              <h2 class="display-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                Learn about the book writer
              </h2>
              <div class="section-divider divider-traingle" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="250"></div>
            </div>
          </div>
        </div>
        <div class="row gx-5">
          <div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
            <div class="authorv2__image">
              <img class="img-fluid" src="assets/images/achive2.jpg" alt="Author Image" />
              <a href="https://youtu.be/qg0_FinB6EE" class="glightbox3 video-btn">
                <i class="icofont-play"></i></a>
              <div class="promo-video">
                <div class="waves-block">
                  <div class="waves wave-1"></div>
                  <div class="waves wave-2"></div>
                  <div class="waves wave-3"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
            <p>
              Based on wikipedia, Lorem ipsum dolor sit amet consectetur
              adipisicing elit. Optio aspernatur quam in nostrum aliquam
              eligendi vel, modi cupiditate numquam officiis dicta minima
              placeat nulla impedit voluptatum adipisci beatae. Rerum,
              impedit.
            </p>
            <div class="authorv2__content">
              <div class="authorv2__list">
                <div class="row">
                  <div class="col-6 mb-3">
                    <h4>Name:</h4>
                    <p class="mb-0">Jacob Thomas</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Born:</h4>
                    <p class="mb-0">05. 16. 1992</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Phone:</h4>
                    <p class="mb-0">+61 (0) 111 222 333</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Email ID:</h4>
                    <p class="mb-0">[email protected]</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Career started:</h4>
                    <p class="mb-0">2015</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Languages:</h4>
                    <p class="mb-0">English, French</p>
                  </div>
                  <div class="col-6 mb-3">
                    <h4>Country:</h4>
                    <p class="mb-0">US</p>
                  </div>
                  <div class="col-6">
                    <h4>Address:</h4>
                    <p class="mb-0">Etowah, TN 37331 United States</p>
                  </div>
                </div>
              </div>
              <ul class="social-icon mt-3">
                <li>
                  <a href="#"><i class="icofont-facebook"></i></a>
                </li>
                <li>
                  <a href="#"><i class="icofont-twitter"></i></a>
                </li>
                <li>
                  <a href="#"><i class="icofont-linkedin"></i></a>
                </li>
                <li>
                  <a href="#"><i class="icofont-youtube-play"></i></a>
                </li>
                <li>
                  <a href="#"><i class="icofont-whatsapp"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Author section end ========== -->
    <!-- ========== Books section start ========== -->
    <section id="books" class="booksv1 section-padding bg-one">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 offset-xl-3 col-lg-10 offset-lg-1">
            <div class="section-title-center text-center">
              <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">Books</span>
              <h2 class="display-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                Latest released books
              </h2>
              <div class="section-divider divider-traingle" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="250"></div>
            </div>
          </div>
        </div>
        <div class="row gx-5">
          <div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
            <div class="row">
              <div class="col-6">
                <div class="booksv1__img--wrap">
                  <div class="booksv1__img">
                    <img class="img-fluid" src="assets/images/book.png" alt="Book name" />
                  </div>
                  <div class="booksv1__img">
                    <img class="img-fluid" src="assets/images/book3.png" alt="Book name" />
                  </div>
                </div>
              </div>
              <div class="col-6">
                <div class="booksv1__img--wrap m-50px-t md-m-0px-t">
                  <div class="booksv1__img">
                    <img class="img-fluid" src="assets/images/book7.png" alt="Book name" />
                  </div>
                  <div class="booksv1__img">
                    <img class="img-fluid" src="assets/images/book5.jpg" alt="Book name" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
            <div class="booksv1__contnet">
              <div class="booksv1__contnet--badge mb-0">
                Best selling books
              </div>
              <h3 class="display-6 m-30px-b">2023 best selling books</h3>
              <div class="booksv1__item--wrap">
                <div class="booksv1__item">
                  <div class="booksv1__item--icon">
                    <i class="icofont-touch"></i>
                  </div>
                  <div class="booksv1__item--text">
                    <h3>Think & grow rich</h3>
                    <p>
                      The book lorem ipsum dolor sit amet consectetur
                      adipisicing elit. Pariatur, aliquam.
                    </p>
                  </div>
                </div>
                <div class="booksv1__item">
                  <div class="booksv1__item--icon">
                    <i class="icofont-touch"></i>
                  </div>
                  <div class="booksv1__item--text">
                    <h3>Rich dad, poor dad</h3>
                    <p>
                      The book lorem ipsum dolor sit amet consectetur
                      adipisicing elit. Pariatur, aliquam.
                    </p>
                  </div>
                </div>
                <div class="booksv1__item">
                  <div class="booksv1__item--icon">
                    <i class="icofont-touch"></i>
                  </div>
                  <div class="booksv1__item--text">
                    <h3>Eat that frog</h3>
                    <p>
                      The book lorem ipsum dolor sit amet consectetur
                      adipisicing elit. Pariatur, aliquam.
                    </p>
                  </div>
                </div>
                <div class="booksv1__item">
                  <div class="booksv1__item--icon">
                    <i class="icofont-touch"></i>
                  </div>
                  <div class="booksv1__item--text">
                    <h3>The Subtle Art of Not Giving a F*ck</h3>
                    <p>
                      The book lorem ipsum dolor sit amet consectetur
                      adipisicing elit. Pariatur, aliquam.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Books section end ========== -->
    <!-- ========== Fun facts section start ========== -->
    <section class="section-padding counters">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 offset-xl-3 col-lg-10 offset-lg-1">
            <div class="section-title-center text-center">
              <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">AWESOME STATS</span>
              <h2 class="display-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                Milestones Achieved
              </h2>
              <div class="section-divider divider-traingle" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="250"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <ul class="counters__stats m-0 p-0 d-flex flex-wrap align-items-center justify-content-center">
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                <div class="counters__stats-box h-100 translateEffect1">
                  <div class="counters__stats-icon">
                    <i class="icofont-page"></i>
                  </div>
                  <div class="counters__stats-box__number">
                    <span class="odometer" data-count="736"></span>
                  </div>
                  <h5>Total Pages</h5>
                </div>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                <div class="counters__stats-box h-100 translateEffect1">
                  <div class="counters__stats-icon">
                    <i class="icofont-read-book"></i>
                  </div>
                  <div class="counters__stats-box__number">
                    <span class="odometer" data-count="875"></span>k
                  </div>
                  <h5>Active Readers</h5>
                </div>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
                <div class="counters__stats-box h-100 translateEffect1">
                  <div class="counters__stats-icon">
                    <i class="icofont-hour-glass"></i>
                  </div>
                  <div class="counters__stats-box__number">
                    <span class="odometer" data-count="41"></span>k
                  </div>
                  <h5>Working Hours</h5>
                </div>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
                <div class="counters__stats-box h-100 translateEffect1">
                  <div class="counters__stats-icon">
                    <i class="icofont-cart-alt"></i>
                  </div>
                  <div class="counters__stats-box__number">
                    <span class="odometer" data-count="992"></span>k
                  </div>
                  <h5>Total Sells</h5>
                </div>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
                <div class="counters__stats-box h-100 translateEffect1">
                  <div class="counters__stats-icon">
                    <i class="icofont-coffee-cup"></i>
                  </div>
                  <div class="counters__stats-box__number">
                    <span class="odometer" data-count="690"></span>
                  </div>
                  <h5>Cups Coffee</h5>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fun facts section end ========== -->
    <!-- ========== Achievement section start ========== -->
    <section id="achievement" class="section-padding achievement bg-one">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 offset-xl-3 col-lg-10 offset-lg-1">
            <div class="section-title-center text-center">
              <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">Achievements</span>
              <h2 class="display-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                Honor & Awards Achieved
              </h2>
              <div class="section-divider divider-traingle" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="250"></div>
            </div>
          </div>
        </div>
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/1.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Nominated</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/2.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Winner</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/3.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Guest of Honor</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/4.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Finalist</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/5.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Winner</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col m-30px-b" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700">
            <div class="achievement__item h-100 translateEffect1">
              <div class="row row-cols-2">
                <div class="col mt-0">
                  <img class="img-fluid" src="assets/images/awards/1.jpg" alt="" />
                </div>
                <div class="col mt-0">
                  <div class="achievement__content">
                    <div class="achievement__content__icon">
                      <i class="icofont-award"></i>
                    </div>
                    <h3>Nominated</h3>
                    <p>
                      International Thriller Writers Award for Best Novel
                      (These Toxic Things)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Achievement section end ========== -->
    <!-- ========== Blog section start ========== -->
    <section id="blog" class="section-padding blog">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 offset-xl-3 col-lg-10 offset-lg-1">
            <div class="section-title-center text-center">
              <span data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">Our Blog</span>
              <h2 class="display-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                Latest Blogs
              </h2>
              <div class="section-divider divider-traingle" data-aos="fade-up" data-aos-duration="1000"
                data-aos-delay="250"></div>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6 col-lg-4 mb-4 mb-lg-0" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
            <article class="blog__single-post h-100 translateEffect1">
              <div class="blog__single-post__image">
                <a href="single-blog.html">
                  <img class="img-fluid" src="assets/images/blog/blog_01.jpg" alt="Blog 01" />
                </a>
              </div>
              <div class="blog__single-post__body">
                <div class="blog__single-post__content">
                  <h2 class="fs-4">
                    <a href="single-blog.html">Book News: Egypt Bans Ridley Scott’s ‘Exodus’ For
                      ‘Historical</a>
                  </h2>
                  <p class="m-0">
                    It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking
                    at its layout.
                  </p>
                </div>
                <ul class="blog-metainfo">
                  <li>
                    <i class="icofont-calendar"></i><a href="/food-delivery2">May 22, 2023</a>
                  </li>
                  <li>
                    <i class="icofont-speech-comments"></i>
                    <a href="#">Comment(05)</a>
                  </li>
                </ul>
              </div>
            </article>
          </div>
          <div class="col-md-6 col-lg-4 mb-4 mb-lg-0" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
            <article class="blog__single-post h-100 translateEffect1">
              <div class="blog__single-post__image">
                <a href="#">
                  <img class="img-fluid" src="assets/images/blog/blog_02.jpg" alt="Blog 02" />
                </a>
              </div>
              <div class="blog__single-post__body">
                <div class="blog__single-post__content">
                  <h2 class="fs-4">
                    <a href="#">Wyden, Eshoo question “big five” publishers over</a>
                  </h2>
                  <p class="m-0">
                    It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking
                    at its layout.
                  </p>
                </div>
                <ul class="blog-metainfo">
                  <li>
                    <i class="icofont-calendar"></i><a href="/food-delivery2">May 22, 2023</a>
                  </li>
                  <li>
                    <i class="icofont-speech-comments"></i>
                    <a href="#">Comment(05)</a>
                  </li>
                </ul>
              </div>
            </article>
          </div>
          <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
            <article class="blog__single-post h-100 translateEffect1">
              <div class="blog__single-post__image">
                <a href="single-blog.html">
                  <img class="img-fluid" src="assets/images/blog/blog_03.jpg" alt="Blog 03" />
                </a>
              </div>
              <div class="blog__single-post__body">
                <div class="blog__single-post__content">
                  <h2 class="fs-4">
                    <a href="single-blog.html">There is a method to this book-buying madness</a>
                  </h2>
                  <p class="m-0">
                    It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking
                    at its layout.
                  </p>
                </div>
                <ul class="blog-metainfo">
                  <li>
                    <i class="icofont-calendar"></i><a href="/food-delivery2">May 22, 2023</a>
                  </li>
                  <li>
                    <i class="icofont-speech-comments"></i>
                    <a href="#">Comment(05)</a>
                  </li>
                </ul>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Blog section end ========== -->
    <!-- ========== CTA v5 section start ========== -->
    <section class="section-padding ctav5">
      <div class="container">
        <div class="row">
          <div class="ctav5__content">
            <h2 class="display-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
              Over 90900+ active readers
            </h2>
            <ul>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                <i class="icofont-star"></i>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="250">
                <i class="icofont-star"></i>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                <i class="icofont-star"></i>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="350">
                <i class="icofont-star"></i>
              </li>
              <li data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">
                <i class="icofont-star"></i>
              </li>
            </ul>
            <p class="fs-5" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="450">
              Readers reviews <br />
              is self explanatory – 5/5
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== CTA v5 section end ========== -->
    <?php get_footer();?>

footer.php

<!-- ========== Footer section Start ========== -->
    <footer class="footer bg-one overflow-hidden">
      <div class="container">
        <div class="footer__topv2 m-50px-t m-50px-b">
          <div class="row">
            <div class="col-md-6 col-lg-3 mb-4 mb-lg-0" data-aos="fade-up" data-aos-duration="1000"
              data-aos-delay="200">
              <div class="footer__topv2__about">
                <div class="logo">
                  <img src="assets//images/wonted-logo.png" alt="Footer Logo" />
                </div>
                <div class="text">
                  <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Magni minima esse quos voluptatem quo consequuntur commodi
                    eius sed. Alias, quisquam?
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-4 mb-lg-0" data-aos="fade-up" data-aos-duration="1000"
              data-aos-delay="250">
              <div class="footer__topv2__link">
                <div class="title">
                  <p>Useful Links</p>
                </div>
                <ul class="link">
                  <li><a href="404.html">404 Page</a></li>
                  <li>
                    <a href="page-without-sidebar.html">Page Without Sidebar</a>
                  </li>
                  <li>
                    <a href="page-left-sidebar.html">Page Left Sidebar</a>
                  </li>
                  <li>
                    <a href="page-right-sidebar.html">Page Right Sidebar</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-4 mb-lg-0" data-aos="fade-up" data-aos-duration="1000"
              data-aos-delay="300">
              <div class="footer___topV2__contact">
                <div class="title">
                  <p>Contact Us</p>
                </div>
                <ul class="info">
                  <li>
                    <i class="icofont-google-map"></i><a href="#">San Fransisco CA 94107,US</a>
                  </li>
                  <li>
                    <i class="icofont-email"></i><a mailto="[email protected]">[email protected]</a>
                  </li>
                  <li>
                    <i class="icofont-phone"></i><a tel="+123 345123 556">+123 345123 556</a>
                  </li>
                </ul>
                <ul class="social-icon">
                  <li>
                    <a href="#"><i class="icofont-facebook"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="icofont-twitter"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="icofont-instagram"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="icofont-brand-whatsapp"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="350">
              <div class="footer___topV2__newsletter">
                <div class="title">
                  <p>Our Newsletter</p>
                </div>
                <div class="text">
                  <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Molestias, omnis?
                  </p>
                </div>
                <form action="assets/subscribe/subscribe.php" id="subscribe">
                  <div class="input-group aos-init aos-animate">
                    <input type="email" name="email" placeholder="Email" id="subscriber-email" />
                    <button class="button button__primary" id="subscribe-button">
                      <span>Subscribe</span>
                    </button>
                    <div data-lastpass-icon-root="true" style="
                          position: relative !important;
                          height: 0px !important;
                          width: 0px !important;
                          float: left !important;
                        "></div>
                  </div>
                  <div class="result">
                    <p class="success-msg aos-init aos-animate">
                      <i class="icofont-check"></i> Your email has been
                      stored!
                    </p>
                    <p class="error-msg aos-init aos-animate">
                      <i class="icofont-close"></i> Sorry! Something went
                      wrong!
                    </p>
                  </div>
                </form>
                <!-- Mailchimp subscription form -->
                <!-- <form action="#" id="subscribe-mailchimp" data-wow-duration="1.5s">
                    <div class="input-group" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="750">
                      <input type="email" name="email" placeholder="Email" id="subscriber-email" />
                      <button class="button button__primary" id="subscribe-button">
                        <span>Subscribe</span>
                      </button>
                    </div>
                    <div class="result">
                        <p class="success-msg" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800"><i class="icofont-check"></i> You email has been stored!</p>
                        <p class="error-msg" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="850"><i class="icofont-close"></i> Sorry! Something went wrong!</p>
                    </div>
                  </form> -->
                <!-- subscription form end -->
              </div>
            </div>
          </div>
        </div>
        <hr />
        <div class="footer__copyright m-20px-t m-20px-b">
          <div class="row">
            <div class="col-12">
              <p class="m-0 text-center">
                &copy; 2024 All right reserved. Made with
                <i class="icofont-heart"></i> by <a href="#">ThemeAtelier</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- ========== Footer section End ========== -->
  </div>
  <?php wp_footer();?>
</body>

</html>

function.php

<?php

  function load_stylesheets()
  {
    wp_register_style('bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' , array(), 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('swiper', get_template_directory_uri() . '/assets/css/swiper.min.css' , array(), 'all');
    wp_enqueue_style('swiper');

    wp_register_style('icofonts', get_template_directory_uri() . '/assets/css/icofonts.min.css' , array(), 'all');
    wp_enqueue_style('icofonts');

    wp_register_style('odometer', get_template_directory_uri() . '/assets/css/odometer-theme-default.css' , array(), 'all');
    wp_enqueue_style('odometer');

    wp_register_style('glightbox', get_template_directory_uri() . '/assets/css/glightbox.css' , array(), 'all');
    wp_enqueue_style('glightbox');

    wp_register_style('mandp', get_template_directory_uri() . '/assets/css/margins-paddings.css' , array(), 'all');
    wp_enqueue_style('mandp');

    wp_register_style('aospadding', get_template_directory_uri() . '/assets/css/aos.css' , array(), 'all');
    wp_enqueue_style('aospadding');

    wp_register_style('stylesheet', get_template_directory_uri() . '/assets/css/style.css' , array(), 'all');
    wp_enqueue_style('stylesheet');

    wp_register_style('oldrose', get_template_directory_uri() . '/assets/css/oldRose.css' , array(), 'all');
    wp_enqueue_style('oldrose');

    wp_register_style('philosopherpoppins', get_template_directory_uri() . '/assets/css/philosopher-poppins.css' , array(), 'all');
    wp_enqueue_style('philosopherpoppins');

    wp_register_style('custom', get_template_directory_uri() . '/assets/css/custom.css' , array(), 'all');
    wp_enqueue_style('custom');

    wp_register_style('sassstyle', get_template_directory_uri() . '/assets/sass/main.scss' , array(), 'all');
    wp_enqueue_style('sassstyle');
  }
  add_action('wp_enqueue_scripts', 'load_stylesheets');

  function addjs()
  {
    wp_register_script('jquerymin', get_template_directory_uri() . '/assets/js/jquery.min.js' , array(), 'all')
    wp_enqueue_script('jquerymin');

    wp_register_script('bootstrapbundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' , array(), 'all')
    wp_enqueue_script('bootstrapbundle');

    wp_register_script('pnepageNav', get_template_directory_uri() . '/assets/js/onepageNav.js' , array(), 'all')
    wp_enqueue_script('onepageNav');

    wp_register_script('ajaxchimp', get_template_directory_uri() . '/assets/js/ajaxchimp.min.js' , array(), 'all')
    wp_enqueue_script('ajaxchimp');

    wp_register_script('Glightbox', get_template_directory_uri() . '/assets/js/glightbox.js' , array(), 'all')
    wp_enqueue_script('Glightbox');

    wp_register_script('Swiperjs', get_template_directory_uri() . '/assets/js/swiper.min.js' , array(), 'all')
    wp_enqueue_script('Swiperjs');

    wp_register_script('appearjs', get_template_directory_uri() . '/assets/js/jquery.appear.min.js' , array(), 'all')
    wp_enqueue_script('appearjs');

    wp_register_script('Odometerjs', get_template_directory_uri() . '/assets/js/odometer.min.js' , array(), 'all')
    wp_enqueue_script('Odometerjs');

    wp_register_script('Aosjs', get_template_directory_uri() . '/assets/js/aos.js' , array(), 'all')
    wp_enqueue_script('Aosjs');

    wp_register_script('Jqueryvalidate', get_template_directory_uri() . '/assets/js/jquery.validate.js' , array(), 'all')
    wp_enqueue_script('Jqueryvalidate');

    wp_register_script('Isotope', get_template_directory_uri() . '/assets/js/isotope.pkgd.js' , array(), 'all')
    wp_enqueue_script('Isotope');

    wp_register_script('customjs', get_template_directory_uri() . '/assets/js/custom.js' , array(), 'all')
    wp_enqueue_script('customjs');
  }

  add_action('wp_enqueue_scripts', 'addjs');

I doubt it’s needed, but here is the style sheet. Nothings on it except information as the HTML Template has many CSS files called from ‘assets/css’ folder. But I’ll show what’s in it just incase:

style.css

/*!
Theme Name: Wonder Theme
HTML Template Author URI: https://themeatelier.net/
Author: DevAuthor
Author URI: #
Description: Wonder Theme converted from Wonder HTML Template.
Version: 1.0.0
Requires PHP: 8.0
Requires CP: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Text Domain: wonder

This theme is based on Wonder - Book & Author Landing HTML Template by Theme Atelier an Envato Author https://themeforest.net/user/themeatelier

*/

Does anyone see if I “coded” something incorrectly that is causing the style of the site not to display?

2

I don’t know if you’ve made the same typo in your files, but here you have written function.php (singular) when it should be functions.php (plural).

3

Sadly I did make that mistake. After changing it I recived the following error:

Parse error: syntax error, unexpected identifier “wp_enqueue_script” in C:\wamp64\www\ClassicPress\wp-content\themes\Wonted\functions.php on line 49

Line 48 & 49

wp_register_script('jquerymini', get_template_directory_uri() . '/assets/js/jquery.min.js' , array(), 'all')
    wp_enqueue_script('jquerymini');
4

You shouldn’t use your own version of jQuery. It’s already bundled with ClassicPress using the handle jquery. Make sure to use this handle when you specify jQuery as a dependency and delete the lines you have quoted here.

1 Like
5

; is missing at the end of the first line.

1 Like
6

Man I’m surprised it only popped one of those errors. I found a few after it that where missing that. I hate it when its something so simple as ‘user typing error’, but thus is the most common reason for errors I’d bet.

I only did it cause that’s one of the files in the HTML Template. It also has:

jquery.appear.min.js
jquery.validate.js

Would I still need these two?

Outside of that the style is now displaying as it should from a style perspective. Minus the HTML tags with content (H3, P, etc.). Oddly the only text displaying is menu (header) and copyright (footer). But I think this is due to the front-page.php some how not being associated as the home page. I created a Home page and assigned it as front page. Must be some step I missing to get front-page.php to display its content on the created Home page set as Frontpage.

7

when you create the page you have to select the template for frontpage.php in the edit page screen, so that the page knows to follow that template

1 Like
8

There is no Template option when viewing the Page editor from the back end.

However, I’m sure that’s not the issue because when I right click in the browser and click ‘inspect’ <(screenshot) I can see all the HTML content in markup, but it’s not displaying on the page itself.

9

You need to add this comment:

<?php
/*
Template Name: Front Page
*/
?>

before all the code inside the front-page.php template. that way when you create a page you can select it and it’s content should be shown correctly on front-end.

1 Like
10

Thank you, but the elements on the front-page.php still do not display after adding that to the file & selecting the front-page as a template.

11

You shouldn’t be using your own jQuery. Doing so is a recipe for conflicts and problems. Just use the bundled version of jQuery.

12

The reason why front-page.phpprobably isnt displayed properly is: Its the default template for the front page, literally.

So rename it to something else, eg. tpl-frontpage.php, select it in the page editor (Page Template), and its HTML contents should show up correctly.

BTW: In the functions.php, the register_script + enqueue_script right after isnt technically required, you could just replace all the lines of wp_register_script with wp_enqueue_script, as it uses the same syntax, and then remove the following wp_enqueue_script calls.

If not obvious, all the resources need to be around, else they wont be loaded, and potentially, ie. in the case of bootstrap, could lead to visually missing or wrongly styled elements.

cu, w0lf.

1 Like
13

This was already mentioned and I already removed them. Plus as mentioned in the 1st post I’m following a video tutorial from 2019.

This didn’t work.

Alright I also did this for the wp_register_styles so now it looks like:

<?php

  function load_stylesheets()
  {
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' , array(), 'all');

    wp_enqueue_style('swiper', get_template_directory_uri() . '/assets/css/swiper.min.css' , array(), 'all');

    wp_enqueue_style('icofonts', get_template_directory_uri() . '/assets/css/icofonts.min.css' , array(), 'all');

    wp_enqueue_style('odometer', get_template_directory_uri() . '/assets/css/odometer-theme-default.css' , array(), 'all');

    wp_enqueue_style('glightbox', get_template_directory_uri() . '/assets/css/glightbox.css' , array(), 'all');

    wp_enqueue_style('mandp', get_template_directory_uri() . '/assets/css/margins-paddings.css' , array(), 'all');

    wp_enqueue_style('aospadding', get_template_directory_uri() . '/assets/css/aos.css' , array(), 'all');

    wp_enqueue_style('stylesheet', get_template_directory_uri() . '/assets/css/style.css' , array(), 'all');

    wp_enqueue_style('oldrose', get_template_directory_uri() . '/assets/css/oldRose.css' , array(), 'all');

    wp_enqueue_style('philosopherpoppins', get_template_directory_uri() . '/assets/css/philosopher-poppins.css' , array(), 'all');

    wp_enqueue_style('custom', get_template_directory_uri() . '/assets/css/custom.css' , array(), 'all');

    wp_enqueue_style('sassstyle', get_template_directory_uri() . '/assets/sass/main.scss' , array(), 'all');
  }
  add_action('wp_enqueue_scripts', 'load_stylesheets');

  function addjs()
  {
    wp_enqueue_script('bootstrapbundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' , array(), 'all');

    wp_enqueue_script('pnepageNav', get_template_directory_uri() . '/assets/js/onepageNav.js' , array(), 'all');

    wp_enqueue_script('ajaxchimp', get_template_directory_uri() . '/assets/js/ajaxchimp.min.js' , array(), 'all');

    wp_enqueue_script('Glightbox', get_template_directory_uri() . '/assets/js/glightbox.js' , array(), 'all');

    wp_enqueue_script('Swiperjs', get_template_directory_uri() . '/assets/js/swiper.min.js' , array(), 'all');

    wp_enqueue_script('Odometerjs', get_template_directory_uri() . '/assets/js/odometer.min.js' , array(), 'all');

    wp_enqueue_script('Aosjs', get_template_directory_uri() . '/assets/js/aos.js' , array(), 'all');

    wp_enqueue_script('Isotope', get_template_directory_uri() . '/assets/js/isotope.pkgd.js' , array(), 'all');

    wp_enqueue_script('customjs', get_template_directory_uri() . '/assets/js/custom.js' , array(), 'all');
  }

  add_action('wp_enqueue_scripts', 'addjs');

Thanks for all the help folks! :smiling_face_with_sunglasses:

EDIT

Alright I even completely renamed front-page.php to home-template-one.php, but that didn’t work either.

I also found on another site someone saying to add <?php the_content(); ?> to index.php but that didn’t work either (though this was specific to a WP issue, but I thought I would try it anyway).

I’ve also viewed the page in different browsers (just in case), but that isn’t the issue either.

This is the video I’m following along with, but his static HTML appears with no issue.

1 Like
14

Are you willing to share whole (anonymized) theme folder with us? As zip file? Or a link to a (example) site? This makes troubleshooting easier.

15

I don’t think I can its a premium template. Maybe an live example site, though I’m not sure how that would help.

16

Without all code or a live site it’s harder to help.
In this reply you’ve shared a screenshot, that gives me the impression the style is loading, but there’s something that hides the page content (CSS related, an overlay, etc).

17

Here is a live installation.

18

The opacity is 0 in this file.
Look for: html:not(.no-js) [data-aos^=fade][data-aos^=fade]
When changing it to 1 everything is visible again. I don’t understand why it was 0.

Guido

19

Neither do I. I haven’t edited any of the CSS files.

20

It looks like this is not CP related, there’s a conflict in your stylesheet or between your stylesheet files.

Guido