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!

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 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,

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

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,

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

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

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

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 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

Hi Alice,

Sorry I’m not quite understanding what you mean by “This also happens with just a simple shortcode for the current day” – are you saying that WordPress is not returning the correct time zone?

In the Post Cards Query specifically the “today” dynamic variable is converted to a date using:

date( 'Ymd' )

Which is just a standard PHP function so if it’s not returning the correct date based on your time zone this would imply that it’s not set correctly in the PHP on the server.

How did you set the time zone on the server?

Can you try perhaps using this snippet in your child theme functions.php file or code snippet plugin:

add_action( 'init',  function() {
    date_default_timezone_set( wp_timezone_string() );
} );

Or is that what you did?

If you recently made the changes it’s possible, the query is cached on your server. For example if you are using WPEngine you would need to clear the object cache after changing the time zone.

- AJ

thats fixed it and i can see the code in the script now on view page source – and realtime analytics picking up my pages now

interesting it stopped or reduced from about 70+ to 6 on 2nd april …... i’m sure i would have added the code into the theme panel in the past Anyway – see what happens now

Hi,

For Google analytics you can also use the field in the Theme Panel – https://totalwptheme.com/docs/google-analytics-tracking/

Server issues should not effect Google Analytics.

Site Kit adds analytics to your WP dashboard so it’s going to run extra code on your server. I would recommend not using a plugin like this and just adding your tracking code to the site then logging into the official Google analytics site to view the statistics.

Remember though, that Google Analytics requires cookie consent now for most countries – so if you do plan on adding Google analytics to your site you really should implement a proper cookie notice banner on the site and only track users that consent.

From my experience most users were not consenting to tracking on my sites so I decided to just remove all tracking and cookie notices, because it’s fairly useless to track a tiny portion of visitors. A lot of websites simply insert the tracking code and don’t care about consent, but I think it’s important.

Depending on your site, I may recommend you just don’t track your users completely – are you actually using the tracking data to make improvements and manage your marketing? Or are you just looking for curiosity?

I find that using Google Search console is more important, this way I’m tracking what pages rank on Google and the visitors I’m getting from search results – for me, this is more important and doesn’t require any tracking or user consent because it’s just data from Google.

- AJ

Thanks for the continued support

more just curiosity and a little marketing , to see where people come from – so if we post instagram and facebook posts – does that impact volume – what landing pages people use , I did have a lot of domains forwarded and pages for the domains – so i could see the number of users from those pages. – but did not renew most of those last year again based on some of the google landing pages off the analytics page reports

Where people come from geography mainly country – sources like facebook, instagram, search, direct etc

would like to see ranking of pages – but dont know how

I use the https://analytics.google.com website and run reports on timescales and also download csv to view and manipulate in excel

Not interested in the customer journey on the website , so dont need to track specific users , just use the stats off google webpage – so as you say cookies should not be

But i did plan to look into the cookie consent a bit further, as i only saw the need for consent last week, which would make it pointless as people now are more aware of cookies and often do not consent – thats anecdotal, speaking to various people , as i still do a little training for silver surfers , so you have confirmed that

I did remove site kit and use the theme panel as you linked – i’m sure i did that in the past as well

I opened up google counsel and i have seen this before and its working for my website – so I will look further into that information

Thanks again for the continued support and advice

Hi James,

The space you are seeing is because your image is simply not large enough to fill the whole column. You should be seeing the after image in the space on the right like these examples: https://totalwptheme.com/elements/before-after/

The best fix would be to make your images larger so they fill up the column or make the column smaller. The Before/After image element renders at 100% of the width of the parent. Or you can define a custom width for it if needed: https://a.cl.ly/9ZuOPxNm

Of course you can remove the overlay via the Overlay tab and turn off the “Overlay on Hover” option. This way you only see the images without the hover effect.

- AJ

Great – thanks!

Update: AJ, I have done some testing and I think I can get the result my client wants by using checkboxes, so I can manage without radio buttons. Thanks anyway, C.

Hi Charlie,

The AJAX script doesn’t currently have support for radio buttons. But if you really need them, what you can do is add a hidden input below the radio buttons and a little javascript so when the radio buttons are clicked it changes the value of the hidden input. I can provide an example if needed, let me know!

- AJ

Where are you adding the shortcode?

If you add it to your post it should work just fine, but you could have issues if you are trying to add it inside the Gutenberg query loop, because Gutenberg doesn’t use a standard loop the theme’s element cant properly locate the current ID (known Gutenberg issue).

Let me test it out inside a Gutenberg loop and see if I can update it to work inside a Gutenberg loop or custom card and if so, I can send you the updated Total Theme Core plugin with the fix.

- AJ

I tested the shortcode inside the Query Loop and I can see it’s displaying the category for the current page/post and not for the post in the loop.

