Hi,

Sorry I got sick and got a bit behind. I’m trying to finish it asap (I only have a couple things left on the todo list and then testing) but I don’t want to give an ETA. But I’m hoping by early next week at the very latest.

Are you waiting for something specifically? I can always help you patch your site with that change for the meantime if there is a rush, let me know!

- AJ

First of all, get well soon, AJ! I asked because I wanted to start the regular updates of my customer pages. And of course I wanted to include the template right away.

Hi,

This is Aj the theme author. Please see the article here: https://totalwptheme.com/docs/woocommerce-outdated-templates/

The currently outdated template file has a tiny change that is non-site breaking so the fix will be in the upcoming update, no need for me to rush out a fix and bother my customers with multiple updates. You can view the upcoming changelog here as well if interested: https://totalwptheme.com/docs/upcoming-update-changelog/

- AJ

Thanks. I just had to ask at the clients request.

I totally understand.

If you want to remove the notice, you can always edit the file and change the version number at the top of the file to something large like 9999 – it will be overwritten in the next update anyway.

- AJ

If you aren’t creating custom cards or templates and you just want to define a fallback featured image site wide, there are plugins for this but it’s also very simple with a little custom code.

I have a snippet here you can use: https://totalwptheme.com/docs/snippets/fallback-post-thumbnail-featured-image/ (simply change “5” to your image ID)

- AJ

Much appreciated

Of course! Let me know if you have any issues with that or any other issues or questions.

- AJ

Hi AJ,

I haven’t been able to get this to work. I gave the slider row a custom class of s960-row-gradient and used the css:

.s960-row-gradient .wpex-bg-overlay { background: linear-gradient( 360deg, #272d7a 0%, rgba(255, 255, 255, 0) 100% ); }

If I remove the slider I can see the gradient applied, but with a slider or background image set, there’s no gradient.

Thanks, Paul.

I have this working now. I needed to set the overlay to colour. I’ll leave it up to you on how best to implement gradients! Within the overlay tab though for sure.

Correct, if you don’t set the overlay then the overlay element won’t be inserted into the HTML so it does need to have some default color to let the theme know to render the element. Glad you figured that out

- AJ

Hi,

There are plugins out there, the most popular probably being “The Events Calendar” also known as “Tribe Events” but these plugins are pretty bulky and can get expensive. Personally, I think using a service outside of WordPress is generally best and these usually can be embedded onto a site if needed or you can just link to it from your site. Some options are:

• Eventbrite – https://www.eventbrite.com/
• Universe (owned by Ticketmaster) – https://www.universe.com/
• Ticket Tailor – https://www.tickettailor.com/

I personally haven’t had the need to ever host an Event, but if I did that’s what I would do.

Another good reason to keep things separate is for liability, because you aren’t dealing with or storing personal information and credit cards. This is why I would personally never use a plugin like WooCommerce for a shop, but would instead use a service like Gumroad or Shopify to host the actual product, user information and checkout process.

- AJ

Hi Paul,

The heading element should be included already, I will add it in the next update if it’s not (makes sense to).

I’ve updated the docs with a snippet: https://totalwptheme.com/docs/grid-container/

For the heading element specifically you would use ‘vcex_heading’ for the name as that’s the shortcode name.

- AJ

Perfect thank you.

Hi Paul,

1. In CSS/HTML margins are collapsable. This means the bottom margin on the first column collapses with the top margin on the second column. Columns by default have a 40px bottom margin (can be changed in the customizer), you added a top 40px margin to the second column – since margins collapse the end result is a 40px space. If you were to add a top margin of 80px then you would get the result you expect.

Contrary paddings do not collapse, so if you want extra space using a padding would make more sense or insert the theme’s Spacing element inside the column and use the visibility option so it only displays at your desired breakpoint.

You can also use the theme’s utility classes to apply your top padding such as “wpex-pt-40 wpex-md-pt-0” – this would give the column a top padding of 40px which will be removed at the ‘md’ breakpoint. More info here

• https://totalwptheme.com/css-framework/padding/
• https://totalwptheme.com/css-framework/responsive-breakpoints/

2. I’m not sure what you mean regarding the logo, it looks good to me. I recorded a video: https://a.cl.ly/geue0krz – what browser are you using? The only reason I can think of for your logo to not render properly would be if you have a very outdated browser that doesn’t properly support the max-width property. I’ve looked in Chrome, Firefox and Edge and it’s working correctly in all of them.

- AJ

Hi AJ,

Specifically at exactly 958px there is no space where there should be 40px (or any value I set). I can’t use the themes utility classes because I want this spacing to apply only between 767px-959px. 960px onwards and the columns no longer stack. All I’m looking to do is stack columns earlier than 767px because if you have text left and image right (as an example), then the text becomes too narrow IMO, it’s not good for reading. But I feel like I’m fighting wpbakery to achieve this. And the theme’s utility classes don’t cater for this so it has to be custom css.

Browser is latest Edge or Firefox (win11), at 959px the logo is 365px by 80px.

Paul.

Hi Paul,

I see the top margin added just fine when I inspect it: https://a.cl.ly/5zuqDkJw (I can see you’ve disabled the bottom margin on the columns now as well).

So I’m not sure what you mean.

if you want to stack columns at a sooner breakpoint on a per-row basis you just need to use the responsive options for columns see this video: https://a.cl.ly/qGuGg8dO

WPBakery columns is a mobile first approach, this means that if you change the width at tablet it will be applied to tablet and greater – thus you need to re-define the width you want at desktop putting it back to 50%.

The responsive column settings are quite powerful (you can use the offset settings as well instead of margins to add more space at different breakpoints). But it can take some time getting used to these settings and some math when calculating offsets and widths to ensure everything syncs up.

And if you are looking to stack columns at an earlier breakpoint globally it’s very simple with some CSS like this:

@media (min-width: 959px) {
    .vc_column_container { width: 100% !important; }
}

Where 959px is the breakpoint you want to target.

You can also enable the WPBakery design options to control the breakpoint globally (won’t work with WPBakery Slim Mode though or Theme Mode, not working with Slim Mode is crucial but the later is a bug which I’ll fix in 6.4) – https://a.cl.ly/Kou6L5W1 – the reason these settings don’t work with “Slim Mode” is because the way the plugin does things is by re-creating the plugin’s CSS on the fly and adding a dynamic CSS file to the site. WPBakery Slim Mode loads a custom CSS file with a bunch of code removed not needed when the function is enabled and this isn’t done “on-the-fly” as that introduces a lot of bloat and slows things down. Ideally the WPBakery plugin would instead use CSS variables for colors and separate CSS files for the breakpoints, but they don’t and I don’t think they can change how it works as it can break sites updating.

- AJ

Hi,

It’s working correctly for me.

Do you by any chance have “Show animations in Windows” disabled on your PC under the accessibility settings or “Reduce motion” enabled on Mac?

The theme won’t animate if you have those settings enabled as it would be an accessibility issue if it did, so the theme specifically checks this user setting.

See here: https://a.cl.ly/d5u5lXLA

- AJ

Wow. “Show animations in Windows” was the culprit. I never knew this affected websites too. Thanks for the insight!

Some people experience nausea, dizziness, or headaches from motion effects soit’s important for websites to check this option before applying animations to the site. Not all themes/websites do this, which may be why you still noticed animations on some sites even with the setting disabled, but accessibility is very important and I try my best to make the theme as accessible for everyone as possible.

- AJ

Hi,

Nope, the “wpex-icon—sm” class is a new class added in Total 6.0 – https://totalwptheme.com/docs/changelog/6-0/ – which is used strictly for the SVG based theme icons. The “wpex-icon-sm” class is an older class that was used for the Icon page builder element.

The upcoming Total 6.4 update has a new Customizer setting you can use to modify the close button size and icon in the Customizer!

- AJ

Hi James,

If I get more requests I’ll consider it as currently you are probably the only person that would want an icon for this.

Now, you can always add your own icons very easily and you have 3 methods:

1) Override and modify all theme icons in your child theme – https://totalwptheme.com/docs/snippets/custom-icons-json/

2) If you want this icon as a social profile option you can easily add it – https://totalwptheme.com/docs/snippets/add-new-social-options/

3) If you want to display the icon in a theme Element (icon, icon box, etc) you can upload custom icons to your site using the theme’s Icon Selector in WPBakery or the Elementor selector in Elementor.

- AJ

Thanks AJ – I made my own in the end, WTW has logos for download

Awesome

[edit] – I was going to change how the theme works so it will query posts based on the assign staff as author plugin first (take priority) over the connection field in the user profile settings. However, this could break people’s sites when they updated if they were doing things in a “strange” way. Rather I’m going to just add a notice/warning in the admin on the user’s edit screen if the plugin is enabled.

My recommendation if you are using the plugin is to disable the “Connect to Staff Member” feature completely and you have 2 ways of doing this:

1) Hook into the “wpex_staff_users_relations” filter and return false.

2) Better method – disable the Staff post type from the Theme Panel and use the Post Types Unlimited plugin instead to register the staff post type. This will register a simple staff post type without the added theme functionality, which you probably don’t need. Especially if you are using dynamic templates to display the staff members.

- AJ

I’ve just bought another license so will open a new ticket in the Support portal

Thank you for the purchase!

I got the ticket and I replied back, please get back to me so that we can sort this out ASAP. Thank you!

- AJ

Hi,

You can insert HTML into the top bar content area in the Customizer for adding stuff like an image.

However, depending what you are going for – perhaps you could do one of these 3 things instead:

1) Disable the Top Bar and use the Header Builder for the whole top section of your site: https://totalwptheme.com/docs/header-builder/

2) Create a dynamic template part and insert that into the Top Bar content area so you can use the page builder for the content – https://totalwptheme.com/docs/dynamic-template-parts/

3) Disable the top bar completely, create a new dynamic template part and then insert this under the Custom Actions section so it displays before the header – https://totalwptheme.com/docs/custom-actions-panel/

- AJ

And a bit more about what I’m trying to achieve. I have a search bar already set up for the custom post type “members” with a dynamic template for the search results. I now need to add a search bar to search only pages and not include custom post types or posts. Ideally I would use a separate dynamic template for the page search results.

Thanks!

Hi Alice,

I hope you had a nice weekend, thank you for your patience!

Using post_type=page in the search bar is correct and it works correctly for me. If it’s showing all post types, there may be a conflict with a 3rd party plugin or child theme code that’s modifying the search query. Or the dynamic template you are using for Search Results isn’t properly set to use the “Auto Query” type so it’s not actually displaying search results.

Using a separate page is a great idea, see the guide here: https://totalwptheme.com/docs/custom-search-for-post-cards/

This way you can create a custom search like the one I have on the docs Filters Page: https://totalwptheme.com/docs/filters/

When creating the custom page for page search results, keep in mind that you do NOT tell the search query to search pages in the Search Bar element, instead you set your Post Cards element shown on the results page to display the page post type. If you follow the guide it should work but if you have any issues let me know!

- AJ

Thanks, AJ, that’s brilliant! The custom search is exactly what I was looking for :)) Best theme ever!

Hi,

Thank you for your patience.

I tested locally and was able to recreate the issue, the problem seems to come from the fact that WordPress requires a taxonomy name for their functions that return next/previous posts even if it’s not used in the actual code that retrieves the posts. It’s really a bug on their end but nothing I can do about that.

I will need to update the element so if the “Same Term Taxonomy” so if the “In Same Term” setting is disabled it still passes “category” as the taxonomy to get next/prev posts for. It seems weird to do this, but it fixes the issue.

Hopefully, WordPress doesn’t change things in the future and breaks things – if they do though, I’ll just have to revert back these changes.

Thank you for reporting the issue!

- AJ

ps: If you want to fix this yourself the code is simply. You would edit the file at plugins/total-theme-core/inc/vcex/templates/vcex_post_next_prev.php and add the following around line 34 before Define wrap class>

if ( ! $in_same_term && ! $same_term_tax ) {
    $same_term_tax = 'category';
}

Example screenshot: https://a.cl.ly/Wnunz8Wg

As always, thank you!. By the way, if the “next/prev” option, when creating a new post type, is enabled, it works perfectly. But in this case, we needed the links in a different position… Just in case the functionality of that option brings something into account

Hi James,

Unfortunately CSS does not allow media breakpoints in CSS

That’s why the theme works by loading a separate file for desktop and one for mobile using inline media queries like this: https://a.cl.ly/12u8eZA8

You have 4 options here:

1) Don’t use pixels, use a responsive unit and the clamp function to make the padding responsive. Example:

.logo-img {
     padding-block-start: clamp(10px, 2vw, 20px);
     padding-block-end: clamp(10px, 2vw, 30px);
}

Would be a good idea to start using responsive units if you aren’t familiar with them, they are awesome!

By the way you can use padding-top and padding-bottom but those are older properties, it’s best to use newer direction aware properties like padding-block and padding-inline.

2) You can load your own CSS file for the mobile menu breakpoint. You should check for the theme’s script and grab it’s media value dynamically, example:

add_action( 'wp_enqueue_scripts', function () {
    $handle = 'wpex-mobile-menu-breakpoint-max';

    // Return early if the style isn't registered
    if ( ! wp_style_is( $handle, 'registered' ) ) {
        return;
    }

    // Get the global styles object
    $styles = wp_styles();

    // Get the media query value from the registered style
    $media = $styles->registered[ $handle ]->args;

    // Enqueue your child theme stylesheet with the same media query
    wp_enqueue_style(
        'james-mobile-css',
        get_stylesheet_directory_uri() . '/css/mobile-menu-breakpoint-max.css',
        [],
        wp_get_theme()->get( 'Version' ),
        $media
    );
}, 20 );

3) Display a custom logo on mobile: https://totalwptheme.com/docs/snippets/mobile-logo/

4) Use the header builder and have complete control over the design on mobile and desktop: https://totalwptheme.com/docs/header-builder/

- AJ

If you want to do #2 I wrote a better snippet and posted it in the docs with an alternative way of adding inline CSS instead of loading a CSS file: https://totalwptheme.com/docs/snippets/mobile-only-css/

Also, I just thought of a cool idea…I could expand the Custom CSS panel to have 3 tabs so that you can define global, mobile and desktop CSS. The problem is the theme’s CSS panel actually doesn’t really do much beside hook into the WordPress core “Additional CSS” function in the Customizer, which means the additional tabs for mobile/desktop would need to be saved separately and have their own system….I will put this on a potential todo list.

- AJ

Can you recommend a good plugin for this?

Which plugin you use really depends on your website needs. This is one of the most popular and all-inclusive options: https://wordpress.org/plugins/complianz-gdpr/

If you want something more simple this one looks pretty nice: https://wordpress.org/plugins/lightweight-cookie-notice-free/

Or if you know how to code you can use this script – https://cookieconsent.orestbida.com/ – to create your own little plugin or add it to your child theme.

- AJ

Thank you very much for the recommendations!

This is exactly the option I’m talking about https://a.cl.ly/WnunRE15

But it doesn’t show up in the Polylang section – Translations – “Related Posts”; I only have access to what’s on the screen https://prnt.sc/GbAob0pElAPq

Why is the Related Posts translation option available on your screen, but not mine?

