Convert a HTML Template into a WordPress Theme issue

1
votes

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

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.

3
phphtmlcsswordpress
wp_nav_menu required array arguments. comment this line <?php //wp_nav_menu(); ?> and check – Noman
i comment it and its same – Aly_Elgahy
you should comment get_header() and get_footer() one by one in index.php to check from where the problem being started. make sure you have downloaded wordpress correctly and only add new folder in theme folder like wp-content/themes/yourtheme – Noman
i did same and in run time the browser only see the body html header tags but empty inside them – Aly_Elgahy

3 Answers

1
votes

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

1
votes

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

0
votes

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