Contents

1. Why website images links work locally but not on server?

2. Change Header Functionality (icons, text..etc)

3. WP Mailchimp API Key - ERROR

4. Add Sidebar woocommerce category page

5. Career Form Email not working

6. Language Translation for WordPress Theme

7. How can I change the length of the excerpts on the portfolio grid?

8. How to add mailchimp form?

9. Error 404 when installing plugin

10. Google Map API Key Error

1. Why website images links work locally but not on server?


We got many tickets to this image links issue. It's very common for HTML learners and who are newly trying to create a HTML website.  So beware about the file path and file extension. Locally it will display both lower and uppercase extension images ( .jpg and .JPG ) but Server does not.

Steps:

1) Check your HTML path and uploaded directory path is same.

Ex: img/sample.jpg should uploaded in img folder on server

2) Check your image code in HTML whether added same file extension or not

Ex: If you uploaded sample.jpg on server you should specified image name with extension like sample.jpg and don't do sample.JPG. 

Thanks


2. Change Header Functionality (icons, text..etc)

Hi,

 1) Use mist child theme

 2) Copy header.php file from mist/ and paste into mist-child/ folder.

 3) Then copy partials folder from mist/ and paste into mist-child/ 

4) Then open the file mist-child/partials/header/header-11.php file

5) The find the line 

6) Change fa fa-microphone icon text to ur icon text. 

Thanks,

zozothemes

3. WP Mailchimp API Key - ERROR

4. Add Sidebar woocommerce category page

Please write below function in functions.php file under child theme folder. 


// Add sidebar for shop loop header  
function my_custom_before_shop_loop_sidebar() {
if(is_product_category()){
echo '

';
}
}

add_action( 'woocommerce_before_shop_loop', 'my_custom_before_shop_loop_sidebar', 2);

// Add sidebar for shop loop header  
function my_custom_after_shop_loop_sidebar() {
if(is_product_category()){
echo '

';
dynamic_sidebar('zozo_sidebar-1');
echo '

';
}
}

add_action( 'woocommerce_after_shop_loop', 'my_custom_after_shop_loop_sidebar', 2);

5. Career Form Email not working

Hi,

  Replace the career from javascript code in custom.js as follows:


/* --------------------------------------------
    Career Form
    -------------------------------------------- */    
    careersform: function(){    
        if ( $( "#careerform" ).length !== 0 ) {
        $('#careerform').bootstrapValidator({
                container: 'tooltip',
                feedbackIcons: {
                    valid: 'fa fa-check',
                    warning: 'fa fa-user',
                    invalid: 'fa fa-times',
                    validating: 'fa fa-refresh'
                },
                fields: {
                    career_name: {
                        validators: {
                            notEmpty: {
                                message: ''
                            }
                        }
                    },
                    career_email: {
                        validators: {
                            notEmpty: {
                                message: ''
                            },
                            emailAddress: {
                                message: ''
                            }
                        }
                    },
                    career_phone: {
                        validators: {
                            notEmpty: {
                                message: ''
                            }
                        }
                    },
                    career_file: {
                        validators: {
                            notEmpty: {
                                message: 'Please Upload pdf or doc or docx file'
                            },
                            file: {
                                extension: 'pdf,doc,docx',
                                type: 'application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword',
                                message: 'The selected file is not valid!'
                            }
                        }
                    },
                }
            })    
            .on('success.form.bv', function(e) {
                e.preventDefault();
                
                var $form       = $(e.target);
                validator        = $form.data('bootstrapValidator'),
                submitButton     = validator.getSubmitButton();
                
                var formData = new FormData(),
                params   = $form.serializeArray(),
                files    = $form.find('[name="career_file"]')[0].files;
                
                $.each(files, function(i, file) {
                    // Prefix the name of uploaded files with "uploadedFiles-"
                    // Of course, you can change it to any string
                    formData.append('career_file-' + i, file);
                });
    
                $.each(params, function(i, val) {
                    formData.append(val.name, val.value);
                });
                
                $.ajax({
                        type: "POST",
                        dataType: 'json',
                        url: "php/career.php",                    
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(msg){                        
                            $('.form-message2').html(msg.data);
                            $('.form-message2').show();
                            submitButton.removeAttr("disabled");
                            resetForm($('#careerform'));                        
                        },
                        error: function(msg){}
                 });
                return false;
            });
        }        
        function resetForm($form) {
            $form.find(
                    'input:text, input:password, input, input:file, select, textarea'
                )
                .val('');
            $form.find('input:radio, input:checkbox')
                .removeAttr('checked')
                .removeAttr('selected');
            $form.find('button[type=submit]')
                .attr("disabled", "disabled");
                
        }
    },    

