Show code only for first query

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

  $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>
    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:


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



.checkboxoption input[type="checkbox"]{
.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:

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">
		wp_nav_menu( array(
			'menu' => 'Mobile Menu',
		) );
$('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');
    if(('ul')) && (':visible'))) {
    if(('ul')) && (!':visible'))) {
      $('ul#menu-mobile-menu  ul:visible').slideUp('normal');
    if ('ul')) {
      return false;
    } else {
      return true;	

Hover Version

$('#secondary-menu li').hover(
	function() {
  function() {

Equal Height Div


        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>


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: */

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