How to make active mode first category items after page load

  • I made an news theme,there I used Isotop plugin for post grid. When I load page all catagories posts show in active mode, then if I click categor buton shows specific category posts, I want to active mode one category posts in active mode after page load,Below I write my code.If anyone there please help

    I made an news theme,there I used Isotop plugin for post grid. When I load page all catagories posts show in active mode, then if I click categor buton shows specific category posts, I want to active mode one category posts in active mode after page load,Below I write my code.If anyone there please help 

    <div class="post-widget m-0 white-bg">
    <div class="cate-tab-navs">
          <div class="container">
               <ul class="nav-justified">
                   <?php $categories = get_categories();  

                foreach ( $categories as $row){
                            echo '<li><a>name.'" data-toggle="tab">'.$row->name.'</a></li>';
                        }
                        ?
          
                    </ul>
                </div>
            </div>
            <div class="cate-tab-content theme-padding">
                <div class="container">
                    <div class="tab-content">

                        <?php foreach($categories as $row) : ?>

                        <div class="tab-pane active fade in" id="<?php echo $row->name;?>">
                            <div class="row slider-post">

                                <?php
                       
                                $args = array(
                                    'post_type'      => 'post',
                                    'post_status'    => 'publish',
                                    'category_name'  =>  $row->name,
                                    'posts_per_page' => 4
                                );

                                $my_result = new WP_Query($args);

                                if($my_result-> have_posts()){
                                    while($my_result->have_posts()) : $my_result -> the_post();

                                ?>
                                <div class="col-sm-3 col-xs-6">
                                    <!-- post -->
                                    <div class="post style-1">

                                        <!-- post img -->
                                        <div class="post-thumb"> 
                                           <?php the_post_thumbnail('spc-pos-cat',array('class'=>'spc_img_class'));?>
                                            <span class="post-badge"><?php the_category();?></span>
                                            <div class="thumb-hover">
                                                <div class="position-center-center">
                                                    <a>" class="fa fa-link"></a>
                                                </div>
                                            </div>                                                
                                        </div>
                                        <!-- post img -->

                                        <!-- post details -->
                                        <div class="post-content">
                                            <h4><a>"><?php the_title();?></a></h4>
                                            <ul class="post-meta m-0">
                                                <li><i class="icon-user"></i><?php the_author();?></li>
                                                <li><i class="icon-clock"></i><?php the_time();?></li>
                                            </ul>
                                        </div>
                                        <!-- post details -->

                                    </div>
                                    <!-- post -->

                                </div>

                            <?php endwhile;};?>
                            <?php wp_reset_query();?>
                               
                            </div>
                        </div>
                    <?php endforeach;?>
                    </div>
                </div>
            </div>
        </div>
    <div class="post-widget m-0 white-bg">
    <div class="cate-tab-navs">
          <div class="container">
               <ul class="nav-justified">
                   <?php $categories = get_categories();  

                foreach ( $categories as $row){
                            echo '<li><a>name.'" data-toggle="tab">'.$row->name.'</a></li>';
                        }
                        ?
          
                    </ul>
                </div>
            </div>
            <div class="cate-tab-content theme-padding">
                <div class="container">
                    <div class="tab-content">

                        <?php foreach($categories as $row) : ?>

                        <div class="tab-pane active fade in" id="<?php echo $row->name;?>">
                            <div class="row slider-post">

                                <?php
                       
                                $args = array(
                                    'post_type'      => 'post',
                                    'post_status'    => 'publish',
                                    'category_name'  =>  $row->name,
                                    'posts_per_page' => 4
                                );

                                $my_result = new WP_Query($args);

                                if($my_result-> have_posts()){
                                    while($my_result->have_posts()) : $my_result -> the_post();

                                ?>
                                <div class="col-sm-3 col-xs-6">
                                    <!-- post -->
                                    <div class="post style-1">

                                        <!-- post img -->
                                        <div class="post-thumb"> 
                                           <?php the_post_thumbnail('spc-pos-cat',array('class'=>'spc_img_class'));?>
                                            <span class="post-badge"><?php the_category();?></span>
                                            <div class="thumb-hover">
                                                <div class="position-center-center">
                                                    <a>" class="fa fa-link"></a>
                                                </div>
                                            </div>                                                
                                        </div>
                                        <!-- post img -->

                                        <!-- post details -->
                                        <div class="post-content">
                                            <h4><a>"><?php the_title();?></a></h4>
                                            <ul class="post-meta m-0">
                                                <li><i class="icon-user"></i><?php the_author();?></li>
                                                <li><i class="icon-clock"></i><?php the_time();?></li>
                                            </ul>
                                        </div>
                                        <!-- post details -->

                                    </div>
                                    <!-- post -->

                                </div>

                            <?php endwhile;};?>
                            <?php wp_reset_query();?>
                               
                            </div>
                        </div>
                    <?php endforeach;?>
                    </div>
                </div>
            </div>
        </div>
    • This topic was modified 3 years, 5 months ago by Rihan Habib.
    • This topic was modified 3 years, 5 months ago by Rihan Habib.
    • This topic was modified 3 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Requests and Feedback topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    I don’t know what you mean by “active mode”. In any case, the page cannot know on its own what category was previously clicked when it loads. Either the selection is passed to it via URL query string, or the selection is saved via cookie or session variable.

    Thread Starter Rihan Habib

    (@xihad1)

    Hi bcworkz, nice to meet you,,,,suppose in my database there are four categories lik cricket,footbal,tennis,badminton. Now when I reload website there shows all categories(cricket,footbal,tennis,badminton) posts, then when click on cricket in filter shows posts from cricket category, similarly work for other categories. I just want to show posts from one category after page load, then show other categories posts by click on filter,,that’s it.

    Moderator bcworkz

    (@bcworkz)

    Wouldn’t you just have filter clicks lead to URLs like example.com/category/cricket/?

    You could instead somehow alter the main page’s query to only show cricket posts (“pre_get_posts” action hook), but why bother when there’s already a page that does that?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make active mode first category items after page load’ is closed to new replies.