Convert a HTML Template into a WordPress Theme issue

I have been working on converting html simple template to WordPress theme so I create folder into xampp – htdocs – wp-content – themes and I create inside this folder 8 files

footer.php , functions.php , header.php , index.php , page.php
sidebar.php , single.php , style.css

Read More

In footer file i add this code:-

  </div>

                    <?php get_sidebar();?>              
                    <div style="clear: both;">&nbsp;</div>
                    </div>
                </div>
            </div>
            <!-- end #page --> 
        </div>
        <div id="footer">
            <p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p>
        </div>
        <!-- end #footer -->
        </body>
        </html>

and in header file i add this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php bloginfo('title'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
    <div id="header-wrapper">
        <div id="header">
            <div id="logo">
                <h1><a href="#"><?php bloginfo('name'); ?></a></h1>
                <p><?php bloginfo('description'); ?></p>
            </div>
        </div>
    </div>
    <!-- end #header -->
    <div id="menu">
        <?php wp_nav_menu(); ?>
    </div>
    <!-- end #menu -->
    <div id="page">
        <div id="page-bgtop">
            <div id="page-bgbtm">
                <div id="content">

and in index file this code

 <?php get_header(); ?>
    test
    <?php get_footer(); ?>

I go to my admin page and find this as a theme there and I active it.
But I find it very empty and I didnt know what wrong.

Related posts

Leave a Reply

3 comments

  1. If you get only blank screen then in most cases there is some misconfiguration in functions.php, do you have any code in there?

    I’m not sure if it will solve your problem, but try using wp_enqueue_style() function in your functions instead of echoing your styles in header.

    function theme_slug_enqueue( ){
       wp_enqueue_style( 'open-sans', http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' );
       wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . 'style.css' );
    }
    

    Put that in your functions.php, and delete elements from your header.
    bloginfo(‘stylesheet_url’) function only gets your main directory url, you are not calling your mains style.css anywhere as I can see. If you don’t want to use wordpress standard enqueue function at least try changing

    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
    

    to:

    <link href="<?php bloginfo('stylesheet_url') . 'style.css'; ?>" rel="stylesheet" type="text/css" media="screen" />
    

    refference: https://codex.wordpress.org/Function_Reference/wp_enqueue_style

  2. WordPress theme required atleast two files to work so first check your theme by including only two files in your theme folder

    wp-content/themes/mytheme/
    
    style.css
    index.php
    

    add these lines in your style.css file

    /*
    Theme Name: My theme
    Version: 1.0
    */
    

    and add these line in your index.php file

    this is theme testing
    

    then run your wordpress website and check

  3. Well you have to create a new folder inside the theme folder. SO it should look like this

    • wp-content

      • themes
      • Theme-name (lets say bruno)

        • header.php
        • footer.php
        • index.php
        • style.css

    Now in style.css, its important that you add these comments.

    /*
    Theme Name: Bruno theme
    Theme URI: Your site
    Author: Your name
    Author URI: http://yoursite.org/
    Description: Some description
    Version: 1.0
    */
    

    These comments will tell wordpress all the information about your theme