Make sure there is a value saved in the Customizer otherwise it won’t display in Polylang because Polylang only translates saved Customizer values and not localized strings. Here is a sample video showing you the issue: https://a.cl.ly/Z4u4bBdN

I can make some changes though in the next theme update to make it possible to change the theme setting text even if it is empty. I will work on that and see if it’s possible.

- AJ

The title was indeed empty. I wrote it and Polylang showed it for translation. It helped me, thank you very much!

Hi,

This is AJ the theme author.

The Modal Popup is an exclusive feature for the Post Cards element, which is the primarily element you would use to display posts on the site. Here is a link to the documentation: https://totalwptheme.com/docs/grid-with-modal-pop-up/

Now, if you want this function for your Staff Archives (pages created automatically like categories and tags) you will want to create a dynamic template and assign it to the Staff Archive. See here:

• https://totalwptheme.com/docs/dynamic-templates/
• https://totalwptheme.com/docs/category-taxonomy-template/

Dynamic Templates will allow you to create custom templates for your posts, pages and archives using your page builder of choice (WPBakery or Elementor – both supported by the theme). This provides you with full control over the design rather then replying on the default theme output which is going to be limited by the available customizer options. And as you could imagine if I just added options in the Customizer to change everything it would become very large and slow. Allowing customers to create custom templates using a page builder is much more efficient while providing the most customizability possible.

Regarding the image sizes, the medium-large and large sizes are core WordPress image sizes. These are controlled via Settings > Media. If defined these sizes are generated every time a new image is uploaded to your site, which is why it’s generally recommended to set all these values to 0 when first installing WordPress to keep your server “cleaner” without a bunch of extra image sizes.

What I would recommend doing for consistency is if you are displaying Staff members on a page to select the “staff_entry” image size this way you can always control it’s size globally (even if you’ve inserted multiple elements that display staff on various pages) via Theme Panel > Image Sizes.

I have a guide on Image Sizes with some added tips here: https://totalwptheme.com/docs/define-your-image-sizes/

Last, if you aren’t quite sure how a demo page works, such as the one you linked to, you can pass it through the Demo Inspector tool which will give you details and spit out the code (if it’s a page or template) so you can easily copy/paste into the WordPress editor. Example: https://totalwptheme.com/docs/demo-page-inspector/?url=https%3A%2F%2Ftotalwpthemedemo.com%2Fbase%2Fstaff-modal-popup%2F

If you inspect a more complex page that uses a dynamic template, custom cards or a custom footer the Demo Inspector will provide those details as well. For example: https://totalwptheme.com/docs/demo-page-inspector/?url=https%3A%2F%2Ftotalwpthemedemo.com%2Fbiz%2Fportfolio-item%2Fpaz-amor-y-cafe%2F

- AJ

AJ, wow! Thanks for your detailed response. It was very helpful and exactly what I had been looking for. That demo inspector is so handy!

Much appreciated! Tiffany

HI,

You are correct, because of how the Events Calendar plugin is coded it’s simply not possible to assign dynamic templates. You have to override the plugin’s template files via a child theme – https://theeventscalendar.com/knowledgebase/customizing-template-files-2/ – you can still use a dynamic template but you need to output the dynamic template content directly into the template file.

Additionally, the Events Calendar plugin had a bug that caused the global $post to become polluted so using core WordPress functions like get_post, get_the_ID, get_the_post_thumbnail, get_the_content…etc would break. All important functions when creating dynamic templates. I had reported the issue a while back on the plugin’s public forum but I can’t find my post now, so I’m not sure if the issue was ever resolved.

If you just need simple event listings I would recommend using my plugin instead:

• https://wordpress.org/plugins/just-events/
• https://totalwptheme.com/docs/just-events/

- AJ

Exactly

And by then the official Total 6.4 update should be out – some unexpected things came up, but I’m back on track and finishing up the update!

- AJ

Hi AJ

I have just emailed you

Got it.

- AJ