Also replace the attached file career.php in php folder File attached in link).

https://www.dropbox.com/s/57ho2bzv0mijfv9/career%20-%20normal.php?dl=0 --> normal email
https://www.dropbox.com/s/uobx1kjw4h9z88g/career%20-%20smtp.php?dl=0 --> smtp email

6. Language Translation for WordPress Theme


  1. Place language files in wp-content/languages/themes (this is explained in the docs)
  2. Name the files yourthemeslug-nl_NL (for example)
  3. Use Loco plugin and change the Text domain and file prefix to yourthemeslug.


7. How can I change the length of the excerpts on the portfolio grid?

Place the below code lines in child theme function.php file.

if ( ! function_exists( 'zozo_vc_portfolio_grid_shortcode' ) ) { function zozo_vc_portfolio_grid_shortcode( $atts, $content = NULL ) { extract(  shortcode_atts(  array( 'classes' => '', 'css_animation' => '', 'posts' => '-1', 'pagination' => 'yes', 'include_categories' => '', 'exclude_categories' => '', 'filters' => 'yes', 'filter_align' => '', 'columns' => '2', 'gutter' => '30', 'style' => 'default', 'orderby' => 'title', 'first_filter' => 'all', 'button_text' => '', ), $atts  );

$output = ''; static $portfolio_id = 1; global $post, $zozo_options; // Include categories $include_categories = ( '' != $include_categories ) ? $include_categories : ''; $include_categories = ( 'all' == $include_categories ) ? '' : $include_categories; $include_filter_cats = ''; if( $include_categories ) { $include_categories = explode( ',', $include_categories ); $include_filter_cats = array(); foreach( $include_categories as $key ) { $key = get_term_by( 'slug', $key, 'portfolio_categories' ); $include_filter_cats[] = $key->term_id; } } if ( ! empty( $include_categories ) && is_array( $include_categories ) ) { $include_categories = array( 'taxonomy' => 'portfolio_categories', 'field' => 'slug', 'terms' => $include_categories, 'operator' => 'IN', ); } else { $include_categories = ''; } // Exclude categories $exclude_filter_cats = ''; if( $exclude_categories ) { $exclude_categories = explode( ',', $exclude_categories ); if ( ! empty( $exclude_categories ) && is_array( $exclude_categories ) ) { $exclude_filter_cats = array(); foreach ( $exclude_categories as $key ) { $key = get_term_by( 'slug', $key, 'portfolio_categories' ); $exclude_filter_cats[] = $key->term_id; } $exclude_categories = array( 'taxonomy' => 'portfolio_categories', 'field' => 'slug', 'terms' => $exclude_categories, 'operator' => 'NOT IN', ); } else { $exclude_categories = ''; } } $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $query_args = array( 'post_type' => 'zozo_portfolio', 'posts_per_page' => $posts, 'paged' => $paged, 'orderby' => 'date', 'order' => 'DESC',  );    $query_args['tax_query'] = array( 'relation' => 'AND', $include_categories, $exclude_categories ); if( isset( $style ) && $style == 'classic' ) { switch( $orderby ) { case 'rating': $query_args['meta_key'] = 'zozo_author_rating'; $query_args['orderby']  = 'meta_value_num'; break; case 'title': $query_args['orderby'] = 'title'; break; case 'id': $query_args['orderby'] = 'ID'; break; case 'random': $query_args['orderby'] = 'rand'; break; default: $query_args['orderby'] = 'post_date'; break; } } $portfolio_query = new WP_Query( $query_args ); // Classes $main_classes = ''; if( isset( $classes ) && $classes != '' ) { $main_classes .= ' ' . $classes; } $main_classes .= zozo_vc_animation( $css_animation ); if( $portfolio_query->have_posts() ) { $output = '<div class="zozo-portfolio-grid-wrapper'.$main_classes.'">'; if( isset( $style ) && $style == 'masonry' ) { $output .= '<div id="zozo_portfolio_'.$portfolio_id.'" class="zozo-portfolio masonry-style portfolio-cols-'.$columns.'" data-columns="'.$columns.'" data-gutter="'.$gutter.'">'. "\n"; } else if( isset( $style ) && $style == 'classic' ) { $output .= '<div id="zozo_portfolio_'.$portfolio_id.'" class="zozo-portfolio classic-grid-style portfolio-cols-'.$columns.'" data-columns="'.$columns.'" data-gutter="'.$gutter.'">'. "\n"; } else { $output .= '<div id="zozo_portfolio_'.$portfolio_id.'" class="zozo-portfolio default-grid-style portfolio-cols-'.$columns.'" data-columns="'.$columns.'" data-gutter="'.$gutter.'">'; } // Display filter links if( isset( $filters ) && $filters == 'yes' ) { $terms = get_terms( 'portfolio_categories', array( 'include' => $include_filter_cats, 'exclude' => $exclude_filter_cats, ) ); if ( $terms && count( $terms ) > '1') { $filter_class = ''; if( isset( $filter_align ) && $filter_align != '' ) { $filter_class = ' text-'. $filter_align .''; } $output .= '<ul class="portfolio-tabs list-inline'.$filter_class.'">'. "\n"; // First Filter Check if( isset( $first_filter ) && $first_filter == "all" ) { $output .= '<li><a class="active" data-filter="*" href="#">'. esc_html__('Show All', 'zozothemes').'</a></li>'. "\n"; } foreach($terms as $term ) { $tag_class = ''; if( isset( $first_filter ) && $first_filter != 'all' ) { if( $first_filter == $term->term_id ) { $tag_class = ' class="active"'; } } $output .= '<li><a'.$tag_class.' data-filter=".'.$term->term_id.'" href="#">'.$term->name.'</a></li>'. "\n"; } $output .= '</ul>'. "\n"; } } $output .= '<div class="portfolio-inner">'; while($portfolio_query->have_posts()) : $portfolio_query->the_post(); if( isset( $style ) && $style == 'masonry' ) { $image_size = 'full'; } else { if( isset( $columns ) && $columns == '2' ) { $image_size = 'portfolio-large'; } else { $image_size = 'portfolio-mid'; } } $portfolio_img = ''; $portfolio_img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $image_size); $item_classes = ''; $item_tags = get_the_terms($post->ID, 'portfolio_categories'); if( $item_tags ) { foreach( $item_tags as $item_tag ) { $item_classes .= ' ' . $item_tag->term_id; } } $output .= '<div id="portfolio-'.get_the_ID().'" class="portfolio-item '.$item_classes.'">'; $output .= '<div class="portfolio-content">'; $portfolio_large = '';  $portfolio_large = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); $author_rating = get_post_meta( $post->ID, 'zozo_author_rating', true ); $custom_text = get_post_meta( $post->ID, 'zozo_portfolio_custom_text', true ); if( isset( $style ) && $style == 'classic' ) { $output .= '<a href="'.esc_url( $portfolio_large[0] ).'" data-rel="prettyPhoto[gallery'.$portfolio_id.']" class="classic-img-link" title="'.get_the_title().'"><img class="img-responsive" src="'.esc_url($portfolio_img[0]).'" width="'.esc_attr($portfolio_img[1]).'" height="'.esc_attr($portfolio_img[2]).'" alt="'.get_the_title().'" /></a>'; $output .= '<div class="portfolio-inner-wrapper">'; $output .= '<div class="portfolio-inner-content">'; if( isset( $custom_text ) && $custom_text != '' ) { $output .= '<h5>'.get_the_title().'<p class="portfolio-custom-text pull-right">'. $custom_text .'</p></h5>'; } else { $output .= '<h5>'.get_the_title().'</h5>'; } if( isset( $author_rating ) && $author_rating != '' ) { $output .= '<div class="portfolio-rating">';  $output .= '<div class="rateit" data-rateit-value="'.$author_rating.'" data-rateit-ispreset="true" data-rateit-readonly="true"></div>'; $output .= '</div>'; } $output .= '<p>' . zozo_shortcode_stripped_excerpt( get_the_content(), 15 ) . '</p>'; if( isset( $button_text ) && $button_text != '' ) { $output .= '<a href="'. get_permalink() .'" class="btn btn-more" title="'.get_the_title().'">'. $button_text .'</a>'; } $output .= '</div>'; $output .= '</div>'; } else { $output .= '<img class="img-responsive" src="'.esc_url($portfolio_img[0]).'" width="'.esc_attr($portfolio_img[1]).'" height="'.esc_attr($portfolio_img[2]).'" alt="'.get_the_title().'" />'; $output .= '<div class="portfolio-overlay">'; $output .= '<div class="portfolio-mask">'; $output .= '<div class="portfolio-title">'; $output .= '<h4>'.get_the_title().'</h4>'; $output .= '<p>' . zozo_shortcode_stripped_excerpt( get_the_content(), 8 ) . '</p>'; $output .= '</div>'; $output .= '<a href="'.esc_url( $portfolio_large[0] ).'" data-rel="prettyPhoto[gallery'.$portfolio_id.']" title="'.get_the_title().'"><i class="fa fa-search"></i></a>'; $output .= '<a href="'. get_permalink() .'" title="'.get_the_title().'"><i class="fa fa-link"></i></a>'; $output .= '</div>'; $output .= '</div>'; } $output .= '</div>'; $output .= '</div>';

endwhile; $output .= '</div>'; if( isset( $pagination ) && $pagination == 'yes' ) { $output .= zozo_pagination( $portfolio_query->max_num_pages, '' ); } $output .= '</div>'; $output .= '</div>'; }  $portfolio_id++; wp_reset_postdata(); return $output; } }

