Hi,

It sounds like you want something truly custom. There are a few options:

1. Use a Theme element for example but just apply a little CSS to your site to make it look how you want. Example: https://a.cl.ly/2Nub05jR – I think there are quite enough elements available where you would be able to tweak the design of one of them to make it look more how you would want it to look.

2. If you are adding multiple of these, perhaps what you would do instead is create a custom post type – https://total.wpexplorer.com/docs/adding-custom-post-types/ – so lets say you are going to display services you can create a post type named Services. Then you can add your items (you can use the Advanced Custom Fields plugin if you want to add extra details besides just heading, text, image).

Then to display them you can create a custom card – https://total.wpexplorer.com/docs/custom-card-builder/

I made a quick video to show you a basic example: https://a.cl.ly/BlubQOEX

This example is using the Card metabox to add custom links to each item, but of course if you can also set the post type Publicly Queryable option to true and have the items go directly to their posts or you can not have links at all if they are just visual boxes.

And you can of course apply CSS to your custom card for things like custom hovers.

3. If you just want a simple custom element that’s really unique and different from anything in the theme, why not just make your own shortcode so you have full control over the design? If you aren’t a developer or don’t want to code a custom element you could hire me for that and if you send me a mockup of the element I can code you something custom for the project (I charge $75/hr for custom work).

- AJ

Hi,

It’s not going to improve your site speed to change everything if that’s what you are wondering. So there is no reason to change the way your site functions if it’s all working.

But you may want to consider in future sites using the dynamic variables if you prefer as well. Here is a quick example of adding a custom dynamic variable that returns your company information:

add_filter( 'totaltheme/replace_vars/vars', function( $vars ) {
    $vars['company_number'] = '999-99-999';
    $vars['company_contact_email'] = 'email@somewhere.com';
    return $vars;
} );

Then you can use them like {{company_number}} or {{company_contact_email}}

So you will see for returning plain information it’s much slimmer/quicker to code opposed to creating a new shortcode for each using add_shortcode. Also because the dynamic variables are essentially just text there isn’t any conflict concerns so you don’t have to worry about prefixing them

- AJ

Thanks AJ,

At the monent i had created some custom settings page and using shortcodes like:

add_shortcode( 'pwt_telefono1', function() { return get_option( 'pwt_settings' )['pwt_telefono1']; } );

Do you think this is ok?

Hi,

This is AJ the theme author.

There isn’t any built-in setting for changing the logo URL it will always go to the value of the core WP function home_url(). However, it’s easy to change with some code (added to your child theme functions.php file or via the Code Snippets plugin). Example:

add_filter( 'totaltheme/header/logo/link_url', function( $url ) {
    $url = 'YOUR CUSTOM URL HERE';
    return $url;
} );

Now, if your theme is outdated the “totaltheme/header/logo/link_url” filter won’t work and you will need to instead use the older “wpex_logo_url” filter.

This is actually what I do on the /features/ subdomain here – https://total.wpexplorer.com/features/ – where the logo actually goes to the main landing page which is a different subsite on my multisite installation.

If you have any issues or questions let me know!

- AJ

Excellent. Thank you!

Your welcome, if you need anything else let me know!

- AJ

ps: I see your support license is expired if you are planning on renewing at some point (not required but appreciated) or if you need another license for another site (when you purchase a new license it also automatically renews support) the theme is currently 50% off so I wanted to let you know so you don’t miss out!

Hi,

Thanks for the heads up! I will fix this and actually it looks like the string is being translated in 2 places instead of a single place. So I fixed that as well for the upcoming update. That way when you edit the PO file it will look like this: https://a.cl.ly/o0uYmK0A

The reason the translation is incorrect is probably because the strings were separated so it was confusing to whomever was editing the .PO files.

Also, if you want the subheading to always be capitalized you can do this under Appearance > Customize > Typography > Page Title Subheading > Text Transform > Capitalize: https://a.cl.ly/7Kuz8XrJ

Thank you for bringing this to my attention!

- AJ

Hi Fran,

I’m doing good, thanks! I hope you are as well.

You will want to set the “Columns Position” to “Stretch” and maybe even enable the equal height columns option. I made a quick video to show you: https://a.cl.ly/E0uXrmeL

Now, depending on your site you could also do this without the Full-Height row (this functionality uses javascript) and instead add 100vh to each column. This will only work though if your items are showing at the top of the page or you can use calc() to subtract the top of the site (header). Example: https://a.cl.ly/d5ugpJjw – this second method would be a pure CSS method but will only work if you know the exact amount to use for the calc() offset and it’s consistent across all devices.

- AJ

OH!! Thank you very much! It was so easy. I will do the first option as it looks easier. Thank you very much as always for your fast help.

Hi AJ,

One less comment to worry about. All good here, I was able to resolve.

Thanks

Awesome, thank you for letting me know

