Contents

1. Update Theme

2. Add top menu link inside dropdown on mobile devices

3. Add Twitch tab in BuddyPress profile

4. Change banner image in blogs to featured images

5. Fatal Error... memory exhausted

6. Change navbar background color

7. Remove angled forum borders

8. Google Analytics

9. How to manually import Demo data (if you faced with problems in one-click demo import)

10. Manually Show/Hide Preloader using JavaScript

11. Update WPBakery Page Builder (formerly Visual Composer) / Advanced Custom Fields PRO / Ghost Kit PRO / Revolution Slider

12. WordPress 5.0 (Gutenberg editor) compatibility

13. Change footer background color overlay

14. Can't finish Demo Data Import

15. Add top menu link inside dropdown on mobile devices

16. How to open image by click on slider

17. Theme is missing the style.css stylesheet

18. Google Map API Warning (NoApiKeys)

19. Make menu dropdown work without JavaScript

20. Change images and banners overlay color

21. Activate Revolution Slider / Visual Composer (WPBakery Page Builder) / Advanced Custom Fields PRO

22. Make dropdown items links clickable

23. Can't enable Mega Menu

24. Install Theme

25. Make count "up" in countdown plugin

26. WordPress Themes FAQ

1. Update Theme

https://nkdev.info/docs/wordpress-themes-basic/themes-update/

2. Add top menu link inside dropdown on mobile devices

Sometimes you may need to access your top menu link on your mobile devices, but in our themes this work only like a dropdown toggler. This code may help you:

jQuery(function ($) {
    $('#nk-nav-mobile .dropdown').each(function () {
        var $this = $(this);
        var $item = $this.prev('a');
        if ($item.length) {
            $this.children('li:not(.bropdown-back):eq(0)').before($('<li>').append($item.clone()));
        }
    });
});

Menu items will be added here:

3. Add Twitch tab in BuddyPress profile

Thanks Destac for solution.

  1. First of all add this code in child theme functions.php or create custom plugin:
    // Add's Twitch Channel To BuddyPress Profiles
    if(!class_exists('BP_Twitch_Tab')):
    class BP_Twitch_Tab {
        public $tab_name = 'Twitch TV';
        public $content_title = 'Twitch TV Channel';
        public $url_slug = 'twitchtv';
        public $subnav_slug = 'twtchtv';
        public $tab_position = 40;
        public $show_chat = true;
    
        // channel name will be grabbed from buddypress field $field_name
        public $channelName = null;
        public $field_name = 'Twitch Channel';
        public function __construct () {
            add_action('bp_setup_nav', array($this, 'profile_tab'));
        }
    
        // add profile tab
        public function profile_tab() {
            global $bp;
            // get channel name
            $this->channelName = bp_get_profile_field_data('field=' . $this->field_name . '&user_id=' . bp_loggedin_user_id());
            if($this->channelName) {
                bp_core_new_nav_item( array(
                    'parent_url'           => bp_loggedin_user_domain() . '/' . $this->url_slug . '/',
                    'slug'                 => $this->url_slug,
                    'default_subnav_slug'  => $this->subnav_slug,
                    'parent_slug'          => $bp->profile->slug,
                    'name'                 => $this->tab_name,
                    'position'             => $this->tab_position,
                    'screen_function'      => array($this, 'screen_function')
                ) );
            }
        }
    
        // call actions on profile screen
        public function screen_function() {
            add_action( 'bp_template_title', array($this, 'template_title') );
            add_action( 'bp_template_content', array($this, 'template_content') );
            bp_core_load_template( 'buddypress/members/single/plugins' );
        }
    
        // add content title
        public function template_title() {
            echo $this->content_title;
        }
    
        // show iframe
        public function template_content() {
            ?> <iframe src="//www.twitch.tv/<?php echo $this->channelName; ?>/embed" frameborder="0" scrolling="no" height="500" width="100%"></iframe> <?php
            // show chat
            if ($this->show_chat) {
                ?> <iframe frameborder="0" scrolling="no" class="chat_embed" src="//twitch.tv/chat/embed?channel=<?php echo $this->channelName; ?>&popout_chat=true" height="400" width="100%"></iframe> <?php
            }
        }
    }
    endif;
    new BP_Twitch_Tab;
    
  2. In admin dashboard open Users > Profile Fields and create field with name Twitch Channel.
  3. Open your profile settings Users > Select User > Extended Profile and add your channel name in Twitch Channel field.

