CODEWITHSUNDEEP
phpwordpress
Chris Spittles
Chris Spittles

Reputation: 15359

Change an element's css class that resides outside a loop from inside a loop

<?php if ( have_posts() ) : ?>

<?php
$count = 1;
$featuredPosts = 9;
query_posts('showposts=19');
?>

<div class="articleTile column_3">

<?php while ( have_posts() ) : the_post(); ?>

    <?php if($count > $featuredPosts) : ?> 

        <!--change class to articleList column_2-->

    <?php endif; ?>

<div class="column">

    <?php get_template_part( 'content', 'featured' ); ?>

    <!-- #post-<?php the_ID(); ?> -->

</div>

<?php
$count = $count ++;
endwhile;
?>

</div>

How would I go about targeting the <div class="articleTile column_3"> element and changing its class when the count variable reaches 10?

EDIT: I'm an idiot sorry.

I've managed to do it with:

<?php if ( have_posts() ) : ?>

<?php
$count = 1;
$featuredPosts = 9;
query_posts('showposts=19');
?>

<div class="articleTile column_3">

<?php while ( have_posts() ) : the_post(); ?>

    <?php if($count == $featuredPosts + 1) : ?>

    <?php echo $count ?>
        </div>
        <div class="articleList column_2">

    <?php endif; ?>

<div class="column">
<?php echo $count ?>
    <?php get_template_part( 'content', 'featured' ); ?>

    <!-- #post-<?php the_ID(); ?> -->

</div>

<?php
$count = $count +1;
endwhile;
?>

</div>

My original way wouldn't have worked anyway without a 2nd element with a different class. My apologies. Thanks for the fast responses they helped point me in the right direction.

Upvotes: 0

Views: 1138

Answers (4)

Chris Spittles
Chris Spittles

Reputation: 15359

This is what I used:

<?php if ( have_posts() ) : ?>

<?php
$count = 1;
$featuredPosts = 9;
query_posts('showposts=19');
?>

<div class="articleTile column_3">

<?php while ( have_posts() ) : the_post(); ?>

    <?php if($count == $featuredPosts + 1) : ?>

    <?php echo $count ?>
        </div>
        <div class="articleList column_2">

    <?php endif; ?>

<div class="column">
<?php echo $count ?>
    <?php get_template_part( 'content', 'featured' ); ?>

    <!-- #post-<?php the_ID(); ?> -->

</div>

<?php
$count = $count +1;
endwhile;
?>

</div>

Upvotes: 0

Ramkumar
Ramkumar

Reputation: 43

You can just add a condition in the div class like

you need to place this div inside a loop

<div class="<?php echo ($count<=10) ? 'articleTile column_3' : 'articleTile column_5' ?>">

Upvotes: 0

Adriaan
Adriaan

Reputation: 378

Isn't it smarter to just run the a loop first to check what the total count is gonna be and then use it to set the right class?

Something like this perhaps? :

<?php if ( have_posts() ) : ?>

<?php
$count = 1;
$count_posts = 1;
$featuredPosts = 9;
$class = 'column_3';

query_posts('showposts=19');

/* Run loop */
while ( have_posts() ) : the_post(); 

    $count_posts = $count_posts ++;
endwhile;

if ($count_posts > $featuredPosts) { $class = 'column_2'; }

?>

<div class="articleTile <? echo $class; ?>">

<?php while ( have_posts() ) : the_post(); ?>



<div class="column">

    <?php get_template_part( 'content', 'featured' ); ?>

    <!-- #post-<?php the_ID(); ?> -->

</div>

<?php
$count = $count ++;
endwhile;
?>

</div>

Upvotes: 2

ron
ron

Reputation: 19

<div class=<?php echo $class; ?></div>

You can try this on the element that you want to change class. 

$class = "oldclass";
if(a==10){
$class= "newclass";
}

Upvotes: -1

Related Questions