Hi,

This is Aj the theme author. You do not have to activate the theme to be able to do anything, activation is primarily just for enabling automatic updates. Of course you will want to buy a legal copy of the theme to use it.

I’m curious as to why you ask? Thanks!

- AJ

Thanks for your reply Aj, I’m using only paid / original themes in my projects. and to be frank i wanted to install the theme on two websites, Your reply encourage me to benefit from current active offer. Your theme have some clean and elegant demos. I would like to invest in purchasing original themes

Hi,

This is Aj the theme author.

It’s possible but it’s fairly complex. Here is an example: https://total.wpexplorer.com/docs/snippets/add-custom-font-family-icon-box/

I would personally recommend rather then uploading a full icon set (which will introduce more bloat) to instead make use of the alternative fields like this: https://a.cl.ly/eDurBq1Z

Since SVG’s are potentially unsafe I don’t allow them to be uploaded and selected via the element (in fact WP doesn’t allow svg uploads natively either) but what you can do is use this field to enter a custom shortcode an a dynamic variable registered via your child theme or the Code Snippets plugin and then have that shortcode/variable return an SVG.

I personally prefer the dynamic variables because it’s slimmer. Example:

// Register new dynamic variables.
add_filter( 'totaltheme/replace_vars/vars', function( $vars ) {
    $vars['phalancs_heart_icon'] = phalancs_heart_icon();
    return $vars;
} );

// Function returns a heart icon svg.
function phalancs_heart_icon() {
    return '<div class="wpex-svg"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg></div>';
}

Usage: https://a.cl.ly/mXuDye2E

This way you only register the icons you want to use to keep the site slim.

Now, when writing this code and testing I did notice that the Icon Box element wasn’t updated to support dynamic templates so I just fixed that. If you want to try this function out here is a zip of the patched Total Theme Core plugin so you can override the plugin on your site to make sure this works as expected: https://a.cl.ly/bLulREln

Also I see that not all the elements such as the List item supports the Alternative character for the icon, so I will update them all to support this function. I can send the updated plugin when ready but I also plan to release an official update this week.

- AJ

You are a lifesaver AJ – thank you so much!! I’ve thankfully only had to bug you twice in over 40 license purchases for things I couldn’t figure out, but both times you’ve been a tremendous help. Such a great theme with awesome support.

Wow, 404 licenses! That’s awesome

Feel free to bug me more!! And if you still have any issues with this let me know.

- AJ

ps: If you decided to use the Header Aside area, by default this will show on mobile next to the hamburger icon, but if you want you can use a little trick to hide it from there and insert into the mobile menu like this: https://a.cl.ly/xQuRLAkd (you could even make a separate template for the mobile menu if you want extra spacing, etc). Just wanted to mention incase you weren’t aware you could do this. I know Total is massive and it’s so hard to know everything that’s possible!

This is great!! Thanks so much

Hi,

This is Aj the theme author.

Rather than creating custom pages you can instead make a template and assign it to your product archives. This functionality is include din the theme so you don’t need to do any redirections. Example: https://total.wpexplorer.com/docs/woocommerce-shop-archives-category-templates/

Creating pages for each category is not only going to cause a bunch of redirections but also you have to create new pages for every category which is a hassle and you can’t easily change the design globally if wanted.

Now, if you need custom data for each category you can of course use the “Category Description” field and display it in your template via the “Term Description” field and there are plugins you can use if you need WPBakery enabled on the categories but personally I wouldn’t recommend that if you need extra stuff added for each category it would be better to use custom fields (meta) which can be added via a child theme or a plugin like ACF.

Now, if you don’t want to create a global template for WooCommerce archives and will keep using pages you shouldn’t be using redirections to handle the breadcrumbs. If you are using the theme’s redirect option – https://a.cl.ly/L1uDJQkw – you are correct, the theme should update the URL in the breadcrumbs and anywhere else (thank you for bringing this to my attention). It’s actually pretty simple, if you want a hotfix before the official update here is some code you can use:

add_filter( 'term_link', function( $termlink, $term, $taxonomy ) {
    $redirect_id = get_term_meta( $term->term_id, 'wpex_redirect', true );
    if ( $redirect_id && $redirect_url = get_permalink( $redirect_id ) ) {
        $termlink = esc_url( $redirect_url );
    }
    return $termlink;
}, 10, 3 );

- AJ

ps: I see your username doesn’t have the “purchased” tag next to the name. Have you purchased a legal copy of the theme? If not, please do. Thank you! I spend a lot of time and effort supporting and keeping the theme up to date.

None of this works, as I’ve arranged the portfolio (the menu items in question) alphabetically except for the last item.

This means that ‘Auto-Sort’ wouldn’t work, and the ‘Menu-Order’ in the Cards element just does whatever it likes and chucks it on the floor like spaghetti.

I’ll try some troubleshooting in the morning, but at the moment, it’s ‘Post Types Grids’ all the way.

The Post Cards query uses the same exact query class as the Post Types Grid so the sorting would be exactly the same for both elements. It would be impossible to behave differently since it’s using the same code. Very strange… And again, I’ve double checked the plugin and it works just fine for me, so it sounds like there is a conflict coming from somewhere else. Did you already revise any child theme code or 3rd party plugins as I mentioned?

Here is a video showing the Post Sorting working perfectly with the Post Cards element: https://a.cl.ly/xQuRLr29

If you want to share the URL so I can see you can, maybe something else is going on here…For example if you are using a Masonry Grid style where the items are being placed wherever there is an empty space then perhaps that’s what’s causing the issue.

And of course there is no reason to use a different element if the Post Types Grid already does what you need it to do no need to switch. The purpose of the notice is to inform new customers of the Post Cards element because of the naming of the element they may assume that the Post Types Grid makes more sense to use where it may not necessarily be the case since it’s very limited in comparison.

- AJ

Hi AJ,

I finally worked out that using the ‘sort by ASC’ gets my images in the right order, rather than ‘Default’ or ‘DESC’ which creates the spaghetti.

I can’t see me using the cards element though, as even if they are more powerful, they’re far too fiddly in having to design two or more modules at once.

Hi Tonny,

The element was updated so that the custom toggle styles are added as a style element rather then a bunch of inline style=”” tags which cleans up the HTML and also greatly slims down the PHP. So your CSS won’t work because the toggle is no longer the first child. You would need to instead us :first-of-type:

.vcex-toggle-group--w-borders > .vc_vcex_toggle:first-of-type > .vcex-toggle,
.vcex-toggle-group--w-borders > .vcex-toggle:first-of-type {
    border-top: 0;
}

Sorry for the troubles!

Now, I know it’s a pain to update things and you don’t have to of course. But I did add new options for the Toggle Group so you can target all the toggles inside the group. For example instead of selecting the icon color for each toggle you can assign it in the toggle group and it will target all the toggles inside it: https://a.cl.ly/ApuvkLlP

This is more of a heads up for future sites if you hadn’t noticed these new settings

- AJ

Hi,

Here is the docs for child themes – https://total.wpexplorer.com/docs/child-theme/

But honestly, child themes are an advanced functionality so if you aren’t a developer and don’t know how to create child themes perhaps you shouldn’t even be using them. Why were you thinking of creating different child themes?

- AJ

My understanding is that if we made some customised settings, we need to have child theme so that these customised setting can be preserved when we update the parent theme. Is there other way to preserve customised settings when updating theme?

You need a child theme only if you are adding custom code to the site. Most customizations can be done without custom code using theme settings. So I wanted to mention this as I see a lot of people adding child theme’s to their sites but they aren’t developers and aren’t actually making advanced modifications so it’s not needed.

- AJ

Hi,

This is Aj the theme author. Sorry for the delay, I’ve been under the weather.

If you want you can report the errors here – https://github.com/wpexplorer/office/issues – and I can fix them up so you can download a patched version if your client is fine just fixing the errors

- AJ

Hi,

You can use a custom query like this: https://a.cl.ly/nOuKknJj – where 1,2,3 is a comma separated list of the ID’s you want to show. More info here: https://developer.wordpress.org/reference/classes/wp_query/#post-page-parameters

- AJ

ps: The Blog Grid is fine to use but I highly recommend you check out the Post Cards if you haven’t yet. It has more options and you can also create custom entry designs if you want full control over what the grid looks like: https://total.wpexplorer.com/docs/custom-card-builder/

Hi,

This is Aj the theme author. So the Worship demo is using a transparent header with a custom overlay header template. So the modifications to reduce the spacing for the area under the header or alter how the content works under the header would be done via WPBakery > Templates > Transparent Header Title.

The spacing below the header is actually controlled via a template so that it can be used in various parts of the theme for consistency and this can be altered via WPBakery > Templates > Content Top/Bottom Spacing. Where you can edit it globally or you just edit the Transparent Header Title template and remove that template from the bottom and control the custom spacing below this area seperately.

I made a little video to show you here: https://a.cl.ly/Kou9WvEx

So basically to adjust the space you would modify the “Spacing” element where you can enter any value you want. I’m using viewport units (vmax) so the spacing is responsive but you can enter pixels, use the clamp() function, etc.

If you don’t like the transparent header (the background under the header) you can always disable that and enable the default page header title instead. Example: https://a.cl.ly/8LuqJRWy

Let me know if there is anything else I can assist with!

- AJ

Hi Bob,

It’s been a while since I’ve seen you I”m doing good thanks, I hope you are also!

So, the way the masonry is setup is that it places items in order as opposed to trying to “fill” in gaps. This is so that if your are showing posts for example the posts would always be shown by their published date. If items were allowed to fill up empty space then you could have posts out of order. So for example on your site if that last item was moved to the left to fill in the space it would technically be out of order.

Now, I don’t have any built-in settings to change how the masonry works by default but if you are using a child theme or the code snippets plugin you can add this code to your site:

add_filter( 'wpex_masonry_settings', function( $settings ) {
    $settings['masonry']['horizontalOrder'] = false;
    return $settings;
} );

Which will fit your masonry items whenever there is space regardless of the order and should fix up that issue you see. Let me know otherwise!

- AJ

Thank you for your quick reply, AJ! I fixed the gap between the posts changing the query from ‘date’ to ‘latest modified’ and now they fit ok, it is not so important that the feedbacks are stacked in a particular order.

Hi,

Changing the order like that could work but only if you don’t change any of the content, basically if it looks good making that tweak it’s pretty much pure luck

- AJ

Hi,

This is Aj the theme author. So now that you have your own custom style you will need to add custom CSS to your site to target the tab style. You can use the browser to inspect the tabs and see the classnames applied to the different elements so that you can target them with your custom CSS.

And of course you can target the items different if they are active or not since active tabs have different classnames.

You can look at the Total theme’s tab style as an example: https://total.wpexplorer.com/features/style-guide/ – this is the CSS used for the theme’s styles:

.wpb-js-composer .vc_tta.vc_general.vc_tta-style-total .vc_tta-tab > a {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent
}

.wpb-js-composer .vc_tta.vc_general.vc_tta-style-total .vc_tta-tab.vc_active > a {
    color: inherit;
    border-color: var(--wpex-border-main)
}

.wpb-js-composer .vc_tta.vc_general.vc_tta-style-total .vc_tta-tab > a:focus-visible {
    color: var(--wpex-link-color, var(--wpex-accent));
    outline: 2px solid currentColor;
    outline-offset: -3px
}

@media (min-width: 768px) {
    .wpb-js-composer .vc_tta-tabs-position-left.vc_general.vc_tta-style-total .vc_tta-panel-body,.wpb-js-composer .vc_tta-tabs-position-right.vc_general.vc_tta-style-total .vc_tta-panel-body {
        padding-top:0;
        padding-bottom: 0
    }

    .wpb-js-composer .vc_tta-tabs-position-top.vc_general.vc_tta-style-total .vc_tta-panel-body {
        padding-left: 0;
        padding-right: 0
    }
}

Notice how the CSS is targeting the “vc_tta-style-total” since the style name added in the theme is “total”. You would want to target your custom style name to ensure the CSS is only applied to your custom style.

Additionally WPBakery turns tabs into accordions on mobile so you will need to style things with this in mind or you can disable that as mentioned here: https://total.wpexplorer.com/docs/snippets/keep-visual-composer-tabs-as-tabs-on-mobile/

- AJ

ps: It looks like your username doesn’t own a license of this theme (Total) are you actually using this theme or trying to accomplish this with a different theme and commenting here since you found the snippet on the documentation for this theme?

Hi,

This is AJ the theme author. I hope you are having a nice weekend.

You shouldn’t have any issues with the update. But in terms of updating the theme version or the PHP version depends on your current PHP version. If you are using PHP version 7.4+ then updating the theme first should be fine and you shouldn’t have any errors. Of course if you are on an older PHP version and update the theme and it’s not compatible, once you update the PHP version you should be good to go. So, I recommend updating the theme first

Of course if you run into any issues updating let me know, I’m here to help!

- AJ

Hi,

I just tested the plugin and it’s working correctly for me (example – https://a.cl.ly/L1uDgOgm ). There is a bug though with the carousel arrows showing up massive, which requires a tweak in the plugin so I will push out a quick plugin update with the fix for that.

Are you able to share the URL you are working on so I can take a look and see why it may not be working for you? This way if there are any other bugs I can fix them up.

Now, the way the carousel would work is if you have 2 related items and your site is set to display 4 then there won’t be any carousel because you don’t have enough items so it will just display the two of th em side by side (doesn’t expand or change the columns to fill up the empty space, this wouldn’t be good).

In terms of the dynamic template, you are correct the whole point is to allow you to design your product pages completely so that they can look however you want them, so you’ll need to add everything you want to display on the product page (price, title, etc). There is a theme element named “WooCommerce Template Part” which you can use to insert WooCoomerce elements.

- AJ

Hello AJ,

Thank you for updating your plugin. Now everthing works as it should.

When updating I noticed that the plugin didn’t support responsive columns which I believe was the issue you were having because if you had set the columns for different breakpoints in the customizer then the carousel would basically break and display vertically. So the updated plugin now supports the responsive columns and I also added a little optimization for the script loading

Thank you for reporting the issues with the plugin! Let me know if there is anything else at all I can assist with

- AJ