Hi, can I ask some help I created html mock up for my home page and I want to put this on my wordpress home page is this possible ? what file to should I edit in order to insert my mock up.
Thank you in advance 
Hi, I am confuse. I have html template for my home page, and I have custom css and js files also images, now I want to put this in my WP Home Page but I have no idea where to put this so that I can properly link it to my home page.
Thank you in advance.
Topics merged.
Hi jemz, sounds like you need to make a custom theme?
Yeah, I don’t know how to link properly the js and css,
I have this code in my page-home.php
<script src="js/circle-progress.min.js"></script>
I put the circle-progress.min.js
In here C:\myproject\my-site\wp-content\themes\the-free-theme\assets\js\circle-progress.min.js
all css and js and even images are not found. is there helper in wp to link the assets ?
Ah, got it!
Try:
<script src="<?php echo get_template_directory_uri(); ?>/js/circle-progress.min.js" ></script>
Also look at wp_enqueue_script.
I tried still having problem. I also add in the functions.php in my active theme
here is the page-home.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>X Gym - Fitness HTML Template</title>
<meta charset="UTF-8">
<meta name="description" content="X Gym Fitness HTML Template">
<meta name="keywords" content="fitness, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="img/favicon.ico" rel="shortcut icon"/>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri() .'/css/bootstrap.min.css'?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/font-awesome.min.css'?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/owl.carousel.min.css'?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/flaticon.css'?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/slicknav.min.css'?>"/>
<!-- Main Stylesheets -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/style.css'?>"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Header section -->
<header class="header-section">
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<ul class="main-menu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="header-right">
<div class="hr-box">
<img src="img/location-icon.png" alt="">
<h6>1525 Amazing Lane, Los Angeles, CA</h6>
</div>
</li>
</ul>
</header>
<div class="clearfix"></div>
<!-- Header section end -->
<!-- Hero section -->
<section class="hero-section set-bg" data-setbg="img/hero-bg.jpg">
<div class="container">
<div class="hero-text">
<h2>Physical activity</h2>
<h2>enhances <span>positive energy!</span></h2>
<a href="" class="site-btn">Join the Gym</a>
</div>
</div>
</section>
<!-- Hero section end -->
<!-- Feature section -->
<section class="feature-section">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="section-title text-center">
<h2>The real <span>workout</span> starts when you want to stop. </h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="icon-box-item">
<div class="ib-icon">
<i class="flaticon-004-dumbbell"></i>
</div>
<h4>Intense Workouts</h4>
<p>Donec nec sapien in urna fermentum ornare. Morbi vel ultrices leo. Sed eu turpis eu arcu vehicula fringilla ut vitae orci. </p>
</div>
</div>
<div class="col-md-4">
<div class="icon-box-item">
<div class="ib-icon">
<i class="flaticon-031-app-1"></i>
</div>
<h4>Intense Workouts</h4>
<p>Donec nec sapien in urna fermentum ornare. Morbi vel ultrices leo. Sed eu turpis eu arcu vehicula fringilla ut vitae orci. </p>
</div>
</div>
<div class="col-md-4">
<div class="icon-box-item">
<div class="ib-icon">
<i class="flaticon-010-podium"></i>
</div>
<h4>Intense Workouts</h4>
<p>Donec nec sapien in urna fermentum ornare. Morbi vel ultrices leo. Sed eu turpis eu arcu vehicula fringilla ut vitae orci. </p>
</div>
</div>
</div>
</div>
</section>
<!-- Feature section end -->
<!-- Add section -->
<section class="add-section set-bg" data-setbg="img/add-bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-7 ml-auto">
<div class="add-text">
<h2>Pay now and get a 25% <span>Discount</span></h2>
<ul>
<li><img src="img/check-icon.png" alt="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><img src="img/check-icon.png" alt="">Risus commodo viverra maecenas accumsan lacus vel facilisis.</li>
<li><img src="img/check-icon.png" alt="">Ipsum dolor sit amet, consectetur adipiscing elit, sed do.</li>
</ul>
<a href="#" class="site-btn">Become a Member</a>
</div>
</div>
</div>
</div>
</section>
<!-- Add section end -->
<!-- Milestones section -->
<section class="milestones-section">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="milestone">
<h2>1374</h2>
<p>Happy Clients</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="milestone">
<h2>356</h2>
<p>Strong Bodies</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="milestone">
<h2>57k</h2>
<p>IG Followers</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="milestone">
<h2>24/7</h2>
<p>Working Hours</p>
</div>
</div>
</div>
</div>
</section>
<!-- Milestones section end -->
<!-- Trainers section -->
<section class="trainers-section">
<div class="container">
<div class="section-title text-center">
<h2>Meet the <span>Trainers</span></h2>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="trainer-pic">
<img src="img/trainers/1.jpg" alt="">
</div>
<h4>Michael Smith</h4>
<p>Vivamus libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum nec sapien.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="trainer-pic">
<img src="img/trainers/2.jpg" alt="">
</div>
<h4>Jessica Black</h4>
<p>Ac, ultrices rhoncus ipsum. Donec nec sapien in urna fermentum ornare.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="trainer-pic">
<img src="img/trainers/3.jpg" alt="">
</div>
<h4>James Brown</h4>
<p>Libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum. Donec nec sapien.</p>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="trainer-pic">
<img src="img/trainers/4.jpg" alt="">
</div>
<h4>Paula Carlton</h4>
<p>Sapien ac, ultrices rhoncus ipsum. Donec nec sapien in urna fermen-tum ornare.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Trainers section end -->
<!-- BMI section -->
<section class="bmi-section spad">
<div class="bmi-bg set-bg" data-setbg="img/bmi-bg.jpg"></div>
<div class="container">
<div class="row">
<div class="col-lg-7 ml-auto">
<div class="section-title mb-0">
<h2>Calculate your <span>BMI</span></h2>
<p>Vivamus libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum nec sapien.Vivamus libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum nec sapien.</p>
</div>
<div class="bmi-calculator-warp">
<div class="bmi-calculator">
<div class="row">
<div class="col-sm-6">
<input type="text" placeholder="Weight (KG)" id="bmi-weight">
</div>
<div class="col-sm-6">
<input type="text" placeholder="Hight (M)" id="bmi-hight">
</div>
<div class="col-sm-6">
<button class="site-btn" id="bmi-submit">Calculate</button>
</div>
<div class="col-sm-6">
<input type="text" id="bmi-result" readonly>
</div>
</div>
<p>Vivamus libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum nec sapien.Vivamus libero mauris, bibendum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BMI section end -->
<!-- Newsletter section -->
<section class="newsletter-section set-bg" data-setbg="img/newsletter-bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-title text-white mb-0">
<h2>Subscribe to <span>newsletter</span></h2>
</div>
</div>
<div class="col-lg-6">
<form class="newsletter-form">
<input type="text" placeholder="Your e-mail here">
<button class="site-btn" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</section>
<!-- Newsletter section end -->
<!-- Footer section -->
<footer class="footer-section set-bg" data-setbg="img/footer-bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="footer-widget">
<h4>Location</h4>
<div class="fw-info-box">
<img src="img/icons/1.png" alt="">
<div class="fw-info-text">
<p>1525 Awesome Lane, Los Angeles, CA</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="footer-widget">
<h4>Subscriptions</h4>
<div class="fw-info-box">
<img src="..img/icons/2.png" alt="">
<div class="fw-info-text">
<p>+1 (603)535-4592</p>
<p>+1 (603)535-4556</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="footer-widget">
<h4>E-mail</h4>
<div class="fw-info-box">
<img src="img/icons/3.png" alt="">
<div class="fw-info-text">
<p>Contact@xgym.com</p>
<p>www.xgym.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="footer-widget">
<h4>Social Media</h4>
<div class="fw-info-box">
<img src="img/icons/4.png" alt="">
<div class="social-links">
<a href="#"><i class="fa fa-pinterest"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="copyright"><p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p></div>
</div>
<div class="col-md-6 order-1 order-md-2">
<ul class="footer-menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Classes</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Footer section end -->
<!--====== Javascripts & Jquery ======-->
<script src="<?php /*site_url('js/jquery-3.2.1.min.js')*/?>"></script>
<script src="<?php echo get_template_directory_uri() ?>/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/js/jquery.slicknav.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/js/owl.carousel.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?> /js/circle-progress.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?> /js/main.js"></script>
</body>
</html>
What is the console / network tab saying?
Which URLs is your site trying to resolve? (i.e. what is being generated by <?php echo get_template_directory_uri().'/css/slicknav.min.css'?>)
404 not found
this is the generated url
http://mysitel/wp-content/themes/my-free-theme/css/slicknav.min.css
What is “http://mysitel” - a virtual host? Or a placeholder? You are developing on localhost, right?
Hey, if you want to use an HTML document in WordPress, it’s not as simple as uploading it to your site. WordPress works a little differently. It creates HTML from PHP, therefore, you have to “WordPressify” your documents in order to use them in the CMS. This also goes for including scripts and CSS. This article should put you on the right track: https://websitesetup.org/html-to-wordpress/
2 Likes
Ok thank you for the link , I will try on this
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.