Show code only for first query

We are working on a site where the first query on archive is displayed featured.

<?php
  $firstonly = 0; // Set the variable to 0 so we can check for it later.
  if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

  <h2><?php the_title(); ?></h2>
  <?php
    if ($firstonly < 1) { // Check if it's been displayed
      echo "Show only on First";
      $firstExcerpt++; // Changes the variable so that next time, it won't show
    };
  ?>

<?php endwhile; endif; ?>

Favorite Post v.02

We are working on a new project that require favorite system where visitor/member can favorites a post and displaying on their profile. Also we want to display most favorite post on front end.

WP Favorite Posts is a good plugin, but the development is stopped.

Fortunately we found fork of this plugin and it works as expected

This plugin is not available on WordPress plugin repos, so visit github page here:

https://github.com/VR51/wp-favorite-posts

Add Property (eg. data-attribute, predefined class etc) to Visual Composer

Sometimes we want to add additional or predefined class on visual composer elements (eg. row, inner row, column) to implement jquery effect. To achieve this on functions.php add a new vc_add_param

vc_add_param("vc_row", array(
	"type" => "dropdown",
	"group" => "Animation",
	"class" => "",
	"heading" => "Style",
	"param_name" => "type",
	"value" => array(
		"None" => "", 
		"Fade Up" => "fade-up", 
		"Fade Down" => "fade-down",	
		"Fade Left" => "fade-left",	
		"Fade Right" => "fade-right",
	)
));

Then copy vc_row in js_composer/include/templates/shortcodes to your theme /vc_templates/vc_row.php

Add the new class

/**ISN Custom CSS**/
if ( ! empty( $type ) ) {
$css_classes[] = "$type";
} 

 

For custom data-attributes, below $wrapper_attributes array (line 72), add this code


/**ISN Custom Attributes**/
if ( ! empty( $type ) ) {
$wrapper_attributes[] = 'data-rel="' . esc_attr( $type ) . '"';
}

Combining with ScrollReveal plugin, we can add animation to row/inner row/column


ScrollReveal().reveal('.fade-in', {
delay: 400,
duration: 750,
distance: '0',
reset: true
});

Accordion based on wordpress menu

Create an accordion on your basic wordpress menu without a plugin.

<div class="nav-menu">
	<?php
		wp_nav_menu( array(
			'menu' => 'Mobile Menu',
		) );
	?>
</div>
$('ul#menu-mobile-menu > li:has(ul)').addClass("has-sub");

  $('ul#menu-mobile-menu  > li > a').click(function() {
    var checkElement = $(this).next();
    
    $('ul#menu-mobile-menu  li').removeClass('active');
    $(this).closest('li').addClass('active');	 
    
    
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
    
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('ul#menu-mobile-menu  ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;	
    }		
});

Hover Version

$('#secondary-menu li').hover(
	function() {
	$('ul',this).stop().slideDown(200);
  },
  function() {
    $('ul',this).stop().slideUp(200);
  }
);

Query by Custom Taxonomy

<?php $the_query = new WP_Query( array(
    'post_type' => 'available_colors',
    'tax_query' => array(
        array (
            'taxonomy' => 'color_category',
            'field' => 'slug',
            'terms' => 'bag-colour',
        )
    ),
) );

while ( $the_query->have_posts() ) :
    $the_query->the_post();
   ?>
  <?php the_title();?><br />
<?php endwhile;

/* Restore original Post Data 
 * NB: Because we are using new WP_Query we aren't stomping on the 
 * original $wp_query and it does not need to be reset.
*/
wp_reset_postdata();
?>

List Custom Taxonomy

Display your custom taxonomy

<select>
<option>Find Factory:</option>
<?php
	$terms = get_the_terms($post->ID, 'store');
	$count = count($terms);
		if ( $count > 0 ){
			foreach ( $terms as $term ) {
				echo "<option>" . $term->name . "</option>";
			}
		}
?>
</select>

Outside loop:

<?php
$terms = get_terms('media_cat','hide_empty=0&orderby=id');
foreach ( $terms as $term ) {
if( ++$count > 60 ) break;   // number of tags here.
echo '<li class="'.$term->slug.'"><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
}
?> 

ACF + Owl Carousel with custom navigation

Combo on creating a carousel using ACF and Owl carousel

<div class="owl-carousel">
		<?php if(get_field('car_images')):$counter = 0; ?>
		
			 <?php while( have_rows('car_images') ): the_row();
                    $color_name = get_sub_field('color_name');
                    $car_image = get_sub_field('car_image');
                    ?>
			
			
				<div class="carColorItem">
					<div data-hash="color-<?php echo $counter;?>">
					<h3><?php echo $color_name; ?></h3>
					<img src="<?php echo $car_image; ?>" alt="" />
					</div>
				</div>
			
			<?php $counter++; endwhile; ?>
			 
			
		 <?php endif; ?> 

		</div>
		<div class="carNav">
			<?php if(get_field('car_images')):$counter = 0; ?>  
			<?php while( have_rows('car_images') ): the_row();
				$color_thumb = get_sub_field('color_thumb');?>
				<a href="#color-<?php echo $counter;?>" class="<?php if (!$counter) {?>active<?php }?>">
					<img src="<?php echo $color_thumb; ?>" alt="" /> 
				</a>
			<?php $counter++; endwhile; ?>
			<?php endif; ?>
		</div>
		</div>

The jQuery:

	$('.owl-carousel').owlCarousel({
		loop:false,
		dots:true,
		items:1,
		URLhashListener:true,
        startPosition: 'URLHash'
	})	

	
	$('.carNav').on('click', 'a', function() {
    $('.carNav a.active').removeClass('active');
    $(this).addClass('active');
	});

Quick snippets for ACF Repeater

Code to display subfield of a repeater field in ACF

<?php if(get_field('slider_image')): ?>
	<?php while(has_sub_field('slider_image')): ?>
	<img src="<?php the_sub_field('image'); ?>" alt="" />
<?php endwhile; endif; ?>

Show only has subfield?

<?php while(has_sub_field('car_types')): ?>
<div class="col-sm-12">
	<div class="col-sm-6">
		<?php the_sub_field('name'); ?>
	</div>
	<div class="col-sm-6">
		<?php the_sub_field('price'); ?><br />
		<?php
			$name = get_sub_field('brochure_file');
			if (get_sub_field('brochure_file')) {
			?>
			<a href="<?php the_sub_field('brochure_file'); ?>">Download Brochure</a>
			<?php 
				} else {
				  echo '';
			}
		?>
	</div>
</div>
<?php endwhile; endif; ?>

Repeater on Option

<?php while(has_sub_field('top_banner', 'option')): ?>
				<div>
					<a href="<?php the_sub_field('link'); ?>" target="_blank">
						<img src="<?php the_sub_field('image'); ?>" /></a>
				</div>
			<?php endwhile; ?>