Add various class to div elements

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?

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?

Your code snippet seems like it should do what you want. What specifically isn’t working correctly?

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.

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.

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

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?

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….

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>

this is solved. @stephencottontail thanks fr all your help.