Remember I logged into your site and I edited your header.php file in the child theme because it was outdated, but then you rolled back your site. If rolling back your site also put back your old child theme then you need to edit the header.php file again accordingly.

Now, I just inspected your site and it appears your child theme header.php file maintained the tweaks I made before you rolled your site back. Perhaps you just rolled back the theme version and not your whole site from a backup (which is what I was assuming you did as it wasn’t clear).

So at this point you should be fine

- AJ

Hi,

This element should still have the same CSS it’s always had in regards to the the padding. I just double checked a demo using it to confirm: https://a.cl.ly/v1uG185p

That said, this left/right padding will only be added when using “non-classic” styles. So on new installations the menu-button won’t inherit the menu padding as it used to do so it can use the padding defined for your buttons. When updating your site your site the padding will actually be added like such: https://a.cl.ly/GGubPwX5

It’s been highly requested for year now that the menu button uses the same padding as all other buttons on the site. In order for me to update that without changing the padding for customers updating their site I’ve made the changes apply only for new installations. This is done via the new “Classic Styles” option in the Theme Panel that is automatically enabled when updating your theme. More info on the changelog: https://totalwptheme.com/docs/changelog/6-0/

If your button is not displaying as it was before there are few couple reasons I can think of:

• Your site is just cached and you need to clear your optimization plugin’s or hosting cache.
• You have overwritten the header.php file via a child theme and it’s very outdated so your site doesn’t have the wpex-classic-style class added to the html element causing a lot issues (not just the button padding).
• You’ve manually disabled Classic Styles via the Theme Panel and now the menu button inherits your default button padding rather then the menu item padding.

If you share your URL I can tell you right away what the issue is.

- AJ

I totally understand all you said, but regardless, there are cases where I would want ability to adjust font size on a specific word within a paragraph. If you wouldn’t mind sharing the custom code to re-enable the dropdown, I’d be grateful.

I believe you know my email address if you’d prefer to email rather than share publicly.

Thanks AJ!

Sorry, I totally failed to mention that the theme does add the preset font sizes in the editor so you can select from those: https://a.cl.ly/qGu40wKk – which is much better because then it’s using the preset font sizes which can always be controlled globally: https://totalwptheme.com/docs/preset-font-sizes/

So you can still apply larger/smaller fonts to specific words in the editor.

What I removed was the core WordPress dropdown that adds fixed pixel based sizes which I would never recommend using as explained previously.

- AJ

Thanks AJ. Your suggestion to use preset font sizes in the editor will do just fine.

Take care!

Hi,

Your site has a critical error but it’s not actually shown on the page so it’s hard to know what’s going on. But I’m pretty sure I have an idea since another customer had a similar issue and they were also using the transparent header with a custom logo. Can you shoot me an email directly to wpexplorer [at] gmail dot com with your site logins so I can take a look and make sure everything is fixed up and working as expected?

Thank you and sorry for the troubles!

- AJ

Thank you for your support!

Of course and again sorry for the troubles!

Hi,

If you want to use the toggle functionality inside a custom card you will need to use a “dynamic” ID for your toggle element because it has to change for each card. You can do this by using dynamic variables – https://totalwptheme.com/docs/dynamic-variables/ – more specifically the {{post_id}}

Example: https://a.cl.ly/X6uGkJkG – so basically the unique ID for your element and link that triggers the toggle should use the format “your-custom-id-{{post_id}}”.

This way your toggles will be unique since the name for each one will be appended with the current post ID which is unique.

- AJ

ps: Please log in with the account used to purchase the theme or please purchase a license to access support. Thank you!

Hi,

I replied to your ticket a while ago. So if you are using the theme’s Heading element there is already a shadow option and you can add a “stoke” (aka underline) by using the Bottom Border style. I shared a video with you…But now that I mention it, I think what you want is a border around the whole element. So here is a new video showing how to do that: https://a.cl.ly/geuDxJ8b

Also, I assume you mean “box shadow” and not “text shadow” which are 2 different things.

