Help displaying terms in tabs.

General PHP Help
#1

So, Avada theme in Wordpress has an FAQ feature that uses categories to bulk them on the subject. Preceding the categories, is a tab that displays “All” and the page loads on ALL of the FAQ questions. I have deleted the list item that called for the “All” tab and placed a jQuery to add an active class to the first li items, but the FAQ questions dont follow suit, all of them still appear. Is there a way to load this page so that it pulls the questions from the category with the “active” class on it?

This is the original FAQ page, All tab included.
[php]<?php
// Template Name: FAQs
get_header(); ?>
<?php
$content_css = ‘width:100%’;
$sidebar_css = ‘display:none’;
$content_class = ‘’;
$sidebar_exists = false;
$sidebar_left = ‘’;
$double_sidebars = false;

$sidebar_1 = get_post_meta( $post->ID, 'sbg_selected_sidebar_replacement', true );
$sidebar_2 = get_post_meta( $post->ID, 'sbg_selected_sidebar_2_replacement', true );

if( $smof_data['pages_global_sidebar'] ) {
	if( $smof_data['pages_sidebar'] != 'None' ) {
		$sidebar_1 = array( $smof_data['pages_sidebar'] );
	} else {
		$sidebar_1 = '';
	}

	if( $smof_data['pages_sidebar_2'] != 'None' ) {
		$sidebar_2 = array( $smof_data['pages_sidebar_2'] );
	} else {
		$sidebar_2 = '';
	}
}

if( ( is_array( $sidebar_1 ) && ( $sidebar_1[0] || $sidebar_1[0] === '0' ) ) && ( is_array( $sidebar_2 ) && ( $sidebar_2[0] || $sidebar_2[0] === '0' ) ) ) {
	$double_sidebars = true;
}

if( ( is_array( $sidebar_1 ) && ( $sidebar_1[0] || $sidebar_1[0] === '0' ) ) || ( is_array( $sidebar_2 ) && ( $sidebar_2[0] || $sidebar_2[0] === '0' ) ) ) {
	$sidebar_exists = true;
} else {
	$sidebar_exists = false;
}

if( ! $sidebar_exists ) {
	$content_css = 'width:100%';
	$sidebar_css = 'display:none';
	$sidebar_exists = false;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'left') {
	$content_css = 'float:right;';
	$sidebar_css = 'float:left;';
	$content_class = 'portfolio-one-sidebar';
	$sidebar_exists = true;
	$sidebar_left = 1;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'right') {
	$content_css = 'float:left;';
	$sidebar_css = 'float:right;';
	$content_class = 'portfolio-one-sidebar';
	$sidebar_exists = true;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'default'  || ! metadata_exists( 'post', $post->ID, 'pyre_sidebar_position' )) {
	$content_class = 'portfolio-one-sidebar';
	if($smof_data['default_sidebar_pos'] == 'Left') {
		$content_css = 'float:right;';
		$sidebar_css = 'float:left;';
		$sidebar_exists = true;
		$sidebar_left = 1;
	} elseif($smof_data['default_sidebar_pos'] == 'Right') {
		$content_css = 'float:left;';
		$sidebar_css = 'float:right;';
		$sidebar_exists = true;
		$sidebar_left = 2;
	}
}

if(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'right') {
	$sidebar_left = 2;
}

if( $smof_data['pages_global_sidebar'] ) {
	if( $smof_data['pages_sidebar'] != 'None' ) {
		$sidebar_1 = $smof_data['pages_sidebar'];
		
		if( $smof_data['default_sidebar_pos'] == 'Right' ) {
			$content_css = 'float:left;';
			$sidebar_css = 'float:right;';	
			$sidebar_left = 2;
		} else {
			$content_css = 'float:right;';
			$sidebar_css = 'float:left;';
			$sidebar_left = 1;
		}			
	}

	if( $smof_data['pages_sidebar_2'] != 'None' ) {
		$sidebar_2 = $smof_data['pages_sidebar_2'];
	}
	
	if( $smof_data['pages_sidebar'] != 'None' && $smof_data['pages_sidebar_2'] != 'None' ) {
		$double_sidebars = true;
	}
} else {
	$sidebar_1 = '0';
	$sidebar_2 = '0';
}

