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; ?>

Styling Checkbox

Make the checkbox on your form looks better:

HTML


<input type="checkbox" value="1">
<label for="00N90000008lvx1">Subscribe Me</label>

 

CSS


.checkboxoption input[type="checkbox"]{
display:none
}
.checkboxoption input[type="checkbox"]:checked + label:before {
content: "\2714";
font-weight: bold;
font-size: 24px;
line-height: 24px;
padding-top: 2px;
color: #fff;
}
.checkboxoption input[type="checkbox"]:checked label:before{
content: '';
border: 1px solid #fff;
vertical-align: middle;
width: 24px;
height: 24px;
padding: 2px;
margin-right: 10px;
text-align: center;
display: inline-flex;
align-items: center;
align-content: center;
}

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);
  }
);

Equal Height Div

HTML

<flex-container>
    <flex-item>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </flex-item>
    <flex-item>
        <div>Forward</div>
    </flex-item>
</flex-container>

CSS

body {
    height: 300px;
    color: white;
}

flex-container {
    display: flex;                 /* primary flex container */
    flex-direction: row;           /* horizontal alignment of flex items (default value; can be omitted) */
    align-items: stretch;          /* will apply equal heights to flex items (default value; can be omitted) */
    height: 100%;
}

flex-item {
    display: flex;                 /* nested flex container */
    flex-direction: column;        /* vertical alignment of flex items */
    justify-content: center;       /* center flex items vertically */
    align-items: center;           /* center flex items horizontally */
}

flex-item:first-child {
    background-color: #a333c8;
    flex: 3;                       /* consume 3x available space than sibling;
                                      more details: http://stackoverflow.com/q/34644807/3597276 */
}

flex-item:last-child {
    background-color: #db2828;
    flex: 2;
}

Source