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!

I want to mention also…That if you haven’t done it, it’s also best to define your custom colors via the Color Palette – https://totalwptheme.com/docs/color-palette/ – then you can select from these in the Customizer by clicking the globe icon for the color picker.

This way if you want to set the same color in different settings you can still modify it globally if you ever want to change it.

Also, it will allow you to create a dark mode version of your site if wanted – https://totalwptheme.com/docs/dark-mode/

Hello AJ,

Perfect thank you for your help.

I had done the color palette with my colours but did not check the Accent colors.

This now displays my colour, thanks again.

Great!

Hi,

Oh, this is the single post pagination created by adding page breaks to your post. This works differently then the archive pagination and by default WordPress doesn’t add arrows to the single post pagination. I will look to see if it’s possible to modify how it works so that the arrows can be inserted.

I would highly recommend not paginating your posts though, this is very bad for SEO.

- AJ

Unfortunately WordPress only supports displaying numbers only or arrows only – https://developer.wordpress.org/reference/functions/wp_link_pages/ – the only way I can modify the pagination would be to override the core WordPress function which can break 3rd party plugins and bloat up the theme :/

Ok, it’s all clear. Many thanks

Hi,

This is AJ the theme author.

It sounds like you enabled WPBakery Slim Mode on your site – https://totalwptheme.com/docs/wpbakery-slim-mode/ – which disables some of the older elements which aren’t needed. For example with the Post Cards element available now, there is no need for the Staff Grid element.

Settings are “tied” to the active theme, so when you switch themes different settings are used. This means you’ve enabled WPBakery Slim Mode while having the child theme active, but not while the parent was active – thus things appear to be “fixed” when swapping themes.

- AJ

Turning off that setting fixed the issue. It must have enabled automatically during a theme update, as I don’t believe we turned it on.

Thanks!

Hi Tonny,

1. The issue is you have some custom CSS making your site header have a fixed position, which is overriding the header styles. Since you are using the Transparent header the theme adds CSS that makes the header have an absolute position and that is overriding your custom CSS – however, when you use the Full-Height header the theme actually remove the absolute position so that the site background is visible while the mobile menu is open (which looks better in most cases) – but then your CSS overrides causing issues. Here is a video: https://a.cl.ly/GGubOZpE

I recorded a video of a demo with a transparent header and enabling the full-height mobile menu so you can see why the theme resets the header position (makes the header white again) – https://a.cl.ly/xQukGd7m – otherwise you would see a weird background color at the top which doesn’t look good. Like this demo – https://totalwpthemedemo.com/pottery/ (this demo is using an older style mobile menu so it works differently, which I will edit to use the new dropdown full-height option so it looks better). It looks a lot better when the theme removes the transparent header absolute position and the whole page is white when the mobile menu is open.

For your site, since you have a transparent header on all pages. I would recommend making your header background color black and the mobile menu black, I think that would look best.

And to fix the issue, you will need to either remove that fixed position on the header in your custom CSS or switch mobile menu style to the full-screen or sidebar style, because it won’t be possible to properly display a dropdown style mobile menu that is inside a fixed header – unless you manually set a custom width in pixels for the mobile menu.

And, since you are using the theme’s sticky header there is no need to set a fixed position for your header anyway…if you are going to use CSS to set a fixed position for your header then you should disable the theme’s sticky header function because right now it’s running extra unnecessary javascript.

2. The reading time strings are localized so you should be able to find them in the strings translation settings in WPML. You may have to go to WPML > Theme & Plugins Localization and check the box next to Total than click on the “Scan selected themes for strings” button so that WPML can locate all the strings. I had to do this, because it wasn’t automatically reading the .POT file (I don’t know if WPML even does that – you may have to always click the button). Then you should find the strings under WPML > String Translation like this: https://a.cl.ly/GGubOZwz

- AJ

Thx for the swift reply! I found the string eventually in total-core.

Mobile menu is fixed. Thanks for pointing me to the self created issue. Can’t remember why I used position:fixed on the element. I looks great now.

Hi Paul,

There is no specific reason, I will add them. Thank you for the heads up.

For the meantime you can always just use the theme’s utility classes in the extra classname field:

• https://totalwptheme.com/css-framework/font-weight/
• https://totalwptheme.com/css-framework/text-transform/

This way you can apply the styles without using custom CSS.

The theme used to use the same CSS you use to modify the root font size but I removed this in Total 6.0 because it’s actually a big accessibility issue to modify the root font size and it can also cause issues with 3rd party plugins. I would encourage you to consider not doing this anymore.

Setting 1.6 for the body font on mobile would be 16px which would just be 1rem at the default root font size, so it’s not really “easier”.

