Contents

1. How to change Styles or RTL for AMP?

2. Boombox custom code usage cases - Mobile

3. Have a presale question?

4. I have an Idea and/or suggestion!

5. Why Google map isn't showing?

6. Boombox FAQ

7. Support tips and tricks

8. Facebook Comments

9. Zombify FAQ

10. Boombox custom code usage cases - Desktop

11. Where to find icons available for Certy?

12. Add this plugin - how to add sharing?

13. WordPress General questions

14. Boombox - managing featured images in posts

15. How to Add custom font in Boombox theme

16. Zombify - custom code usage cases

17. Why I cant use mobile control with Page cache?

1. How to change Styles or RTL for AMP?

Make sure that the child theme installed and activated.

Then create following file:
for Styles => boombox-child/amp-styles/style.php
for RTL => boombox-child/amp-styles/style-rtl.php

Then add following code in boombox-child/functions.php

add_action( 'boombox/amp/additional_css', 'boombox_child_additional_amp_styles', 10, 2 );
function boombox_child_additional_amp_styles( $mode, $instance ) {
 
 $css = '';
 switch( $mode ) {
  case 'ltr':
   $stylesheet = BOOMBOX_CHILD_THEME_PATH . 'amp-styles/style.php';
   break;
  case 'rtl':
   $stylesheet = BOOMBOX_CHILD_THEME_PATH . 'amp-styles/style-rtl.php';
   break;
  default:
   $stylesheet = false;
 }
 if( $stylesheet ) {
  ob_start();
  include_once $stylesheet;
  $css = ob_get_clean();
 }
 
 echo $css;
}

2. Boombox custom code usage cases - Mobile

Please note that Px-Lab not responsible for the way of use of these codes, they may work or may not work depending on your current settings and options.  Codes were written during support and assistance to some Boombox users by the initiative of Px-Lab.

We are not providing support or assistance for the use of these codes. Any customization service and additional coding is out of the scope of our support.

In order to apply below code:
1. Go to Dashboard=>Appearance=>Customize=>Additional CSS
2. Paste the code
3. Click on save and publish


How to disable sticky top header in mobile?

.mobile .header .top.stuck {position: static !important;}

How to disable sticky bottom header in mobile?

.mobile .header .bottom.stuck {position: static !important;}

How to disable reactions in mobile?

.mobile .reaction-box {  display: none; }



3. Have a presale question?

Before purchasing anything It is common practice to ask about questions that is important for you or you can't find answers.

Before submitting question please try to find answer to your question:

How to ask a Presale question?

  1. Login with Envato or Register with email address or select Facebook or Twitter Login
  2. Click on "Submit a ticket" button from https://pxlab.ticksy.com/
  3. From Product or Category dropdown select "Presale question" category.
  4. Ticket Subject - write name of the theme and briefly topic of your question: e.g. Boombox - meme creating with Boombox
  5. Write your question/s
    1. Describe your question/s in details. 
    2. Enumerate questions if you have more then one question.
    3. Provide links, examples and URLs for all questions if possible.
    4. Provide screenshots and explanation to screenshot if possible.

We will reply to all presale questions, however this can take up to 18 hours, so please be patient.

4. I have an Idea and/or suggestion!

We highly appreciate feedback from our buyers and most features were added because of feedback from our customers. In case if you think some feature or functionality can be added and it will make your experience and our product better please feel free to contact us.

We are considering all suggestions and ideas, due to development process or other factors some ideas may be applied faster and some of them after one month or two. There are cases when idea is useful and good enough to implement it in theme or plugin however we can't work on it due to overloading or development time which will require that feature.

Please consider that we have vision and road-map of how the themes should be developed in long term prospective and sometimes it is not possible to include in update all features.

How to send a suggestion or idea?

  1. Login with Envato or Register with email address or select Facebook or Twitter Login
  2. Click on "Submit a ticket" button from https://pxlab.ticksy.com/
  3. From Product or Category dropdown select "Ideas and Suggestions" category.
  4. Ticket Subject - write name of the theme and briefly topic of your suggestion: e.g. Boombox - suggestion about desktop layout
  5. Write your suggestions
    1. Describe your ideas and suggestions in details. 
    2. Enumerate ideas if you have more then one suggestion.
    3. Provide links, examples and URLs for all suggestions if possible.
    4. Provide screenshots and explanation to screenshot if possible.

We will reply to all tickets with suggestions and ideas, however this can take more than 48 hours, so please be patient.

5. Why Google map isn't showing?

Please make sure that you have added Google Map API key. For creating Google Map API key please follow this instruction.

Then open index.html file and set the key in below format under scripts at the bottom of the file (in our case it is line 1341).

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

In a case of more questions please feel free to submit a ticket.

6. Boombox FAQ

How to hide double social share buttons in posts?

How CloudConverter works?

How to show or hide Featured Area or Strip?

How to configure Post Formats icons (categories or tags)?

How to change post listing type?

How to Show Specific categories on Home page?

How to Show Specific categories in Strip?

Why badges/reactions not visible on post?

How to hide the 2nd image in a single post?

How to add in profile menu BuddyPress elements?

How to solve AMP errors | style amp-custom problem?

Why thumbnail not visible while sharing on social networks or messengers?

Why random description shown when sharing on Facebook?

What to do if view counter doesn't work?

Why when sharing on social networks users see wrong post meta description?

How to change Shop page template to "without sidebar"?

Why I don't see featured image or meta description when sharing on Facebook?

-----------------------------------------------------------------------------------------------------------------------------------

How to hide double social share buttons in posts (MashShare)?

How CloudConverter works?

How to show or hide Featured Area or Strip?

How to configure Post Formats icons (categories or tags)?

How to change post listing type?

How to Show Specific categories on Home page?

How to Show Specific categories in Strip?

Why badges/reactions not visible on post?

How to hide the 2nd image in a single post?

How to add in profile menu BuddyPress elements?

How to solve AMP errors | style amp-custom problem?

Why random description shown when sharing on Facebook?

What to do if view counter doesn't work?

Why when sharing on social networks users see wrong post meta description?

How to change Shop page template to "without sidebar"?

  1. Change shop page in woocommerce settings to use something different from shop page and save settings
  2. Edit shop page and set it's template to "Without Sidebar"
  3. Go to woocommerce setting and switch back woocommerce settings to user shop page as shop page.

Why I don't see featured image or meta description when sharing on Facebook?

7. Support tips and tricks

Before Contacting Support

  1. Read through documentation - With all our themes we are providing documentation, find it in zip file or search in online documentation.
  2. Search in support center – Try to find answer to your question in our articles and public tickets. Use different keywords and tags and you will be awarded with solution.
  3. Human factor
    1. Make sure that you are using latest version of the WordPress
    2. Make sure that our theme and all plugins installed, activated and up to date.
    3. Try to disable all plugins which are not required and not recommended for our theme. If this resolves the issue just activate deactivated plugins one by one to find out plugin which cause the problem.
    4. Change to the default WordPress Twenty Sixteen theme. If you are not experiencing the error then probably problem with the theme.
    5. If above mentioned not helping please contact to support considering below mentioned.

When Contacting Support

  1. Please be specific and measurable – Describe in details where and how you experiencing the issue. The more clear and brief is your question, the faster we can respond and react.
    1. Enumerate your questions - instead of writing one sentence with 3 issues, point them one by one as 1. Issue one 2. Issue two 3. Issue three
    2. Facts - provide facts, what problem exactly you have, what happens and in what cases.
    3. Screenshots - Provide screenshots.  Sometimes whole sentences can be replaced with one single screenshot and comment or arrow on it. If you have more than one question please add screenshot to each point if it is possible.
    4. Application and hardware information - please provide your device model information, Operation System version, browser version: e.g. Mac, MacOS X v.0000, chrome 56.0.2924.87
  2. Link to your site – Please don't forget to provide your site URL or in case of specific problems post url, page url, admin panel settings url and other
  3. Login details – Adding your WordPress and FTP credentials in ticket is an advantage. Sometimes  solution is hidden in back-end or not clear at all. In these cases we can review issues right in your site. Usually it is WordPress login and password for administrator and FTP credentials. Rarely we can request cPanel access or credentials to other apps and sites which are relevant to your issue.
  4. WordPress language - Please change WordPress language to English if it is not set to English, that will help us to provide support much faster.
  5. Please Be kind – We thank you for your respectfulness, courtesy, consideration and patience.
  6. Please Don't - Please don't need to write about same issue in different tickets and send email us or write the same issue in comments on themeforest.net
  7. Support Language - We are providing support in English and Russian only. Requests and tickets which will be send on other languages will be closed without reply.
  8. Working hours – Support team works for you from Monday - Friday, 10:00 - 18:00 GMT +4 (Yerevan, Armenia)
  9. Response time - Usually it takes up to 24 hours to respond to the tickets, rarely this time can be vary depending from requests. Any way we are trying to keep the response time close to 12 hours, we appreciate your patience.
  10. You can convert your local time to our time here.

8. Facebook Comments

For adding Facebook comments we recommend to use this plugin =>https://srd.wordpress.org/plugins/facebook-comments-plugin/

To change the location of "Facebook Comments" please follow these steps:

if( function_exists( 'fbcommentbox' ) ) {      echo fbcommentbox( '' ); 
}
remove_filter( 'the_content', 'fbcommentbox', 100 );

9. Zombify FAQ

Upload problem (please try again later)

How to disable site authentication and use Zombify?

How to hide "affiliate link" in lists via css?

Add following code in a child theme, in style.css file

div[data-zombify-fieldgroup-path="list/affiliate"] {   
    display: none !important; }

Please note that this may hide affiliate link options from other lists (open list, list) too.

Hide description field in image, gif video types

#zf-image_container .zf-form-group[data-zombify-fieldgroup-path="image_description"],
#zf-image_container .zf-form-group[data-zombify-fieldgroup-path="gif/image_description"],
#zf-video_container .zf-form-group[data-zombify-fieldgroup-path="video/video_description"] {    
  display: none;
}

10. Boombox custom code usage cases - Desktop

Please note that Px-Lab not responsible for the way of use for provided below code, they may work or may not work depending on your current settings and options.  Codes were written during support and assistance to some Boombox users by the initiative of Px-Lab.

We are not providing support or assistance for the use of these codes. Any customization service and additional coding is out of the scope of our support.

In order to apply below code:
1. Go to Dashboard=>Appearance=>Customize=>Additional CSS
2. Paste the code
3. Click on save and publish

HEADER

Hiding Create post button under burger menu

.more-menu-footer .create-post { display:none;
}

Set menu toggle icon to left

/* Set toggle icon to the left of the menu */ 
.navigation-box .wrapper>.nav { padding-left: 40px; position: relative;
}
.more-menu-item { position: absolute; left: 0; top: -1px; padding: 6px 0;
}

Remove uppercase from top and bottom header menus

/* Remove uppercase from top and bottom header menus */
.main-navigation>ul li>a { text-transform: none;
}

Hiding login and register controls and buttons from authentication popup and leaving only social login functionality

/* Hiding authentication controls and button */
.authentication input[type='password'],
.authentication input[type='email'],
.authentication input[type='text'],
.authentication .reset-password-link,
.authentication .input-field .bb-btn { display: none;
}

Remove header margins

/* Remove header margins */
.header .top { padding: 0 5px;
}

Change menu item font size

/* Change menu item font size */
.main-navigation>ul li>a { font-size: 16px;
}

Apply custom font for all headings, links and body text on site

/* Apply custom font for all headings, links and body text on site */
@font-face { font-family: 'BwSurco'; src: url('https://vivaganir.com/static/font/BwSurco-Black.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Black.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Black.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Black.otf') format('opentype'),
}
@font-face { font-family: 'BwSurco'; src: url('proximanova-regitalic-webfont.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Regular.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Regular.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Regular.otf') format('opentype'),
font-weight: 400;
}
@font-face { font-family: 'BwSurco'; src: url('https://vivaganir.com/static/font/BwSurco-Light.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Light.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Light.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Light.otf') format('opentype'),
font-weight: 300;
}
body, html, .entry-title,
#cancel-comment-reply-link,
#comments .comments-title span,
.pagination, .pagelinks,.vp_dash_pagina,
.comments-area h3,[class*=" mashicon-"] .text, [class^=mashicon-] .text,
.entry-no-lg,.reaction-box .title,
.reaction-item .reaction-vote-btn,
#comments .comments-title, #comments .comment-reply-title,
.page-trending .trending-navigation ul li a,.vp-entry legend,.widget-title,
.badge .text,.post-number,
.more_items_x legend, .more_items legend, .more_items_glow,
section.error-404 .text,
.inline-popup .title,
.authentication .title,
.other-posts .title,
.post-share-box h2,
.page-header h1 { font-family: 'BwSurco';
}

Change header bottom menu to fit the top and bottom of the header

/* Change header bottom menu to fit the top and bottom of the header */
.navigation-box .wrapper > .nav { top:0!important;
}
.header .bottom { padding: 0;
}
.main-navigation>ul>li { padding: 30px 10px;
}
.header .top-search .form-toggle { margin: 4px 0 0 6px;
}

Change header bottom menu hover color and background color

/* Comment by Px-Lab: Change header bottom menu hover color and background color */
.header .bottom .main-navigation > ul > li:hover,
.header .bottom .main-navigation > ul > li:focus { background: #ffe400;
}
.header .bottom .main-navigation > ul > li:hover > a,
.header .bottom .main-navigation > ul > li:focus > a { color: #1f1f1f;
}
.navigation-box .wrapper nav ul li:first-child { padding-left: 10px;
}

Hide Woocommerce cart button from header

/* Hide Woocommerce cart button from header */
.header .account-box .wrapper>.user-cart { display: none;
}

Change burger menu toggle icon to text

#more-menu-toggle {font-size: 13px;
    line-height: 13px;
    vertical-align: middle;
}
#more-menu-toggle:before {
 content: "More";
 text-transform: uppercase;
 font-weight: 600;
}
#more-menu-toggle .toggle-icon {
   display: none;
}

Increase space between badges

.top-badge-list .badge-list .badge, .header .badge-list .badge {
 margin: 0 .8% 5px; }

Hiding Compose button Below is a code which will hide Compose button! It will hide the button for all users! Currently there is no option of hiding the button based on user role.