4. Change banner image in blogs to featured images

By default in blog posts you should set featured image and banner image. But if you want to use featured image as banner background you can simply make the following changes.

Activate Child Youplay theme and copy single.php file to it from the main theme. Then you can make customizations in this file.

Open single.php and find this line:

echo do_shortcode('[yp_banner img_src="' . yp_opts('single_post_banner_image', true) . '" img_size="1400x600" banner_size="' . yp_opts('single_post_banner_size', true) . '" parallax="' . yp_opts('single_post_banner_parallax', true) . '" top_position="true"]' . ($banner_cont?wp_kses_post($banner_cont):'<h1 class="h2">' . get_the_title() . '</h1>') . '[/yp_banner]')

Change it to this one:

echo do_shortcode('[yp_banner img_src="' . get_post_thumbnail_id() . '" img_size="1400x600" banner_size="' . yp_opts('single_post_banner_size', true) . '" parallax="' . yp_opts('single_post_banner_parallax', true) . '" top_position="true"]' . ($banner_cont?wp_kses_post($banner_cont):'<h1 class="h2">' . get_the_title() . '</h1>') . '[/yp_banner]')

5. Fatal Error... memory exhausted

https://nkdev.info/docs/wordpress-themes-basic/errors/fatal-error-memory-exhausted/

6. Change navbar background color

To change navbar background color or text color you should add custom styles.

Note: The best way to add custom styles - is in child theme style.css. Also you can add it in options Youplay Options > General > Custom CSS, but in this way, you should add for each value important tag (Example: opacity: 1 !important;).

This is default styles for navbar, customize it as you want:

/* BG color */
.navbar-youplay {
   background: rgba(8, 3, 37, 0.4);
}
/* BG color after scroll */
.navbar-youplay.navbar-small {
   background: rgba(8, 3, 37, 0.94);
}
/* BG color for dropdown */
.navbar-youplay .dropdown-menu,
.navbar-youplay .navbar-nav > li > .dropdown-menu {
   background: rgba(8, 3, 37, 0.8);
}
.navbar-youplay .nav > .dropdown > .dropdown-menu:after {
   border-bottom-color: rgba(8, 3, 37, 0.8);
}
/* BG color on mobile devices */
@media (max-width: 767px) {
   .navbar-youplay .navbar-collapse {
      background: rgb(8, 3, 37);
   }
   .navbar-youplay.navbar-small .navbar-header {
      background: rgba(8, 3, 37, 0.94);
   }
}
/* Text color */
.navbar-youplay .navbar-nav > li.open > a,
.navbar-youplay .navbar-nav > li > a,
.navbar-youplay .navbar-nav > li > a:focus,
.navbar-youplay .navbar-nav > li > a:hover {
   color: #fff;
}
/* Text label color */
.navbar-youplay .navbar-nav > li > a > .label {
   color: rgba(255,255,255,.5);
}
/* Text color for dropdown */
.navbar-youplay .dropdown-menu > ul > li > a,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a {
   color: #fff;
}
/* Item hover bottom line color for dropdown */
.navbar-youplay .dropdown-menu > ul > li > a:after,
.navbar-youplay .navbar-nav > li > .dropdown-menu > ul > li > a:after {
   background: #fff;
}

7. Remove angled forum borders

Sometimes, when on your forum posted long-posts you will see a bugged angled borders. To fix it, you need to add custom CSS:

.youplay-forum > li.body > ul:before,
.youplay-forum > li.header:before,
.youplay-forum > li > div .top:before {
    -webkit-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
}

Result:


8. Google Analytics

