John Davidson

Dynamic HTML Classes PHP and WordPress

0 comments
Message:


Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?


The goal is to add a class to some of the div's depending on the ID of the post being even or odd.


<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
&nbsp;
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>


Looking forward to your suggestions.


FYI: the project is a WordPress template.



My Answer:
One way to achieve this is by using the WordPress function `post_class()` which automatically adds classes based on the post ID and other criteria. Here's how you can modify your code to dynamically add classes based on the post ID being even or odd:

php



In this code snippet, we are using the modulo operator `%` to check if the post ID is even or odd. If it's even, we add the class `order-2` to the first `col-5` div and `order-1` to the second `col-7` div. Otherwise, no class is added.

Make sure to test this code on your WordPress template to ensure it works as expected.

Rate this post

5 of 5 based on 1976 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us