22305 comments found.
I’m preparing a website in which the menu is always mobile with option FullScreen Overlay. I have some primary menu item and submenus. Actually when you click on primary the submenu open down, pushing all the other items down. I need the submenu to open on the right side. Is it possible?
Hi,
The Full-Screen menu does not have the ability to open menu items to the right side, you would need to use custom CSS to modify how the menus are displayed. You would probably need to modify the design so that the menu is displayed to the left, this way if items open to the right there is enough room. Now, the biggest issue you are going to have and why these sorts of menus generally open down and not to the side is that the only way to display the items to the side (without complex JS) is using absolute position which means the window needs to be large enough to display the items on the side – which is likely not going to be the case on smaller devices such as phones. So you would probably want to wrap your custom CSS inside a media query so it only targets larger screens – or use advanced JS instead so when items are clicked it generates a new container with the sub-items which can be placed statically.
Example CSS using basic re-positioning the menu to the side.
.full-screen-overlay-nav-menu {
text-align: start;
width: 500px;
}
.full-screen-overlay-nav-menu li {
position:relative;
}
.full-screen-overlay-nav-menu ul ul {
position: absolute;
inset-inline-end: 0;
inset-block-start: 0;
}
Another concern you will have besides mobile support is that the theme’s menu by default doesn’t close items when others are opened (aka accordion effect) as that causes jumpiness on a vertical menu. So you may need to also add javascript to the site to close the open dropdowns when clicking on other dropdowns to prevent them from going on top of each-other.
It would probably be best though to locate a 3rd party plugin or script that works exactly how you want, then use the header builder – https://totalwptheme.com/docs/header-builder/ – to insert the custom menu.
And it would honestly be easier to use a custom script (even if you don’t want to use a 3rd party plugin) to register your own shortcode for use with the header builder, then trying to modify the default behaviour of the theme’s menu. For example:
- AJ
Hi AJ
I’m trying to add the “Proxima Nova Thin” font using the Font Manager: https://fonts.adobe.com/fonts/proxima-novaBut it is rendering on the site as more like a regular version, it is not “light” at all. Fiddling with the font weight settings – eg changing it to 100 – doesn’t change anything.
Wondering if I’ve missed something. (Site in dev so can;’t link to it, could open a ticket?)
Thanks
James
Hi James,
If you want to share the site privately you can open a ticket.
The way the typekit (adobe) fonts work, is basically you set it all up on Adobe – so you need to make sure to select the font weights you want to use.
Now, in your comment it looks like you are linking to “proxima-nova” not “proxima-nova-thin” – not sure if they are different fonts or not. But perhaps just want to load Proxima Nova and include only the thin (100) font weight to use on your site. If you do that, you will still need to define your font weight wherever you have defined your font. For example, if you are assigning this font to the whole site via Customize > Typography > Body, you will still need to change the font weight for your body font as well to match the font-weight you want to use on the site – just changing it on the Adobe end won’t work as you need to change it in the theme to tell the browser what font weight you want.
Now, if you inspect your site you should be able to locate the URL to your typekit CSS file (search for proxima and locate it in the head). You can copy and open that URL to see what font weights are being loaded via the @font-face declarations. This way you can confirm at least if the correct font weights are being loaded on the site.
- AJ
Hi AJ
Thanks, I worked it out. I had named the font “Proxima Nova Thin” in font manager when it should have been just “Proxima Nova”. Now, when I choose weight 100 it correctly loads “thin” – thank you !
However, before figuring it out I tried to open a ticket but saw this message:
“It looks like your support has expired so you do not have access to premium email based support. You can renew your support by purchasing a new standard license or renewing support.”
However I renewed my support on 12th April.
I probably won’t need to open a ticket as the support here is so good, but I wanted you to know I have an active support licence.
Thanks
James
Hi James,
Awesome, I’m glad it was an easy fix!
The support site does cache your licenses (to prevent constantly sending requests to the Envato API) so if you had logged into the site previously, you may just need to click the refresh button. I believe I put a refresh button after this notice, if not there is one on the license manager before the table on the right side – https://my.totalwptheme.com/license-manager/ – this will send the request to Envato to get the latest license data.
-AJ
Thanks – yes that worked.
Hi AJ
I’ve used the Meta element to output post categories in a Custom Card.
In this case, I have styled the categories in such a way the comma separator is not wanted.
How can I get rid of the commas?
Thanks
James
Hi James,
The Meta element is intended to display a comma separated list of terms.
You should use the Post Terms element instead, this will allow you to choose from various styles including buttons. And for more advanced displays use the new Term Cards element – if you wanted to display categories or other taxonomy cards in more advanced ways, with photos, excerpts, etc.
- AJ
Hiya AJ. I hope you’ve been well.
I run 2 websites using the LearnPress LMS plugin and after the recent WordPress 6.8 update, I’m getting a critical error on specific LearnPress pages only. https://thedronecoach.com/course/faa-part-107-practice-exams/ https://thedronecoach.com/course/I tested with Twenty Twenty-Two and the issue doesn’t appear so I’m hoping you might be able to take a look to see why this is happening.
I can log in as a student and access the course material okay, but the issue is just with those two LearnPress pages. I did try disabling all other plugins and the issue remained.
This website does not receive a lot of traffic so I’m leaving it with 6.8 installed so you take take a peek under the hood.
Cheers!
Frank
Hi Frank,
I setup a local site with LearnPress and WordPress 6.8 and I don’t get any errors on the courses. It doesn’t look too great, but I don’t have any errors: https://a.cl.ly/4guvym7O
Since your site is showing a generic error, this isn’t very helpful. So you will want to temporarily enable WP_Debug on the server – https://totalwptheme.com/docs/enabling-wp-debug/ – or if your server already has error logs (most of the top WordPress hosting lets you view your error logs via their admin) look at the server logs to see what the actual error is.
Once we know the actual error, it should be easy to troubleshoot.
Now, just because you test with a different theme doesn’t automatically mean it’s a theme issue. I’m more than happy to help, but I do want to mention this as it is a common misconception that if switching themes fixes the issue it means the error is caused by the theme. Sometimes the error could be located in your child theme for example, or perhaps the theme you switch to doesn’t make use of specific core functions which are actually causing the error.
- AJ
ps: I do see a few issues with the LearnPress plugin though – for example the main courses page returns an AJAX error so nothing displays. Also in the WP admin there is a notice to update the database, running the update doesn’t remove the notice – it’s constantly saying I have to update my database. These issues are happening with any theme I use.
As always AJ, your replies are not only helpful but educational as well. I will follow your recommendations and will get back to you.
And yes, regarding the LearnPress plugin, over the years, I’ve seen other coders with your level of knowledge state just how poorly their code is written. I’ve reported that update error to them a few months ago but they choose not to do anything about it. I also stopped using one of their recommended themes because they had provided over a dozen CSS snippets just to keep the theme working with the LP plugin. Really, really buggy!
Anyway, I digress. Time to troubleshoot. 
Cheers!
I know what I’m looking at, but I certainly have no idea how to interpret this information. Something about the [path] I surmise, likely pointing back to LearnPress.
Warning: Trying to access array offset on value of type null in /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/block-template.php on line 104
Deprecated: file_get_contents(): Passing null to parameter #1 ($filename) of type string is deprecated in /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/block-template.php on line 104
Fatal error: Uncaught ValueError: Path cannot be empty in /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/block-template.php:104 Stack trace: #0 /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/block-template.php(104): file_get_contents() #1 /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/template.php(66): locate_block_template() #2 /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/template.php(571): get_query_template() #3 /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/template-loader.php(81): get_single_template() #4 /home/u932491700/domains/thedronecoach.com/public_html/wp-blog-header.php(19): require_once(’/home/u93249170…’) #5 /home/u932491700/domains/thedronecoach.com/public_html/index.php(17): require(’/home/u93249170…’) #6 {main} thrown in /home/u932491700/domains/thedronecoach.com/public_html/wp-includes/block-template.php on line 104 There has been a critical error on this website.
I’m going to check to see if I should update to current or more recent PHP version as my server is still on 8.2.
Hi AJ,
I wanted to let you know that I added a line of code that I obtained from the LearnPress GitHub page and it corrected the problem. LearnPress will likely have an update.
Thank you as always for providing the BEST theme on the planet!
Happy Easter weekend!
Frank
Hi Frank,
I hope you had a nice weekend!
I’m glad you got the issue resolved, thank you for letting me know. Hopefully they patch the plugin sooner than later.
- AJ
Hi AJ. Yes, had some great time off and I hope you did as well. Have a great week! Frank
Hi AJ
Can you look at the mobile menu on this site https://shorturl.at/DwyqXIt’s the full screen overlay.
When a parent menu item is tapped, it reveals the child menu just fine, however I was expecting a further click on the parent menu item to collapse it – but it doesn’t.
Same goes for the mega menu “headings” – they expand but will not collapse.
Thanks
James
Hi James,
The issue is happening because the way this mobile menu is coded on first tap it opens the items and on second tab it goes to the link (if there is one). The way the theme determines if there is a link or not is by checking if the URL is a # symbol (which is generally used when you don’t want any links). On your site specifically there is no link at all in the code, the href attribute is no where to be found.
See here: https://a.cl.ly/o0ulDKPo
So your links are just an empty tag, which is also invalid HTML.
To fix edit these links and make sure they all are using a # symbol for the link. Additionally you can apply the theme’s class if wanted – https://totalwptheme.com/docs/adding-non-clickable-menu-links/ – this isn’t really needed anymore as the theme uses modern CSS that can detect if the link is a # symbol, but nevertheless it can be a good idea to tag these links with the added classname.
If adding the # symbol as your links for these menu items, doesn’t fix the issue let me know, but it should!
- AJ
Hi AJ
I wonder if I’ve encountered a bug.
Trying to use the “Toggle 1” card with a custom post type (set up using PTU), and nothing is output at all.
Using “Posts” as the query seems to work OK, but when trying a custom post type is outputs nothing.
Can you recreate this? If not the problem must be my end, and I will show you a test page or give you admin access via a ticket.
Thanks
James
Hi James,
This card style by default displays the post title and then the post content inside the toggle.
When you say “nothing is output at all” that makes me think the issue isn’t with the card style, but rather with the post type. Does any card style work? If not, most likely your post type isn’t public so it can’t be queried.
One common issue people have is that they enable the “Exclude from Search” option for their custom post type, which unfortunately also removes it from all custom queries. This has been a known issue for over a decade in WordPress – https://core.trac.wordpress.org/ticket/17592
So, if you can’t see your posts no matter what card style you use, first double check your post type settings to ensure the post type is public and that the exclude from search option isn’t enabled.
- AJ
Hi AJ
Using “Blog style 1” works fine, but “Toggle 1” fails. Here’s a test page with both cards on: https://shorturl.at/PDigO“Exclude from Search” is not enabled, so it’s not that.
Now, when you say “post content inside the toggle” ... these posts are made up entirely of ACF fields, there is no “normal” content and the default editor is turned off. I suppose I was expecting the excerpt to be revealed inside the toggle.
Unless there is an easy way I could ge that to work, I’ll rethink it. Do you think it can be achieved using Custom Cards?
Thanks
James
Hi James,
The toggle element displays the post content, not the post excerpt. So if your posts don’t have any content then nothing will show up. If you want to use the excerpt you can achieve this using a custom card – either by overriding the cards/toggle/toggle_1.php file via your child theme or making a custom card via Theme Panel > Custom Cards. If you make a custom card via the WP admin, you can use the theme’s dynamic variables – https://totalwptheme.com/docs/dynamic-variables/ – so you can use {{post_title}} for the toggle heading and {{post_excerpt}} for the toggle content. I believe I coded the toggle element to parse those variables but if it’s not working let me know.
- AJ
Hi AJ – i trust all is well?
Just a simple one for you. I’m using one of your templates as a table in this page: https://quantumleapgolf.com/draft-page/
At the top of each column is a star graphic. You’ll notice they are currently aligned to the left of the space. I would like them in the centre but there is no option to just centre the image (all the text centres as well when i use the only available setting) – is there a way to do that please?
Hi,
Looks like you are using the Icon Box element set to the “Top Icon” style – by default this style centers the icon (image). This style aligns the icon and the text in the same place. By default the aligment is in the center, but if you change the text alignment the icon will also move for consistency. Example video: https://a.cl.ly/JruYWAgO – so there isn’t any built-in option you can use to center align the icon/image but also left align the text.
You can add some custom CSS to your site to align the image by giving your icon boxes a unique classname and then targeting them like such:
.center-icon-box-image .vcex-icon-box-symbol{ text-align: center; }
Where “center-icon-box-image” is the class given to each icon box.
Or you can use the Teaser element instead, which is an i mage focused element and does have it’s own image alignment setting.
- AJ
ps: When inspecting the site code I see a bunch of data attributes added in your text – https://a.cl.ly/5zukyWdx – usually this is a sign that someone copied and pasted the content from somewhere else. I mention this, because it can be a huge security concern to do this. If you are copying and pasting from somewhere else, always paste it first into the “text” mode in the editor to ensure there isn’t any fishy code or paste it into a text editor (like Visual Studio) first.
Teaser element works perfect – thank you
re: the code, thanks for pointing that out too. I’ve been generating some of the copy with AI. I did notice this and did my best to remove it. Now you’ve told me the dangers, i’ve reviewed the whole site. Hopefully found and removed it all.
Thanks again AJ
Hi AJ! I have inherited a site to redesign and not too familiar with Total theme. I have a main menu with logo and would like the logo centered. I selected in Customise – Header – General – the nr5. Centered Inline Logo Style. But the logo is not centered. There are 4 menu items to the left of the logo and 2 to the other side. Could you please help me solve this?
Hi,
It’s very hard to know what’s going on without the URL, but I’m guessing what may be going on is your header also has other items such as the search icon, which the theme counts towards figuring out where the middle is.
You may need to use the setting under Customize > Header > General > Logo Position to enter a different number for the logo offset based on the specific menu setup.
Depending on the site you may also benefit from using the option at Customize > Header > Menu > Fill Space – which will make your menu items stretch to fill up the whole header.
Last, depending on what you need for the site you could also choose to instead create a custom header – https://totalwptheme.com/docs/header-builder/ – I have a sample centered logo pattern you could start with – https://totalwptheme.com/pattern/header-13/
If you create a custom header you will need to make 3 menus though (left menu, right menu, mobile menu) where the last basically contains all the items from the left/right menus.
But the custom header will give you a lot more control over item placements and adding custom content to the header.
- AJ
Thank you so much for your reply AJ. The URL is www.jennastorey.com I will try the fixes you suggested. Thank you.
The primary issue with the site, is that the theme is extremely outdated (multiple years outdated). You will want to make sure the Total theme is fully up to date – https://totalwptheme.com/docs/update-theme/
If your client doesn’t have their license registered on the site, they may need to purchase a new license and activate it so they can update. It’s very important to update the site, because this old version most likely isn’t compatible with latest versions of WordPress, PHP and could have bugs/security concerns.
Additionally, on this site the theme’s folder was renamed to “broodenbotter” – this prevents updates from working correctly. One should never rename a theme’s folder as it can break many things and there is no reason to.
So I would highly recommend first going to Theme Panel > Import/Export and copying the settings, then renaming the theme folder via FTP back to “Total”, then going back to the Import/Export panel and importing the site settings. This way the site will be setup correctly so it can receive proper updates and prevent other potential bugs.
- AJ
Thanks so much AJ. Yes, the original designer clearly left some problems that I have to sort out, obviously running deeper than I thought. Thank you for your help.
Coupon Discount on Checkout page – not working
NOT a major issue as i have always told people to apply the coupon at the basket stage before checkout and that works fine
fenori.co.uk
NOT Sure when it happened may have been from years ago , may have been from the start around 2020 ish I think i applied the coupons.
As the Checkout page seems to be influenced by the theme , i thought i would ask here first
I applied the coupon Discount facility to woocommenrce many years ago and its been working and still is except, NOT on the checkout page and may have been like this for years – not sure when i last tested that part of the process or if i ever did
On the basket page (which i have always told people to use) , there is an option to add a coupon code in a text box and then use a button to apply that discount to the basket. This works and my coupons only apply to the total basket price – all works well I have many codes for coupons and we have used quite a few.
Now when you then proceed to the checkout – it still applies and shows the discount ALL GOOD
BUT if you did NOT apply the discount code at the basket
On the checkout page it asks you the following
Have a coupon? Click here to enter your code
if you click on that line – then a Button appears
APPLY COUPON
BUT nowhere for you to enter the coupon code – no text box – just the button
there is also a login part at the top of the checkout page
Returning customer? Click here to login
That works and opens text boxes and buttons and they all work ok and i can login to be honest i have never tested that part of the page either until now
I’m happy for that coupon question to be removed from the checkout page and ONLY available at the basket page, OR for a text box to appear for a coupon code to be applied
if you have already applied a coupon at the Basket stage – then I would NOT want that question to be on the checkout page anyway
so probably better to remove it completely from my view
BUT if a theme thing , and you want to keep , then whatever you want the theme to do is fine , just need the text box to appear
Thanks one again
Hi,
What’s happening on your site is that the theme adds the following CSS:
.woocommerce-form-coupon p:first-child { display: none; }
Which was intended to hide the default description WooCommerce adds to the coupon form. Here is a video to show what I mean: https://a.cl.ly/4guvmAre
Now, WooCommerce removed this text and changed how the coupon form works in their 9.8.0 update which causes the issue.
I’ve already fixed this for the upcoming theme update.
If you want a temp fix add this CSS to your site:
.woocommerce-form-coupon p:first-child { display: block !important; }
So the issue would have happened when you updated to v 9.80 which came out a weekish ago.
I wasn’t aware of the problem since this change wasn’t mentioned in the WooCommerce changelog, but another customer reported it to me recently so it’s been patched. I plan to release Total 6.3 most likely tomorrow or the next day.
- AJ
brilliant , thanks AJ as always – I will wait for the new release to fix, as I’m also looking forward to seeing the error handling on the page too
Just a heads up…
Right now, I’m waiting on WPBakery as they are releasing an 8.4 update shortly and I want to be sure to fully test and include the updated WPBakery with this theme update. That way I don’t have to send out another update afterwards just for the WPBakery update. I try and not update so frequently as it can be a hassle constantly dealing with updates.
thanks aj, no rush for me. i see wordpress has an update as well now 6.8 – so i may do that first and test
There is 1 debug notice that I could see coming from WPBakery when updating to 6.8 – but it’s a warning, not an error so as long as you don’t have WP_Debug enabled (which you shouldn’t unless you are troubleshooting) there shouldn’t be any concerns updating WP – at least in terms of the theme and it’s supported plugins.
fantastic – updated yesterday 18th April and all good – look forward to the updated theme in the coming days – once WPbakery gets its update and you are happy to release the new theme update Thanks again for all the help and advice
I hope you had a nice weekend. WPBakery released it’s update and I’ve been fully testing it out (found one small CSS bug in their editor which I patched in the theme temporarily). The official Total 6.3 should be ready to download by tomorrow.
- AJ
thanks AJ , look forward to it , I see woocommerce has an update today -version 9.8.2 details , so i may leave that till after the theme update – once i get a FTP copy
Just pushed out Total 6.3.
And I reviewed the WooCommerce 9.8.2 changes and made sure no theme files required any updating.
- AJ
thanks again AJ – good to know -will update over coming days , lookforward to testing the missing fields handling on checkout & Coupon – Thanks
Hello AJ,
I have a problem with scrset functionality of images in a postcards grid. Hope you can help.
Situation is: I have a portfolio grid with postcards which uses responsive design. Standard is three columns, but it can be less on tablets and phones. The images I use, are larger than the max. dimensions of the grid elements, because I want to use them in another place on the website in higher dimensions. Because of this I use a srcset, which actually provides the sizes for the grid as well as for the larger use.
Problem is: The selection from the srcset only works correctly, if the grid is in its responsive 1-column-style. As soon as there are more columns, browsers unnecessarily load too large versions. The reason seams to be the 100vw in the sizes attribute, as it doesn’t reflect the column width.
sizes=”auto, (max-width: 1920px) 100vw, 1920px”
If I changed this manually in the dev tools to for instance 33vw for a 3-column layout, it works ok. So the question is, how can I make sure, no matter of the grid layout, the necessary image size is selected based on the column width and not on the viewport width?
You can check it here: http://s357715114.online.de/ Under Films -> Fiction you find 6 Test elements with the images named accordingly. Please ignore the other elements as some of them contain older images, which are not yet dimensioned and replaced for the new purpose.
The widths of the srcset are (all 16×9): thumbnail: 480px (for standard portfolio grid) medium: 960px (for retina portfolio grid) large: 1740px (retina use for the larger presentation)
Lazy load is activated.
Thank you!
Ben
Hi Ben,
The srcset functionality is actually a core WordPress function outside of whatever the theme is doing. Personally, I like disabling it so that my sites use the same images across all devices. Since my images are well optimized (I pass them through tinypng) this is not a concern at all. The theme has a built-in option to disable it via Theme Panel > Image Sizes.
Also, I don’t like to define any image cropping on the site as this creates unnecessary image sizes on the server which bloats up backups (so creating backups takes a lot longer and takes up much more space). I recently wrote a full guide on this if interested: https://www.wpexplorer.com/stop-wordpress-from-creating-extra-cropped-image-sizes/ – there are likely images being created on your site you aren’t aware of. I actually need to double check to ensure I’m doing this on the total demos (I had it on my todo list but can’t remember if I implemented the code yet).
You are correct about the WP implementation using vw units not being accurate as the width of the images is based on the columns they are located in and not necessarily the viewport. Having the image srcset based on the column width would literally impossible to do without advanced Javascript. You would need to set up the site so none of the images load when the site loads (or load the smallest one) and then use javascript to dynamically add the images based on the widths of their parent container. Which is a terrible solution for many reasons and I would never recommend it (not hard to do though – chatGPT could probably spit out the code for you if you really wanted this).
Now, you could add some custom code to your site to modify the WordPress sizes attribute – https://developer.wordpress.org/reference/functions/wp_calculate_image_sizes/ – but in order to target your specific grid, you will need to make sure the grid uses a specific image size (not custom, but a defined/named image size) so that you can target that specific image. Or you will need to apply the filter on the wpex_hook_post_cards_loop_before loop (so you can check to see what post cards element is being shown) and then remove the filter on the wpex_hook_post_cards_loop_after hook – this way your code will only apply to the post cards element you want it to apply to.
Remember also that some devices, even though the screen is smaller should actually have larger images (aka Retina) – which is another reason I prefer not messing with srcset and uploading large enough images that are pre-optimizes prior to upload that will simply look good on all devices while being as small as possible. If you were to take a photo from your site for example this one – http://s357715114.online.de/wp-content/uploads/2025/04/Test_1.jpg – it is 242kb and a smaller variation – http://s357715114.online.de/wp-content/uploads/2025/04/Test_1-960x540.jpg – is 85kb. The original image is 2088×117, which is quite large and perhaps not really needed to be this large. If I were to resize it to 1500px width then optimize it, the image will only be 93kb – https://a.cl.ly/jkuByNlj – which is really quite small for an image and will load quickly on all devices, while still looking good on retina. Then you don’t have to have all these extra images cropped on your servers and slim down the html and rendering but not needing srcset attributes.
- AJ
Hi AJ!
Hey, it looks like for some reason the Total Theme Changelog (https://totalwptheme.com/docs/changelog/) is only showing up through version 5.19 as the “Latest Version” (screenshot: https://share.zight.com/GGu90qmL) but the latest here in April 2025 is actually 6.2.
It is possible to view individual versions of the theme using the naming/URL convention you’ve established (i.e. https://totalwptheme.com/docs/changelog/6-1/ or https://totalwptheme.com/docs/changelog/6-2/) but would still be nice to have the main Changelog page have the 6.x versions on there for all Total Users!
Just wanted to give you a heads up on that in case it was/is an easy fix! Thanks as always for documenting everything so well!
No expectation on a reply.
Thanks, AJ!
Hi,
I’m not having the issue, it sounds like your browser may have cached the full site HTML – please try clearing your cache.
- AJ
Hi AJ,
Old cache (somehow) is totally what it was!
Please forgive me for taking up your time to leave a comment – if I could delete my comment (a false alarm) I would! Thanks for your patience and quick reply.
I hope you are doing well, and I’m so happy to see Total still getting such great support and updates after all of these years! Not only one of the best themes on Themeforest, but without a doubt the best support experience you could ask for.
Thank you, AJ!
What browser do you use? I’ve never had this sort of issue myself (with the full page being cached) – I wonder if it’s a browser specific thing and want to look into a bit further to see if I can add something to the server to prevent this. Thanks!
- AJ
This was in Chrome, believe it or not. Not sure how or why (even after a refresh) it kept showing it, but once I cleared the cache, it came up as normal. Thanks for caring about even a little thing like this!
Just wanted to let you know, that it turned out I had a setting enabled in WPEngine that was telling the browser to cache the HTML for 6 months! I disabled the option so now it’s only cached for 10 minutes.
So thank you for bringing this to my attention!
- AJ
Hi AJ – so glad to hear this was actually helpful after all! Great work on all you are doing with Total, and thank you so much for caring about our experience with it on all levels! No expectation on a reply! Thanks, AJ!
Dear, I have a topbar with content+social and all translated through WPML. I translated all but not the social links, I cannot find theme anywhere. Also I checked in String Stranslation but I cannot find the position. Can you help me forward?
Hi,
This is AJ the theme author.
The theme doesn’t register the social links for translation, I guess I always assumed companies use the same social media profiles for their companies instead of making new ones for different languages.
I just tried registering the Social Profiles for WPML, the problem is that this option is saved as an array and the function used to register custom strings only allows strings. I can’t locate anywhere in the WPML docs a method to register arrays for translations, so I don’t know if it’s possible.
One thought I had was that you could go to Theme Panel > Dynamic Templates and add a new template “part” and insert the social profiles element. Then you can use the shortcode for this template in the customizer for the social alternative field. I made a video to show you how this would work: https://a.cl.ly/mXu47EqA
Unfortunately, I checked and I haven’t made the social profiles element translatable either, so this will require editing the file at Total/wpml-config.php (which I already did for the next update) to add the following:
<shortcode>
<tag>vcex_social_links</tag>
<attributes>
<attribute type="area" encoding="urlencoded_json">social_links</attribute>
</attributes>
</shortcode>
This would be added where other <shortcodes> are registered, you can add it after the last one.
The problem is that the translation looks like this in WPML – https://a.cl.ly/llubwzZL – It looks like I will need to add custom code for each shortcode that has a repeater field to properly support WPML like this: https://wpml.org/documentation/support/translating-urlencoded-shortcodes/ – I will do this in the next update. I wasn’t aware that WPML didn’t handle these fields automatically, so thank you for bringing this to my attention.
I should have the next update finished and available by the end of the week (there are a few more features I need to finish first). So that you can easily translate the social links element.
For the meantime what you can do (if you update the wpml-config.php so you can translate the social links element) is copy and paste the text into chatGPT so it can format it for you, then you can edit it and then have chatGPT re-format it, so you can update it in WPML. Example video: https://a.cl.ly/Kou5QLAN – I know this is a hassle but it will work for the meantime. I don’t understand why WPML doesn’t offer an easy UI for url encoded strings…
- AJ
Actually I tried following the WPML guide – https://wpml.org/documentation/support/translating-urlencoded-shortcodes/ – and it doesn’t seem to work, perhaps this only worked with their older plugin version. I did a full search in the plugin files for the suggested filters “wpml_pb_shortcode_encode” and “wpml_pb_shortcode_decode” – and they don’t even exist in the code either. I will need to contact them to see if it’s even possible anymore to render urlencoded values in an easy to translate format.
ps: I wanted to let you know I managed to get the repeater fields in various theme elements working correctly with WPML, their docs were not clear enough so I had to dig through their code to figure out the proper way of doing it. So in the upcoming theme update, these elements can be easily translated like such: https://a.cl.ly/7KulRnZA – this will make it a lot easier to translate the Steps, Animated Text, Social Links and Menu Item elements.
So again, thank you for bringing this issue to my attention!
I’m still looking to see if it’s at all possible to translate the customizer social links as well, no luck so far – just digging through their plugin code.
Hi AJ
I have a site where some images don’t load properly (observed in Chrome – Windows, not tested on other browsers).
For example, on this page: https://shorturl.at/s6Wk4
Sometimes (not always) one of the card images does not show, see screenshot here: https://ibb.co/HTq4WNL7Simply defocusing and then refocusing the browser makes the image appear. So it has been downloaded I think, but something it causing it not to appear.
I suspect this is something to do with the “Fade in” animation I have on the site’s rows, or maybe the fade animation I used between pages, or lazy load?
Any thoughts?
Thanks
James
Hi James,
FadeIn animations or lazy load wouldn’t cause this, in your screenshot also you can clearly see images next to the one missing which are inside the same fadein animation. Plus, if it was an issue with one of these functions the image would always be missing, not sometimes – as the function works the same every time you refresh the page.
More likely what’s happening is the requested image is not being returned by the server.
The only way to know would be if you notice the image is missing, to open the browser console and see if there are any errors. If the image is not returned by the server it will show up as an error in the console.
I tried refreshing the page many times with caching disabled and couldn’t recreate the issue.
Perhaps the server was just having some issues and it’s fine now?
- AJ
ps: It actually looks like you have lazy load disabled on your site (perhaps you disabled it to test? I really recommend enabling it, under Theme Panel > Image Sizes > Lazy Loading). The lazy loading in the theme is just the native browser lazy loading, so it doesn’t use javascript or anything that would cause issues. If there is an issue that would be a bug in the browser itself, but it would likely cause all images on the page to not display if that’s the case.
After replying, I kept refreshing and sure enough I was able to replicate the issue (in Chrome) but as soon as I open the console to inspect, the image shows up. This would imply there is a rendering issue in the browser.
I suspect, this may likely be related to the decoding=”async” attribute added by WordPress a while back to all images. This tells the browser that it can load other content on the site before the image has finished decoding. It’s possible that the image doesn’t get decoded in time for the initial render. Which would explain why opening the browser console causes the image to show up, since it forces a re-paint.
If the issue happens only with specific images (from me sitting here refreshing over and over, it does seem to be the same couple images) – perhaps the images have some issues with their encoding. Maybe reformatting and uploading the images could help.
You can also try disabling async on the site to see if my guess is right. I wrote an article on how to do this with code if you want to take a look – https://www.wpexplorer.com/remove-async-decoding-wordpress-images/ – rather then using a plugin.
- AJ
ps: I guess it could potentially be a conflict with the way the browser decodes async images and the fact that they are hidden on page load and fadeIn. Maybe this causes the browser to now re-paint them when they finish decoding – but I’m not able to find anything online about that. Personally, I find animating content to be extremely annoying and I don’t think any site should use it – it also requires added scripts including jQuery and listening to scroll events which slows down your site and lowers your page speed score without a real benefit to the end user. You could also try disabling the animations and see if that helps.
Hi AJ, hope you are well. I’m trying to create a custom header (custom header is a very cool feature) like this: https://www.hygeiaivf.gr/en/. I created a dynamic template with a row, and in the middle I have a Navigation Bar element. I’m using Polylang for translation and I saw that the plugin options are not working well with the element. I select “Displays as a dropdown” for Polylang in menu, but Navigation Bar shows all languages horizontally. Of course, it’s not an element’s fault, but is there a way to display it like on the website I mentioned ?
Oh, sorry…. I didn’t see this: https://totalwptheme.com/docs/language-switcher-topbar/
This shortcode [polylang_switcher dropdown=true show_flags=true show_names=true] does not display the flags. Generally, it doesn’t display the flags if you use dropdown.
Hi,
You mentioned the navigation bar, this is an older element which uses custom code rather than the WordPress wp_nav_menu function, so plugins that hook into the WordPress Menu won’t work.
Last year I released a new Horizontal Menu element with much more options and an Off-Canvas menu element – https://totalwptheme.com/elements/horizontal-menu/ – I’ve updated the custom header docs recently – https://totalwptheme.com/docs/header-builder/ – these new elements do use the WordPress core menu function with custom walkers, which means that plugins that auto insert code into the menu should be able to auto insert their code into these elements (if that’s what you want).
In terms of the shortcode, it uses the Polylang pll_the_languages() function – https://polylang.pro/doc/function-reference/ – the theme just passes your parameters to the plugin’s code. I just tested the shortcode and I can confirm that the dropdown won’t show any flags, because the plugin displays a standard HTML select element which doesn’t allow anything but text 
Now, I tested with the new Horizontal Menu and Off Canvas Menu elements and the Polylang items get added correctly, unfortunately there is an issue. This is that Polylang filters the value of the menu item title and inserts SVG’s – these get stripped out by the security checks in the theme.
I actually decided to code the theme’s Horizontal Menu and Off-Canvas elements in a way that excludes certain hooks to prevent issues with 3rd party plugins breaking the layout – but I may have to adjust things a bit to allow plugins like Polylang to work correctly, while also preventing issues. It’s going to be a bit complicated but I think it should be possible.
If you want shoot me a direct email to wpexplorer [at] gmail dot com and I can send you the updated Total Theme Core plugin when ready with the edits (if possible). Would be ideal for plugins like WPML and Polylang to work with the horizontal and off canvas menus.
- AJ
Here’s what I decided to do…
To prevent any potential conflicts with customers updating, I added a new on/off switch to the Horizontal Menu and Off-Canvas menu elements so you can enable the core WordPress hooks.
This way you can display the polylang dropdown correctly. I recorded a video to show you: https://a.cl.ly/nOurYL47
But honestly the Polylang dropdown is a bit ugly (the icons are very small and blurry) – perhaps there is a better solution to this…
Anyway, if you want the updated Total Theme Core plugin with these changes shoot me that email and I can send it over so you don’t have to wait for an official theme update.
I wanted to also mention again, that displaying the polylang dropdown will be impossible for the Navigation Bar element so you will need to switch to the new Horizontal Menu and Off-Canvas Menu elements (the later if you want the menu to change on mobile).
- AJ
Sorry for all the replies, but I wanted to keep you posted!
I was testing with the labels next to the flags, which looks better and I had to make some additional tweaks so it would work well with the theme. I recorded a video showing you both the polylang flags on the horizontal and off-canvas elements so you can see the results: https://a.cl.ly/llubz8Z0 (I just made the row that’s intended for mobile visible always so I can easily show both in the video without changing browser width).
Anyway, thank you for bringing this issue to my attention, I am sure many customers will like these changes!
- AJ
Здравствуйте. Была куплена тема Total. Устанавливается пустая без какого-либо шаблона. Как выбрать например внешний вид как у Total Flat? Вот одна из тем, а как её выбрать, не понятно https://totalwpthemedemo.com/flat/
Hello. The Total theme was purchased. An empty one is installed without any template. How can I choose, for example, the appearance of Total Flat? Here is one of the themes, but how to choose it is not clear https://totalwpthemedemo.com/flat/
Please see the docs here: https://totalwptheme.com/docs/importing-sample-data/
Hi, I updated 5.5 to the current version, and updated all plugins – after that all animations stopped working – neither carousels nor any other appearing elements. You can look at https://scientific-tools.org/, the post scrolling is only manual.
Please could you suggest how to fix this and turn on animation to work?
Hi,
This is Aj the theme author.
The carousels and animations are working for me: https://a.cl.ly/L1ulzo2Y
Your site does have proper cache busting, so it shouldn’t be a caching issue, but perhaps you needed to clear your caching plugin and you’ve done so and now it’s all working?
Can you confirm if you are still having issues and if so, can you try clearing your browser cache?
- AJ
Thanks for checking!
The situation is unclear. There is no animation on one computer and 3 different browsers (also in incognito mode that prevent any cashing), even after several cleanings of WP cashing plugin cash. On your video and on my mobile phone the animation is active.
I am not sure but may be there is some problem in how elements are rendering in bootstrap or other libraries. Because if on the computer with no animation I open incognito browser window (to avoid any cashing) and reduce its width to simulate small screen (like on mobile phone), the menu collapses to “three lines” as usual. But the animated elements behave abnormally – I describe this below comparing the appearance on mobile phone screen (where animation works) and on computer (where animation does not work) with narrow width browser window. 1. On mobile phone screen the first slider with services pictures is situated below initial text. On narrow window computer browser the first slider with services pictures is hidden completely and is not shown below initial text; but the arrows for the animation are visible over the initial text on the left and right https://ibb.co/svX9HMCf 2. On mobile phone screen the “News and updates” and “Case studies” sections contain only one post card. On computer narrow window there are two post cards visible https://ibb.co/ynpHPRQx
Dragging window size to wider dynamically change the page layout, but with no active animation.
Please could you check the reasons for this problem and suggest how to resolve it?
Hi,
Ah, ok. I am able to replicate the issue with shrinking the browser window. Ex: https://a.cl.ly/eDupx24Q
The problem is that your first column has been edited so it has a custom width on mobile but the second column hasn’t been edited to match, which causes an issue with floats. If we remove the custom column width for mobile you can see it works: https://a.cl.ly/kpurYBdQ (your server seems to load images very slowly and I often see HTTP/2 errors in the console with images that fail to load).
To fix the issue you want to edit the first column and under responsive settings remove any custom width for small screens – https://a.cl.ly/12um19D4 (one of your settings is currently set to 1/1 – 12 columns).
Whenever you modify the column width at a different screen size, WPBakery makes the column float as it assumes you will be adjusting all the columns to do the same and make them fit on a single line. Although technically, this could be a considered a bug because you’ve set the width to 100% which shouldn’t ever float – but you should also not ever need to set it to 100% on mobile as that’s the default behaviour. I will pass this on to the WPBakery team, to ensure they are not setting a float on the .vc_col-xs-12 class (which is 100% width).
- AJ
Thanks a lot for your detailed responses, and sorry for the delayed reply. I checked column settings, and they are exactly as you indicated at the screenshot. I also cleaned cash, with no effect.
The most relevant issue is lack of animation when I load any page in different browsers – while in your videos the animation is present. In the internal code there is seems no any settings of specific width or settings that impede animation (here is an example of a row): date=”false” excerpt_length=”40” read_more=”true” readmore_rarr=”true” arrows_position=”abs” auto_play=”true” img_border_radius=”rounded-xs” header=”News and updates” include_categories=”52” content_heading_color=”#000000” items=”2” tablet_items=”2” arrows_style=”border” img_hover_style=”vertical-pan”]/vc_column The whole code is surrounded by
– wonder whether it could have any effect on animation?The problem with lack of animation on my computer appeared when I updated 5.5 to the current version. May be there was some change in the slider code that is responsible for the issue?
Please could you suggest how to restore the animation in sliders in order it will be animated on all devices?
Hi,
In one of the most recent updates I added some code to prevent animations when the user has set “Reduced Animation” on their computer. This is an accessibility fix so that the theme respects the user’s preferences. I wonder if perhaps this is the issue you are having, since animations work for me in all browsers when I check your site.
Can you check your computer so see if you have reduced animations enabled?
Instructions for PC:
- Open Settings (Windows + I)
- Go to Accessibility > Visual effects
- Toggle “Animation effects” to On
Instructions for MAC:
- Click the Apple menu > System Settings (or System Preferences on older macOS)
- Go to Accessibility > Display
- Turn off “Reduce motion”
- AJ
Indeed, the absence of animation depends on Windows settings. Congratulations to such high level of accessibility of the theme! Thanks a lot for all you replies and explanations!
Glad it was an easy fix 
Hey AJ, I’ve been trying to figure out how to use the Post Cards system to display items based on ACF fields. I have entered in the ACF Field Key into the Query Type > Custom Field but it does not work (nothing is displayed). I’m assuming the issue is the formatting of my query but I can’t seem to find any information on the Total documentation that outlines how to format the query correctly.
Ideally I’d like to have the Post Card system display a specific set of items based on 1, or even 2 separate ACF fields (if possible). I currently have this working using custom made post categories as a workaround, but that’s inelegant and cumbersome.
I’m building a website that showcases products that are categorized by both Product Type and Style. And the output of the cards will vary based on those two items.
Thanks!
Hi,
When you use the Query Type > Custom Field what it will do is look for an ACF relationship or post object field to display the posts defined in that field. This is to display related posts to the current post – https://totalwptheme.com/docs/related-items-dynamic-template/ – primarily to be used in a dynamic template – https://totalwptheme.com/docs/dynamic-templates/ – the Custom Field query type can also query custom fields assigned to taxonomies for custom archive templates.
If what you want is to query posts that contain specific fields you would use the advanced query – https://totalwptheme.com/docs/advanced-query-setting/ – simply follow the WP_Query guide to create your string – https://developer.wordpress.org/reference/classes/wp_query/
For example, if you want to query a “property” post type that has the custom field “state” and the value “nevada” you would do so like this:
posts_per_page=20&post_type=property&meta_query[0][key]=state&meta_query[0][value]=nevada
Querying posts via custom fields is something a lot of sites do, let me look into adding a repeater field to the Post Cards element so you can define a meta query. I put this on my todo list for 6.3.
- AJ
Thanks so much AJ, that’s super helpful.
I’ve gotten the page to show posts now, but it’s still not quite right. I need to show posts that satisfy two variables at the same time… the code below only shows posts based on the last meta_query (porcelain from the code below). I need to show ‘products’ that are ‘pavers’ AND made of ‘porcelain’. Right now it is showing all ‘products’ made of ‘porcelain’
I’ve gone through a ton of documentation but I’m not understanding how this should be formatted with multiple queries, nothing seems to work.
posts_per_page=20&post_type=product&orderby=title&meta_query0=product&meta_query0=paver&meta_query0=material&meta_query0=porcelain
Am I missing something?
Actually I think I figured it out… I changed the [0] used in the second meta_query to [1] and that seemed to work. Does that make sense?
posts_per_page=200&post_type=product&orderby=title&meta_query[0][key]=product&meta_query[0][value]=paver&meta_query[1][key]=material&meta_query[1][value]=porcelain
Hi,
Exactly!
Basically you are just creating a query as per the WP docs – https://developer.wordpress.org/reference/classes/wp_query/#custom-field-post-meta-parameters – but because you can’t insert PHP (for security reasons) inside shortcode fields, the array needs to be formatted as a string. When you use the brackets like [0] this would be for the first array and [1] would be a second array.
If you know how to write the WP_Query args as a PHP array but not sure how to convert it to a string, you can actually just ask ChatGTP to do so. I just tested and it works, the text I used was “Provide a query url for this php array” and pasted the array I wanted for me query args.
I mentioned this in my last email, I have added on my todo list to create some sort of method for easily adding a meta query via some advanced field. I’m still thinking about the best way to code this though as it’s complex, especially if I want to support multiple fields and field groups (for example, if you wanted to query posts that have product = paver, material = porcelain and also exclude posts that have rating less than 5 – or whatever…). I really don’t know how I will make it possible for users to define their meta query, so if you have any ideas please share, thank you! I tried looking at the Gutenberg Query Loop block to see if they support custom fields and how they do it, but they don’t support it, probably because it is so complex to come up with a UI for this…
- AJ
Yeah, your instructions in the Total documentation sent me in the right direction, I just wasn’t familiar with writing query arguments. But ChatGPT gave me some hints and I got it sorted out.
You’re right that this is complex. The only comparable thing I’ve seen is how Gravity Forms allows you to create Conditional Logic. You specify And / OR and what fields equal what values. It’s very simple but also very powerful. There’s a link below.
https://docs.gravityforms.com/enable-conditional-logic/Thanks for the link to GF.
The main issue is integrating it into a block/shortcode without causing too much added bloat. I think most customers won’t need multiple AND/OR queries, so I think what I will do is have an on/off switch to enable a Meta Query, then a repeater field to add each meta query. So you can only have a single AND or OR statement – this will keep things not super bloated and work for most customers. Anyone needing something much more complex can then use an advanced query or callback function.
- AJ
Hey AJ, I have one more question. I’m trying to integrate the Search & Filter plugin with the Post Cards feature. I found a reference to this plugin in the Total documentation (that’s why I tried it out) but can’t find any other mention of it in the docs. I’m just not sure how to get the Post Card grid to display the items from the search Search & Filter query. I’ve tried all of the query options but nothing seems to work. I know I’m missing something but I don’t even know where to start looking. Thanks!
Hi,
So it looks like this plugin may have changed how it works more recently – I wasn’t aware.
If you are using the Free version you can’t filter the Post Cards element if it’s on a standard page as the filter only redirects to archives. So it would be used on a sidebar displayed on categories/tags and the post cards element would be added in the category/tag dynamic template – https://totalwptheme.com/docs/category-taxonomy-template/
If you want to use that plugin to filter a custom grid you would need the pro version, here are their docs – https://searchandfilter.com/documentation/custom-query-integration/
So all you need to do is use the Advanced Query Type in the Post Cards to define the search_filter_query_id={ID} parameter, where ID is the custom filter ID. I don’t currently have access to the premium version, but my guess is that the ID would be displayed somewhere in the admin for easy reference.
The pro version used to be much cheaper and was a single fee (not yearly renewals). So I will likely not recommend it anymore, although it should work and it’s likely still a great solution. But I will see if there are any other free or cheaper alternatives out there. Of course FacetWP is another awesome filtering plugin, but it’s very pricey.
Of course depending what you want, coding a custom filter using the theme’s built-in script is quite simple – https://totalwptheme.com/docs/snippets/advanced-ajax-filter-example/
- AJ
ps: I’ve added the new Meta Query settings for the upcoming 6.3 update, this is what it will look like in WPBakery if interested (also supported in Elementor – just looks different): https://a.cl.ly/8LuE7E1D
Thanks so much AJ, stellar support as always. I managed to sort this out through a lot of trial and error. Just wanted to give you a heads-up if anyone else has a similar issue, the query formatting has changed. The query that worked in the Post Card element was search_filter_query_id=1. The query format you mentioned above is probably from the old version of the software. There’s no proper documentation for the new version yet so it was only through trial & error that I finally got it to work. Thank you again!
Glad you figured that out. Thank you for sharing!
- AJ
hi how can i create icon boxes as a carousel in mobile
This is Aj the theme author.
There isn’t a built-in way to convert a section (like icon boxes) into a carousel and it would not be recommended at all. Carousels require extra scripts (CSS and JS) which slow down the page, and the most important thing for mobile devices is to keep your site fast. So converting a non carousel section into a carousel is very inefficient and not recommended for speed or SEO.
Now, if you really need to do this it’s only possible by using the Post Cards element. You would need to add a post type for your icon boxes – https://totalwptheme.com/docs/adding-custom-post-types/ – see the section this article – https://totalwptheme.com/docs/total-theme-cards/ – named “Using Theme Cards for Icon Boxes/Features/Services”
Then when you insert your Post Cards element you can select a carousel. If you only are showing a single row of icon boxes it will hide the carousel arrows on desktop. Example: https://a.cl.ly/E0uB89kW
In general carousels are not good for websites, I wrote an article about this if you are interested: https://totalwptheme.com/docs/why-you-shouldnt-be-using-carousels-on-your-website/
- AJ
Hello and thank you for your excellent work.
I’m having trouble translating some parts of the theme for my store into French. For example, in the mobile menu, my shopping cart displays the word ITEM instead of PRODUIT in French.
I can’t figure out how to translate this. Can you tell me where I can translate all the Woocommerce related elements of the theme please?
Thanks in advance 
Hi,
This is AJ the theme author.
To translate the theme and plugins you have 2 options:
1) You can manually translate the .POT files in the theme and plugins and add them to your server. This is more advanced and requires knowledge on how to do this. It will require using a translation plugin like POEDIT and adding files to your server.
2) Using a translation plugin. I recommend loco translate: https://wordpress.org/plugins/loco-translate/ – this is one of the most popular plugins, but there are many other you can use.
For the shopping cart “item” specifically, this is a word added by the theme. By default when you use the default theme header with the cart added inside the menu, it will add this to the mobile menu. You could also change how your site works so that the cart is not added inside the mobile menu like that. Instead you could display the cart in the header. For example this demo: https://totalwpthemedemo.com/bolt/ – this is done by using one of the newer “Flex Header” styles – https://totalwptheme.com/docs/header-styles/ – disabling the cart from the menu and inserting it manually in the aside area like such: https://a.cl.ly/o0ulj6pN
I mention this, in case you do prefer to switch the design and have the icon added in the header on mobile (it generally will work better).
You could also switch to using the Header Builder which will allow this as well and much more control over the header design in general – https://totalwptheme.com/docs/header-builder/
- AJ
I can use Flex but the only option is left side, no center and more… How to customise this flex header please ?
Hi,
There are various styles for the Flex header (left, right, center, etc) you can choose from: https://totalwptheme.com/docs/wp-content/uploads/sites/51/2015/02/total-flex-header-styles.png
If you want complete control over your header though, you will want to use the Header Builder as I mentioned previously: https://totalwptheme.com/docs/header-builder/ – this will allow you to design your own header exactly how you want it.
- AJ
Hi AJ
This is about Post Types Unlimited.
When creating a new Post Type, the “name” field auto-populates based on the title.
The field caption says “cannot contain underscores” yet the auto-population adds underscores if there was a space in the title.
Should I be amending any underscores? Nothing bad seems to happen if I leave them in.
Thanks
James
Hi James,
I had copied that description from the WordPress register_post_type function documentation which is outdated. Underscores are allowed. I will update the plugin as it should read “Must not exceed 20 characters and may only contain lowercase alphanumeric characters, dashes, and underscores”.
Thanks for the heads up!
- AJ