I want to create my own wordpress theme for that I have my own HTML template, I want to convert this HTML template to a wordpress theme So, I copied built-in wordpress theme "twentyseventeen" and I copied my CSS & JS files to wordpress themes root/assets/css & js folders. After that I divided html & footer pages and gave my own css & js url's, for home page I need a template page So, I created a template page and included headers & footer files using 'get_header()' & 'get_footer()' methods in middle of my template page I copied all my html code. Finally I created a new wordpress page and assigned this template. My problem here is only header&footer content is getting loaded but template page content is not loaded.


  /* Template Name: home */
<div id="theme-main-banner" class="banner-three gradient-banner-three">
   HTML content goes here..


 * The header for our theme
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <!-- For Resposive Device -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- For IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <link rel="profile" href="http://gmpg.org/xfn/11"> -->
    <title>My-Site-Title - App Landing Page</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="56x56" href="<?php bloginfo('template_url')?>/assets/images/fav-icon/icon.png">
    <!-- Main style sheet -->
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/assets/css/styles.css">
    <!-- responsive style sheet -->
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/assets/css/responsive.css">
    <?php wp_head(); ?>
<body <?php body_class(); ?>>
    <div class="main-page-wrapper home-page-three">


 * The template for displaying the footer
 * Contains the closing of the #content div and all content after.
*/ ?>
</div> <!-- /.html-top-content -->
  <div class="container-fluid">
  </div> <!-- /.container -->
<!-- jQuery -->
<script type="text/javascript" src="<?php bloginfo('template_url')?>/assets/js/jquery.2.2.3.min.js"></script>
<script> ---- </script>
    --All script files goes here----
</div> <!-- /.main-page-wrapper -->
<?php wp_footer(); ?>


1 Answer 1


you have to use the WP Loop to get page content. Try this

/* Template Name: home */
<div id="theme-main-banner" class="banner-three gradient-banner-three">
   <?php while(have_posts()): the_post(); ?>
       <?php the_content(); ?>
   <?php endwhile; ?>
<?php get_footer(); ?>  


The issue was that front-page.php was already present in the theme. So as per the Template Hierarchy it has higher priority, renaming/removing it solved the issue

  • Thanks for the reply. But I have not pasted any content inside my wordpress page 'home' I just assigned template page. The Loop is applicable when the content is there inside pages or posts but I haven't given any content. Nov 15, 2017 at 9:22
  • so where do u want the content from? Nov 15, 2017 at 9:23
  • I want the content directly from my template page, thats why I have given all html code inside my template page alogn with header & footer. Because I want to customize the home page for that I am using template page. Later I will add 'ACF' plugin to customize the total home page content like 'Logo' banner, etc. Yes I set that page as Front Page in settings Nov 15, 2017 at 9:25
  • have you set that page as Front Page in settings? Nov 15, 2017 at 9:26
  • FYI, My style.css file is empty that is I have removed all the styles and kept only comments. I just renamed 'Theme Name:' and 'Author' inside style.css. As I already renamed the Theme name and author and kept content empty So, Is there any problem if style.css is empty. Nov 15, 2017 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.