Loop wordpress with colorful div

Asked

Viewed 111 times

1

good morning! I’m setting up a gym website where there’s a menu of modalities. I made a custom post in wp to create the modalities, but my problem is time to call the modalities, because each modality has a specific color.

Example: Jiujitsu = black box | Bodybuilding = Orange Box and so on.

Follow the image of how my loop would have that list:

inserir a descrição da imagem aqui

My loop is bringing all modalities, but the div is only 1 color.

Follow the code of my loop:

<article class="col-sm-8 modalidades-total"> 
        <?php 
                            $query_modalidades = array( 'post_type' => 'Modalidade');
                            $modLoop = new WP_Query( $query_modalidades ); 

                            while ($modLoop->have_posts()) : $modLoop->the_post();
                            $id = get_the_ID();
                            ?>             
            <h1><a data-toggle="collapse" href="#<?php echo $id; ?>" aria-expanded="false" aria-controls="collapseExample"><?php the_title(); ?></a></h1>                
           <div id="<?php echo $id; ?>" class="collapse modalidades-content" role="tabpanel">
                <div class="row">
                    <div class="col-sm-2 menu-modalidades">
                        <ul>
                            <li><a href="#">Sobre</a></li>
                            <li><a href="#">Professores</a></li>
                            <li><a href="#">Horários</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-10">
                        <figure><?php if ( has_post_thumbnail() ) { 
                the_post_thumbnail( 'full', array( 'class' => 'img-responsive center-block' ) ); } ?></figure>

                        <div class="row">
                            <div class="col-sm-6">
                                <h2>Sobre</h2>
                                <p><?php the_field('sobre'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Caracteristicas</h2>
                                <p><?php the_field('caracteristicas'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Treinadores</h2>
                                <p><?php the_field('treinadores'); ?></p>
                            </div>
                            <div class="col-sm-6">
                                <h2>Investimento</h2>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
             <?php endwhile; wp_reset_postdata(); ?>
        </article>

as listed in the image, each mode has its specific color! someone could give me a help ai in this loop?

  • Because you don’t categorize the modalities and give a color to each of them?

  • @Marcosvinicius is an option, but I don’t want to do the categories modalities, so I created a custom post. Because it would create a "post" Jiu-Jitsu in the fights category, but Thai Thai would stay the same color as Jiu-Jitsu, then it doesn’t work! So there’s no way to categorize!

  • If it cannot be by category, if it can be manual, take each post ID and apply a different color. If I have to be dynamic, I haven’t thought yet, BUT what I could do is draw colors to color each post and prevent them from repeating.

  • @Lucianooliveiralima, managed to solve this problem?

  • @Caiofelipepereira I did in a Statica way same! I could not solve!

  • I had to implement something like this last week. I’ll put together a response and post

  • Adds a custom field to the post and gets a hexadecimal color.

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.