https://nkdev.info/docs/wordpress-themes-basic/faq/how-to-add-google-analytics/

9. How to manually import Demo data (if you faced with problems in one-click demo import)

https://nkdev.info/docs/wordpress-themes-basic/demo-import-manual/

10. Manually Show/Hide Preloader using JavaScript

To show preloader you need to make some custom animation. This one:

function openPreloader () {
   Godlike.openPreloader();
   var $content = jQuery('.nk-preloader').find('.nk-preloader-content, .nk-preloader-skip');
   TweenMax.to($content, 0.3, {
       y: '0px',
       opacity: 1,
       display: 'block',
       force3D: true
   });
}
// run
openPreloader();

To hide preloader just run default Godlike function:

// run
Godlike.closePreloader();

11. Update WPBakery Page Builder (formerly Visual Composer) / Advanced Custom Fields PRO / Ghost Kit PRO / Revolution Slider

https://nkdev.info/docs/wordpress-themes-basic/premium-plugins-update/

12. WordPress 5.0 (Gutenberg editor) compatibility

https://nkdev.info/docs/wordpress-themes-basic/faq/wpbakery-page-builder-compatible-with-wordpress-5-gutenberg-editor/

13. Change footer background color overlay

To change footer overlay color, you can add custom CSS (this is default color overlay example):

footer .social {
    background: rgba(8,3,37,.45);
}
footer .copyright {
    background: rgba(8,3,37,.7);
}

Example with completely transparent background overlays:

footer .social,
footer .copyright {
    background: none;
}

14. Can't finish Demo Data Import

https://nkdev.info/docs/wordpress-themes-basic/errors/demo-import-problem/

15. Add top menu link inside dropdown on mobile devices

Sometimes you may need to access your top menu link on your mobile devices, but in Youplay this is work only like a collapse toggler. This code may help you:

jQuery(function ($) {
    $('.dropdown-toggle').each(function () {
        var isMegaParent = $(this).parents('.dropdown-menu:eq(0)').parent().hasClass('youplay-mega');
        if (isMegaParent) {
            return;
        }
        var isMega = $(this).parent().hasClass('youplay-mega');
        var text = $('<div>').html($(this).html());
            text.find('span').remove();
            text = text.text();
        var href = $(this).attr('href');
        $(this).next('.dropdown-menu').find(isMega ? '.dropdown-menu:eq(0) > ul' : '> ul').prepend('<li class="hidden-sm hidden-md hidden-lg"><a href="' + href + '">' + text + '</a></li>');
    });
});

Menu items will be added here:


16. How to open image by click on slider

If you want to open current slider image URL in new window, you just need to add custom script in your website:

