Hi,

I will push out an update with the latest version of WPBakery asap, thank you for the heads up!

If you read the article you linked to, you can see that the user needs to have author access to your site in order to exploit the vulnerability. If you don’t have any authors on your site that you don’t trust then it’s not a concern (you should only add authors to your site that you trust).

Always look at the WordFence articles because more often then not, the vulnerability isn’t a huge concern. Like in this case, someone would need to hack your site and become and author first to even be able to exploit the WPBakery vulnerability.

The plugin is still in a folder named js_composer and it was actually renamed to “WPBakery Page Builder” – it was Visual Composer originally. Now what they call “Visual Composer” is a completely different plugin that works differently and I don’t like it at all, so I would never recommend it.

- AJ

ps: If you don’t like WPBakery, Total is now fully compatible with the free and popular Elementor plugin. Unfortunately there is no way to “convert” WPBakery into Elementor, so it would be a manual process if you wanted to swap over. You could always create a staging version of your site and mess around with Elementor to see if you like it more and want to switch over.

Thanks AJ … some time ago now I switched to DIVI for some other sites I’m running .. I’m now thinking about investigating to see if I want to switch to Elementor. but since DIVI hase upgraded with the Divi 5 version I’m not sure anymore, becouse it is a huge price difference since I have a lifetime licence from DIVI. Regards Rinni

Me again, did you push it trough alreay? Because if I login again I don’t see the update in the “install plugins” section under the “appearance” menu.

Hi Rinni,

No the update isn’t ready yet, once it’s live you should get an email from ThemeForest and it will be noted on the changelog: https://totalwptheme.com/docs/changelog/

But if your site is using DIVI and not the WPBakery Page Builder, then you shouldn’t have WPBakery enabled or installed. Unless for some reason you are using WPBakery on some pages and then Divi on others?

Also, if you are using DIVI, it’s working well for your site and you’ve already paid for a lifetime membership, I don’t see any reason to switch to something else.

- AJ

ps: I forgot to mention that if you are using DIVI and you aren’t using WPBakery anywhere after deleting it from your site you can then go to the Theme Panel and uncheck it so that the theme doesn’t bother you with installation/update notices. See the docs here: https://totalwptheme.com/docs/disable-bundled-plugin/

No no, stil using Total and WPbakery on this particular site. For other sites I switched to DIVI. Thanks for the info! I’m going to have a look Elementor light and decide where to go from there I think. It is more expensive but I read everywhere that it should be better and much faster, even compared to the new Divi 5 setup.

The base Elementor plugin is completely free – https://wordpress.org/plugins/elementor/ – and if you use it with Total you have access to a lot more options and functionality: https://totalwptheme.com/elementor-integration/

I reset the theme back to default and now increasing the column retains vertical alignment on mobile. Do you know what would cause the padding to be added left/right when I changed the inner column gap initially?

Hi,

I’m not sure what you mean by “I now have 30px padding on the left and right of the column meaning it doesn’t align with the site container” – The way WPBakery column spacing works is by adding left/right padding to the columns (correct) but it also adds a negative left/right margin to the outer row to offset this spacing so that the content is always inline with the site. If your content is not inline either it’s because you added left/right margins to the row or there is custom CSS breaking things.

I also don’t understand what you mean by “There’s no way in the builder to increase column spacing on larger displays and not have that knock the vertical alignment out on smaller devices?” – When you increase the column spacing it will add more space between columns (aka left/right padding) and increase the default margin below columns so when they stack it’s the same spacing. It shouldn’t “knock the vertical alignment out” (not sure what that means).’

I see your new comment…So to recap, increasing the columns spacing does change the left/right padding of the columns. This is how the spacing works.

It’s always best if you can share an example of what you are doing so I can provide the best feedback possible.

For example, depending what you are doing – the Grid or Flex Container element may be helpful because it will allow you to enter a custom “Gap” (spacing) and you can use responsive units (vw, vmin, vmax) or CSS functions (clamp/calc).

Also when working with text and images, one “trick” I’ve been using when creating demos is adding a side margin to the image to increase the space via theme utility classes. Example: https://a.cl.ly/OAu1DlbO

Another thing to mention is for some layouts you could use theme elements instead of rows, for example the Feature Box can be used for left/right content – https://totalwptheme.com/elements/feature-boxes/

I agree that the way WPBakery rows works by using left/right padding on rows and a negative margin on the row to offset the padding isn’t ideal. But there isn’t anything I can do about that and I don’t know if WPBakery would change how things work because it could cause a lot of issues with customers updating their sites.

WPBakery rows use percentages for the widths and there are responsive options in the columns that allows you to change column widths and different breakpoints. For this reason it’s impossible for WPBakery to change to use CSS grids for rows. And due to CSS limitations it’s impossible to switch to a flexbox model using “Gap” because the gap is not considered in the browser’s calculation when using percentage based columns

- AJ

ps: For future sites or if you want to re-do your site at some point, you could consider using Elementor instead of WPBakery which is fully supported by Total. It has some drawbacks (I think WPBakery is faster, easier and slimmer) but it does offer a lot more flexibility when it comes to spacing and controlling the design responsively. Unfortunately there is no way to “convert” WPBakery into Elementor, so it would be a manual process. You could always create a staging version of your site and mess around with the builder to see if you like it more.

Here’s an example – https://total.style960.com

Second and third rows here are identical except for the column count. Both rows have an inner column gap of 60px, but the second row does not align on mobile. The third row also with the same inner column gap does align on mobile. What’s the difference between the two because it’s not custom css?

I looked at Elementor last week but I don’t like the UI, I find WPBakery (at least the version that comes with Total) much easier and snappier to use.

Hi,

What do you mean by “does not align on mobile”?

All the rows look exactly the same to me: https://a.cl.ly/8LuEOvQB

Now, one thing I do see on your site is that you are using the “Remove Bottom Column Margin” on the row, then you are adding extra classes (s960-fwc-two and s960-fwc-three) to manually add a top margin to the second and 3rd columns at the 959px breakpoint via custom CSS.

This works when you have the “Full-Width Columns On Tablets” setting enabled (which you do) – but if you disable that option you will have issues because the default stacking breakpoint in wpbakery is 768px. So from 768px – 959px the last 2 columns will have an extra margin at the top if you disable “Full-Width Columns On Tablets” due to your custom classes and CSS.

Perhaps that’s what you are referring to?

- AJ

ps: I agree with your thoughts on Elementor.

Hi AJ,

I’ve put a screenshot on the same page, issue starts around 550px.

I’m deliberately testing full width columns because some content is too narrow (in my opinion) at the default 768px – i.e text + image at 810px on iPad portrait orientation. I’ll not use those classes where I do use that breakpoint though.

Thanks, Paul.

This happens when the row stretch is set to ‘stretch row.’ Check the 3rd row where the row stretch is left at default and the alignment on mobile is correct.

Hi James,

It sounds like you have conflicting slugs. If you are using practitioners for the post type you can’t also have a page called practitioners because WordPress is reserving the slug for the custom post type. The best solution here is to change your post type slug to “practitioner” which makes way more sense without the “s” at the end anyway. This is done via the “Custom Rewrite Slug” field on the main tab in PTU.

- AJ

Hi James,

Thanks for the video, very helpful.

The CSS animations in WPBakery use a script named Waypoints, which triggers events when elements become visible. Element visibility is calculated by it’s position relative to the top of the window and this get’s recalculated every time the window size changes.

My code for the toggle elements is triggering the window resize event when opening the toggle but it’s not re-triggering the event when closing the toggle.

Can you submit a ticket – https://my.totalwptheme.com/ – and I can either send you the 6.4 beta version with the fix or the patched JS file if you rather just update the single file via FTP.

I’ve already tested the fix locally and verified it works.

Thank you for reporting this issue & sorry for the troubles!

- AJ

ps: I hope to release the official 6.4 update this week most likely towards the end of the week like Thursday/Friday.

Thanks AJ, if the fix is included in 6.4 I can wait for that. Thanks.

It will be!

Hi James,

If the parent menu item has a link then you must click on the arrow, otherwise the user can never access the link from the parent. If you want the whole item to be used for the toggle effect you need to use the theme’s nav-no-click class: https://totalwptheme.com/docs/adding-non-clickable-menu-links/ – this will remove the link on mobile around the text and add the toggle effect to the whole link.

Alternatively, if you use the Header Builder – https://totalwptheme.com/docs/header-builder/ – the Off Canvas element, which you would use for mobile is actually a more optimized menu and uses the modern summary element for the “Toggles” which means it’s done by the browser and not javascript and the whole header is clickable – https://totalwptheme.com/elements/off-canvas-menu/ (I can’t change the default Sidebar mobile menu to use the summary element because it would completely change the HTML and break user’s customizations when updating the theme).

- AJ

Hi James,

Sorry, the correct filter should be “totaltheme/header/logo/image” not “totaltheme/header/logo”. I tested with that change and it works perfectly.

I’ve updated the snippet – and made a few other changes to use newer theme functions. Please have a look at the updated code.

By the way…I’ve updated the filter as well for the next version of the theme so that the image attributes are available in the hook. If you want you can manually update your site by editing the file at Total/inc/header/logo.php and changing line 497 from:

$img_html = (string) \apply_filters( 'totaltheme/header/logo/image', $img_html );

to:

$img_html = (string) \apply_filters( 'totaltheme/header/logo/image', $img_html, $img_attrs );

This way you can access the attributes in the hook like such: https://gist.github.com/wpexplorer/e48e94f888b3cedc5dab09f6169f46bc

This is more efficient and ensures all attributes are applied to the logo (such as width, height and fetchpriority).

- AJ

edit: My last snippet got messed up by ThemeForest comment formatting, so I updated the comment with a link to a public Gist. And I will update the snippet as well.

ps: Keep in mind that even hidden images are loaded by browsers – so the desktop and mobile images will always be requested. If speed is a concern, using the same logo across all devices is best.

Thanks AJ but I applied those changes and the issue is still there.

I am using 6.3 … I don’t think 6.4 has been released?

CAn you check I got the code right? Here is the amended file, line 497:

And here is what I’ve put in functions.php:

Thanks!

This should definitely work, I’ve tested locally on version 6.3 and it does.

Can you share the URL so I can look? Is should be able to see what’s going on just by inspecting the site.

But you can also submit a private ticket with the logins so I can have a look – https://my.totalwptheme.com/

- AJ

ps: I mentioned using the Header Builder in your latest comment, if you use the header builder then you can also define your mobile logo without any code, because you would be creating a row for desktop and a row for mobile anyway.

Hi AJ – I just submitted a support ticket – thanks.

Fixed it and replied back.

Hi AJ – I sent you a reply back – it works perfectly – thank you! – but I was also wondering how I set a retina logo, given this is for mobile. Thanks.

Strange, I haven’t gotten a reply back. If you sent it recently, maybe there is a delay (I use HelpScout for the tickets).

For retina you would simply need to define a new srcset attribute, example:

function my_header_logo_attrs( $attributes ) {
    $attributes['src'] = 'LOGO_URL';
    $attributes['srcset'] = 'LOGO_URL 1x, RETINA_LOGO_URL 2x'; // !!!! ADD THIS LINE !!!!!
    return $attributes;
}
add_filter( 'totaltheme/header/logo/image_attributes', 'my_header_logo_attrs' );

- AJ

ps: Obviously don’t include ”// !!!! ADD THIS LINE !!!!!”

I forgot to mention, you will want to also define $attributes[‘width’] and $attributes[‘height’] – since they are going to be different to the logo you are showing on desktop. I’ve already logged in and done this for you

Hi,

Yes, please share a URL (always share the URL if it would be helpful so I can help right away).

According to the Vimeo docs – https://help.vimeo.com/hc/en-us/articles/12426199699985-Overview-of-video-privacy-settings – when your video is unlisted the only way to embed it on a site is by using what they call a “privacy hash”, without this the video won’t play.

This means if you had previously added a videos to your site that were public, you will need to edit those elements to use the correct URL with the privacy hash.

So you need to add the privacy hash to the URL.

That said, when using the Video element the theme uses code like this:

if ( ! str_contains( $url, 'player.vimeo' ) ) {
   $video_id = (int) substr( parse_url( $url, PHP_URL_PATH ), 1 );
   if ( $video_id ) {
       $url = "player.vimeo.com/video/{$video_id}";
    }
}

To parse the URL and locate the video ID so then create the Embed URL, with your custom parameters. Unfortunately this code will strip the privacy hash. So I’ll need to think of a better method for the code.

It’s possible the theme wasn’t using this code before and so updating the theme has introduced the issue. I would need to know if your videos have always been unlisted and worked with the Video element to confirm if that’s the case.

If you wish email me directly at wpexplorer [at] gmail dot com – it may be easier to troubleshoot this via email and if I can have access to the site to test. Plus, it would be good for me to have access to some unlisted videos so I can test and update the theme accordingly to work with the direct URL’s without you having to use the player.vimeo.com url.

Thanks!

- AJ

Hi AJ.

I am about to sleep (2am) so will revert to email tomorrow to discuss further (if needed). I’ll at least send a few listed and unlisted to play with.

But, I have done a lot of testing with this over the last few hours. It is indeed the theme stripping the hash causing the issue. There is nothing I can do to get the element to retain it.

This is a new build site with data imported from a different theme (not using vc), so cannot say if it is a new issue.

For the time being I got Mr GPT to convert the 107 elements in to a csv and imported in to a CPT, which I’ve set to just use ombed in a custom card. It works, but is obviously not ideal.

Can you confirm if the videos were not previously unlisted, which means you have to go in and edit the Video elements to add the privacy hash?

The reason I ask, is because if your videos were public before, then you would still need to update the Video elements to include the privacy hash in the URL.

I’ve already created a Vimeo account and uploaded an unlisted video to test and updated the theme for the next version to support the privacy hash.

If you want to try the update I can send it over via email or you can edit the file via FTP at Total/inc/functions.videos.php

Change lines 42-47

From:

if ( ! str_contains( $url, 'player.vimeo' ) ) {
    $video_id = (int) substr( parse_url( $url, PHP_URL_PATH ), 1 );
    if ( $video_id ) {
        $url = "player.vimeo.com/video/{$video_id}";
    }
}

To:

if ( ! str_contains( $url, 'player.vimeo' ) ) {
    $parsed_url = parse_url( $url );
    if ( isset( $parsed_url['path'] ) ) {
        $path = trim( $parsed_url['path'], '/' );
        $parts = explode( '/', $path );
        if ( ! empty( $parts[0] ) && is_numeric( $parts[0] ) ) {
            $url = "player.vimeo.com/video/{$parts[0]}";
            // Check for and add privacy hash
            if ( ! empty( $parts[1] ) && preg_match( '/^[a-zA-Z0-9]+$/', $parts[1] ) ) {
                $url .= '?h=' . sanitize_text_field( $parts[1] ); 
            }
        }
    }
}

- AJ

Also, I just installed the “Consultative” Demo. I can’t find the Theme Settings section on pages (where iI can modify header, title, callout etc..). Can you help me restore the Theme Settings section?

Hi,

Form Shortcode:

The Form Shortcode is disabled when you are using WPBakery Slim Mode – https://totalwptheme.com/docs/wpbakery-slim-mode/ – as it’s an old element that isn’t really needed anymore. You can disable WPBakery Slim Mode so you can use it or you can whitelist it and keep slim mode enabled via a little custom code:

add_filter( 'vcex_shortcodes_list', function( array $list ): array {
    $list[] = 'form_shortcode';
    return $list;
}, PHP_INT_MAX );

The Form Shortcode is only used to display 3rd party forms and then apply custom form styling. But it’s best to control your form styling globally via the Customizer – https://totalwptheme.com/docs/styling-forms/ – and if you want to insert 3rd party form shortcodes, just use the Shortcode element instead.

Theme Settings Metabox:

I’ve been disabling the Theme Settings metabox on new demos because I’ve found that customers often will use those settings in ways that aren’t recommended. Plus, this feature is not needed for most websites.

You can re-enable the feature in the Theme Panel via the “Theme Settings Metabox” option, if you believe you absolutely need it.

Websites should have consistent design and functionality – if you are using the Theme Settings to do things like modify the header, title, callout – often this causes inconsistency as well as a lock-in effect, where the only way to change these is by manually updating the pages again. I would encourage you to instead use the Customizer and Dynamic Templates to define your global styles, layouts, etc for different aspects of the site – this way you can always control them globally.

Let me know how you intend on using the Theme Settings Metabox, so I can provide a better alternative.

- AJ

Hi, thanks for your answers. - Form shortcode: I disabled WP Slim mode. In fact, I need to change the layout of each individual form, and this was the only way. - Theme settings: I need to individually change the page title, via images and custom titles. Therefore, I cannot use the Customizer because each page layout is different. Let me know if you have a better alternative. Thanks

If each page has a different title, images, etc – it makes more sense to just disable the title globally under Customize > General Theme Options > Pages > Page Header Title – then just insert whatever you want for the title directly into WPBakery. Sample video: https://a.cl.ly/nOurrx4x – this will give you way more control anyway of the design at the top of each page.

I recommended disabling the title only for pages – but you can also disable it globally on the whole site under Customize > General Theme Options > Page Header Title > Style > Hidden – just keep in mind it will be removed everywhere (archives, search, post types, etc) – so you would need to make sure you create dynamic templates for archives/search and other parts of your site that include a title area – https://totalwptheme.com/docs/dynamic-templates/

- AJ

By the way if you only need the Form Element I would highly recommend keeping Slim Mode enabled then using the suggested code snippet to re-introduce the Form Shortcode element:

add_filter( 'vcex_shortcodes_list', function( array $list ): array {
    $list[] = 'form_shortcode';
    return $list;
}, PHP_INT_MAX );

This will keep your site faster and more optimized.

- AJ