Adding active class to first item in wordpress loop

adding active class to first div in carousel?
wordpress count posts in loop
wordpress first post
bootstrap carousel php loop
the active item should be a query
wordpress query loop

I created slider in wordpress on category and post thumbnail.

I tried to add active class to first item in my loop, but loop show this class in all items.

How can I fix that ?

Here is my loop:

<div class="carousel-inner" role="listbox">

    <?php
        $c = 0;
        $class = '';
        query_posts('category_name=slider&showposts=3');
        if ( have_posts() ) : while ( have_posts() ) : the_post();
            $c++;

            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
            $url = $thumb['0'];

            if ( $c == 1 ) $class .= ' active';
                ?>
                 <div class="item <?php echo $class; ?>">
                     <img src="<?php echo $url; ?>" class="img-responsive" alt="...">
                     <div class="carousel-caption">
                          <h2><?php the_content() ?></h2>
                     </div>
                 </div>
                 <?php
        endwhile;endif;
        wp_reset_query();
    ?>

</div>

http://pastebin.com/R5XA3ik9


Try with this

 if ( $c == 1 )
    $class = ' active';
 else
    $class=''; 

OR

just in a single line

$class = ($c == 1) ? 'active' : '';

Add the "active" class only to the first loop item in a WordPress query , I'd use the current_post property of the WP_Query class instance, which in your case is the $query . So here I check if $query->current_post is� The topic ‘Add class to the first looped post’ is closed to new replies.


The other answer are right,

You can make this code nicer with

$class = ($c == 1) ? 'active' : '';

Add class "active" to first item; display first item, Add class "active" to first item; display first item. toad78. April 26, 2016 at 6:12 am. I have content in a repeater: <ul class="nav nav-tabs tabs-left"> <li> <a data- toggle="tab" didn't clear the $class variable in each loop and didn't clear the $c variable at the end of WordPress � Github � Twitter � AwesomeACF � Elliot Condon� In this tutorial we will teach you how to add a featured class to the first post in the WordPress loop using the post count. Step 1: Setup a Basic WordPress Loop. In the first step of this tutorial we will setup a basic WordPress post loop. If you are familiar at all with WordPress development then this should be self-explanatory.


The $class variable still has the value from the first "round". (Moreover, since you're using .= it will become active active ... nth times) You need to add an else statement in order to remove the old value.

if ( $c == 1 ) $class = ' active';
else $active = '';

php, i created slider in wordpress on category , post thumbnail. i tried add active class first item in loop, loop show class in items. how can fix ? // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() {


Please Try It.

<div class="carousel-inner" role="listbox">

    <?php
        $c = 0;
        $class = '';
        query_posts('category_name=slider&showposts=3');
        if ( have_posts() ) : while ( have_posts() ) : the_post();
            $c++;

            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
            $url = $thumb['0'];

            if ( $c == 1 ) $class .= ' active';
            else $class = '';
                ?>
                 <div class="item <?php echo $class; ?>">
                     <img src="<?php echo $url; ?>" class="img-responsive" alt="...">
                     <div class="carousel-caption">
                          <h2><?php the_content() ?></h2>
                     </div>
                 </div>
                 <?php
        endwhile;endif;
        wp_reset_query();
    ?>

</div>

Adding active class to first div in carousel?, carousel with a repeater field that has an active class on the first div. I'm adding an active class if $k is zero, which means we are in the first iteration in our loop: I'm not sure if this is because php loads the items in the order they I've implemented Slick sliders on WordPress sites many times, but I've. Upload the plugin files to the ‚/wp-content/plugins/‘ directory, or install the plugin through the WordPress plugins screen directly. Activate the plugin through the ‚Plugins‘ screen in WordPress. Set custom class name from ‚Settings‘ -> ‚WP Add Active Class To Menu Item‘ screen (optional) That’s it, no other settings needed.


Please try with this

`

<?php
    $c = 0;
    $class = '';
    query_posts('category_name=slider&showposts=3');
    if ( have_posts() ) : while ( have_posts() ) : the_post();
        $c++;

        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
        $url = $thumb['0'];

        $class = ($c == 1) ? 'active' : '';
            ?>
             <div class="item <?php echo $class; ?>">
                 <img src="<?php echo $url; ?>" class="img-responsive" alt="...">
                 <div class="carousel-caption">
                      <h2><?php the_content() ?></h2>
                 </div>
             </div>
             <?php
    endwhile;endif;
    wp_reset_query();
?>

`

How To Add a Class to the First Post in The Loop, This snippet will add a first class to the first post in The Loop, which will Note: If this is your first time adding code snippets in WordPress, then� It’s a very powerful feature, as it allows you to target either a single menu item or a group of menu items with a single class. However, the option is hidden from the UI by default. In order to add a class to a menu item, you first have to reveal it. 1. In Appearance > Menus, click the Screen Options tab. 2.


wp_nav_menu() | Function, This class is added to every menu item, where {object} is either a post type or a taxonomy. .menu-item-object-category. This class is added to menu items that� The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.


Jquery Add active class to main menu, <li><a class="menu" href="http://www.mywebtricks.com/2014/03/add-active-class -to-navigation-menu.html">Read Our Blog</a></li>. 13. </ul>. 14. </nav>. 15. Search WordPress.org for: Submit. Toggle Menu Add the customizer settings and controls. submenu will have arrow , also current page parent and menu item will


Add "active" class to current link - Solved, I basically need a way to add an "active" class to the currently active link of the I need to do to add an “active” class to each link (not using a loop so as to keep the li I may play with that as well, but for now, the first bit of code was exactly what I a loop to construct the menu, so that $page is the same for every menu item. This is the first action hook available to themes, triggered immediately after the active theme's functions.php file is loaded. add_theme_support() should be called here, since the init action hook is too late to add some features.