amitabhaghosh197
7/19/2016 - 2:18 PM

Wordpress Essentials

Wordpress Essentials

Create Custom Page in Admin with admin Menu

  1. http://www.billrobbinsdesign.com/custom-post-type-admin-page/
  2. http://wordpress.stackexchange.com/questions/49097/create-a-custom-admin-page-for-custom-post-type-taxonomies-metas

Sortable jQuery Datatable and Wordpress Admin page

  1. http://www.kvcodes.com/2014/02/sortable-data-table-wordpress-frontback-end/
  2. http://joebuckle.me/use-wordpress-custom-post-types-and-datatables-to-create-a-searchable-staff-table/

The Options

Devinsays Option Frame work. This sets on the Theme Customizer Panel after initiating in the function.php. But add also customizer-library inside the option folder

  1. http://wptheming.com/options-framework-theme/
  2. https://github.com/devinsays/customizer-library-demo
  3. https://github.com/devinsays/customizer-library

How to remove a option section from the Theme Customization API preview pane?

add_action( 'customize_register', 'wpse8170_customize_register' );
function wpse8170_customize_register( WP_Customize_Manager $wp_customize ) {
    $wp_customize->remove_section( 'section-id-to-remove' );
}

This process did in Sakha

How to use Multilingual Language in Wordpress

http://www.wpbeginner.com/beginners-guide/how-to-easily-create-a-multilingual-wordpress-site/

Some Rules of Wordpress coding

https://github.com/pixelgrade/guides

Wordpress Coding Standards

  1. https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/
  2. https://codex.wordpress.org/WordPress_Coding_Standards

Wordpress Very Essential for Security

  1. https://yoast.com/wordpress-security/
  2. http://www.wpbeginner.com/wp-tutorials/how-to-fix-the-403-forbidden-error-in-wordpress/

Wordpress custom post types

  1. https://www.smashingmagazine.com/2012/11/complete-guide-custom-post-types/

If is Page Template

https://paulund.co.uk/get-the-current-file-used-by-theme

Featured image in div background image

<?php global $post; ?>
    <?php
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'home-banners', false, '' );
        ?>
    <div class="home-slider-imgs" style="background-image:url('<?php echo $src[0]; ?>');">

Get Image Source from Meta Box

$featured_img  = wp_get_attachment_url( get_post_meta( get_the_ID(), '_cmb_feat_image_id', 1 , true) );

get Featured Image Src

$welcome_thumb = get_the_post_thumbnail_url();

Visual Builder Tutorial

https://wpbakery.atlassian.net/wiki/display/VC/Change+Shortcode%27s+HTML+Output

To edit any shortcode Copy js_composer/include/templates/shortcodes/vc_text_separator.php file and place it in your theme's folder /vc_templates/vc_text_separator.php

Visual Builder add an attribute in the row

  1. https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524335

Visual Builder Available Params

  1. https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Availabletypevalues

Display a category name from custom posttype

<?php
$terms = get_the_terms( $post->ID , 'board' );
foreach ( $terms as $term ) {
echo $term->name;
}
?>

http://wordpress.stackexchange.com/questions/108570/how-to-display-categories-of-my-custom-post-type http://wordpress.stackexchange.com/questions/189055/displaying-the-category-name-of-a-custom-post-type

Display Custom Posts by Category

<?php
  query_posts( array( 'post_type' => 'portfolio', 'toolkit' => 'preparation' ) );
  //the loop start here
  if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
  <h3><?php the_title(); ?></h3>
  <?php the_content(); ?>
<?php endwhile; endif; wp_reset_query(); ?>

OR

$the_query = new WP_Query( array(
    'post_type' => 'Adverts',
    'tax_query' => array(
        'taxonomy' => 'advert_tag',
        'field' => 'slug',
        'terms' => 'politics',
    ),
) );

while ( $the_query->have_posts() ) :
    $the_query->the_post();
    // Show Posts ...
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();

http://wordpress.stackexchange.com/questions/2849/displaying-custom-posts-by-category http://wordpress.stackexchange.com/questions/84921/how-do-i-query-a-custom-post-type-with-a-custom-taxonomy