Either way, there is no need for a 3rd party plugin for something like this. It would be best to just use a little custom CSS if you need to tweak the design of something and there aren’t built-in options for it. I can help with the custom CSS if needed, but I need to know exactly what you want.

- Aj

I don’t really understand what’s going on based on the screenshot. This screenshot implies that you modified the code to display an error. Maybe you just did that as a test?

Anyway, depending what code you added in WP Code it’s possible the plugin is running things too early before the theme loads which will cause this check to return false.

I personally don’t like plugins like WP-Code at all as they are filled with bloat, constantly asking you to upgrade to a premium version and just slow down the site. Using a child theme is much more efficient then a plugin. Thus, I don’t have too much experience using these. The only reason I sometimes suggest them is because for some reason there are some people that don’t like using child themes.

It’s very possible your code or your settings in WP Code needs modifying to work specifically with the plugin.

If you can share the full snippet you are using and a screenshot of the settings I can be of better assistance. When sharing code please use a 3rd part site like PasteBin.

That said, if you don’t have tons of snippets on your site maybe it’s best to just use a child theme instead – https://totalwptheme.com/docs/child-theme/ – keep your site fast, less bloated and just make things a bit easier.

I am now using a child theme. I face the same issue using the snippet you shared. The issue is that the function totalthemecore_call_non_static does not exist and the AJAX scripts do not load.

I realise however that I am using the version 5.9 of the theme. Can this be the reason?

Thank you for your support and best wishes

Solved, thank you.

Awesome! I’m glad to hear that and sorry for the troubles with having to tweak your body font size, it was a crucial theme change though.

- AJ

Hi,

This is AJ the theme author.

There are no known issues like the ones you mentioned. To start please try clearing your browser cache, it’s possible your browser is just loading the old WPBakery scripts and thus it won’t work.

If that doesn’t help you may need to try de-activating 3rd party plugins to see if any are breaking the latest version of WPBakery.

The issue you are having where you see the text “Javascript required” instead of the new Total color picker which looks like this: https://a.cl.ly/DOuLnwW0 (same one that Total now uses in the Customizer). Would suggest that perhaps your site has a JavaScript error and so the color picker script isn’t running and text you see isn’t being converted into the color picker component. This can happen by a caching issue or a plugin conflict as noted previously.

If you aren’t able to resolve the issue please let me know so I can help further, I may have to log into the site to see what’s going on.

- AJ

Hello, I think I’ve solved the issue by clearing the cache. Thank you

Great!

Hi,

Some plugin on your site is removing the “defer” attribute from the theme’s core JS script. This is how the file should load: https://a.cl.ly/DOuLn7jb

And this is how it’s loading on your site: https://a.cl.ly/ApuoQ2N1 – notice how your site has removed the “defer” attribute like in the screenshot from my site.

The defer attribute tells the browser to load the script as the page loads but execute once the page has rendered. This is a modern optimization for scripts. If the defer attribute is removed (like on your site) it causes the script to run immediately after it’s loaded without waiting for the page to render. This causes errors like this: https://a.cl.ly/X6uGkyDr

If the issue isn’t coming from a plugin, is it possible you have child theme code or code added in a snippet plugin that’s incorrectly modifying scripts?

- AJ

Hi, you were right; the plugin causing it was “Scroll Up Sticky Header for Total.”

It’s actually impossible for that plugin to cause the issue. There is nothing in the code that would remove the defer attribute. Most likely if disabling the plugin fixes the issue, it’s a weird side affect from the plugin or code actually causing the issue.

The plugin is used on this demo if you want to look: https://totalwpthemedemo.com/victor/ – and it does not cause the issue (again, it’s impossible because the plugin doesn’t have any code that removes script attributes). But I wanted to share if you wanted the extra proof.

If you want you can send me site logins and I can log into the site and help figure out what is actually causing the problem – https://my.totalwptheme.com/submit-help-request/ – I kindly ask that you say something like “assign to Aj” in the ticket subject or description so that the guy that helps me weed out support tickets can assign it over to me since I already have context of what’s going on.