if($double_sidebars == true) {
	$content_css = 'float:left;';
	$sidebar_css = 'float:left;';
	$sidebar_2_css = 'float:left;';
} else {
	$sidebar_left = 1;
}
?>
<div id="content" class="fusion-faqs faqs" style="<?php echo $content_css; ?>">
	<?php while(have_posts()): the_post(); ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php echo avada_render_rich_snippets_for_pages(); ?>
		<?php echo avada_featured_images_for_pages(); ?>		
		<div class="post-content">
			<?php the_content(); ?>
			<?php avada_link_pages(); ?>
		</div>
	</div>
	<?php endwhile; ?>
	<?php if( ! post_password_required($post->ID) ): ?>
	<?php
	$portfolio_category = get_terms('faq_category');
	if($portfolio_category):
	?>
	<ul class="faq-tabs clearfix">
		<li class="active"><a data-filter="*" href="#"><?php echo __('All', 'Avada'); ?></a></li>
		<?php foreach($portfolio_category as $portfolio_cat): ?>
		<li><a data-filter=".<?php echo urldecode($portfolio_cat->slug); ?>" href="#"><?php echo $portfolio_cat->name; ?></a></li>
		<?php endforeach; ?>
	</ul>
	<?php endif; ?>
	<div class="faqs-wrapper">
		<div class="accordian fusion-accordian">
			<div class="panel-group" id="accordian-one">
				<?php
				$args = array(
					'post_type' => 'avada_faq',
					'nopaging' => true
				);
				$gallery = new WP_Query($args);
				$count = 0;
				while($gallery->have_posts()): $gallery->the_post();
				$count++;
				?>
				<?php
				$item_classes = '';
				$item_cats = get_the_terms($post->ID, 'faq_category');
				if($item_cats):
				foreach($item_cats as $item_cat) {
					$item_classes .= urldecode($item_cat->slug) . ' ';
				}
				endif;
				?>
				<div class="fusion-panel panel-default faq-item <?php echo $item_classes; ?>">
					<?php echo avada_render_rich_snippets_for_pages(); ?>
					<div class="panel-heading">
						<h4 class="panel-title toggle"><a data-toggle="collapse" class="collapsed" data-parent="#accordian-one" href="#collapse-<?php the_ID(); ?>"><i class="fa-fusion-box"></i><?php the_title(); ?></a></h4>
					</div>
					<div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse">
						<div class="panel-body toggle-content post-content">
							<?php
							if($smof_data['faq_featured_image']):
							if(has_post_thumbnail()):
							?>
							<div class="flexslider post-slideshow">
								<ul class="slides">
								   <?php $attachment_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); ?>
									<li>
										<a href="<?php echo $attachment_image[0]; ?>" rel="prettyPhoto[gallery<?php the_ID(); ?>]" title="<?php echo the_title_attribute('echo=0'); ?>">
										   <?php the_post_thumbnail('blog-large'); ?>
								  		</a>
									</li>
								</ul>
							</div>
							<?php endif; ?>
							<?php endif; ?>

							<?php the_content(); ?>
						</div>
					</div>
				</div>
				<?php endwhile; ?>
			</div>
		</div>
	</div>
	<?php endif; // password check ?>
</div>
<?php if( $sidebar_exists == true ): ?>
<?php wp_reset_query(); ?>
<div id="sidebar" class="sidebar" style="<?php echo $sidebar_css; ?>">
	<?php
	if($sidebar_left == 1) {
		generated_dynamic_sidebar($sidebar_1);
	}
	if($sidebar_left == 2) {
		generated_dynamic_sidebar_2($sidebar_2);
	}
	?>
</div>
<?php if( $double_sidebars == true ): ?>
<div id="sidebar-2" class="sidebar" style="<?php echo $sidebar_2_css; ?>">
	<?php
	if($sidebar_left == 1) {
		generated_dynamic_sidebar_2($sidebar_2);
	}
	if($sidebar_left == 2) {
		generated_dynamic_sidebar($sidebar_1);
	}
	?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php get_footer(); ?>[/php]

My altered php page, i deleted the li with class=“active”
[php]<?php
// Template Name: FAQs
get_header(); ?>
<?php
$content_css = ‘width:100%’;
$sidebar_css = ‘display:none’;
$content_class = ‘’;
$sidebar_exists = false;
$sidebar_left = ‘’;
$double_sidebars = false;

$sidebar_1 = get_post_meta( $post->ID, 'sbg_selected_sidebar_replacement', true );
$sidebar_2 = get_post_meta( $post->ID, 'sbg_selected_sidebar_2_replacement', true );

if( $smof_data['pages_global_sidebar'] ) {
	if( $smof_data['pages_sidebar'] != 'None' ) {
		$sidebar_1 = array( $smof_data['pages_sidebar'] );
	} else {
		$sidebar_1 = '';
	}

	if( $smof_data['pages_sidebar_2'] != 'None' ) {
		$sidebar_2 = array( $smof_data['pages_sidebar_2'] );
	} else {
		$sidebar_2 = '';
	}
}

