My custom template page not loading content inside it?

by prasad chinthala   Last Updated November 15, 2017 10:08 AM

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-home.php

<?php
  /* Template Name: home */
   get_header();
?>
<div id="theme-main-banner" class="banner-three gradient-banner-three">
  ---------------------------
   HTML content goes here..
    ------------------------
</div>
<?php
   get_footer();
?>  

header.php

<?php
/**
 * 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">
<head>
    <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(); ?>
</head>
<body <?php body_class(); ?>>
    <div class="main-page-wrapper home-page-three">
     ---------
    </div>

Footer.php

<?php
/**
 * The template for displaying the footer
 * Contains the closing of the #content div and all content after.
*/ ?>
</div> <!-- /.html-top-content -->
<footer>
  <div class="container-fluid">
   -------
  </div> <!-- /.container -->
</footer>
<!-- 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(); ?>

</body>
</html>


Answers 1


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

<?php
/* Template Name: home */
get_header();
?>
<div id="theme-main-banner" class="banner-three gradient-banner-three">
   <?php while(have_posts()): the_post(); ?>
       <?php the_content(); ?>
   <?php endwhile; ?>
</div>
<?php get_footer(); ?>  
Piyush Rawat
Piyush Rawat
November 15, 2017 09:16 AM

Related Questions



Page.php and index.php confusing me!

Updated April 01, 2017 19:08 PM


Single page theme with page templates

Updated October 06, 2017 08:08 AM