That said, I had updated this plugin locally to be a bit more optimized for Total 6.0 and forgot to push out the update live. So thank you for the reminder!

- AJ

Hi Chris,

- The issue with your site layout is being caused by an optimization incorrectly changing 0px to 0 in the CSS file. The problem is the theme uses “0px” for various CSS variables and for CSS calc() functions. In CSS a “0” is very different than “0px” for example if you use this CSS:

calc(100px - 0px)

The result will be 100px:

But if you do:

calc(100px - 0)

It’s actually invalid and create a CSS error.

You’ll need to disable whatever script is incorrectly changing 0px to 0 in your CSS files.

And what’s actually happening is that your stretched rows (which use complex CSS) are not placed correctly because the variable used to define the default site frame border has changed from 0px to 0. See this video: https://a.cl.ly/rRudyQPl

I noticed that the optimization plugin is not modifying the 0px values that are inside calc() functions, however, it’s modifying the ones that are set as the values for CSS variables. It shouldn’t do that either, because it’s not possible to know if those variables will then be used inside of a calc() function.

- The issue with the search icon is that whatever optimization plugin your site is using is also putting the JavaScript for the search inline – https://a.cl.ly/kpuzPW1r – but it’s impossible to defer inline scripts. So what happens is the JavaScript runs before the HTML which causes it to not only do nothing but actually trigger a console error. Any script that has a defer attribute should be excluded from being inserted inline or they should be moved to the wp_footer hook if they are added inline. Although this could potentially still cause issues. The defer attribute needs to be respected and the script should load as intended.

- AJ

ps: When inspecting the site I see it’s also trying to load 3 scripts for cookie consent that don’t exist – https://a.cl.ly/X6uGxQW1 . The scripts are being hot-linked to, so it’s possible your server is being blocked.

I would recommend whenever possible to NOT link to 3rd party scripts for various reasons, mostly site speed. That said, it’s possible you are paying for the cookiebot.com service, in which case their script may just work in this manner. If so, you may want to share the screenshot with them to see what’s going on. I’m not familiar with their services/products, but I see the errors in the console and if the cookie consent isn’t working as intended it could have legal consequences. So I wanted to let you know.https://a.cl.ly/X6uGxQW1

Thanks for your detailed reply AJ! Looks as though we might have got away with such things on the previous version and this update has found some floors with our build.

We will work through these today, hopefully it fixes things.

Thanks again for taking the time to reply

Chris

If you are using a popular Free plugin that’s causing the issues please let me know and I will test it out myself and I can report the bugs on the WordPress.org forum. I recently left a note on one of the plugins: https://wordpress.org/support/topic/plugin-removes-css-media-attribute/

- AJ

Hi Debbie,

The issues you mention sounds like purely cache related. If you see the skip to content text on your site it means your site is loading old CSS files and not the newly updated CSS files. This is almost always caused by improperly setup optimization plugins that are removing script versions from files which prevents cache busting. Or it’s caused by an incorrectly formatted child theme which causes the theme’s style.css file to load without the correct version.

You’ll want to review whatever optimization plugin you are using and for starters make sure any setting named something like “remove file query versions” is NOT enabled. And then any sort of function that “combine” scripts is disabled. The later, not because it will cause caching issues but because some of the popular plugins have some bugs in their combining function and because those are old protocols that can actually slow down modern sites.

You can renew support if you wish via the button on the theme page as described here – https://totalwptheme.com/docs/renew-support-license/ – Since the theme is on sale it should only be $14.88. I always provide support regardless of the customer’s support status, but life is expensive so I do really appreciate all the support I can get. Thank you!

- AJ

Hi Chan,

I need a password to view the page you mention so I’m not sure what you are working with.

The main question I have is: Do you want to refresh the results page or refresh the cards using AJAX?

Before getting into this though, I would probably recommend using a custom /search/ page instead of the native WordPress search so you have more control and so it’s a bit better for SEO. But also based on what you said it sounds like you only want to filter posts and not pages. So you may want to leave the default WP search results so it works with all post types and have a separate filterable page just for posts.