Disable Plugin Update Notice for Specific Plugin

function filter_plugin_updates( $value ) {
    
     if( isset( $value->response['js_composer/js_composer.php'] ) )
       unset( $value->response['js_composer/js_composer.php'] ); 
       return $value;
   
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );

http://wordpress.stackexchange.com/questions/20580/disable-update-notification-for-individual-plugins

Contact form 7 additionals

  1. Call contact form in page template http://contactform7.com/faq/can-i-embed-a-contact-form-into-my-template-file/
  2. Add a class to contact form http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

Get Image src

<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
echo $thumb_url[0];
?>

http://www.wpbeginner.com/wp-themes/how-to-get-the-post-thumbnail-url-in-wordpress/

Useful Wordpress Loops

  1. https://www.smashingmagazine.com/2009/06/10-useful-wordpress-loop-hacks/
  2. Multiple Columns : https://digwp.com/2010/03/wordpress-post-content-multiple-columns/

For Posts

  1. https://codex.wordpress.org/Template_Tags/get_posts
  2. https://codex.wordpress.org/Template_Tags
  3. https://codex.wordpress.org/it:Riferimento_funzioni/query_posts
  4. https://codex.wordpress.org/Class_Reference/WP_Query

Wordpress Isotope Gallery

  1. http://redvinestudio.com/how-to-build-isotope-portfolio-in-your-wordpress-theme/
  2. http://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

Wordpress Bootstrap Tab

  1. http://wordpress.stackexchange.com/questions/190387/how-to-convert-bootstrap-tab-functionality-into-wordpress-using-just-1-query
  2. http://bigspring.co.uk/using-boostrap-3-tabs-display-posts-custom-post-type-taxonomy/#.WDliZNJ96Uk

#Single Post Page

Reff:

  1. Get The Author Url : https://codex.wordpress.org/Function_Reference/get_author_posts_url

2.###### Get the date: https://codex.wordpress.org/Function_Reference/get_the_date

  1. Get the Tags : https://codex.wordpress.org/Function_Reference/get_the_tags