One thing I wanted to mention, I know you’ve been using the theme for a while now. On new installations (aka Deprecated > Classic Styles are disabled in the Theme Panel) the theme now uses fluid font sizes for it’s preset font sizes – https://totalwptheme.com/docs/preset-font-sizes/ – so if you were to use the theme’s font preset sizes in your design they will get smaller as the screen get’s smaller. For example if you set your body to “lg” the font size will be between 16px – 20px

Here are the defined theme font sizes:

 --wpex-text-xs: .75rem;
--wpex-text-sm: .875rem;
--wpex-text-base: 1rem;
--wpex-text-lg: clamp(1.125rem, 0.9688rem + 0.5vw, 1.25rem);
--wpex-text-xl: clamp(1.25rem, 0.9375rem + 1vw, 1.5rem);
--wpex-text-2xl: clamp(1.5rem, 1.1875rem + 1vw, 1.75rem);
--wpex-text-3xl: clamp(1.75rem, 1.2813rem + 1.5vw, 2.125rem);
 --wpex-text-4xl: clamp(2.125rem, 0.8125rem + 3vw, 2.5rem);
 --wpex-text-5xl: clamp(2.5rem, 1.0313rem + 3.5vw, 3rem);
--wpex-text-6xl: clamp(3rem, 1.0938rem + 4.5vw, 3.625rem);
--wpex-text-7xl: clamp(3.625rem, 2.6875rem + 3vw, 4.375rem);

And you can of course modify these in the Customizer.

I would generally recommend using modern fluid font sizes instead of setting your fonts at different breakpoints and using the preset font sizes wherever you declare a custom font size to ensure you can always modify your font sizes globally.

You can of course add your own code to modify the TinyMCE editor styles by hooking into the appropriate hook – you can see how the theme does it in the Total/inc/admin/mce-editor.php file. But I would recommend just going to the Theme Panel and disabling the “Editor Styles” option so that the theme doesn’t add your custom font sizes in the backend or make any modifications to the editor based on your customizer settings. This will slim/speed things up a little. I keep the code in the theme because some customers like the editor to match the live site, but in my opinion it’s completely unnecessary.

- AJ

Hi AJ,

Thank you for the detailed response as always. I’ve taken your advice and removed the CSS that was setting the root font size. I’ve updated the body font size and used this tool to update the preset font sizes:

Though I would add that for anyone else who finds it useful.

All looks good again now.

Great!

Hi,

The only breakpoints you can easily modify are the breakpoints used when adding custom font sizes. You can’t modify the theme’s breakpoints via a simple setting or filter because they are added in the theme’s CSS file. CSS doesn’t allow for the use of CSS variables for media queries. The way WPBakery does it is the plugin generates the CSS file dynamically based on the settings defined in their panel – this is a bloated functionality that I would never introduce into the theme.

In fact, by default those settings you shared in the screenshot are disabled by default in the them to help keep the site fast and slim. They will only show up if you manually enabled your own WPB license and/or enabled the design options tab for WPBakery in the Theme Panel. Generally, I would recommend using the default breakpoints and not really messing with anything.

The most important breakpoint is 768, which matches the theme’s “Medium (md)” breakpoint, this is the breakpoint you want to use for pretty much all stacking. It’s also the default column stacking breakpoint in WPBakery. Except for certain cases where you may want to keep things stacked on smaller screens, but this won’t be too often. In which case the theme offers the Small (sm) breakpoint, but WPBakery doesn’t offer any smaller breakpoint.

Of course if you want all the breakpoints to line up with the theme, just edit your WPBakery settings and change their 992 breakpoint to 1024 (theme’s lg breakpoint) and change the 1200 breakpoint to 1280px (theme’s xl breakpoint). This way WPBakery will match the theme – Total uses more modern breakpoints anyway, so best to match the theme and not the other way around.

Now, if you did want to modify the theme’s breakpoints, I will explain for anyone else interested as well…

Overriding a theme breakpoint would require adding the theme’s utility classes inside your own custom media query. This is developer territory but I can at least explain the basics. If you have a look at the theme’s utility docs here – https://totalwptheme.com/css-framework/utility-tag/responsive/ – you can see all the responsive properties in the theme and if you look here – https://totalwptheme.com/css-framework/responsive-breakpoints/ – you can see how they work.

Now, the theme uses a mobile first approach which means depending on which breakpoint you want to modify you may need to copy ALL of the theme’s utility CSS from the style.css file over to your child theme and then change the media queries. I’ve zipped up the theme’s SASS files for the various breakpoints if you are curious to see – https://a.cl.ly/z8u9NEjK (easier than looking in the style.css file/).

So you could technically change the breakpoints, re-generate the SASS then add it to your child theme. The problem though is that if the theme ever changes how things work you may need to update your site manually which can be a pain in the butt. Also it would require adding quite a bit of extra code to your site, for what I believe to be no real benefit.

