Title: Add various class to div elements
Last modified: August 22, 2016

---

# Add various class to div elements

 *  Resolved [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/)
 * Hi,
 * I am generating my posts in the database by using a while loop which works good.
   I now need add about3-4 class names to each div that is wrapping the posts generated
   from the database.
 * I am totally confused how to do this. I have this code:
 *     ```
       query_posts('posts_per_page&order=ASC');
          while(have_posts()) : the_post(); ?>
               <section class = "container" id="<?php echo get_the_title(); ?>">
       	    <article class = "row <?php echo get_the_title(); ?>">
       	      <h3><?php the_content(); ?></h3>
       	    </article>
              </section>
   
       	<?php endwhile; wp_reset_query(); ?>
       ```
   

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623547)
 * You can use `post_class()` to add various classes to an HTML element:
 * `<section id="<?php echo get_the_title(); ?>" <?php post_class( 'container' );?
   >>`
 * If that isn’t sufficient, can you clarify what class names you’d like to add?
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623551)
 * HI,
 * Thanks for the reply. I have tried that method but it keeps outputting random
   class names from wordpress. I need each div, ideally inside the container to 
   have its own class names for e.g
 *     ```
       <div id ="container">
          <div class="class name1 name2 name3>Some content</div>
        </div>"
       ```
   
 *     ```
       <div id ="container">
          <div class="class homeParallax homeParralax2 homeParralax3>Some content</div>
        </div>"
       ```
   
 *     ```
       <div id ="container">
          <div class="class name1 name2 name3>Some content</div>
        </div>"
       ```
   
 * Obviosuly the container tag is looping the posts using the while loop in php.
   I need to add a div inside the container class where each div within it would
   have a unique class or id name – see the example above to see what I mean.
 * I hope this makes sense?
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623553)
 * Your code snippet seems like it should do what you want. What specifically isn’t
   working correctly?
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623554)
 * it only gets the class name of ONE class which is the title of the page. I want
   to add a few more classes section classes so that I can target them for my parallax
   images. Right now I am limitied to 1 class name per div however, I want more 
   classes to be added.
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623555)
 * right now what the code outputs is:
 *     ```
       <div id ="container">
          <div class="Home">Home</div>
        </div>
       ```
   
 *     ```
       <div id ="container">
          <div class="About">About</div>
        </div>
       ```
   
 *     ```
       <div id ="container">
          <div class="Skills">Skills</div>
        </div>
       ```
   
 * <div id =”container”>
    <div class=”Portfolio”>Portfolio</div> </div>`
 * <div id =”container”>
    <div class=”Contact”>Contact</div> </div>`
 * as you can see I am limited to only one class name here. For each class name 
   I would like 3-4 class name added.
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623564)
 * Any suggestions. Can someone please help,I need to get this done for a client
   ASAP.I would really appreciate any help given.
 * Thanks,
 * Raj
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623626)
 * Okay. Try this code:
 *     ```
       <?php
       $title = get_the_title();
       $alteredtitle = strtolower( preg_replace( '/[^a-z0-9]/i', '', $title ) );
       $htmlclasses[] = $alteredtitle;
   
       for ($i = 1; $i <= 3; $i++ ) {
         $htmlclasses[] = $alteredtitle . '-' . $i;
       };
       $htmlclasses = implode( ' ', $htmlclasses );
       ?>
       <section class="container" id="<?php echo $alteredtitle; ?>">
         <article class="row <?php echo $htmlclasses; ?>">
           <h3><?php the_content(); ?></h3>
         </article>
       </section>
       ```
   
 * First, we take the title of the post, strip out non-alphanumeric characters and
   spaces, and then convert it to all lowercase. Then, we loop through and add `-
   1`, `-2`, and `-3` to the end of the modified title. Finally, we echo it out 
   to the `<article>` tag.
 * We end up with
 *     ```
       <section class="container" id="title">
         <article class="row title title-1 title-2 title-3">
           ...
         </article>
       </section>
       ```
   
 * Is that what you had in mind?
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623660)
 * Hi,
 * Thanks for this but the div keeps outputting the same class for all post containers:
 * The code gives the same id name of contact to all container divs and gives a 
   class name of contact-1, contact-, contact-3 to all of the article div.
 * We’re nearly there….
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623662)
 * Hi, I solved this. I just useda for loop inside the wordpress while loop to get
   the title of the page and append the “-” plus numbers after it.
 *     ```
       <section class = "container" id="<?php echo get_the_title(); ?>">
           <article class = "row <?php echo get_the_title(); ?>">
                <?php
       	     for($i=1; $i<5; $i++){
       	      $x = $i;
       	     ?>
   
       	    <div id="<?php echo get_the_title() . "-".$x;?>">
       	     <h3><?php the_content(); ?></h3>
                    </div>
                <?php
                 }
       	?>
             </article>
       </section>
       ```
   
 *  Thread Starter [raj080288](https://wordpress.org/support/users/raj080288/)
 * (@raj080288)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623790)
 * this is solved. [@stephencottontail](https://wordpress.org/support/users/stephencottontail/)
   thanks fr all your help.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Add various class to div elements’ is closed to new replies.

## Tags

 * [div-class](https://wordpress.org/support/topic-tag/div-class/)

 * 10 replies
 * 2 participants
 * Last reply from: [raj080288](https://wordpress.org/support/users/raj080288/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/add-various-class-to-div-elements/#post-5623790)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics