Step 1:

We only need one file for this mod. “index.php”. This will be located in the root folder of your Classipress theme. Find it and open it in your HTML editor.

Step 2:

We are using v3.1.6 for this and in that version the first clunk of code we want is line 20-42.

<?php if ( get_option('cp_home_layout') == 'directory' ) : ?>

                <div class="shadowblock_out">

                    <div class="shadowblock">

                        <h2 class="dotted"><?php _e('Ad Categories','appthemes')?></h2>

                        <div id="directory" class="directory <?php if(get_option('cp_cat_dir_cols') == 2) echo 'two'; ?>Col">

                            <?php echo cp_cat_menu_drop_down(get_option('cp_cat_dir_cols'), get_option('cp_dir_sub_num')); ?>

                            <div class="clr"></div>

                        </div><!--/directory-->

                    </div><!-- /shadowblock -->

                </div><!-- /shadowblock_out -->

            <?php endif; ?>

This is the entire code that makes up the directory/category tab. At the end of this tutorial we will delete these lines but dont do this yet has we need to do some copy and pasting first.

Step 3:

Lines 47-51 you can see contain the actual “tabs”. This is the code structure we need to use to make the tabs work in our new index page. We need to make a new tab for the directory page so lets get to work.

Lines 47-51 by default look like this:

<ul class="tabnavig">
              <li><a href="#block1"><span class="big"><?php _e('Just Listed','appthemes')?></span></a></li>
              <li><a href="#block2"><span class="big"><?php _e('Most Popular','appthemes')?></span></a></li>
              <li><a href="#block3"><span class="big"><?php _e('Random','appthemes')?></span></a></li>
            </ul>

We need to add the tabs so change the code to this:

<ul class="tabnavig">
              <li><a href="#block1"><span class="big"><?php _e('Ad Categories','appthemes')?></span></a></li>
              <li><a href="#block2"><span class="big"><?php _e('Just Listed','appthemes')?></span></a></li>
              <li><a href="#block3"><span class="big"><?php _e('Most Popular','appthemes')?></span></a></li>
              <li><a href="#block4"><span class="big"><?php _e('Random','appthemes')?></span></a></li>
            </ul>

Step 4:

Ok here we get a bit complicated. Now this will all depend on if you want the directory tab to appear last or first in the tabs list. I like the directory being the first tab so im going to write the tutorial that way. Now we need to make a new 1st tab block since we are moving the old first tab to the second tab. Here is the “NEW” first tab block.

<!-- tab 1 -->
            <div id="block1">

              <div class="clr"></div>

              <div class="undertab"><span class="big"><?php _e('Classified Ads','appthemes') ?> / <strong><span class="colour"><?php _e('Ad Categories','appthemes')?></span></strong></span></div>

              <div class="shadowblock_out">

                    <div class="shadowblock">

                        <h2 class="dotted"><?php _e('Ad Categories','appthemes')?></h2>

                        <div id="directory" class="directory <?php if(get_option('cp_cat_dir_cols') == 2) echo 'two'; ?>Col">

                            <?php echo cp_cat_menu_drop_down(get_option('cp_cat_dir_cols'), get_option('cp_dir_sub_num')); ?>

                            <div class="clr"></div>

                        </div><!--/directory-->

                    </div><!-- /shadowblock -->

                </div><!-- /shadowblock_out -->

            </div><!-- /block1 -->

Step 5:

Now to make everything work you will have to edit the rest of the page changing all the block numbers. For the next block which is also named block 1 you will have to rename block 2. The old block 2 will be block 3 and so on. If you are having issues with this i have included the new “index.php” file for you to download. Just replace your old “index.php” with this one and upload to your server.