The alternative is to add your own media query, so basically you can look at how one of those SASS files work and duplicate it in your child theme for a different breakpoint. Then hook into wpex_wpex_utl_breakpoints to add your own breakpoint to choose from:

// Add custom breakpoints.
add_filter( 'wpex_wpex_utl_breakpoints', function( $breakpoints ) {
    $breakpoints['bk_prefix'] = 'My Custom Breakpoint';
    return $breakpoints;
} );

The only possible way I could potentially make the theme’s breakpoints modifiable, and something I may consider in the future would be to move all the code out of the style.css and create a separate CSS file for each breakpoint. This way the breakpoint can be added to the link tag when the CSS is loaded. This is how the theme’s mobile menu breakpoint works – https://totalwptheme.com/docs/alter-mobile-menu-breakpoint/ – there are a couple concerns with this. One is that even though loading more smaller CSS files isn’t really a concern for site speed, some people think so and they will complain. The second is that changing how things work could negatively affect customers updating that had made some child modifications to their site as the CSS will now load differently.

- AJ

ps: This is worth mentioning…over the years more and more customers have been requesting that Total be integrated more with Elementor. In the 6.0 update I made it so all theme elements and features are available in Elementor and so Elementor’s layout perfectly lines up with the theme’s layout – https://totalwptheme.com/docs/customize-your-layout-widths/

The Elementor builder is much more flexible when it comes to displaying elements in grids/containers and allows for modifying pretty much anything at each breakpoint. You may want to consider trying it out for future sites instead of WPBakery and see how you like it. I’ve had quite a few Total customers whom have switched over and really like it.

Hi,

This is AJ the theme author.

There are dozens of ways you can setup your site. For example you can use preset cards – https://totalwptheme.com/cards/ – or custom cards – https://totalwptheme.com/docs/custom-card-builder/ – you can use the default site design or create dynamic templates – https://totalwptheme.com/docs/dynamic-templates/

So, the method to change the read more text will vary depending on your specific setup.

If you are missing the setting explained in the docs you most likely are using a custom card and/or a dynamic template.

Can you share the URL in question so I can see how it’s setup?

In general, most customers are creating dynamic templates for your blog archives – https://totalwptheme.com/docs/category-taxonomy-template/ – this provides them with complete control over the design. And it’s generally what I recommend. In which case all they need to do is edit their template (the Post Cards element specifically) to modify the read more text.

- AJ

ps: I’ve updated the docs, thank you for letting me know it was outdated! I created this article back when the theme didn’t have any custom cards or dynamic templates – so I added a notice on there to help prevent confusion.

Sorry for all the messages, but I wanted to let you know I’m releasing Total 6.1 update shortly and I’ve made it so if you are using a theme’s preset card style you can still access the custom read more text option.

This way if you don’t want to create a custom card or dynamic template you can still easily modify the button text – https://a.cl.ly/qGu4QZZk

I’m doing the final tests for this update before making it live.

Hi James,

Theme Panel > Editor Styles.

You may also want to consider disabling the other editor features: Editor Formats & Editor Shortcodes. These are generally no longer needed. The functions were crucial back when the theme didn’t make use of a page builder and Gutenberg didn’t exist.

A lot of people in the past have requested that the editor takes on the site background, because often the user is both adding a dark background and making their text white and they want their editors to match. I personally don’t like messing with the editor at all but a lot of people feel otherwise which is why the theme does this by default.

Over the years I have disabled certain features by default on new installations based on user feedback – I may do the same with these in the future, we’ll see. The worry is always that disabling a feature by default that was previously enabled by default will cause mass panic.

- AJ

also is missing hamburguer menu icon in top bar!!!

this code does no longer works!!! (settings/top bar/content)

Hi,

This is Aj the theme author. Can you share the URL so I can have a look?

Back in Total 6.0 (released last year) I updated the theme’s icons to use SVG’s instead of font awesome. This was a mayor optimization which you can read about on the changelog – https://totalwptheme.com/docs/changelog/6-0/

This is why the ticons folder will no longer be inside the theme.

But all the icons should of course still work correctly. If icons aren’t displaying on your site it’s mostly due to caching issues. Most issues people have when updating is due to caching issues and/or bugs in their optimization plugin (or in correct optimization plugin setup).

If you can share the URL I should be able to tell right away what’s going on and help you fix it.

The code didn’t paste above, can you please share the code via a snippet site like pastebin – https://pastebin.com/ – so I can test it out and see if there are any issues.

Now, if you were manually using icons in your site via HTML or custom CSS (it’s never recommended to do that) then you will have to update your code and use proper methods such as the icon shortcode – https://totalwptheme.com/docs/theme-icon-shortcode/ – or alternatively download and install the old icons plugin as noted at the top of the changelog I linked to earlier (under “SVG Icons” in the yellow notice – which is the second item in the list).

- AJ