if( ( is_array( $sidebar_1 ) && ( $sidebar_1[0] || $sidebar_1[0] === '0' ) ) && ( is_array( $sidebar_2 ) && ( $sidebar_2[0] || $sidebar_2[0] === '0' ) ) ) {
	$double_sidebars = true;
}

if( ( is_array( $sidebar_1 ) && ( $sidebar_1[0] || $sidebar_1[0] === '0' ) ) || ( is_array( $sidebar_2 ) && ( $sidebar_2[0] || $sidebar_2[0] === '0' ) ) ) {
	$sidebar_exists = true;
} else {
	$sidebar_exists = false;
}

if( ! $sidebar_exists ) {
	$content_css = 'width:100%';
	$sidebar_css = 'display:none';
	$sidebar_exists = false;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'left') {
	$content_css = 'float:right;';
	$sidebar_css = 'float:left;';
	$content_class = 'portfolio-one-sidebar';
	$sidebar_exists = true;
	$sidebar_left = 1;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'right') {
	$content_css = 'float:left;';
	$sidebar_css = 'float:right;';
	$content_class = 'portfolio-one-sidebar';
	$sidebar_exists = true;
} elseif(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'default'  || ! metadata_exists( 'post', $post->ID, 'pyre_sidebar_position' )) {
	$content_class = 'portfolio-one-sidebar';
	if($smof_data['default_sidebar_pos'] == 'Left') {
		$content_css = 'float:right;';
		$sidebar_css = 'float:left;';
		$sidebar_exists = true;
		$sidebar_left = 1;
	} elseif($smof_data['default_sidebar_pos'] == 'Right') {
		$content_css = 'float:left;';
		$sidebar_css = 'float:right;';
		$sidebar_exists = true;
		$sidebar_left = 2;
	}
}

if(get_post_meta($post->ID, 'pyre_sidebar_position', true) == 'right') {
	$sidebar_left = 2;
}

if( $smof_data['pages_global_sidebar'] ) {
	if( $smof_data['pages_sidebar'] != 'None' ) {
		$sidebar_1 = $smof_data['pages_sidebar'];
		
		if( $smof_data['default_sidebar_pos'] == 'Right' ) {
			$content_css = 'float:left;';
			$sidebar_css = 'float:right;';	
			$sidebar_left = 2;
		} else {
			$content_css = 'float:right;';
			$sidebar_css = 'float:left;';
			$sidebar_left = 1;
		}			
	}

	if( $smof_data['pages_sidebar_2'] != 'None' ) {
		$sidebar_2 = $smof_data['pages_sidebar_2'];
	}
	
	if( $smof_data['pages_sidebar'] != 'None' && $smof_data['pages_sidebar_2'] != 'None' ) {
		$double_sidebars = true;
	}
} else {
	$sidebar_1 = '0';
	$sidebar_2 = '0';
}