The easiest ways to create a filterable grid is using this popular plugin – https://wordpress.org/plugins/search-filter/ – which can be used with the Post Cards element (I’ve tested it).

Total does has some filtering options built-in that can be done via WPBakery without any custom code – https://totalwptheme.com/docs/post-cards-ajax-filter/ – but nothing like what you are asking.

However, there is a JS script available that can be used for advanced AJAX filtering and I have some sample code here: https://gist.github.com/wpexplorer/e95f2bc43c82a227787e8ae0d8a87432 – I have plans in the future to add a elements for building advanced filters, but it’s a bit low on the priority list right now so I’m not sure when I’ll get to it. Perhaps next year. But the script needed and the PHP to filter the items already exists in the theme.

If you don’t want AJAX filtering the easiest thing to do is to just code your custom dropdowns with a little Javascript (chat CPT could even give you the code probably) so that when you choose filters it refreshes the page with the parameters added to the URL. Then you can filter the results either by hooking into”pre_get_posts” if it’s the default search results or “totalthemecore/vcex/post_query/args” if it’s a custom page using the theme’s Post Cards element with a custom query.

If the site is using the latest version of the theme you can use the new Horizontal Menu to create your dropdowns. Unless you have tons of categories/tags that you don’t want to have to create the menus manually. Or if you don’t want your client to have to In which case the best is to create your own shortcode for these. And instead of a row with 3 columns you can use the theme’s Grid Container to insert your 3 dropdowns – this gives you a bit more control over the spacing and such then WPBakery rows.

- AJ

Hi Aj

Thank you for your recommendation’s. I will consult with the web team about next steps and will return if there are any additional questions.

-Chan

I got and replied to a private support ticket regarding this matter

- AJ

Ok, I know exactly what’s going on…It is a browser sub-pixel rendering bug that happens when the height of the divider is automatic (default) because the height will change based on the width so you may end up with a fractional height.

Adding a negative margin helps alleviate the issue (which I will likely add in the upcoming patch) but also giving your divider a fixed height will also fix the issue: https://a.cl.ly/GGubXK8Q

Just that when you give it a fixed height it will remain the same across all screen sizes (not sure if you want that).

Thanks AJ, I used the CSS fix, it works!

Hey,

Glad that works! I’m releasing the Total 6.0.2 update with the official fix. I actually decided to use negative margin instead of positioning so when you do update to the next version you may want to remove this CSS because it will cause 1px of extra offset that’s not required (not a big deal, but wanted to give you the heads up).

- AJ

Hi,

Now I understand it correctly—sorry for any inconvenience!

If I want to change the custom canvas icon or adjust the left/right position, I suppose I need to add or edit $off_canvas_args, right?

Thanks again for your help!

All right, I made the changes I wanted by adding more arguments to the snippet! Everything is working perfectly now!

Awesome!

Hi,

This was implemented. You can see this if if you inspect the file at Total/searchform.php which looks like this: https://a.cl.ly/X6uGx8L1

That said, this class ONLY added to the base search form. So the searchform added to the header using the theme’s option to enable a search icon such as the one on this demo: https://totalwpthemedemo.com/square-media/ – will not have the class you refer to. This is because the whole point of the changes was to slim down theme CSS and make overrides easier.

If those changes aren’t showing up on your site it’s either because the form you are looking at shouldn’t have the classname or your child theme is overriding the searchform.php file and needs updating.

Feel free to share the URL if you want me to take a look.

- AJ

That is intended behaviour. The heading is to be an addition to the actual alert content.

There is no reason to have a heading if you don’t have any message. If all you want to do is make your alert “stand out” by having bolder/larger text then you can just modify the content’s typography and not use a heading.

If you believe it should work differently, please share your thoughts. From my point of view, it’s working exactly as it should.

- AJ