To increase the limit, you can modify the word count  in the line of code

$output .= '<p>' . zozo_shortcode_stripped_excerpt( get_the_content(), 15 ) . '</p>'; 

8. How to add mailchimp form?


9. Error 404 when installing plugin

It was issue from mode_security by server. Please try another method 

1) Go To Plugins 

2) Click "Install the Plugins" menu 

3) Install every plugin one by one 

4) Activate it. 

Another Method is:

1) Go To Plugins 

2) Add New

3) Click upload plugin

4) Select the plugin file from plugins folder which you extracted the complete theme folder.

5) Install every plugin one by one 

6) Activate it. 

Try above methods. 

10. Google Map API Key Error

Hi,

The Google Map had done some changes for the APIs authentication and usage limits.

To fix this error, get a key from this link and add it to your application:
https://developers.google.com/maps/documentation/javascript/get-api-key

Steps to Get the API key.

1. Follow this link and click on Get a key:
2. Agree with the service Terms of Service:
3. Choose a name for your new key and specify the websites on which the key usage will be allowed. If you don’t need any website restriction, just put an * in that field, but don’t leave it blank and click on Create.
4. Write down your brand new API key, and click OK.


How to append the API key: ( Wordpress Theme )

1. Go to Theme Options > General > API keys > Google Map API key > Enter your API key there and check for the page that is having google map.


How to append the API key: ( HTML Templates )

Just replace the below line and replace your API KEY 'YOUR_API_KEY' in your custom.js under   /*  Google Map */

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY&sensor=false&' + 'callback=GmapInit';