if($double_sidebars == true) {
	$content_css = 'float:left;';
	$sidebar_css = 'float:left;';
	$sidebar_2_css = 'float:left;';
} else {
	$sidebar_left = 1;
}
?>
<div id="content" class="fusion-faqs faqs" style="<?php echo $content_css; ?>">
	<?php while(have_posts()): the_post(); ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php echo avada_render_rich_snippets_for_pages(); ?>
		<?php echo avada_featured_images_for_pages(); ?>		
		<div class="post-content">
			<?php the_content(); ?>
			<?php avada_link_pages(); ?>
		</div>
	</div>
	<?php endwhile; ?>
	<?php if( ! post_password_required($post->ID) ): ?>
	<?php
	$portfolio_category = get_terms('faq_category');
	if($portfolio_category):
	?>
	<ul class="faq-tabs clearfix">
		<?php foreach($portfolio_category as $portfolio_cat): ?>
		<li><a data-filter=".<?php echo urldecode($portfolio_cat->slug); ?>" href="#"><?php echo $portfolio_cat->name; ?></a></li>
		<?php endforeach; ?>
	</ul>
	<?php endif; ?>
	<div class="faqs-wrapper">
		<div class="accordian fusion-accordian">
			<div class="panel-group" id="accordian-one">
				<?php
				$args = array(
					'post_type' => 'avada_faq',
					'nopaging' => true,

				);
				$gallery = new WP_Query($args);
				$count = 0;
				while($gallery->have_posts()): $gallery->the_post();
				$count++;
				?>
				<?php
				$item_classes = '';
				$item_cats = get_the_terms($post->ID, 'faq_category');
				if($item_cats):
				foreach($item_cats as $item_cat) {
					$item_classes .= urldecode($item_cat->slug) . ' ';
				}
				endif;
				?>
				<div class="fusion-panel panel-default faq-item <?php echo $item_classes; ?>">
					<?php echo avada_render_rich_snippets_for_pages(); ?>
					<div class="panel-heading">
						<h4 class="panel-title toggle"><a data-toggle="collapse" class="collapsed" data-parent="#accordian-one" href="#collapse-<?php the_ID(); ?>"><i class="fa-fusion-box"></i><?php the_title(); ?></a></h4>
					</div>
					<div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse">
						<div class="panel-body toggle-content post-content">
							<?php
							if($smof_data['faq_featured_image']):
							if(has_post_thumbnail()):
							?>
							<div class="flexslider post-slideshow">
								<ul class="slides">
								   <?php $attachment_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); ?>
									<li>
										<a href="<?php echo $attachment_image[0]; ?>" rel="prettyPhoto[gallery<?php the_ID(); ?>]" title="<?php echo the_title_attribute('echo=0'); ?>">
										   <?php the_post_thumbnail('blog-large'); ?>
								  		</a>
									</li>
								</ul>
							</div>
							<?php endif; ?>
							<?php endif; ?>

							<?php the_content(); ?>
						</div>
					</div>
				</div>
				<?php endwhile; ?>
			</div>
		</div>
	</div>
	<?php endif; // password check ?>
</div>
<?php if( $sidebar_exists == true ): ?>
<?php wp_reset_query(); ?>
<div id="sidebar" class="sidebar" style="<?php echo $sidebar_css; ?>">
	<?php
	if($sidebar_left == 1) {
		generated_dynamic_sidebar($sidebar_1);
	}
	if($sidebar_left == 2) {
		generated_dynamic_sidebar_2($sidebar_2);
	}
	?>
</div>
<?php if( $double_sidebars == true ): ?>
<div id="sidebar-2" class="sidebar" style="<?php echo $sidebar_2_css; ?>">
	<?php
	if($sidebar_left == 1) {
		generated_dynamic_sidebar_2($sidebar_2);
	}
	if($sidebar_left == 2) {
		generated_dynamic_sidebar($sidebar_1);
	}
	?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php get_footer(); ?>[/php]

The jquery to place an active class on the first list item:

jQuery(document).ready(function(){ jQuery(".faq-tabs li").first().addClass("active"); })

#2

Princess,

I had the exact same issue with a Bootstrap layout. Almost exactly same code. I could never get the
Jquery to activate the tab for me. Just would not work. I finally had to rewrite the tabs myself and for
some reason it worked. I do not remember how I did finally handle it, but, I do remember that when
I went off to a sub page and came back the default page was not always selected. Therefore, I set it
up to remember the tab presses and over-rode the code to select it.
Perhaps you can just manually add in the “active” class for the first tab. You can do it this way…
[php]
<?PHP $temp_first_tab="YES"; ?>
<?php foreach($portfolio_category as $portfolio_cat): ?>
<?PHP if($temp_first_tab==“YES”) {
echo “

  • ”;
    $temp_first_tab=“NO”;
    } else {
    echo “
  • ”;
    }?>
    <?php echo $portfolio_cat->name; ?>

    • <?php endforeach; ?>
    [/php]
    As you see this just makes the first tab have the class of “active”. It keeps a temp variable that is used
    once (the first time) and then is set to no. If yes, it places the
  • in place else
  • …
    Might do the job. Make sure you remove the JQuery when testing this. The JQuery did work but, not in
    the form you had. I think it was something about when you did it. You had to do it after the
  • was in
    place, after the page was fully loaded and it took a very odd piece of code to get it to work. But, this
    change my do it for you.

    Let us know… Good luck!

    • #3

    One question, Princess…

    Your code has a huge amount of PHP code that is like:

    <?PHP code ?> <?PHP more code ?> <?PHP even more code ?>

    So, what is the logic of that? You add so much more to the page size that way. Page size means load
    speed. You add ?><?PHP many many times throughout your code. Do you do that for some sort of
    readability issue? I feel it overworks the PHP parser, too. It closes out PHP and restarts it in the next
    line. It is okay to do that, but, not very logical in my humble opinion…

    Just curious, thanks! Ernie

    Sponsor our Newsletter | Privacy Policy | Terms of Service