jQuery(function ($) {
  $('.nk-slider').on('click', function () {
    var url = $('.nk-slider-current-slide').css('background-image');
    url = url ? url.replace('url(','').replace(')','').replace(/\"/gi, '') : false;
    if (url) {
      window.open(url);
    }
  });
});

17. Theme is missing the style.css stylesheet

https://nkdev.info/docs/wordpress-themes-basic/errors/theme-is-missing-the-style-css-stylesheet/

18. Google Map API Warning (NoApiKeys)

If you want to use Google Maps, you should get API key.

In template HTML files you should find google maps api js file. Example:

<script src="https://maps.googleapis.com/maps/api/js"></script>;

And add to this address your API key. Example:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

How to generate API key see here - https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

19. Make menu dropdown work without JavaScript

The most of functionality in our templates and themes made by using JavaScript. But sometimes you need to disable it in your browser and menu dropdowns will not work. The solution is simple - just add these styles in noscript section:

<noscript>
    <style type="text/css">
        .nk-navbar .nk-nav .nk-drop-item:hover > .dropdown {
            display: block;
            opacity: 1;
        }
    </style>
</noscript>

20. Change images and banners overlay color

Change transparency of overlay

If you satisfied with color of overlay, but want to decrease / increase transparency of overlays, you can use ONE of 2 ways:

  1. Using custom colors in options Youplay Options > Theme Style > Custom > Sizes. Then change Images Opacity and Images Hover Opacity.
  2. Using custom CSS.
    Note: The best way - add this custom styles, in child theme style.css. Also you can add it in options Youplay Options > General > Custom CSS, but in this way, you should add for each value important tag (Example: opacity: 1 !important;)
    /* Banners overlay 100% transparency */
    .youplay-banner .image {
       opacity: 1;
    }
    /* Angled images overlay 100% transparency */
    .angled-img .img > img {
       opacity: 1;
    }
    /* Angled images overlay on mouse over 70% transparency */
    .angled-img:hover .img > img {
       opacity: 0.7;
    }
    


Change overlay color

There are also 2 ways, you can use ONE of it:

  1. Using custom colors in options Youplay Options > Theme Style > Custom ang change Back Color. You will change not only overlay color, but also overall theme colors.
  2. Using custom CSS. Read note in 2 point of first instruction.
    /* All color values are default. Please, change it to yours. */
    
    /* Banner background color */
    .youplay-banner {
       background: #160962;
    }
    
    /* Angled images background color */
    .angled-img .img {
       background: #160962;
    }
    
    /* Footer background color */
    footer .social {
       background: rgba(8,3,37,.45);
    }
    footer .copyright {
       background: rgba(8,3,37,.7);
    }
    

21. Activate Revolution Slider / Visual Composer (WPBakery Page Builder) / Advanced Custom Fields PRO

https://nkdev.info/docs/wordpress-themes-basic/premium-plugins-activation/

22. Make dropdown items links clickable

As you can see, dropdown item links are used only like a toggle for dropdown menus. If you want to add links to these menu items, you should also add custom JavaScript.

Non-working links like this:

Custom JS code to get it working:

jQuery(function ($) {
    var $collapseBtn = $('.navbar-youplay [data-toggle="off-canvas"]');
    $('.navbar-youplay').on('click', '[data-toggle="dropdown"]', function (e) {
       if (this.href && $collapseBtn.is(':hidden')) {
          location = this.href;
       }
    });
});

23. Can't enable Mega Menu

https://nkdev.info/docs/wordpress-themes-basic/faq/cant-enable-mega-menu/

24. Install Theme

https://nkdev.info/docs/wordpress-themes-basic/themes-installation/

25. Make count "up" in countdown plugin

Sometimes you need to show countdown for the past event, but with Godlike it is not possible. To make it working, you need to add js extension.

Create a file assets/js/godlike-countdown-extend.js and insert this code inside it:

Godlike.initPluginCountdown = function () {
    if(typeof $.fn.countdown === 'undefined' || typeof moment === 'undefined' || typeof moment.tz === 'undefined') {
        return;
    }
    const self = this;
    $('.nk-countdown').each(function () {
        let tz = $(this).attr('data-timezone');
        let end = $(this).attr('data-end');
            end = moment.tz(end, tz).toDate();
        $(this).countdown(end, {
            elapse: true
        }).on('update.countdown', function(event) {
            $(this).html(
                event.strftime(self.options.templates.countdown)
            );
        });
    });
};

Then, you need to add this extension after main godlike script in HTML files:

<!-- GODLIKE -->
<script src="assets/js/godlike.min.js"></script>
<script src="assets/js/godlike-countdown-extend.js"></script>
<script src="assets/js/godlike-init.js"></script>
<!-- END: Scripts -->

If you make it properly, you will be able to insert this countdown on the page and it will work:

<div class="nk-countdown" data-end="2016-11-26 08:20" data-timezone="EST"></div>

26. WordPress Themes FAQ

1. Install Theme

2. Update Theme

3. Theme is missing the style.css stylesheet

4. How to use WPBakery Page Builder in WordPress 5 (Gutenberg)

5. I can't activate Revolution Slider / Visual Composer (WPBakery Page Builder)

6. Update Revolution Slider / Visual Composer (WPBakery Page Builder) / Advanced Custom Fields PRO

7. Fatal Error… memory exhausted

8. Can't finish Demo Data Import

9. Can't enable Mega Menu