7/19/2016 - 2:18 PM

Wordpress Essentials

Rendered
Source

Create Custom Page in Admin with admin Menu

Sortable jQuery Datatable and Wordpress Admin page

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

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

Wordpress Very Essential for Security

Wordpress custom post types

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

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

Visual Builder Available Params

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

$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

Call contact form in page template http://contactform7.com/faq/can-i-embed-a-contact-form-into-my-template-file/
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

For Posts

Wordpress Isotope Gallery

Wordpress Bootstrap Tab

#Single Post Page

Reff:

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

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

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

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

Custom Body Class Wordpress

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

Adding Sitemap Page

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

g-zip&leverage.md

Rendered
Source

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>

custom-visual-builder.md

Rendered
Source

Info

How to add additional HTML attributes is a Row
First create a vc_template folder inside the theme file
Then copy the vc_row.php from the plugins>js_composer>include>templates>shortcodes>vc_row.php and put inside the vc_template folder
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

custom-comment.md

Rendered
Source

comment.php

For Custom Comment #####Links


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

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster