Hi,

The theme update should be available today or tomorrow. There are a couple small things I wanted to add before zipping it up.

If the WPBakery security vulnerability is a concern, keep in mind that it requires a user of Contributor or greater access. So as long as your site’s contributors, authors and admins can be trusted then your site is secure. And of course you should never add any user to your site with high privileges that you do not trust as they can do stuff like delete your whole site content or upload illegal/inappropriate content.

- AJ

Thanks AJ, just trying to plan my client’s software update schedule!

Just a heads up – It’s probably going to be a few more days.

I’m integrating a new method of activating licenses in “staging” mode (without API registration) so customers can setup dev sites and still receive theme updates. It’s taking a bit longer then expected and I want to make sure everything is very well tested before launching. There are also a couple bugs in the last WPBakery update I’m trying to resolve.

Thank you for your patience!

I’m thinking of sending out a quick survey to see when customers would like to get updates and how often. Of course, any critical security updates will still go out right away.

Are you signed up for the Total Theme newsletter?

There will also be a big sale next month, which I will announce there!

I’ve actually never sent out a newsletter before, as I was looking to switch to a more affordable service. I finally moved my email list from Mailchimp to Flodesk last week.

This means I can start sending out Total newsletters every now and then to gather feedback and share sales and major updates.

I could also share upcoming update dates and stick to a more consistent schedule. Do you think that would be helpful?

Sorry for the long message and thank you for any feedback!

- AJ

Hi,

Bookings are a complex functionality that is plugin-territory and not something you would find inside a theme itself.

Now, in terms of which plugin to use it really depends on your needs. There are tons of free and premium plugin plugins out there as well as 3rd party services you can use for bookings (outside of your own site).

I don’t have any personal experience with creating websites that allow for bookings, but if you want to provide more information on the site in question, what’s needed and what is the budget, I can do a little research and come up with some suggestions.

- AJ

Thank you AJ The site in question is theglasshub.com and when I say a customer portal what I mean is to customise the look of the ‘Account Pages’ – when a customer logs in and can see their orders etc.

Ah ok, so you are using WooCommerce on this site, which means the account pages are created by the WooCommerce plugin.

There are no built-in options in the theme to customize these pages as it can break 3rd party plugins, customizing WooCommerce core pages (like account pages) is not something that should be done in a theme.

Depending what you want to customize it may be possible with some basic CSS or for more advanced edits using PHP hooks/filters. There may even be 4rd party plugins you can use to customize these pages. But it really depends on what they want to change.

- AJ

Hi,

There isn’t any global class you can use, but it would be fairly easy to add your own JS code for this and I could assist knowing more info on how the site is setup.

The problem with opening and closing all toggles at once though is accessibility, this can create issues with users using screen-readers. It’s generally best to simply show/hide a single element at a time. This is why I don’t offer the function built-in as it’s generally not recommended.

If you wanted to show/hide multiple toggles at once, how is that any different then just showing and hiding 1 single toggle element that has all the content you wish to show/hide at once?

Can you share the page in question to see what you are going for?

That said…

Notice there are 2 types of toggle visibility choices: normal and “Persistent”.

If you use a “Persistent” toggle, these will remain visible or hidden and you need to click it’s button to open or close it. On the contrary, whenever you click to open a toggle it will close any currently open non-persistent toggles within the same parent WPBakery section or row.

So, if you want to have multiple toggles where only one can be open at a time and you place them all inside the same WPBakery section or row, as long as they aren’t a “persistent” type, opening any will close any that are currently open so only one can be opened at a time.

- AJ

Thanks for the reply! I found a workaround, it was something not too important for a temporary promotion of a client

Working on adding some utility classes. I will likely only add col/span 1, 2,3,4 and 5. They will be responsive as well: https://totalwptheme.com/css-framework/responsive-breakpoints/

Sample video with basic usage in WPBakery front-end editor: https://a.cl.ly/6qunjBJN

And since we aren’t defining a height for your rows, as content grows so should our inner elements: https://a.cl.ly/yAuqwvBN

Granted this example is with basic text blocks, but it should be the same with icon boxes (with backgrounds or borders) and with images where the “fill column” is enabled.

Here is a sample with images: https://a.cl.ly/rRuR46dx

In my videos I’m using the general classes so they aren’t responsive. If your grid stacks at a certain breakpoint you would instead use the breakpoint prefix.

For example, if the grid stacks at the “md” breakpoint your class would look like “wpex-md-row-span-{number} or wpex-md-col-span-{number}

You can also use multiple classes to alter the spans at different breakpoints if you wish to move things around as the browser width changes.

I know I could do something more complex and perhaps easier to use for non-developers, but I think the addition of these utility classes should be enough to make some cool looking Bento layouts without introducing a ton of bloat and complexity.

These utility classes are included in the upcoming update to be released today/tomorrow.

- AJ

Awesome, AJ.

Didn’t expect this to drop that fast

Looks great to me and seems to cover a ton of use cases. Is it possible to combine row and col span with this?

Really appreciate you adding a feature just because one person asked for it. That’s some next-level service. Seen this a few times from you already. You’re honestly one of those rare devs who just gets it and keeps pushing to make this theme as flexible and dev-friendly as it gets.

Can’t wait to play with it.

Thanks ❤

- flipstar

Hi,

Yes you can combine row and col spans. Sample: https://a.cl.ly/bLuL4Lbx

I will write a dedicated documentation for this once the update is live! I’m also working on making the Grid and Flex containers available in Elementor for customers using that builder.

These new utility classes should allow for some pretty nifty layouts with images, icon boxes, text blocks, image banner…etc. So thank you so much for the suggestion and helping figure out how to implement it! The next step would be to add a few patterns that you can use as a basis (already added to my todo list) and then last figure out how we could do this with post/term cards (maybe in v7.0).

Thank you for the kind words

- AJ

Hi,

This is a a custom post type – https://developer.wordpress.org/themes/classic-themes/basics/post-types/

In WordPress pages are technically “posts”, so are images in the media library and even your menu items. The reason WordPress has posts and “pages” separate is to make it easy to separate your blog from your main site content. And this is what custom post types (like portfolio) are for.

Now, if you don’t need or want to use the Portfolio post type you can disable it via the Theme Panel. The same goes for the theme’s built-in testimonials and staff post type.

And if you need to create more custom post types I created a free plugin for that – https://totalwptheme.com/docs/adding-custom-post-types/

In fact, if you wish you can disable the Portfolio post type via the Theme Panel and instead use my plugin to create a post type named “work” if you prefer to have the items saved using that word instead of portfolio in the database.

By default the Portfolio actually uses “portfolio-item” for the slug not “portfolio” – but if you imported a demo that had a main portfolio page then perhaps that is the /portfolio/ you are referring to – in which case you would just rename the page itself. To change the default “slug” for individual portfolio posts you would do it via the Settings page – https://a.cl.ly/nOuOOy9w

Now, because of how WordPress works, if you want standard pagination on the main portfolio page that displays your items like page-1, page-2, page-3…it’s important that you do not have a regular page with the same slug as your post type slug as it will break pagination. That’s why by default the theme uses “portfolio-item” for the slug and not “portfolio” to prevent issues with pagination.

When working with post types like the Portfolio I also want to mention that it’s a good idea to set them up in a way that makes it easy to add and manage your items. In Total, this would be done primarily via Dynamic Templates – https://totalwptheme.com/docs/dynamic-templates/ – this way when you create new portfolio items you are not using a page builder every single time. Instead you create the design for all the portfolio posts using the page builder via a dynamic template that’s assigned to the post type. Generally, post types should have a consistent design across each post.

Again, the Portfolio and other default post types are 100% optional and you can disable them in the Theme Panel. If you don’t need to showcase many works, it may be best to just use a single page to display sample work and disable the Post Type.

- AJ

Hi,

If it all works when logged in, most likely the issue is related to a bug with an optimization plugin that is modifying the theme’s javascript files incorrectly. These optimization plugins generally only run for logged out users.

The theme uses modern techniques to optimally load theme scripts and there are some plugins out there that will strip out these optimizations and cause them to break. More specifically, Total uses the defer attribute on it’s JS files but adds them in the <head> of the site this can help the site load more optimally. If a plugin removes the defer attribute, the file won’t work as expected anymore because it will cause the script to run before the site has rendered, so elements like the sticky header or local scroll link won’t “exist” when the script is executed. I’ve seen this issue with a few minify/combining plugins.

If you share the URL in question I can tell you exactly what’s going on

- AJ

Hi,

Yes you can use the FontAwesome Pro icons in the theme’s elements.

You will need to download the SVG files for the icons you wish to use.

Then, if you are using WPBakery you can use the theme’s custom button when selecting an icon – https://a.cl.ly/DOuYY704

And if you are using Elementor you would use this option: https://a.cl.ly/E0uvvpGD

SVG uploads are not allowed in WordPress by default, so you will need to first install a plugin like Safe SVG so you can upload the icons you want to use to the media library. Or add some custom code to your site to enable SVG uploads.

It’s also possible to replace the theme’s icons entirely with your icons via a child theme. See here: https://totalwptheme.com/docs/snippets/custom-icons-json/

It’s worth mentioning, that the reason you would upload the individual icon SVGs, is because this way you are only adding the icons you need on your site. If you were to instead use FontAwesome as an icon font, that requires loading a bunch of CSS and all of the icons. This is very inefficient and it will slow down the site and lower it’s page speed scores. Also SVG’s are simple HTML so they render inline, it’s the best way of displaying icons on a site.

- AJ

Hi James,

WordPress has a couple filters you can use to modify the arguments of any registered post type. Here is a sample snippet for hooking into just_events and changing the with_front to false:

// Modify the just_event post type args
add_filter( 'register_just_event_post_type_args', function( $args ) {
    if ( isset( $args['rewrite'] ) && is_array( $args['rewrite'] ) ) {
        $args['rewrite']['with_front'] = false;
    } else {
        $args['rewrite'] = [
            'with_front' => false,
        ];
    }
    return $args;
} );

I personally would recommend keeping the URL’s much slimmer (site/post-slug/ or site/cpt/post-slug) not just for SEO reasons but also for readability.

- AJ

Hi James,

There is no way I could know why it’s not working without logging in and looking. Inspecting the source code I don’t see any image element, so the element itself is not being added to the code. This means either there isn’t any element added to the template or there isn’t any image being fetched.

To confirm, you’ve inserted the theme’s Image element and set the source to “Featured Image” like this: https://a.cl.ly/GGujjg4P

I do see the post has a featured image defined and there aren’t any known issues with theme’s element fetching the featured image so it should be showing up. Can you double check the template and if you still can’t get it working please send me temp access so I can log in and see what’s going on. Thanks! https://my.totalwptheme.com/

- AJ

Thanks AJ

I have opened a ticket for you to look. It’s probably something simple, or something I did and have forgotten !

Got it and replied back

Thanks very much indeed AJ. Yes, I can see that error in the console. I do indeed have a child theme but can’t see any vcex_templates folders and don’t know how to track this down. Nor do I know how to keep a child theme “up to date” as I am not a coder. I will email you. Thanks again!

Got your email, will reply back to you shortly. Thank you for your patience!

Thanks so much for your email AJ and I have replied with the info you needed.

Hi, AJ what we want to share automatically are portfolios, not just posts. Is that posible with jetpack social or maybe is there any other plugin to do that? can you help me with that?

Hi Sonia,

Auto sharing posts is not theme territory so you would definitely need a plugin to do this. I’m not familiar with JetPack social but according to their landing page – https://jetpack.com/social/ – it should be possible to do what you want. But from what I understand it shares the post when it becomes published so you have to check a box to share it while it’s drafted.

This free plugin – https://wordpress.org/plugins/social-media-auto-publish/ – has some decent ratings and it also supports custom post types (portfolio).

Personally, I don’t think it’s worth installing and maintaining extra plugins when it only takes a couple minutes to manually post to social media when you publish new posts. I’m also not sure how good of a strategy it is, manual publishing is likely more effective.

- AJ

thank you so much, AJ for your answer. I will take your advice into account

Hi Nick,

Having all tabs open wouldn’t make too much sense as it defeats the purpose of tabs/accordion – which is to slim down content.

I’m thinking perhaps what you actually want is to have all the sections visible always. Is that correct?

If so, what you would need to do is use the default WooCommerce tabs then add custom CSS to the site to force them to be visible (similar to the option I have called “Expanded Tabs on Mobile”). Here is the CSS you can use:

.woocommerce-tabs .wc-tabs { display: none !important; }
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel > h2 { display: block !important; }

Alternatively you can create a custom WooCommerce template, this way you don’t need to have the details inside tabs and you can design the products how you’d like: https://totalwptheme.com/docs/woocommerce-single-product-template/

Now, if you really want an accordion (so the user can close sections) and have them all visible to start, it is possible with a little code added to your child theme functions.php file or via a code snippets plugin: https://totalwptheme.com/docs/snippets/woo-product-accordion-open-all-toggles/

- AJ

Awesome reply as ever! Thank you. Gave me every option I wanted.

Hi,

The Dark Mode docs are here: https://totalwptheme.com/docs/dark-mode/

If you want to have the dark mode toggle next to the menu and not inside it you will want to use a Flex header style: https://totalwptheme.com/docs/header-styles/

The Flex Header styles allow for adding content via a ‘Side Content” field: https://totalwptheme.com/docs/header-aside/

The side content will display next to the header on desktop and also on mobile.

I made a little video example: https://a.cl.ly/OAuydqyq

Let me know if you have any issues or questions!

- AJ

Thank you very much for the detailed instructions and video!

Hi James,

The option for the pagination is under the Query tab – https://a.cl.ly/YEuEYX52 – this is because depending on what option you select, the Pagination tab may or may not show up, so the setting can’t be in that same tab.

Sorry not sure what you mean about the Customizer….Reading through the thread I’m not seeing any mention of the Customizer.

If what you are wondering is how to update the plugin, what you do is log into the site and go to Plugins. Find and delete the Total Theme Core. Then go to Appearance > Install Plugins and re-install/activate it.

- AJ

Thanks AJ – it all works. No idea why I was looking in the Customizer !

Just remembered why I looked in the Customizer, it’s because of this wording on the Pagination tab (I realise I should have been looking under the Query tab) – but anyway this is where my confusion arose:

Thanks for the thorough answer. I’ve turned off the document counts for simplicity’s sake, and if this helps, I can likely convince the client to do without those. I tried setting the navbar’s filter type to Simple Show/HIde and flipping back and forth between that and Ajax, but either way it seems to choke, with the loading spinner churning away for a painfully long time. I don’t see any 500 errors in the browser console, but I’m not too experienced in using that feature, so I may be missing something. The URL in question is https://westhamptonma.gov

I understand the speed and SEO differences for having dedicated pages for this, but the use case here is to give users a way to see a quick look at these doc types without having to navigate away from the main page. SEO isn’t important at all for this application, and instantaneous loading isn’t crucial either, just as long as it’s not agonizing to use. The client has low traffic and doesn’t want to spring for premium hosting just for a feature or two, but to me it seems like there should be something fixable, as just loading this one query shouldn’t feel like it should take 10-15 seconds.

Note that I think you’re onto something regarding server processing speed, because if I turn the doc counts back on, the problem with showing unfiltered content and (-) counts comes back, BUT something I didn’t notice is also happening: it usually eventually loads if you wait long enough. It’s double-digit seconds, so I never did wait it out until now, and I’m sure no regular user would either, but if there’s a way to make the query happen faster, I think I could find something that’s good enough.

To clarify one bit of background: if I have the Filter set to Ajaxed, it takes forever to load if I click the filter buttons, but the initial page load seems reasonable most of the time. If I have it set to Simple Show/Hide the page loads quickly enough, and it filters quickly, but if I hit Load More, it takes forever to run that query and redraw the list of posts. Either way, the query seems to be the problem, and choosing Ajaxed or Show/Hide just puts the painful loading time in different moments.

Hi,

Oh, I remember this site

Ajaxed means that each time you click a filter it will send the request to the server to get the posts for the filtered item. When you use the simple show/hide it’s only going to filter items already on the page. The later is generally only if you have a set number of posts without any pagination (load more). If you have a lot of posts and you need pagination, then you would want to use AJAX to fetch the posts.

I’m not seeing any errors in the console and the items do load but it does take a long time. Unfortunately that’s just server related, it means the server is taking a lot of time to process the ajax request: https://a.cl.ly/nOuOOx7G

In WordPress ajax requests are sent to admin-ajax.php it’s possible there are other plugins on your site that are running in the WP admin when not needed that could be slowing things down. But it’s also possible it’s just a slow server response. Troubleshooting why it’s so slow can be a bit tricky and may require disabling plugins to see if any of them are causing the slowness and/or reaching out to the hosting company to see if they can assist. But there isn’t anything that can be done from the theme’s perspective as it’s just a basic request for posts using a WP_Query.

It’s also very possible, depending on what server your site is running on that this isn’t “slow” but rather the default server speed (which is slow).

And yes, for this specific page it wouldn’t make any sense to have standard (non-ajaxed) pagination or filtering because there is a lot of other content, so it would be weird.

- AJ

Hi James,

I think creating a custom card is best as it’s the easiest and you will have full control. Also the Post Cards element is slightly faster. Plus, when you use elements like the Blog Grid it means you can’t enable WPBakery Slim Mode – https://totalwptheme.com/docs/wpbakery-slim-mode/ – which really slims down the backend as a lot less elements are registered.

To create a similar custom card can be a bit tricky if you aren’t sure how to do it because of that left aligned image. But it’s very simple to do using the theme’s Icon box with some shortcodes and dynamic variables.

Here is a video example showing how I would setup the custom card: https://a.cl.ly/4guEGzx6 (i’m just doing it on the homepage, you would of course create a custom card)

Here is the code if you want to copy/paste into a custom card – https://gist.github.com/ (past via the WP classic editor in “code” mode).

Alternatively you can use the Blog List 1 default Card style

- AJ

Hi AJ

Thank you for your help. Your demo inspector tool is brilliant – love it!

I’ve drafted up my new homepage based on the demo – please see here: https://quantumleapgolf.com/test/ (password = test)

You’ll see I’ve used the Portfolio Grid element as you do in your demo, looks great but I’ve not been able to make it work properly. Of course it’s intended to link to portfolio items, but I want to link it to specific pages. If you click the first one you’ll see it works. That’s only because I’ve ‘fudged it’ by using a 301 redirect to send it to the required page – but of course that’s not good practice.

So… how can I keep the new home page looking like it does but with the 6 images (currently displayed with the potfolio grid) linking directly to the required pages?

Thank you in anticipation, Tony

Hi,

Instead of the Portfolio Grid you can use the Post Cards element. Set the Card Style to “Image” then you can add the hover effect via the Media tab.

I will actually update the demo to do the same, since the Post Cards is the newer/preferred element. I made a video of me making the changes so you can see how it’s done: https://a.cl.ly/6qunAel7

For linking to pages choose “Page” as your post type and then use the “Query specific posts” setting to show specific pages: https://a.cl.ly/nOuO4kyO (in WordPress pages are technically posts as well under-the-hood).

- AJ

Thank you AJ – spot on!

Hi James,

Once you define a template for the Header Builder it’s applied always, so it’s not possible using that functionality. But it’s 100% possible to create a template to use on mobile and hide the default header on mobile.

I had some snippets already to show you how to hide the header on mobile and also how to insert template content on the site, but not a dedicated snippet for what you were asking so I added one.

See here: https://totalwptheme.com/docs/snippets/mobile-header-template/

Let me know if you have any issues or questions!

- AJ

Thanks AJ, that looks great. Just one other thing, I would need to hide the top bar on mobile too – is that included in this script or if not can you tweak the code to include hiding the top bar on mobile?

You can hide the top bar on mobile using the existing settings under Customize > Top Bar > General > Visibility.

Hi AJ, That’s exactly right! and a searchable autocomplete would be great.

I did put the snippet you provided into my child functions file and it did make the template field into an autocomplete/searchable field, however on my site it didn’t work – i.e. when i add anything it just gives me back ALL the templates in the same order (date) as before. For some reason it isn’t working at finding templates.

Thanks for your help. - Kim

Hi Kim,

Sorry about that, I did make a little mistake in the code. I’ve updated the snippet: https://totalwptheme.com/docs/snippets/templatera-select-autocomplete/

I forgot to pass the variables $search_string in the second function and $value in the 3rd function.

Sorry about that!

- AJ

Thanks AJ – Works perfectly – you’re a star!

Aw, that sounded so promising, just the kind of janky maneuver that always seems necessary with TEC. . . but nope, hopes dashed. For what it’s worth, the site where the template redirect is actually working is using Default Events Template, not Default Page Template anyway.

Got any other ideas? Happy to provide a login if that’s helpful.

Wait, stop the presses. . . I just noticed my FTP program was waiting at the “do you want to overwrite the remote file” prompt Geez. Once I said YES, it worked! Thanks for saving the day.

(as always)