There is indeed a known issue with WordPress and the function to retrieve the current ID, the problem is that WordPress parses shortcodes before blocks. Unfortunately there is no way around this or fix. The only way to make it work would be fore me to convert the Post Terms element into a block so it can be used as a block instead of a shortcode.

I do have plans to make more of the theme’s elements available as blocks (as I mentioned previously). I will look into making this element a block so that you can use it in the Query Loop. Are there any other theme elements that you think would be good to have in Gutenberg – https://totalwptheme.com/elements/

Very few customers use Gutenberg for their main pages, dynamic templates and custom cards. Most customers use WPBakery or Elementor, which are better for creating advanced pages and they use Gutenberg only for their posts which don’t require advanced building functions.

- AJ

Ok, I’ve understand. I hope you can insert an alternative solution in the next theme update

Also, when setting a password for a post, the word “Protected:” will appear. I want to ask if it is possible to hide the word “Protected:” in the post title?

Hi,

This is AJ the theme author.

Unfortunately there is no built-in way to display the pagination when there is only one page. Total uses the core WordPress function for the pagination – https://developer.wordpress.org/reference/functions/paginate_links/ – which will exit early if there aren’t any paginated pages (aka more than one). This means the only way to do what you want would be to add custom code to your site that checks if the pagination returns nothing and if so output your own custom code to display a number 1. And the code will highly depend on how your site is setup (using default archives or dynamic templates).

I wouldn’t recommend displaying pagination when there isn’t any pagination though because it’s very confusing for the person visiting your website (what does the number 1 even mean) and it can cause issues with accessibility.

For the password protection title, this is inserted by WordPress automatically so you would need to add some custom code to your child theme or via a code snippet plugin.

Example code:

add_filter( 'the_title', function( $title ) {
    if ( str_contains( $title, 'Protected: ' ) ) {
        $title = str_replace( 'Protected: ', '', $title );
    }
    return $title;
} );

- AJ

Hi,

The best way to manage padding for small devices is by using responsive units like vw (viewport width). Typically, padding is added to the left and right sides (since top/bottom padding is often kept consistent across devices, or you can use an inner row with a spacing element to adjust the space at different breakpoints).

For example, if you’re currently using 100px of left and right padding, it might be too large on smaller screens. Instead, you could switch to a responsive value like 7vw, which will adjust based on the screen size, or use a percentage like 10%, which will also scale accordingly.

You should generally never show/hide different rows for different screen sizes as this makes the website less optimal (for speed and SEO). There is always a way to do things responsively, if you aren’t sure how share the URL and I can suggest and alternative.

- AJ

ps: Total is also fully compatible with Elementor – a lot of my customers have been using Elementor instead of WPBakery as of late. In Elementor you can define the padding, margin, colors, etc at each breakpoint. I”m not suggesting you switch your whole site over to Elementor, but it’s a possibility if you do like that builder and it won’t take too long for you to swap it all over. Or maybe something to consider for new websites if you are a freelancer/developer.

Replacing the padding that used PX with VW settings works perfect. Thanks again!

Awesome

Hi,

Sorry, I’m not sure what you mean my “custom CSS or Row layout popups” – are you referring to working in the builder and when you click to edit a row you can’t access the row settings?

If the only thing you changed was hosting, then it sounds like there is an issue with the new host. Generally issues with the builder not working are due to limited server resources. You may have to increase your PHP memory limit. Your webhost should be able to check your server error logs to figure out what’s going on and fix it up.

It’s also possible your new host has some sort of optimization function built-in and it’s messing things up.

Where is your new site hosted?

- AJ

Thanks for the info. I re-uploaded the js_composer plugin. Problem solved.

Great!

Hi,

You can set it up to use AJAX using some custom code, here is a sample snippet: https://totalwptheme.com/docs/snippets/advanced-ajax-filter-example/

But I wouldn’t recommend using AJAX and Total already has a built-in method for displaying search results via URL parameters with a page refresh or sending users to a new page.

I just published a new doc article on how to do this and the benefits over using AJAX – https://totalwptheme.com/docs/custom-search-for-post-cards/

- AJ

Hi AJ, could you eplain why having a sitemap page can hurt seo? I am looking to do one because i saw that my compeititors (ranked 1,2,3 in serp) have a ‘sitemap’ link on their home page.

An HTML sitemap could be considered to be low quality content as it may not really provide any added value to the end user. If you have a massive website, it may be helpful, but your site should already have proper internal linking so that your users can navigate your site and an XML sitemap for bots.

On page SEO is such a small ranking factor. You can micro-tweak your site all day without any affect at all.

Most likely your competitors have more and higher quality backlinks.

If you do want to focus on on-page SEO the most important things are going to be content quality, page speed and mobile friendliness.

- AJ

thumbs up!