Showing posts with label Convert Your WordPress theme to HTML 5. Show all posts
Showing posts with label Convert Your WordPress theme to HTML 5. Show all posts

Convert Your WordPress theme to HTML 5

Convert Your WordPress Theme to HTML 5


Convert Your WordPress (Theme to HTML 5) Site customized your theme and your choose modify convert this theme html version today discussed this task. HTML 5 is a great set of new features and easy options.  Soon it will have the full support of most browsers in use today.  Eventually everyone will have to convert WordPress themes from XHTML to HTML5. wordpress Random display post
Convert Your WordPress theme to HTML 5


Pages:

  • header.php
  • index.php
  • sidebar.php:
  • footer.php
  • single.php (Optional)

Basic HTML5 Layout


<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE | Dev2tricks!</title>
</head>
<body>
    <nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
    <section id="content">
        <article role="main">
            <h1>Title of the Article</h1>
            <time datetime="YYYY-MM-DD"></time>
            <p>Some lorem ispum text of your post goes here.</p>
            <p>The article's text ends.</p>
        </article>
         
        <aside role="sidebar">
            <h2>Some Widget in The Sidebar</h2>
        </aside>
    </section>
<!--Ending index.php-->
<!--begin  footer.php-->
    <footer role="foottext">
        <small>Some Copyright info</small>
    </footer>
</body>
</html> 

Step 1 Converting header.php to HTML5


Now I will show you the code commonly used in the header.php of XHTML WordPress themes.


XHTML Theme header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My  Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
    <div class="container">
        <h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div><!-- End  Container -->
</div><!-- End  Header -->
 
 
<!-- Navigation Bar Starts -->
<div class="navbar">
    <div class="container">
        <ul class="grid nav_bar">
            <?php wp_list_categories('navs_li='); ?>
         </ul>
    </div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">


HTML5 header.php (Conversion)


Read the code and then follow the instructions below to convert your theme's header.php to HTML5.

<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div>
</header>
<!-- End Header  -->
  
<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

Step 2 Converting index.php to HTML5

Converting first home page or index.php a common XHTML index.php consists of the following tags.  i will convert each of them follow us I will explain the whole process after conversion.


XHTML index.php

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>
 
</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

HTML5 index.php (Conversion)

<div id="container">
    <div id="content">
        <section id="entries">
            <article id="post">...</article>
        </section><!--end entries-->
        <?php get_sidebar(); ?>
    </div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

Complete Index.php in HTML5

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
   
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) { 
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
    </section>
    <section class="meta">
  
    <p> <?php the_category(',') ?></p>
  
    <p><?php the_tags(""); ?></p>
  
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
  
  <?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>