How to make html elements classes, ids, etc., dynamic in wordpress theming?

Question

Say I have this in my static HTML/CSS page. How can I make the div class="products" dynamic? How about the product headline, and the other div classes? Basically what I want to know is this: How can I make html elements with classes and id's dynamic with php wordpress APIs built in, as well as the headlines and such?

Obviously in the backend (WP dashboard) all I want to do is supply a headline, img, content, price, etc..

All the tutorials I see are about blog post. This will not be a blog, although a blog page may be included later, the homepage is that of a normal site.

<div class="products">
   <img src="#" alt="just an example">
   <h2>Product Headline</h2>

   <p> Content goes here </p>
   <div class="product-call-to-action">
      <div class="product-callLeft">
         <p><span>$</span> 450</p>
      </div>
      <div class="product-callMiddle">
         <p>Oct 10, 2014 | 3:14 PM</p>
      </div>
      <div class="product-callRight"> <a href="#" class="product-check-out" target="_blank">Buy Now</a></div>
</div>

Understanding this, will unlock all the answers to my questions I have in my mind building upon this foundation.

McNab McNab · Accepted Answer · 2014-12-09T18:56:20

You don't. You create different template pages in your theme which are designed to present different content in different ways.

So single.php shows a single blog post. page.php shows a single page. archive.php will be used to show a category of posts. Then add template files to display custom post types, custom page templates, archives for custom posts types etc etc all in different ways. Each template can have different HTML markup. That's how you build up a custom theme.

Wordpress does the magic within The Loop, it 'knows' which template to use based on the frontend url being accessed and your permalink structure. The best thing for you to do is read up on the Template Hierarchy, if you are doing Wordpress work you will find it massively useful;

http://codex.wordpress.org/images/9/96/wp-template-hierarchy.jpg

The only dynamic classes relate to this;

 <body <?php body_class( $class ); ?>>

http://codex.wordpress.org/Function_Reference/body_class

This automatically assigns a series of classes to the body tag depending on the Wordpress content being displayed allowing you to style the same markup differently using CSS specificity.

As diggy points out in the comments, you can get even finer control than the page-wide body_class by using the more specific post_class;

http://codex.wordpress.org/Function_Reference/post_class

How to make html elements classes, ids, etc., dynamic in wordpress theming?

2 Answers