/* Hide Zombify Create Post button */
.header .bottom .account-box .create-post,
.mobile-navigation-wrapper .more-menu .more-menu-footer .create-post {     display: none;
}


PAGES/ARCHIVE

Hide page header for all categories

.archive.category .page-header {    
    display: none;
}

Hide page header for hot, popular and trending pages

.page-template.page-template-page-trending-result .page-header {
 display: none;
}

Hide page header for reactions

.archive.tax-reaction .page-header{ 
 display: none;
} 

Hide page header for tags

.archive.tag .page-header{    
 display: none;
}

Change single post page desktop container size

/* Make single page container narrower */
.single-post.post-featured-image #mainContainer .content,
.single-post #mainContainer .container { width: 980px;
}
@media screen and (min-width: 901px) { .single-post .site-main { width: 58%; } .single-post .sidebar { width: 37%; }
}
@media (min-width: 1200px) { .author-vcard .header-left { width: 100%; text-align: center; padding: 0; } .author-vcard .header-right { width: 100%; text-align: center; padding: 0 135px; } .author-vcard .header-left .col-r { padding: 0 50px; } .author-vcard .social ul { float: none; }
}

Decrease featured area image height in case of Featured Type='2 Featured'

.featured-area.item-2 .featured-item { 
    max-height: 296px;
}

Setting max height for grid view thumbnail images

@media (min-width:768px) {
  .post-grid.col-2 .post-thumbnail > a {
    display: inline-block;
    max-height: 205px;
    overflow: hidden;
    width: 100%;
  }
}

Hiding share buttons in Stream, Classic, Classic 2 pages

/* Hiding share buttons in Stream, Classic, Classic 2 pages */
.post-list.standard .post .entry-footer { display: none;
}

Make Home Page ( of 'Stream (gif's & memes)' type) content area wide

/* Make Home Page ( of 'Stream (gif's & memes)' type) content area wide */
.home-page .narrow-content { width: 1200px;
}

Make single page container narrower

.single-post.post-featured-image #mainContainer .content,
.single-post #mainContainer .container {   width: 980px;
}
@media screen and (min-width: 901px) { .single-post .site-main { width: 58%; } .single-post .sidebar { width: 37%; }
}

Hide Pending, Draft and Add New Post tabs from profile Submissions section

/* Hide Pending, Draft and Add New Post tabs from profile Submissions section */
#buddypress #pending-personal-li,
#buddypress #drafts-personal-li, #buddypress #add-new-post-personal-li { display: none;
}

Highlight search results text

/* Highlight search results text */
.search-results .page-header span { font-size: 22px; font-style: italic; display: inline-block; margin-bottom: 5px;
}

Remove badges from specific page

/* Remove badges from specific page */
.page-id-15061 .top-badge-list { display: none;
}

How to set specific page after login or after registration?

The below code should be added to a child theme in functions.php.
In order to get more information about child theme read WordPress official documentation.

By default after registering, Boombox redirects users to the home page.  With 'boombox_auth_register_redirect_url' hook you can change redirection URL to the new

register page. For example, if your page slug is 'register':

function boombox_child_auth_register_redirect_url($current_url){
    $current_url = get_permalink( get_page_by_path( 'register' ) );
    return $current_url;
}
add_filter( 'boombox_auth_register_redirect_url', 'boombox_child_auth_register_redirect_url', 9 );

By default after login, Boombox redirects users to the same page, from which they try to log in.  With 'boombox_auth_login_redirect_url' hook you can change login url to the new login page. For example, if your new login page slug is 'login':

function boombox_child_auth_login_redirect_url($current_url){
    $current_url = get_permalink( get_page_by_path( 'login' ) );
    return $current_url;
}
add_filter( 'boombox_auth_login_redirect_url', 'boombox_child_auth_login_redirect_url', 9 );

How to change excerpt length?

By default boombox set excerpt length to 25 words, you can change it from child theme functions.php with 'excerpt_length' hook. 

function boombox_child_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'boombox_child_excerpt_length', 999 );


POSTS

Change voting arrows to icons (like and dislike)

.post-rating .point-btn .icon-arrow-up:before { content: "\f087";
}
.post-rating .point-btn .icon-arrow-down:before { content: "\f088";
}

Hide downvote button on posts

/* Post Rating Custom Change */
/* Post Rating Custom Change */
.post-rating .down.point-btn { display: none;
}
.post-rating .up.point-btn .icon-arrow-up:before { content: "\f164";
}

Changing hover color of post links

/* Changing hover color of post links */
.entry-title:hover a { color: #b1abab;
}

Make Next/ Prev Buttons smaller

/* Make Next/ Prev Buttons smaller */
.next-prev-pagination .nav a { min-width: 200px; padding: 12px 15px; font-size: 15px; line-height: 20px;
}
.next-prev-pagination .nav a .icon { font-size: 18px; top: 14px;
}
@media screen and (min-width: 401px) and (max-width: 700px) { .next-prev-pagination .nav { max-width: 200px; } .next-prev-pagination .nav a { min-width: initial; } }
@media screen and (max-width: 400px) { .next-prev-pagination .nav.prev-page a { padding: 22px 8px; width: 55px; } .next-prev-pagination .nav.next-page, .next-prev-pagination .nav { width: auto; }
}

Make Next/ Prev Buttons Bigger

/* Make Next/ Prev Buttons Bigger */
.next-prev-pagination .nav.prev-page .text, .next-prev-pagination .nav.prev-page .mobile-text { display: none;
}
@media (min-width: 401px) { .next-prev-pagination .nav a { padding: 22px 15px; height: 65px; font-size: 30px; min-width: initial; } .next-prev-pagination .nav.next-page { width: 65%; } .next-prev-pagination .nav.prev-page { width: 20%; } .next-prev-pagination .nav a .icon { font-size: 32px; top: 18px; } .next-prev-pagination .nav.prev-page a .icon { left: 50%; margin-left: -12px; } .next-prev-pagination .pages { padding: 16px 5px; }
}

Align Images, gifs and embeds in the center of post

/* Align Images, gifs and embeds in the center of post */
.single-post .entry-content iframe,
.single .post.single .hy_plyr,
.single .post.single img { margin-left: auto!important; margin-right: auto!important;
}

How to change post date format

Please follow these steps:

add_filter( 'boombox_post_date', 'boombox_child_post_date', 10, 1 );
function boombox_child_post_date( $date ) {    
    $date = get_the_time( 'Y m d' );        
    return $date;
}

How to delete enumeration in Zombify Posts?

/* Delete numbers from Zombify Posts (List, Open List and Ranked List) */
#zombify-main-section-front .zf-list.zf-numbered .zf-list_item .zf-list_header .zf-list_title {
   padding-left: 0;
}
#zombify-main-section-front .zf-numbered .zf-list_title .zf-number {
  display: none;
}

How set next / previous posts functionality to grab posts from the same category?

add_filter( 'boombox/single/link-pages-args', 'boombox_child_edit_single_link_pages_args', 10, 1 );
function boombox_child_edit_single_link_pages_args( $args ) {   $args['in_same_term'] = true;   return $args;
}
add_filter( 'boombox_fixed_navigation_post', 'boombox_child_edit_fixed_pagination_post', 10, 2 );
function boombox_child_edit_fixed_pagination( $adjacent_post, $adjacent ) {   $boombox_reverse_pagination = (boombox_get_theme_option( 'layout_post_navigation_direction' ) == 'to-oldest');   if( $adjacent == 'prev' ) {      $adjacent_post = $boombox_reverse_pagination ? get_next_post( true ) : get_previous_post( true );   } elseif( $adjacent == 'next' ) {      $adjacent_post = $boombox_reverse_pagination ? get_previous_post( true ) : get_next_post( true );   }   return $adjacent_post;
}

Change position of view full post button to outside bottom

.post-list .post.full-post-show .post-thumbnail {
     margin-bottom: 47px;
}
.post-thumbnail .view-full-post {
     background: transparent;
     bottom: -45px;
}
.post.full-post-show .post-thumbnail > a:first-child {
     display: inline-block;
     width: 100%;
}
.post.full-post-show .post-thumbnail.show-short-media {
     max-height: none;
     overflow: initial;
}
.post.full-post-show .post-thumbnail.show-short-media > a:first-child {
     max-height: 500px;
    overflow: hidden;
}
.post-thumbnail.show-short-media .view-full-post {
     bottom: -37px;
}
@media screen and (max-width: 767px) {
 .full-post-show .post-thumbnail.show-short- media {
    max-height: none;
 }
 .full-post-show .post-thumbnail.show-short-
 media >a:first-child {
     max-height: 300px;
 }
}

How to increase excerpt length?

By default, wp excerpt length is set to 25 words.

To increase / decrease it please do following.

add_filter( 'excerpt_length', 'boombox_child_edit_excerpt_length', 10, 1 );
function boombox_child_edit_excerpt_length( $length ) {       $length = 20; // your preferred words count in excerpt          return $length;
}

How to make post full width when post have no sidebar?

@media screen and (min-width: 
    1200px) {
    .single.no-sidebar 
    #boombox_comments, 
    .single.no-sidebar 
    .newsletter-box, 
    .single.no-sidebar 
    .post-navigation, 
    .single.no-sidebar 
    .post.single 
    .author-vcard, 
    .single.no-sidebar 
    .post.single 
    .entry-content {
    width: 100%;
}
}

Make single post thumbnail image auto width

.single.post .post-thumbnail img {
 display: block;
 width: auto;
 margin-left: auto;
 margin-right: auto;
}

Make single post media items narrower for Boombox and Zombify posts

#zombify-main-section-front .zf-image .zf-image_media,
#zombify-main-section-front .zf-video .zf-embed, #zombify-main-section-front .zf-video .zf-video_media,
.single-post .entry-content iframe, .single .post.single .hy_plyr, .single .post.single img,
.single .post.single .boombox-responsive-embed,
.single .post.single twitterwidget {
    max-width: 400px!important;
    margin-left: auto!important;
    margin-right: auto!important;
    display: block;
}


To edit displayed date format please follow these steps:

/** * Edit post date display format */
add_filter( 'boombox_post_date', 'boombox_child_edit_post_date', 10, 1 );
function boombox_child_edit_post_date( $date ) {   $date = get_the_modified_time( 'Y-m-d H:i:s' );   return $date;
}

Optionally, please take a look at possible date formats with this URL.

11. Where to find icons available for Certy?

Please see following article => https://certy.px-lab.com/designer/icons/

12. Add this plugin - how to add sharing?

  1. Create Add This account here
  2. Choose Share Buttons => https://www.screencast.com/t/4pzK7pgRF
  3. Choose Inline view and press “Continue” button at the very end of this section => https://www.screencast.com/t/IXNOOPvy Here you can choose
    1. Social networks number
    2. Select your own social networks
    3. Design ( style, buttons size, rounded corners, icon color, background color, show/hide networks name )
    4. Advanced Options
  4. Press “Save and Continue” button at the very end of the page
  5. In the opened page choose “WORDPRESS” tab => https://www.screencast.com/t/slLO08zl
  6. Follow to the provided steps in that page:
    1. Login to your WordPress account and your WordPress dashboard.
    2. Choose Plugins > Add New
    3. Run a search query for AddThis. Your search will return a few results, choose the type of tool you wish to add to your site.
    4. Click Install Now
    5. Click "Activate plugin"
    6. In the settings on the left hand side choose addthis sharing buttons from the dropdown.
    7. Click advanced options where you can dig into deeper customization and where you will find the location to enter you AddThis profile ID.
    8. In Advanced Options at the bottom select "I want to control my plugin from AddThis.com" option => https://www.screencast.com/t/il7TgXyGWYi0
    9. Enter AddThis profile ID then click save changes and your AddThis tools are now ready to activate. => https://www.screencast.com/t/saAQijrn
    10. Copy Inline Share Buttons cod e => https://www.screencast.com/t/rmKtTxnYgsf
    11. Go to Customizer - > Social section and simply paste the code in the wp page customizer => https://www.screencast.com/t/LbqaNRTqBt
    12. Press “Save and Publish”

In case of any question please see our documentation for Certy => http://certy.px-lab.com/documentation/
Or submit a ticket in Certy Category!

13. WordPress General questions

  1. How to install WordPress theme?
  2. How to update WordPress?
  3. How to update WordPress themes and plugins?
  4. What is child theme and how to install child theme?
  5. How to create backup of the theme?
  6. How to set home page as static page?
  7. How to create or edit Menu?


1. How to install WordPress theme?

  1. Once purchased the theme from Themeforest please navigate to your account page and download it.
  2. After that extract the main archive file.
  3. Then log in to your website, and once in the Wordpress Dashboard navigate please to Appearance => Themes, click “Add New” button
  4. Then “Upload Theme”.
  5. Then select the archive folder containing only the theme actual files you have downloaded from the Themeforest and extracted.
  6. After that install and activate the required and recommended plug-ins for the theme which you will see as hint message
  7. Import demo content according to theme documentation

That’s it, as simple as that!

2. How to Update WordPress?

Every time when new version of WordPress released you need to update it in order to implement the latest changes / fixes.

For updating WordPress go to Dashboard=>Updates and click on update WordPress

Note: The update process implies overwriting the files of the WordPress / plugin / theme, which means that any changes made in core files ( which is not recommended, anyway ) will be lost.

It is recommended before updating WordPress to do a back up of the site, so in case of any issues you can easily restore your website. For details please see the WordPress official documentation

3. How to Update WordPress Themes and plugins?

It is recommended before updating Themes and plugins to do a back up of the site, so in case of any issues you can easily restore your website.

It is highly recommended to keep WordPress themes up to date as well. You can do the update manually however it is possible to update theme with Envato WordPress Toolkit plugin as well.

Themeforest provides tool - Envato Worpdress Toolkit plug-in to facilitate the update process of the themes [resources you have bought from Themeforest].

In case you are updating the resource manually, you should:

  1. Download the resource archived folder;

  2. Establish FTP / SFTP connection to your webhost;

  3. Browse appropriate folder (wp-content/themes for the theme, wp-content/plugins for plug-ins);

  4. Upload archived folder to your webhost by replacing the old one [delete the old resource, extract the archived folder, delete the archived folder]

And last but not least clear the site cache ( in case, of course, you are using caching plugin ).

You can update plugins easily from Dashboard => Plugins page.

Note: In case you are using premium plug-ins, you should provide license key in order to accomplish the update process about which you will normally get hint messages on the Dashboard page.

4. What is child theme and how to install child theme?

As mentioned in the “how to update WordPress ” section after the theme update all modifications you have made to the theme files will be lost. So the WordPress has functionality called Child Theme which provides a way to make changes on the theme and do not lose it during the update. It is quite simple to take advantage of the WordPress child theme functionality.

Most of the Wordpress themes have installation package of the child theme which you need to install and activate after main theme installation. The installation process is the same as described in point 1. How to install the WordPress theme with only difference that in this case you need to select for upload child theme.

Child theme creates the child theme directory with two files: "style.css" and "functions.php".

In the "style.css" file you provide information about the child theme ( for details please refer to the Documentation ), also the additional styles you would like to implement.

The "functions.php" file will be loaded along with the parent theme "functions.php" file, so there you will need to create only additional functions, using which you want to extend main theme functionality.

It’s important to understand, that any other file created/copied in the child theme directory will completely override the file in the parent theme having the same name and located in the same directory.

You can also extend the theme functionality by including files in the child theme that are not included in the parent theme. Again, all this is pretty well documented in the official Wordpress Site, please refer to it for more details.

5. How to create a back up of the site?

It is a good idea to back up your site periodically. This process includes backing up of files and database. Normally the most hosting providers provide service to back up the website. In case web hosting does not provide back up service, or for some reason you don’t want to utilize it, you can use plugins for that purpose or do it manually.

To back up your website manually you need to do two steps:

  1. Log in to your web hosting account, click phpMyAdmin, select the website current database (in case there are more than one database you can find the current database taking a look on the "wp-config.php" file located at the root of your WordPress installation) and export it;

  2. To back up files you click to the “file manager” in your web hosting account, navigate to the your website root directory (mostly "public_html") select and compress all files / directories of your website (make sure you have selected all files, because in Unix-like operating systems (which is most likely the operating system installed on the server) filenames preceded by a `.` (e.g. .htaccess) are hidden and may not be visible).

For more information refer to Wordpress official documentation.

We also recommend you to use following plugins for WordPress backup.

6.How to set home page as static page?

By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site.

In order to set a static front page you need to:

  1. Go to Wordpress Dashboard => Settings => Reading
  2. change the option “Front Page Displays” to “A static page”
  3. afterward select Front Page the page you would like to be as Static Front Page.

Note: The same behavior applies to “Posts” Page.

For more details please refer to Wordpress official documentation.

To create a menu you need to log in to the Wordpress Dashboard=>Appearance => Menu, select “create a new menu” at the top of the page, enter the menu name in the field “Manu Name”, click the “Create Menu” button.

To edit the menu from the mentioned page select the menu you would like to edit from select box named “Select a menu to edit” and click the “select” button right next to the field.

Note: There may be menu properties which are disabled by default. To enable them click “Screen Options” button on the right-upper side of the screen, and afterward check the menu properties you would like to enable.

After making your changes click the “Save Menu” button in the menu editor.

The last things remains to do is to add the new menu to one of the “Menu Locations”, which you can do from the bottom of the menu editor by checking the check box you wish to appear the menu and click the “Save menu” button.

This topic is described very detailed in the Wordpress official documentation.



14. Boombox - managing featured images in posts

If "featured media" is set to "on" via customiser global option in single post->main panel, this means for all posts by default featured media (gif, image, video) will be shown on top of content:

- for posts created via Zombify we have content always in the post editor, so in case if "featured media" enabled from customiser for post types like Gifs, Video, Image we'll have duplicated content

- this means for this post types we need to disable this option and we have appropriate way to do it - we should disable the "featured media" by tag or category for such posts e.g. for video, see "Hide Attached Posts Featured Media":

- creating posts via Zombify we can set any post type to automatically have some tag or category, e.g. "gif" tag can be attached automatically to gif post type in Zombify

- additionally we can also disable "featured media" on per post level (in case there is just exceptional post we don't need featured media), it can be done via single post edit options (Hide Featured Media option):

As you can see - we have few different options that could be combined or used separately depending on your needs.

Hope this article was helpful.

Thanks for choosing Boombox!


15. How to Add custom font in Boombox theme

You have two ways for adding custom fonts in Boombox:

1. Either you can add your local fonts. For that you need to perform the following steps:

a) Go to your child theme and create a folder with name 'fonts' listing your local fonts. 

b) Add the following code in your child theme css file with declaration of your fonts!

