Header Section

For header section you need to wrap your header section in <header> and </header> eg:

<header>
<body>
<div id="templatemo_container">
    <div id="templatemo_banner">
        <div id="logo"></div>
        <img  src="xczxcxczxc/czxczc" class="wp_logo"/>
        <search>
        <div id="search_section">
            <form action="#" method="get">
                <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
              <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
            </form>
        </div>
        </search>
    </div> 
    <menu id="mymenu" name="My Menu">
    <div id="templatemo_menu">
        <ul>
            <li><a href="#" class="current"><span></span>Home</a></li>
            <li><a href="#"><span></span>Gallery</a></li>
            <li><a href="#"><span></span>Blog</a></li>
            <li><a href="#"><span></span>Forum</a></li>            
            <li><a href="#"><span></span>About Us</a></li>
            <li><a href="#"><span></span>Contact Us</a></li>
        </ul>   
    </div>
    </menu>
</header>

 

Menu

To make a menu you need to use <menu> and </menu> tags surrounding your menu div containing the ul, eg:

    <menu id="mymenu" name="My Menu">
    <div id="templatemo_menu">
        <ul>
            <li><a href="#" class="current"><span></span>Home</a></li>
            <li><a href="#"><span></span>Gallery</a></li>
            <li><a href="#"><span></span>Blog</a></li>
            <li><a href="#"><span></span>Forum</a></li>            
            <li><a href="#"><span></span>About Us</a></li>
            <li><a href="#"><span></span>Contact Us</a></li>
        </ul>   
    </div> <!-- end of menu -->
    </menu>

name is your menu name that is added to your wordpress backend, id is the unique id for the menu, it has to be different for each menu in your theme.

 

Widgets

To make a widget you need to wrap your widget html with <widget></widget>, here is an example:

<widget id="right-sidebar" name="Right Hand Sidebar" description="Widgets in this area will be shown on the right-hand side."></widget>

id is the unique id for each widget, name is the name shown in the widget menu and description is the description for that widget. If the widget is empty from the backend, it will show the default html as above. Otherwise it will replace the html.

 

Blog Content

<blogcontent></blogcontent> will wrap the main content of the page, its the place where your post goes. You can also use <blogtitle></blogtitle> for the the post name. eg:

<h3><blogtitle></blogtitle></h3>
<p>
<blogcontent>
</blogcontent>
</p>

The above snippet will put your post title inside h3 tags and the post content inside p tags right below it.

 

Footer

Footer section is enclosed by <footer></footer> tags, eg:

<footer>
    <div id="templatemo_footer">
    
    <ul class="footer_list">
            <li><a href="#" class="current">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">About Us</a></li>
            <li class="last"><a href="#">Contact Us</a></li>
        </ul>
</footer>

 

Logo

For logo, you just need to add the class “wp_logo” to your logo img, eg:

<img  src="images/logo.png" class="wp_logo"/>

This will also add an option in the backend that allows you to change the logo url.

 

Theme Preview Image

The theme preview image is screenshot.jpg or screenshot.png, if there is no screenshot image file in the theme folder the plugin will make a blank image as your screenshot.

 

These Theme files has to be zipped after you are done, and can be used be uploaded from the HTML To Wordpress Converter plugin for conversion and installation.