Author Link And all
<header class="article-header  search-header">
      
       <h1 class="entry-header"><?php echo the_title(); ?></h1>
       
       <ul class="post-infos nav">
         
         <li> By : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a></li>
         <li>Date :<span > <?php echo get_the_date(); ?></span></li>
         <li class="post-tags">Tags: <?php
                     $posttags = get_the_tags();
                        if ($posttags) {
                          foreach($posttags as $tag) {
                            echo '<a href="'. get_tag_link($tag->term_id) .'">'. $tag->name .' </a>'; 
                          }
                        }
                       ?></li>
       </ul>
      </header>
      `

How to secure wordpress comments

http://www.wpbeginner.com/plugins/how-to-block-spam-comments-in-wordpress-with-captcha/

Hide Admin Bar

function dts_hide_admin_bar_from_front_end(){
  if (is_blog_admin()) {
    return true;
  }
  return false;
}
add_filter( 'show_admin_bar', 'dts_hide_admin_bar_from_front_end' );

Add columns and featured image on the Admin Dashboard


/**
 *
 * Add Feature Image on Admin Dashboard
 *
 */

function salon_get_featured_image($post_ID) {

    $post_thumbnail_id = get_post_thumbnail_id($post_ID);

    if ($post_thumbnail_id) {

        $post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');

        return $post_thumbnail_img[0];

    }

}

// ADD NEW COLUMN

function salon_columns_head($defaults) {

    $defaults['featured_image'] = 'Featured Image';

    return $defaults;

}
// SHOW THE FEATURED IMAGE

function salon_columns_content($column_name, $post_ID) {

    if ($column_name == 'featured_image') {

        $post_featured_image = salon_get_featured_image($post_ID);

        if ($post_featured_image) {

            echo '<img src="' . $post_featured_image . '"  width="70" />';

        }

    }

}

add_filter('manage_posts_columns', 'salon_columns_head');

add_action('manage_posts_custom_column', 'salon_columns_content', 10, 2);

Create custom search form

  1. http://www.wpbeginner.com/wp-tutorials/how-to-create-advanced-search-form-in-wordpress-for-custom-post-types/
  2. https://premium.wpmudev.org/blog/build-your-own-custom-wordpress-search/?omtr=b&utm_expid=3606929-101._J2UGKNuQ6e7Of8gblmOTA.1&utm_referrer=https%3A%2F%2Fwww.google.co.in%2F
  3. http://wordpress.stackexchange.com/questions/89886/how-to-create-a-custom-search-for-custom-post-type

TRim character & Trim Words

Character

<?php echo substr($second_heading, 0, 3 ); ?>

TRIM WORDS

<?php echo wp_trim_words( $fourth_heading, 5, '' );?>

Some useful Plugins

  1. Hide My Site https://wordpress.org/plugins/hide-my-site/
  2. Change Author https://wordpress.org/plugins/change-author/
  3. WP Project Manager https://wordpress.org/plugins/wedevs-project-manager/
  4. Embed Any Document https://wordpress.org/plugins/embed-any-document/
  5. Slack https://wordpress.org/plugins/slack/
  6. The best Notification ####https://wordpress.org/plugins/ultimate-slack-notifications/

Custom Body Class Wordpress

  1. https://code.tutsplus.com/tutorials/adding-to-the-body-class-in-wordpress--cms-21077
function dts_body_classes( $classes ) {
    // Adds a class of hfeed to non-singular pages.
    if ( ! is_singular() ) {
        $classes[] = 'hfeed';
    }

    if( is_singular() ){
        $classes[] = 'dts-single-post';
    }

    if(is_home() || is_front_page() ) {
        $classes[] = 'dts-home';
    }

    // if(is_shop()){
    //  $classes[] = 'dts-shop';
    // }

    return $classes;
}
add_filter( 'body_class', 'dts_body_classes' );

Rich Snippets, Schema.Org

  1. https://paulund.co.uk/add-schema-org-wordpress
  2. https://premium.wpmudev.org/blog/schema-wordpress-seo/?ptma=b&utm_expid=3606929-109.P6e7JvhjTrWFxwrJZjRkog.1&utm_referrer=https%3A%2F%2Fwww.google.co.in%2F

Adding Sitemap Page

http://www.wpbeginner.com/plugins/how-to-add-an-html-sitemap-page-in-wordpress/

Following is the Leverage Browser Caching & GZIP script in .htaccess

###Leverage Browser Caching

##### EXPIRE CACHING - LEVERAGE BROWSER CACHING #####
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
##### END EXPIRE CACHING #####

GZIP

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

The alltogether .htaccess

##### EXPIRE CACHING - LEVERAGE BROWSER CACHING #####
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
##### END EXPIRE CACHING #####

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /test/testfinal/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /test/testfinal/index.php [L]
</IfModule>

# END WordPress



 <IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Info

  1. How to add additional HTML attributes is a Row
  2. First create a vc_template folder inside the theme file
  3. Then copy the vc_row.php from the plugins>js_composer>include>templates>shortcodes>vc_row.php and put inside the vc_template folder
  4. Now inside your function.php write the following code for adding a new parameter
<?php

//this is my personal custom param for a project
$attributes = array(
    'type' => 'textfield',
 'heading' => "Data Attribute",
 'param_name' => 'element_data',
 'value' => '',
 'description' => __( "Assign an data attribute to the row", "discprofile" )
);
vc_add_param( 'vc_row', $attributes ); 

?>

Then inside the vc_row.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

/**
 * Shortcode attributes
 * @var $atts
 * @var $el_class
 * @var $full_width
 * @var $full_height
 * @var $equal_height
 * @var $columns_placement
 * @var $content_placement
 * @var $parallax
 * @var $parallax_image
 * @var $css
 * @var $el_id
 * @var $video_bg
 * @var $video_bg_url
 * @var $video_bg_parallax
 * @var $parallax_speed_bg
 * @var $parallax_speed_video
 * @var $content - shortcode content
 * Shortcode class
 * @var $this WPBakeryShortCode_VC_Row
 */




$element_data = $el_class = $full_height = $parallax_speed_bg = $parallax_speed_video = $full_width = $equal_height = $flex_row = $columns_placement = $content_placement = $parallax = $parallax_image = $css = $el_id = $video_bg = $video_bg_url = $video_bg_parallax = '';
$disable_element = '';
$output = $after_output = '';
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );

wp_enqueue_script( 'wpb_composer_front_js' );

$el_class = $this->getExtraClass( $el_class );

$css_classes = array(
    'full-width-grid',
    'wpb_row', //deprecated
    
    $el_class,
    vc_shortcode_custom_css_class( $css ),
);

if ( 'yes' === $disable_element ) {
    if ( vc_is_page_editable() ) {
        $css_classes[] = 'vc_hidden-lg vc_hidden-xs vc_hidden-sm vc_hidden-md';
    } else {
        return '';
    }
}

if (vc_shortcode_custom_css_has_property( $css, array('border', 'background') ) || $video_bg || $parallax) {
    $css_classes[]='vc_row-has-fill';
}

if (!empty($atts['gap'])) {
    $css_classes[] = 'vc_column-gap-'.$atts['gap'];
}

$wrapper_attributes = array();
// build attributes for wrapper
if ( ! empty( $el_id ) ) {
    $wrapper_attributes[] = 'id="' . esc_attr( $el_id ) . '"';
}
if ( ! empty( $full_width ) ) {
    $wrapper_attributes[] = 'data-vc-full-width="true"';
    $wrapper_attributes[] = 'data-vc-full-width-init="false"';
    if ( 'stretch_row_content' === $full_width ) {
        $wrapper_attributes[] = 'data-vc-stretch-content="true"';
    } elseif ( 'stretch_row_content_no_spaces' === $full_width ) {
        $wrapper_attributes[] = 'data-vc-stretch-content="true"';
        $css_classes[] = 'vc_row-no-padding';
    }
    $after_output .= '<div class="vc_row-full-width vc_clearfix"></div>';
}

if ( ! empty( $full_height ) ) {
    $css_classes[] = 'vc_row-o-full-height';
    if ( ! empty( $columns_placement ) ) {
        $flex_row = true;
        $css_classes[] = 'vc_row-o-columns-' . $columns_placement;
        if ( 'stretch' === $columns_placement ) {
            $css_classes[] = 'vc_row-o-equal-height';
        }
    }
}

if ( ! empty( $equal_height ) ) {
    $flex_row = true;
    $css_classes[] = 'vc_row-o-equal-height';
}

if ( ! empty( $content_placement ) ) {
    $flex_row = true;
    $css_classes[] = 'vc_row-o-content-' . $content_placement;
}

if ( ! empty( $flex_row ) ) {
    $css_classes[] = 'vc_row-flex';
}

$has_video_bg = ( ! empty( $video_bg ) && ! empty( $video_bg_url ) && vc_extract_youtube_id( $video_bg_url ) );

$parallax_speed = $parallax_speed_bg;
if ( $has_video_bg ) {
    $parallax = $video_bg_parallax;
    $parallax_speed = $parallax_speed_video;
    $parallax_image = $video_bg_url;
    $css_classes[] = 'vc_video-bg-container';
    wp_enqueue_script( 'vc_youtube_iframe_api_js' );
}

if ( ! empty( $parallax ) ) {
    wp_enqueue_script( 'vc_jquery_skrollr_js' );
    $wrapper_attributes[] = 'data-vc-parallax="' . esc_attr( $parallax_speed ) . '"'; // parallax speed
    $css_classes[] = 'vc_general vc_parallax vc_parallax-' . $parallax;
    if ( false !== strpos( $parallax, 'fade' ) ) {
        $css_classes[] = 'js-vc_parallax-o-fade';
        $wrapper_attributes[] = 'data-vc-parallax-o-fade="on"';
    } elseif ( false !== strpos( $parallax, 'fixed' ) ) {
        $css_classes[] = 'js-vc_parallax-o-fixed';
    }
}

if ( ! empty( $parallax_image ) ) {
    if ( $has_video_bg ) {
        $parallax_image_src = $parallax_image;
    } else {
        $parallax_image_id = preg_replace( '/[^\d]/', '', $parallax_image );
        $parallax_image_src = wp_get_attachment_image_src( $parallax_image_id, 'full' );
        if ( ! empty( $parallax_image_src[0] ) ) {
            $parallax_image_src = $parallax_image_src[0];
        }
    }
    $wrapper_attributes[] = 'data-vc-parallax-image="' . esc_attr( $parallax_image_src ) . '"';
}
if ( ! $parallax && $has_video_bg ) {
    $wrapper_attributes[] = 'data-vc-video-bg="' . esc_attr( $video_bg_url ) . '"';
}
$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( array_unique( $css_classes ) ) ), $this->settings['base'], $atts ) );
$wrapper_attributes[] = 'class="' . esc_attr( trim( $css_class ) ) . '"';

$output .= '<article ' . implode( ' ', $wrapper_attributes ) . ' data-section-title="' . $element_data  .' ">';
$output .= '<div class="container">';
$output .= '<div class="row">';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</div>';
$output .= '</div>';
$output .= '</article>';
$output .= $after_output;

echo $output;


Watch I have worked with element_data

Visual Composer shortcode with Admin JS

<?php

function portfolio_shortcode( $atts, $content = null ) {



    extract( shortcode_atts( array(
    'title' => '',
    'category_name' =>'',
    'all'=>''
      ), $atts));




$return_content = '';
global $post;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
if($all == false):
$args = array('post_type' => 'video_section', 'posts_per_page' => 6,'video_section-cat' =>$category_name,'paged' => $paged);

$return_content .= '<section class="full-width-grid portfolio-page-wrapper">';

    $return_content .= '<div class="portfolio-wrapper clearfix">';

         $return_content .= '<div class="port-item-setter"></div>';


$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();

$video = get_post_meta(get_the_ID(), 'video', true);

         $return_content .= '<div class="port-items">';

         $return_content .= '<div class="video-blocks">';

            $return_content .= '<div class="video-wrapper">';

        $return_content .= '<video';
        $return_content .= ' id=""';
        $return_content .= ' class="video-js vjs-default-skin video-js-youtube"';
        $return_content .= ' width="100%"';
        $return_content .= ' height="310"';
        $return_content .= ' poster="'.TEMPLATE_DIRECTORY_URI.'/assets/img/videos/dubb/one.jpg"';
        $return_content .= ' data-setup=\'{ "techOrder": ["youtube"], "sources": [{
          "type": "video/youtube", "src": "'.$video.'"}], "youtube": { "ytControls": 2 } }\'
      >';
     $return_content .= '</video>';
         $return_content .= '</div>';
         $return_content .= '</div>';
         $return_content .= '<div class="article-content">';
              $return_content .= '<header class="article-header">';
                $return_content .= '<h1 class="entry-title">'.get_the_title().'</h1>';

              $return_content .= '</header>';

            $return_content .= '</div>';
$return_content .= '</div> ';

endwhile; wp_reset_query();
else:
// If all
    $return_content .='<section class="full-width-grid our-gallery-section">';
    $return_content .= '<nav class="navbar">';
  $return_content .= '<ul class="gallery-filter nav navbar-nav" id="galleryFilters">';

    $terms = get_terms('video_section-cat' );
    //var_dump($terms);
    $count = count( $terms );

    $return_content .= '<a class="current" href="javascript:void(0);"  data-filter="*">All</a>';

    if( $count > 1 ) :

    foreach( $terms  as $term ){

    $termname = strtolower($term->name);
    $termname = str_replace(' ', '-', $termname);

    $return_content .= '<a href="javascript:void(0);" data-filter=".'.$termname.'"> ' . $termname  .'</a>';
    };

  endif;


    $return_content .= '</ul>';
    $return_content .= '</nav>';

    $return_content .= '<section class="gallery-isotope-container full-width-grid" id="gallery_Container">';

  $return_content .= '<div class="grid-setter"></div>';

    $gallery_args = array(

                     'post_type' => 'video_section',
            'posts_per_page' => -1,
                             'order' => 'ASC',
                            //'paged' => $paged
        ) ;

    $gallery_posts = new WP_Query( $gallery_args );

    if( $gallery_posts -> have_posts() ) : while( $gallery_posts -> have_posts() ) :
  $gallery_posts -> the_post();
    //$terms2 = get_the_category( get_the_ID() );
      $terms2 = get_the_terms( $post->ID, 'video_section-cat' );
 //var_dump($terms2);
    if ( $terms2 && ! is_wp_error( $terms2 ) ) :

            $links = array();

            foreach ( $terms2 as $term ) {
                     $links[] = $term->name;
            }

            $tax_links = join( " ", str_replace(' ', '-', $links));
             $tax = strtolower($tax_links);
    else :
$tax = '';
    endif;

    $return_content .= '<section class="gal_items '. $tax .'" >';



 $video = get_post_meta(get_the_ID(), 'video', true);

 $return_content .= '<div class="port-items">';
 $return_content .= '<div class="video-blocks">';

 $return_content .= '<div class="port_preloader">';
 $return_content .= '<span class="port_preloading_text">Videos Loading...</span>';
 $return_content .= '</div>';

 $return_content .= '<div class="video-wrapper">';
 $return_content .= '<video';
 $return_content .= ' id=""';
 $return_content .= ' class="video-js vjs-default-skin video-js-youtube"';
 $return_content .= ' width="100%"';
 $return_content .= ' height="310"';
 $return_content .= ' poster="'.TEMPLATE_DIRECTORY_URI.'/assets/img/videos/dubb/one.jpg"';
 $return_content .= ' data-setup=\'{ "techOrder": ["youtube"], "sources": [{
            "type": "video/youtube", "src": "'.$video.'"}], "youtube": { "ytControls": 2 } }\'
    >';
 $return_content .= '</video>';
 $return_content .= '</div>';
 $return_content .= '</div>';
 $return_content .= '<div class="article-content">';
 $return_content .= '<header class="article-header">';
 $return_content .= '<h1 class="entry-title">'.get_the_title().'</h1>';
 $return_content .= '</header>';
 $return_content .= '</div>';
 $return_content .= '</div> ';
 $return_content .= '</section> <!-- .gal_items   -->';
 endwhile;
 wp_reset_query();
 endif;
 $return_content .= '</section> <!-- #gallery_Container -->';
 $return_content .= '</section><!-- .our-gallery-section  -->';

endif;


//$return_content .= wp_pagenavi( array( 'query' => $gallery_posts ) );

$return_content .= '</section>';

return  $return_content;



}



function portfolio_shortcode_action(){



add_shortcode( 'portfolio','portfolio_shortcode' );



}

add_action('init','portfolio_shortcode_action');



/*----------  Fuul Width Grid  ----------*/





add_filter("the_content", "portfolio_content_filter");



function portfolio_content_filter($content) {



    // array of custom shortcodes requiring the fix



    $block = join("|",array("portfolio"));



    // opening tag



    $rep = preg_replace("/(<p>)?\[($block)(\s[^\]]+)?\](<\/p>|<br \/>)?/","[$2$3]",$content);







    // closing tag



    $rep = preg_replace("/(<p>)?\[\/($block)](<\/p>|<br \/>)?/","[/$2]",$rep);



    return $rep;



}

/**
 *
 * Add Param to VC Builder
 *
 */

add_action( 'vc_before_init', 'zibanka_param_integrateWithVC' );

function zibanka_param_integrateWithVC() {
    /*$categories_array = array();
    $categories = get_terms( array(
    'taxonomy' => 'video_section-cat',
    'hide_empty' => false,
    ) );
        foreach( $categories as $category ){
   $categories_array[$category->name] = $category->name;
}*/
$categories_array = array( __( 'All Categories', 'js_composer' ) => '' );

//$taxonomy = 'video_section-cat';
$category_list = get_terms( array(
    'taxonomy' => 'video_section-cat',
    'hide_empty' => false,
    ) );
    //var_dump($terms);
    foreach($category_list as $category_details) {
$categories_array[ $category_details->name] = $category_details->slug;
   }
   vc_map( array(
      "name" => __( "Zibanka Portfolio", "zinanka" ),
      "base" => "portfolio",
      "class" => "zibanka-checkbox",
      "category" => __( "Zibanka Shortcode", "zibanka"),
      "group"    =>  __( "Zibanka Shortcode", "zibanka"),

            'admin_enqueue_js' =>array(TEMPLATE_DIRECTORY_URI.'/vc_templates/vc_admin.js'),
      "params" => array(

        array(
            "type" => "checkbox",
            "heading" => __( "All Portfolio", "zibanka" ),
            "param_name" => "all",
            "description" => __( "Check this for all portfolio templates", "zibanka" )
         ),

                    array(
                      'param_name'    => 'category_name',
                      'type'          => 'dropdown',
                      'value'         => $categories_array, // here I'm stuck
                      'heading'       => __('Select for individual portfolio', 'zibanka')
                    ),

      )
   ) );
}


Reff: http://wpcentral.net/how-to-make-a-new-component-for-visual-composer/

Playing with dropdown in visual builder

$attributes = array(
 'type'=> 'dropdown',
 'heading'=>__('Select your Container'),
 'param_name'=>'container_style',
 'value' => array(
        __('Boxed Grid') => 'boxed_grid',
        __('Full Width Grid') => 'full_width_grid'
           ),
 'description'=> __('Selecting This your Frontend will be fileterd by the grid style, If Boxed it will have a class container, if Fullwidth class conteiner-fluid','dts')
    );
vc_add_param('vc_row', $attributes);
// and in vc_row.php

if( ! empty( $full_width_row) ){
   
$output .= '<section ' . implode( ' ', $wrapper_attributes ) . '>';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</section>';
$output .= $after_output;

} else {
  $output .= '<section ' . implode( ' ', $wrapper_attributes ) . '>';
$output .= '<div class="container">';
$output .= '<div class="row">';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</div>';
$output .= '</div>';
$output .= '</section>';
$output .= $after_output;   
}



echo $output;

Reff: https://urosevic.net/wordpress/tips/dropdown-defaults-visual-composer/ https://wordpress.stackexchange.com/questions/159058/how-to-use-an-array-of-categories-as-a-dropdown https://wpbakery.atlassian.net/wiki/spaces/VC/pages/11796491/Save+Param+Values+in+Shortcode+String

Showing Icons:

https://wpbakery.atlassian.net/wiki/spaces/VC/pages/1441846/Set+Content+Element+Icon

comment.php

For Custom Comment #####Links

  1. https://www.inkthemes.com/how-to-easily-customize-wordpress-comment-form/
  2. https://codex.wordpress.org/Function_Reference/wp_list_comments
  3. http://wordpress.stackexchange.com/questions/172052/how-to-wrap-comment-form-fields-in-one-div
  4. http://justintadlock.com/archives/2010/07/21/using-the-wordpress-comment-form
  5. http://wordpress.stackexchange.com/questions/225477/how-to-wrap-submit-button-of-comment-form-with-div

<?php
/**
 * The template for displaying comments.
 *
 * This is the template that displays the area of the page that contains both the current comments
 * and the comment form.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package salon
 */

/*
 * If the current post is protected by a password and
 * the visitor has not yet entered the password we will
 * return early without loading the comments.
 */
if ( post_password_required() ) {
    return;
}
?>

<div id="comments" class="full-width-grid salon-comment-wrapper">

    <?php
    // You can start editing here -- including this comment!
    if ( have_comments() ) : ?>
    

        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
        <nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
            <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'salon' ); ?></h2>
            <div class="nav-links">

                <div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'salon' ) ); ?></div>
                <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'salon' ) ); ?></div>

            </div><!-- .nav-links -->
        </nav><!-- #comment-nav-above -->
        <?php endif; // Check for comment navigation. ?>

        <ol class="comment-list nav">
        
            <?php wp_list_comments(
            'type=comment&callback=salon_comment' 
            ); ?>
            
        </ol><!-- .comment-list -->

        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
        <nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
            <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'salon' ); ?></h2>
            <div class="nav-links">

                <div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'salon' ) ); ?></div>
                <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'salon' ) ); ?></div>

            </div><!-- .nav-links -->
        </nav><!-- #comment-nav-below -->
        <?php
        endif; // Check for comment navigation.

    endif; // Check for have_comments().


    // If comments are closed and there are comments, let's leave a little note, shall we?
    if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>

        <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'salon' ); ?></p>
    <?php
    endif;

    //comment_form();
    ?>
    <?php 
    
    // Comment Form Custom

    ?>
    
    <?php $comment_args = array( 
    'class_form'  => 'salon-comment-form full-width-grid',
    'title_reply' =>'Leave A Message',

    'fields' => apply_filters( 'comment_form_default_fields', array(

    'author' => '<div class="col-sm-6">' . 
        '<input id="author" name="author" type="text" class="form-control" placeholder="Your Name" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /> '. 
        '</div>',   

    'email'  =>
                 
                 '<div class="col-sm-6">'.
                
                '<input id="email" name="email" class="form-control" placeholder = "Your Email Please" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />'.
                
                '</div>',

    'url'    => '' ) ),

    'comment_field' => '<div class="form-group clearfix">' .
                      
                 '<div class="col-sm-12">'.
                

                '<textarea id="comment" class="form-control" placeholder="Your Comments" name="comment" cols="45" rows="8" aria-required="true"></textarea>' .
                '</div>'.
                '</div>',

    'comment_notes_after' => '',
    'submit_button' => '<div class="form-group clearfix">
            <div class="col-sm-12">
            <input name="%1$s" type="submit" id="%2$s" class="%3$s btn deep-brown-btn" value="%4$s" />
            </div>
        </div>'

);

comment_form($comment_args); ?>

</div><!-- #comments -->

function.php

For Comment Form Template


/**   
 *
 * Custom Comment HTML
 *
 **/

function salon_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
    
    <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>
    <div class="comment-author vcard">
    
        <div class="comment-card-img inline-block"><?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size=100'] ); ?></div>
        
        <div class="comment-wrapper inline-block">
        
        <header class="full-width-grid comment-header">
        <div class="comment-author-link inline-block"><?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?></div>
        
         <!-- Comment Time  -->
         
         <div class="comment-meta inline-block">
         <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"></a>
        <?php
        /* translators: 1: date, 2: time */
        printf( __('%1$s '), get_comment_date() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
        ?>
        </div>
        
        <div class="reply inline-block">
        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
       </div>
       
       </header>
        
         
         <div class="comment-container">
         
         
         <?php if ( $comment->comment_approved == '0' ) : ?>
         <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
          <br />
        <?php endif; ?>
        
        
         <?php comment_text(); ?>
         
         </div>
         
    
        </div>
        
        
    </div>
    
    <?php if ( 'div' != $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
    }

    /* *
     *
     *   Wrap a div class="form-group" to the email 
     *   and name form field
     *   in the Comment Form
     *
     **/
    
    
    
    $comment_open_div = 0;

    /**
     * Creates an opening div for a bootstrap form-group.
     * @global int $comment_open_div
     */
    function salon_before_comment_fields(){
        global $comment_open_div;
        $comment_open_div = 1;
        echo '<div class="form-group clearfix">';
    }
    /**
     * Creates a closing div for a bootstrap form-group.
     * @global int $comment_open_div
     * @return type
     */
    function salon_after_comment_fields(){
        global $comment_open_div;
        if($comment_open_div == 0)
            return;
        echo '</div>';
    }

    add_action('comment_form_before_fields', 'salon_before_comment_fields');
    add_action('comment_form_after_fields', 'salon_after_comment_fields');