CODEWITHSUNDEEP
htmlwordpresswordpress-theming
AndreaNobili
AndreaNobili

Reputation: 42957

How to show posts in a WordPress theme using HTML 5?

I am pretty new in HTML 5 and I am developing a WordPress theme using HTML 5 and I have the following doubt:

I have to put this WordPress code that show all the posts in my page theme

<div id="content">
<?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <div class="post">
                <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

                <div class="entry">
                    <?php the_content('Read the rest of this entry »'); ?>
                </div>

                <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

                <!--
                <?php trackback_rdf(); ?>
                -->
            </div>

        <?php endwhile; ?>

        <div class="navigation">
            <div class="alignleft"><?php posts_nav_link('','','« Previous Entries') ?></div>
            <div class="alignright"><?php posts_nav_link('','Next Entries »','') ?></div>
        </div>

    <?php else : ?>

        <h2 class="center">Not Found</h2>
        <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
        <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>

</div>

Now in the previous code this php code is wrapped inside a classic XHTML ... block. Now I want to optimize the previous code using HTML 5.

So is it a good choice replace the external ... with a ... ?

Or are there a better solution?

After do this operation is it a good choice wrap every post using the HTML 5 ... tag?

I mean that I replace this code:

<div class="post">
    ..................
    ..................
    ..................
</div>

with something like:

<article>
   ..................
   ..................
   ..................
</article>

Is it a good idea?

Tnx

Andrea

Upvotes: 0

Views: 561

Answers (2)

jdsteinbach
jdsteinbach

Reputation: 103

A great reference to check is the underscores (_s) theme. It's an HTML5 blank theme maintained by Automattic (the company who owns WP). Here's the template they use:

<article id="post-{ID#}” class="post-{ID#} post">  
  <header class="entry-header">
    <h1 class="entry-title”>…</h1>
    <div class="entry-meta”>…</div>
  </header>
  <div class="entry-content”>…</div>
  <footer class="entry-meta">…</footer>
</article>

Upvotes: 1

user2019515
user2019515

Reputation: 4503

WordPress doesn't care which html its templates output, WordPress just echo's the content that's all. Your theme however could depend on the .post class but I guess you're making your own theme

Upvotes: 0

Related Questions