Sure. So, from my end it’s a strange behavior to have a field you can enter text to and have it not appear when it’s published. I understand you had a different process in mind, but when you present a user with a field and you can enter information into that field, and suddenly it doesn’t appear without any explanation or reason. It simply seems to be a bug.

Are there any other components that have this same behavior? Just from memory, no other component comes to mind, every time you enter text somewhere, it will appear

Cheers

I can definitely understand the confusion. Maybe I’ll have the heading field hide if the content is empty or change the description so it’s clear.

Thank you for the feedback!

Yes, part of the service would be to maximize your Google page speed score

If you want email me at wpexplorer@gmail.com – If there is a specific site in question you want to optimize now, maybe I can use your site as a trial run at a discounted price.

The end goal is for me to offer the service at a reasonable price so freelancers/developers buying Total could offer the service to their client at a slightly higher price, pay me and then they can keep the difference.

I will try and have a landing page setup by Jan 1st though. It will be an exclusive service that only I will do (I won’t hire people in other countries to do the work for me for cheap). And I will likely just have a form submission if you are interested and send invoices manually via Paypal.

- AJ

email sent

I never got any email : (

Did you send it directly to wpexplorer@gmail.com?

Sure thing:

.theme-button, .button, .added_to_cart,
button:where([type=submit],[type=reset]):where(:not(.wpex-unstyled-button)), input:where([type=submit]):where(:not(.wpex-unstyled-button)), .wp-element-button, .wp-block-button__link {
    --wpex-btn-img: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
    --wpex-hover-btn-img: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
    --wpex-active-btn-img: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
    box-shadow: var(--wpex-shadow-lg);
}

Then modify the code accordingly so it uses the shadow and colors you want. As you can see in the example I’ve defined the same gradient for all button states (default, hover, active) – you can remove the hover and active ones if you want the buttons to look the same always or modify them to be different.

You can add this under Theme Panel > Custom CSS – this is the easiest.

I will look into at least adding the box-shadow option for buttons in the Customizer, this is a great idea!

- AJ

Thank you so much. m

No problem!

Hi,

This is AJ the theme author. I”m going to basically copy/paste/tweak my response to another customer that had the same question:

The theme has been updated to use SVG icons which was a highly requested change for years because using font icons is much slower and bloated as opposed to only loading icons you need on your site via SVG’s.

It’s a little bit of a pain (I understand) if you were using CSS because now the theme’s font icons aren’t loaded on the site so you will need to tweak your CSS a bit to use SVG’s as well.

I can create and give you a plugin that loads the old icon CSS (let me know if you want this) so you can just enable it on your site. But then you lose the benefits of a faster site and higher page speed score.

Instead recommend instead changing your CSS to use SVG’s.

For example to add an arrow on the right of an element named “my-element” you can use something like this:

.my-element::after {
    content: '';
    display: inline-block;
    margin-inline-start: 10px;
    width: 1em;
    height: 1em;
    background-color: currentColor; /* Inherits the text color of the element */
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath d=%27M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z%27/%3E%3C/svg%3E');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 448 512%27%3E%3Cpath d=%27M438.6 278.6c12.5-12.5 12.5-32.8 0-45.
}

This is the modern way of adding icons with CSS without having to load a whole massive font icon set. Which requires not only extra font files but also CSS files. SVG’s are added as inline code so only the code for the icons used for the site will be added to the site and doesn’t require additional font/CSS parsing. It’s much better.

I am sorry for the troubles this causes when updating. But I really wanted to bring Total to modern standards and provide my users with faster sites and higher page speed scores.

If you do update your CSS to use SVG icons I recommend these sources to get SVG’s:

And you can just copy the SVG and ask ChatGPT to give you the CSS to speed things up.

But if you really want to go back to the “old way” I will make and zip over a plugin to you that loads the old font files.

- AJ

Hello AJ,

Switching to SVG is great for the reasons you mentioned. My intention isn’t to go back to using icons as a font; I just wanted some advice to adapt to the new system, and you provided that.

I’ll make the necessary adjustments to apply your advice.

Keep up the good work!

Great! If you need any help with the CSS please let me know

- AJ