/* -- Local Fonts Declaration -- */
/* Light Font */
@font-face {      font-family: 'Roboto Condensed', Times, serif;    font-style: normal;    font-weight: 300;    src: url(fonts/RobotoCondensed-Light.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 300;    src: url(fonts/RobotoCondensed-LightItalic.ttf);
}
/* Normal Font */
@font-face {      font-family: 'Roboto Condensed';    font-style: normal;    font-weight: 400;    src: url(fonts/RobotoCondensed-Regular.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 400;    src: url(fonts/RobotoCondensed-Italic.ttf);
}
/* Bold Font */
@font-face {      font-family: 'Roboto Condensed';    font-style: normal;    font-weight: 700;    src: url(fonts/RobotoCondensed-Bold.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 700;    src: url(fonts/RobotoCondensed-BoldItalic.ttf);
}

c) Add the following code in your child theme css file for changing Boombox Fonts:

/* -- Fonts Application in Boombox -- */
/* Base font family */
body, html,
#cancel-comment-reply-link,
#comments .comments-title span {      font-family: 'Roboto Condensed', sans-serif;
}
/* Branding font family */
#branding h1 {      font-family: 'Roboto Condensed', sans-serif;
}
/* Post heading font family */
.entry-title {      font-family: 'Roboto Condensed', sans-serif;
}
/* Secondary font family */
.pagination, .page-links,.vp_dash_pagina,
.comments-area h3,[class*=" mashicon-"] .text, [class^=mashicon-] .text,
.entry-no-lg,.reaction-box .title,
.reaction-item .reaction-vote-btn,
#comments .comments-title, #comments .comment-reply-title,
.page-trending .trending-navigation ul li a,
.vp-entry legend,.widget-title,
.badge .text,.post-number,
.more_items_x legend, .more_items legend, .more_items_glow,
section.error-404 .text,
.inline-popup .title,
.authentication .title,
.other-posts .title,
.post-share-box h2,
.page-header h1 {      font-family: 'Roboto Condensed', sans-serif;
}

Please note that if you need, you can use different fonts for each area: Base font family, Branding font family, Post heading font family,  Secondary font family. You just need to add declarations for the appropriate fonts like it is explained in a) point.

NOTE: When using local fonts please be sure to use the format that is supported by major browsers. To have more information about browser support of fonts,  please go by the following url: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

2. Or you can import and use google fonts For importing google fonts you just need to add the following line of code either in your child theme css file or site=>Customize=>Additional CSS:

/* -- Google Fonts Import -- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i');

After that you need to change Boombox fonts to use imported google fonts using code provided in 1=> c) point!

P.S. For more help please see the following example: https://drive.google.com/file/d/0B9a11-1Vd1T2SmVaRjlQVWJ3Z28/view?usp=sharing, which uses combination of local fonts and google fonts!

Please let us know if you need our further assistance or if you have more questions!

16. Zombify - custom code usage cases

Please note that Px-Lab not responsible for the way of use for provided below code, they may work or may not work depending on your current settings and options.  Codes were written during support and assistance to some Boombox users by the initiative of Px-Lab.

We are not providing support or assistance for the use of these codes. Any customization service and additional coding is out of the scope of our support.

In order to apply below code:

1. Go to Dashboard=>Appearance=>Customize=>Additional CSS
2. Paste the code
3. Click on save and publish



How to Change Up And Down Icons in Zombify Listing

1. First of all, create a folder with a name 'images' in your child theme folder and add there your icons: icon-vote-up.png for up vote icon and  icon-vote-down.png for down vote icon. Please note that icons should have maximum 25px height, preferable not more than 25X25 dimensions in order to look good on your site. Also they should be vector icons (svg) in order to be  displayed with high quality in retina display devices.

2. Secondly,  you need to add the following code on your child theme css file:

/* Change list voting icons  by PxLab*/
#zombify-main-section-front .zf-list .zf-vote_btn .zf-icon:before {
    line-height: 35px; /****/
}
#zombify-main-section-front .zf-list .zf-vote_btn .zf-icon-vote_down:before {
    content: url('images/icon-vote-down.png');
}
#zombify-main-section-front .zf-list .zf-vote_btn .zf-icon-vote_up:before {
    content: url('images/icon-vote-up.png');
}
/* /End Change list voting icons  by PxLab*/

Refresh the site, clear cache and you will see the results!

17. Why I cant use mobile control with Page cache?

The reason is the nature of page cache - which caches the full html and then always returns that static html.

When some post has created the cache for that post is refreshed and front/category pages are updated.

However, some options simply can't work in case of using page cache - e.g. you can't use mobile controls option, as the same URL is cached on desktop and then just returned for mobile, if it will be cached 1st on mobile, then for desktop strip will be missing. The same for random - if it's cached there will be loaded cached version and it won't be updated until the cache is renewed.

You should disable strip globally to remove from mobile in case of using page cache. There is an expiration time for page cache, so all pages renews time after time. All users which decide to use page cache will face this.

Page views are working via ajax request, so views are always tracked, just not updated instantly if you're using page cache, as soon as cache will be updated all the tracked views will appear, and this will affect also most viewed lists containing all new views. Unfortunately, we can do nothing with this, it's a nature of page cache.