22369 comments found.
Hi AJ,
If I run the theme on Apache with PHP 8.1, everything works. But if I switch to PHP-FPМ with PHP 8.1 or 8.3, the site layout breaks.
What could be the reason for this?
Hi,
There are many reasons why switching could cause issues, but they would all be server-related and not on the theme’s side.
When you say “site layout” I’m assuming you mean the design which would imply that perhaps the CSS is not correctly loaded on the site. My first thought would be that perhaps the issue is related to user permissions so the theme’s CSS isn’t loading.
- Ensure the PHP-FPM process user (commonly www-data, nginx, or similar) has read access to your WordPress files, themes, and plugins. CSS, JS, and media files must be readable; otherwise, pages may load without styles.
- Make sure URL rewrites in .htaccess (Apache) are correctly translated for Nginx or your FastCGI setup. Incorrect paths can prevent CSS/JS from loading.
If you switch to PHP-FPM and notice layout issues, open your browser’s developer console. Any errors related to files not loading, such as CSS or JavaScript, will show there and can help identify the cause.
- AJ
Thank you AJ
I’m having a problem with the filter – wpex_footer_builder_page_id – for some reason it’s no longer working. I have a series of dynamic templates that should replace the default in the footer builder, but they’ve stopped working. I’ve tried to use wpex_footer_template_id instead, but this only adds another footer under, but does work in the correct conditional way.
Hi,
Hmm, I looked back a few versions and nothing has changed with this filter. Are you updating from a much older version?
At one point I did optimize the code to cache the Footer ID so the filter is only going to run once so I can see how it can cause issues if you are wanting to modify the filter after the wp hook (where you can use conditionals like is_post, is_term…etc).
Working on a fix for this, it’s a bit tricky to keep things optimized and also allow to modify the footer in the later hooks. But I’ll figure it out. I’m most likely going to release a Total 4.6.1 small patch shortly and I’ll include this fix.
This has definitely been an issue for several versions now though no one had reported it, so thanks!
If you want email me directly to wpexplorer [at] gmail dot com and I will provide you with the patch as soon as it’s ready!
- AJ
Actually the fix is very easy! If you want to patch it yourself you can…Simply edit Total/inc/footer/core.php and locate the get_template_id() function and change it from this:
public static function get_template_id(): int {
if ( null === self::$template_id ) {
self::$template_id = 0;
if ( get_theme_mod( 'footer_builder_enable', true ) ) {
$id = get_theme_mod( 'footer_builder_page_id' );
$id = (int) apply_filters( 'wpex_footer_builder_page_id', $id );
if ( $id && 'publish' === get_post_status( $id ) ) {
self::$template_id = $id;
}
}
}
return self::$template_id;
}
To this:
public static function get_template_id(): int {
if ( ! get_theme_mod( 'footer_builder_enable', true ) ) {
return 0;
}
if ( null === self::$template_id ) {
self::$template_id = 0;
$id = get_theme_mod( 'footer_builder_page_id' );
if ( $id && 'publish' === get_post_status( $id ) ) {
self::$template_id = $id;
}
}
return (int) apply_filters( 'wpex_footer_builder_page_id', self::$template_id );
}
Basically we are just moving the filter outside of the cached check, this way it can be changed on demand whenever the function is called, but it will only run the status check on the initially set custom footer defined in the admin panel – which makes sense…no need to run these checks on user defined ID’s.
- AJ
Great. thanks. I did find a way around it by using the Custom Actions area (inside footer) to use a generic dynamic template, then use a new function to swap that out based on the custom post type slug matches. But i’ll try this in an older site that is using our original method.
Hi AJ,
I’m revising a website and used one of the demos, it has wp forms. When I look I don’t actually see a form created, an I missing something here?
Thanks
Hi,
None of the theme demos use the WP-Forms plugin, so I’m not sure what you are referring to. The theme has it’s own simple Contact Form Element though which I use in some demos: https://totalwptheme.com/elements/contact-form/
- AJ
That’s what I see the one on the left, who and where is this defined?
I’ve sent a test email, but I don’t see anything come through to me email address (which is the admin for the site) sorry if I’m missing the obvious?
Hi,
The Contact Form element is added on the page itself via WPBakery so you can edit the page to modify the design, but it’s a simple contact form so you can’t add/remove fields (anything more would be best done via a 3rd party plugin).
By default, the theme’s Contact Form will send the email to the admin email address (as you mentioned) but this email can be modified in the main Theme Panel – https://totalwptheme.com/docs/contact-form-recipient-address/
If the form shows a green notice on submission letting you know that the the email was sent, but you didn’t receive any, most likely it’s going to your spam folder or your domain’s DKIM, SPF and/or DMARC records are not setup correctly. Because the green notice would only display if the email was sent by WordPress, thus it means the issue is on the receiving end.
This plugin can be helpful for testing to make sure emails are being sent correctly by your server – https://wordpress.org/plugins/check-email/ – so if the emails are properly sent, but not received then you know the issue is with either the domain records or with your email provider.
- AJ
Is it possible to update WP Bakery + Templatera even if the theme is not ready yet? Is there any risk of loosing any settings by deleting these plugins and re-installing?
Nope, I actually had a notice on the upcoming changelog because I specifically updated the plugins live so if you want you can delete and re-install them.
But I just finished Total 6.4 so you should be able to update any moment now as soon as it’s accepted by ThemeForest I will send out the notice to your dashboard – https://totalwptheme.com/docs/changelog/6-4/
- AJ
Awesome, thank you AJ! Looks like a brilliant update as usual.
Hi,
I’ve already patched Templatera as well, but technically Total overrides the Templatera code and the code in the theme has had this patch for years.
Total 6.4 is ready and you should see the notice to update any moment now – https://totalwptheme.com/docs/changelog/6-4/ – so you can wait for the official update to update Templatera if you wish. Also, most customers choose to not install or even use Templatera as it’s not really needed – especially since the introduction of Dynamic Templates in Total a few years back.
- AJ
Hi, AJ,
The Wordfence security plugin is showing the following issue with the latest version of WPBakery:
Plugin Name: WPBakery Page Builder Current Plugin Version: 8.4.1 Details: To protect your site from this vulnerability, the safest option is to deactivate and completely remove “WPBakery Page Builder” until a patched version is available. Get more information.(opens in new tab) Vulnerability Information: https://www.wordfence.com/threat-intel/vulnerabilities/id/d7c80143-c328-4cd1-95db-67de2edc058c?source=plugin(opens in new tab) Vulnerability Severity: 6.4/10.0 (Medium)
I’ve set Wordfence to ‘Ignore’ the issue at present.
Hi,
I had a notice on the upcoming changelog – https://totalwptheme.com/docs/upcoming-update-changelog/ – which explained that you can simply delete and re-install the plugin to get the patched version. But because the vulnerability required author/contributor access or greater (these users can already do all sorts of bad stuff by default), it didn’t warrant releasing a whole theme update since 6.4 was right around the corner. If there is ever a severe vulnerability I will of course release a theme update immediately.
Be sure to always reference the upcoming changelog if you have any issues or warnings like this as I generally use it to display important notices.
But Total 6.4 is now finished – https://totalwptheme.com/docs/changelog/6-4/ – you should see the update notice and email from Envato any moment now.
- AJ
Thanks, AJ,
All sorted!
Hi, is 6.3 the latest theme version update?
Hi,
This is AJ the theme author. I hope you had a nice weekend. Actually I was finishing up Total 6.4 – https://totalwptheme.com/docs/changelog/6-4/ – which I just submitted and you should see it available any moment now!
- AJ
I’ve been using this theme for years, and really loving it! The possibilties combined with the simplicity is great. What I do wonder is when there will be more support/features for CSS based (scroll) animations etc. Elementor (Total theme is built for WPbakery) is far ahead on this….
Hi,
This is Aj the theme author.
The CSS Animations are an exclusive WPBakery feature (not part of the theme) so we pretty much just have to wait for the plugin developers to enhance the feature 
But…Total is also built for Elementor! Maybe you haven’t noticed that I’ve added support over the years. See here: https://totalwptheme.com/elementor-integration/
Since most my customers don’t use Elementor and the customers that do use Elementor usually don’t import theme demos, I haven’t converted the theme demos yet to create Elementor versions. I’ve only done one of the demos (as requested by a customer). But you can see here: https://totalwpthemedemo.com/synergy-elementor/ – this demo is using Total to recreate the WPBakery based demo – https://totalwpthemedemo.com/synergy/ – as you can see all the Theme Features are available for both builders. All new demos released will have both WPBakery and Elementor versions and I will update old ones as requested 
I have spent a lot of time ensuring compatibility with Elementor free and Pro – all the theme’s awesome Elements and features like Dynamic Templates, Color Palette, Custom Fonts, Footer Builder, Header Builder…etc – all work with both WPBakery and Elementor!
Plus, Total has a unique Elementor feature built-in that removes all the extra Elementor upsells and marketing for a better experience. I actually wrote a guide on how to do this – https://www.wpexplorer.com/complete-guide-to-removing-elementor-upsells/ – if you are using Total though, this is all done for you automatically.
So, don’t think you are stuck using WPBakery! In fact, I even added a notice in the admin to let customers know before installing WPBakery: https://a.cl.ly/d5u5EDd0
Be sure to keep up with the theme’s changelog because that’s how you would find out about things like the Elementor integration – https://totalwptheme.com/docs/changelog/
Let me know if you have any questions!
- AJ
Hi. I am trying to link an image grid element in a dynamic template for a custom taxonomy term to an ACF gallery field that is part of a field group linked to that taxonomy. While I can select the ACF field from the custom fields dropdown list in the image grid settings, it does not render at all on the actual page. Linking the same gallery field to an image slider works fine. I’ve tried toggling all the return formats for that field in the ACF settings and still nothing. Any ideas?
Hi,
This is Aj the theme author!
Thank you for reporting the issue, this is definitely a bug. When I added support for taxonomy fields I must have forgotten to update this specific element. I’ve fixed the issue for the upcoming 6.4 update (which should be released within the next few days – the update is done I’m just testing everything).
The fix is quite simple if you want to update the file yourself for the meantime:
- Edit the file at plugins/total-theme-core/inc/vcex/templates/vcex_image_grid.php
- Delete lines 24-39 which look like this:
$cf_fallback = $image_ids;
$image_ids = ''; // !!! important !!!
$custom_field_gallery = sanitize_text_field( $custom_field_gallery );
if ( function_exists( 'get_field_object' ) && str_starts_with( $custom_field_gallery, 'field_' ) ) {
$field_obj = get_field_object( $custom_field_gallery );
if ( ! empty( $field_obj['type'] ) && 'gallery' === $field_obj['type'] && ! empty( $field_obj['value'] ) ) {
$image_ids = $field_obj['value'];
}
}
$image_ids = $image_ids ?: get_post_meta( vcex_get_the_ID(), $custom_field_gallery, true );
if ( ! $image_ids && vcex_is_template_edit_mode() ) {
$image_ids = $cf_fallback;
}
- Paste this code where you deleted the previous code:
$cf_fallback = $image_ids;
$image_ids = [];
$meta_value = vcex_get_acf_field( sanitize_text_field( $atts['custom_field_gallery'] ) );
if ( $meta_value ) {
if ( is_array( $meta_value ) ) {
foreach ( $meta_value as $k => $v ) {
$image_id = $v['id'] ?? $v;
if ( is_numeric( $image_id ) && wp_attachment_is_image( $image_id ) ) {
$image_ids[] = $image_id;
}
}
} else {
$image_ids = $meta_value;
}
}
if ( ! $image_ids && vcex_is_template_edit_mode() ) {
$image_ids = $cf_fallback;
}
If your site has the plugin file editor enabled you can make these changes under Plugins > Plugin File Editor. However, it’s best to make these changes via FTP so if there is any error you can fix it. If you make changes via the WP admin and there is an error you may not be able to access the admin and then you will need to use FTP to fix it.
Thank you again for reporting the bug and sorry for the troubles!
- AJ
Thank you for the prompt fix!
Total 6.4 is finished and you should see the notice to update any moment now – https://totalwptheme.com/docs/changelog/6-4/
The fix I sent you will work if you are exclusively using ACF and it won’t work in certain scenarios (like inside custom cards). Total 6.4 should work with all use cases though – but if you do have any issues after updating please let me know!
Also in Total 6.4, I’ve introduced support for ACF Options Panels. For example, you might create an ACF options panel for the end client with settings like “Homepage Banner”, allowing the client (or yourself) to make quick changes without needing to edit the page with the builder.
- AJ
Hi Aj,
Just reporting a small bug that i’ve noticed. On the checkout page when you click the terms and conditions and it reveals hidden text it’s showing the raw code for the visual computer columns.
For example
css=””]
Only a small bug but just thought id let you know
Hi,
I can recreate the issue and it’s very strange because looking at the source code it’s displaying the HTML but clicking the “Terms & Conditions” link reveals shortcodes. I assume the reason for this is because WooCommerce loads a “generic” checkout and it’s refreshed with ajax when the page loads. In this case WPBakery shortcodes don’t exist because of the context.
I wrote a snippet with the code to fix this: https://totalwptheme.com/docs/snippets/fix-wpbakery-woo-checkout-terms-conditions/
But I would recommend using the classic editor or Gutenberg for your terms page, there really is no need for a page builder for this page and it will keep things much more efficient and slim.
- AJ
Hi Aj, Last week the use of Dimensions on the Total image block stoped working with .SVG files. It was working great with just widths before and no need for height. But, around July 26th, the svgs started needing height dimensions too or the images have disappeared. You can get it to work with 100% width but that can get messy. it is a head scratcher.. and kind of a drag to go back in and add height to the images. Thanks John
Hi John,
You shouldn’t need to even define a width for your SVG images to display. I tested in the latest version of the theme and recorded a video showing an SVG displaying correctly without any custom dimensions and also with only the width attribute: https://a.cl.ly/rRuR61ne
Can you share a sample URL with the issue so I can inspect the site and test with your specific images?
Now, since the issue started happening before any theme update it would suggest something has changed outside the scope of the theme. Have you installed or updated any 3rd party plugins? Such as an image optimization plugin that may modified how images work on the site.
I had a look in the WordPress changelog and I don’t see anything that has changed in core, but it’s possible there was a change made in WP core that’s breaking things.
Now, under the Dimensions tab the “width” is technically a max width, so it doesn’t apply any dimensions to the image itself. This setting is strictly to contain the image to a max width and it targets the outer element not the image tag itself. If adding a height (which does set a fixed height on the image) makes the SVG appear, this would imply that the SVG’s don’t have set dimensions.
The way the theme handles SVG images to ensure they render is by passing a width of 9999 to the core WordPress function named “wp_get_attachment_image” which is used to return the image HTML (when not using custom crop values in the crop tab). Now, if the image has defined dimensions in the media library it looks like WordPress will use those instead. For example: https://a.cl.ly/xQu5gqDN – so if all your images for some reason have dimensions now of 0×0 in the media library then it could cause the issue you are experiencing – from what I can see WordPress calculates those dimensions based on the SVG’s viewbox.
I will keep reading through the reset WP changes to see if WordPress has changed something. From what I remember the 9999 width I was passing to the WP function would take priority but it seems like perhaps it’s not anymore.
If you share your URL I can download one of your images and test it locally to see if something is going on specifically with your SVG’s.
Regardless, the fixes to whatever is going on should be very easy (few lines of code) – please don’t waste a bunch of time editing all your images!
- AJ
Ok, it looks like WordPress did make some changes recently which would definitely cause some issues depending how your SVG’s are coded. Here is a link to the Github history: https://github.com/WordPress/WordPress/commit/3265225b6b08ba11f2c4e807d6e382c33e06f337 – the addition of the following lines:
$attr['width'] = $width; $attr['height'] = $height;
Causes the issues because, it’s now impossible to pass custom width and height attributes. Ugh :/
This means, if your images in the media library don’t have set dimensions (like the screenshot I showed you) then they will get a width and height of 0 and cause issues.
I think I can add a fix though in the theme by checking the final HTMl and if it contains width=”0” (which is likely what’s happening on your site) to change it to width=”9999”.
Again, if you can share a sample image you are using on your site so I can upload it and test locally that would be best.
Thank you for reporting this!
Right on I set you up with a login too.. Just in case. But in the meantime.
This is the page I fixed using height instead of width… which I embrace might be the way to go forward. 100% width works in general. The svgs seem to not be saved with dimensions in illustrator. https://www.bergelectric.com/about/ I put these back to ‘width’ as a dimension https://www.bergelectric.com/about-svg-test/not sure how to upload a svg for us.
Hi,
The issue is definitely caused by the WordPress update because they broke a functionality that is no longer possible. Basically the theme’s Image element detects if the image is an SVG and if so it tells WordPress to give it a width attribute of 9999 which is somewhat of a “hack” so that the browser renders the svg at full width regardless of it’s viewbox. The changes WordPress made, makes it impossible now to pass custom width/height attributes to the function that retrieves the image HTML.
If I inspect your site you can see that none of your images have the width=”9999” attribute and if I edit the site via the console to add the attribute (first removing the added height) it then works correctly: https://a.cl.ly/geue268n
The fix to make the theme worked how it used to, is quite simple, basically I grab the HTML returned by WordPress search for the width attribute (if there is one) and replace the width value with 9999 and if there isn’t a width attribute then add it to the html. I’ve already updated the theme for the next version with the fix.
I plan to release the Total 6.4. update this week, but I would like to help patch your site first with the tweak to ensure it’s working as expected. If you are willing, you can send me FTP logins as well so I can do this.
Not sure where you sent login info, but I didn’t get it (or pehaps you meant that you created one). If you emailed the support email directly you would have gotten an auto reply because that email only works with tickets. You would need to send any direct emails to wpexplorer [at] gmail dot com which is pretty much my personal email.
Now if you want to apply the fix your self you can as well.
Simply edit the file at Total/inc/functions/post-thumbnails.php and locate the following line of code (near the bottom):
$img_html = (string) apply_filters( 'wpex_post_thumbnail_html', $image );
Right before this line you would add the following:
if ( $image ) {
if ( isset( $attributes['width'] ) ) {
$width_attr = absint( $attributes['width'] );
if ( $width_attr ) {
if ( str_contains( $image, 'width="' ) ) {
$image = preg_replace( '/\swidth="(\d+)"/', ' width="' . esc_attr( $width_attr ) . '"', $image );
} else {
$image = str_replace( '<img width="' . esc_attr( $width_attr ) . '" if="" isset="" absint="" str_contains="" preg_replace="" height="' . esc_attr( $height_attr ) . '" else="" str_replace="" />
If you test this and have any issues let me know! You would of course have to go and remove those heights that you've added or your SVG's will be cropped funny. I suspect you also had some max widths added that you've since removed.
I will be sure to update the label in the Image element so it's clear that the width field in the dimensions tab acts as a "max width".
- AJ
Thanks AJ!! I added the code update to the post-thumbnails.php function file.
Notice the svgs are now working on the home page over the videos. https://www.bergelectric.comI had not ‘messed around’ with them before I reached out.
So you can see the original approach is now working. 
I am always excited about new levels of the Total theme, this week!
Best jD
Cheers!!
Thank you so much for testing and confirming that the changes put everything back to how it was 
So annoying that WordPress changed things, but it happens from time to time and we just have to adapt.
Putting the final touches on Total 6.4 so I can do a lot of testing the next 2 days and release the update. If you haven’t checked out the upcoming changelog and want to, it’s here: https://totalwptheme.com/docs/upcoming-update-changelog/
- AJ
ps: My code got all messed up by Envato and I hadn’t noticed – I’m glad you know what you are doing and were able to paste the correct code (or maybe you got it correctly via email). Anywhere here is the proper code for anyone that may be reading this reply: https://gist.github.com/wpexplorer/590104d5dc0e738142922c4f000d7903
I noticed that.. seems to cut things a little short.
I added just the ‘width’ function and that worked
~ FYI
I will add the height now too.
The height part of the code doesn’t technically do anything as it was never used in the theme, I’ve just added it pre-emptively.
If your images are “cut short” it’s going to be because of the actual SVG code.
I used the WaybackMachine though to compare your HTML from March to what you have now and the HTML is exactly the same for all the SVG’s I checked. Example: https://a.cl.ly/nOuO85y1
Now, one thing worth mentioning, is that you are using SVG’s but rendering via the Image element, so it makes that extra request to the server. If you instead insert your SVG’s as plain HTML via the HTML element, then it would be much more optimized because it doesn’t have to make those extra requests for the resources as the SVG code is already on the page.
I could add a new “SVG” element in the theme that allows you to choose an SVG from the Media Library and render it as HTML not an image – the problem with this is security. I would need to also add a massive sanitization function to parse the selected SVG. It’s just not worth it when you can just use the HTML block.
But..it’s very easy to write a custom shortcode for this if you trust your SVG’s (as a theme developer I can’t trust the end user) and want a simple shortcode for selecting an SVG and rendering it inline as HTML. I wrote a sample class for you: https://gist.github.com/wpexplorer/31080f2bca87d3b13f47e07a8c99b9b0
Here is a video showing how the new element would work: https://a.cl.ly/6qun5vdE
Actually…I may actually add this element built-into the theme if the “Safe SVG” plugin is installed, then I can use their built-in sanitization function instead of adding one myself. Let me look into this, because it would be a really cool feature to have in the theme by default 
- AJ
ps: I had a look at the Safe SVG plugin and they have a custom Gutenberg Block and in their code they do not sanitize the selected SVG on render, they just grab the contents and return them like such:
$contents = file_get_contents( get_attached_file( $attributes['imageID'] ) ); // phpcs:ignore
So maybe it is fine to assume that content in your media library is safe…But according to WordPress coding requirements (from my understanding) this wouldn’t be allowed – https://developer.wordpress.org/apis/security/escaping/#toc_3
I’d have to think about this further, because passing each SVG through a complex sanitizer each time the page is loaded (without caching) may be too resource intensive. And security is always a primary concern.
- AJ
You are a genius AJ love the way your mind thinks with these things. I am tracking with you.. because the svg is a liability for some contexts. I always just add your svg function to the child-theme. I have pasted full code versions of maps into sites. I will say that the raw code on a larger more complex images can be pretty darned big. I did that here: https://psomas.com/contact/ I guess I could make a shortcode.. I used a WPBakery template at that point. I would use a Total Dynamic Template now.
Hi AJ,
I am using the Toggle (FAQ) Group with a dozen Toggle elements, some of which have substantial content. On desktop it’s great, but on mobile when a user clicks on a Toggle to open it, if the previous one (already open) is above it, the Toggle opens upwards and most of the content is off screen, requiring the user to scroll up in order to read that item.
I think I read that you designed this element deliberately without a scroll-to feature. That makes sense because the desktop experience doesn’t need it (and would probably be a lot worse with it) but on mobile it can be a problem. In the absence of scroll-to, would it be possible to add an option to keep all the Toggles open (i.e. not close the previous one when opening the next one)? That would work really well on both mobile and desktop. I’d prefer that to a scroll-to feature anyway.
Thanks,
Charles
Hi Charles,
I hope you’ve had a nice weekend!
The layout shift caused by the previous toggles closing is not good. But I think I can come up with a better solution that doesn’t require a new option and going back and updating elements. Plus, it’s important if a customer wants to use the accordion style that it works properly across all devices.
I can think of 2 solutions:
1. It’s been a long day so I’m not 100% sure on the logic, but I’m thinking when clicking to open a toggle, calculate the total height of all currently open toggles (prior to the one being clicked) and check if the sum of their heights, when subtracted from the top position of the clicked toggle relative to the viewport, would push the toggle too far up. If it does, then we don’t close the open toggles. This would be a dynamic fix so accordion is still allowed but only under the right conditions.
2. After each toggle is opened, check if the top of the element is inside the viewport and if not scroll to it. This fixes issues, but the jump could be annoying. I would of course not animate this, so it should be pretty instant. I may try this first since it’s easiest solution, but if the jump is very noticeable then I wouldn’t do it.
Both solutions are a bit of a pain and we have to take into account sticky elements (top bar, header, inline menus, etc). So I may also add the ability to disable the accordion effect as you mentioned. In fact, it may annoy some customers, but perhaps it should be the default to NOT close open toggles. I actually recently updated the theme’s mobile menu (which used to be an accordion) for this exact reason. I’m always hesitant to change things since someone always get’s upset…
Let me know if you have any feedback…Thank you!!
- AJ
Thanks for looking at this, AJ.
Personally, I’d be happy with just a simple option to disable the accordion style. The mobile menu works really nicely this way and it’s well understood by users when they come across it. It works on all devices too.
Your first solution could be a bit confusing to users, as toggles are sometimes closing but sometimes not. I’m not sure that would be an ideal experience, but to be fair, most people probably wouldn’t notice and would just be happy to have the content readily visible without having to scroll.
The second solution would be great, but definitely only if there is no annoying jump!
Simple non-accordion style works fine for me, but I appreciate that it doesn’t solve the layout shift problem for those who want to keep the accordion.
Thanks,
Charles
Hi AJ,
I have a second question about the Toggle, which I would normally ask in a new thread, but since we’re here…!
I have a page with several paragraphs, each of which I would like to end with a toggle for readers to discover more about the topic above. Using toggles keeps the page uncluttered, but means that the extra information is readily available if required. Since the format repeats itself, I am giving the toggles the same heading: “Abstract”. It’s basically a “Read more” button but without a page change. It looks good.
I happened to notice that you use the heading text for the toggle content element ID, so now I have loads of elements with identical IDs on the page. I know this isn’t good practice, but will I be able to get away with it? It seems to be working, but I’m uneasy about breaking a golden rule!
I tried using the WPBakery Toggle element, but it has very few customization options so I’d much rather use yours.
Thanks,
Charles
Hi Charles,
I will definitely add the option to disable the accordion effect and it will likely be the default option for new installs. This is a quick/easy fix and so I’ll put it in the 6.4 update so I can get that out asap while I figure out a good solution for the accordion style.
Regarding your second question…under the Toggle > Content tab there is an extra field you can use to enter a unique ID. Technically the ID added on the content and not the heading, hence why the field is added here, but perhaps it’s not very obvious.
One thing I want to mention though is if you have a page with a lot of the same design (it sounds like it). I would strongly recommend instead creating a custom post type – https://totalwptheme.com/docs/adding-custom-post-types/ – maybe it’s called “Documents” (sorry i dont know what you are actually displaying).
Then what you can actually do is create a custom card to display these – https://totalwptheme.com/docs/custom-card-builder/ – this way, you create the design for each of the items in a single place that you can control globally. You can get very creative with this, for example your post type could have the editor completely disabled and use the ACF plugin to add 2 fields: Main Content & Additional Content. If it’s mainly text this would work well.
I made a quick video example with a very simple/plain design if interested: https://a.cl.ly/6qunBdmE
The video is a little long (5mins) but hopefully you check it out, because if you aren’t familiar with creating custom post types, cards, etc – it may really blow your mind to what’s possible with Total 
Relevant docs:
- https://totalwptheme.com/docs/adding-custom-post-types/
- https://totalwptheme.com/docs/how-to-add-custom-fields/
- https://totalwptheme.com/docs/custom-card-builder/
- https://totalwptheme.com/docs/dynamic-variables/
Perhaps you don’t need it for this specific site, but it’s worth a mention…And if you are interested in doing this but can’t quite follow the video, let me know I’ll send some quick written steps.
ps: Just realized I didn’t add a title to the custom card in my video, of course that’s easy enough either with the Heading or the Title element…
- AJ
AJ, you are brilliant! Thank you so much for this.
For the page I’m working on, the chunks of text with abstracts are broken up with other content, in a fairly irregular fashion, so in this instance I don’t think Custom Cards will work. Nevertheless, I need to say I am a HUGE fan of your Custom Cards feature and I have created cards for a number of other pages, using Post Types Unlimited and ACF as you showed. They work really well, and I don’t know how I’d manage without them now!
I’ve added a random string for each of the toggle content IDs so there is no conflict.
Many thanks as always,
C
Hi,
Ok, so I’ve updated the Toggle Group so you can disable the Accordion and also added some JS to scroll to the section, if and only if it detects that it’s not in view. Here i a short video example: https://a.cl.ly/rRuR9bvR
Don’t think the scrollTo is so bad and it will only happen if it has to. This will help prevent issues on active sites without having to go back and disable the accordion. Plus, the user would have to scroll up themselves so I don’t think it should be too annoying. I also tried doing the scrollTo using an “instant” behaviour instead of smooth but that looked way worse.
Last, you may have noticed my accordion has backgrounds…I added a new Boxed styled and options to control the background, padding, active colors, active font weight…etc.
I was also planning on adding a left border style accordion, which I saw somewhere and it looked cool – but now I can’t find my inspiration, so maybe next update 
- AJ
I like the Brush Stroke font you use for the Travel Demo (header above the menu) Can you tell me which Font that is?
Hi,
I made this demo/logo like 10 years ago, honestly I can’t remember. I tried asking chatGPT but it wasn’t of much help and I can’t locate the original PSD file.
I found these Google Fonts which are similar-ish:
- https://fonts.google.com/specimen/Permanent+Marker
- https://fonts.google.com/specimen/Knewave
- https://fonts.google.com/specimen/Finger+Paint
- https://fonts.google.com/specimen/Rubik+Spray+Paint
A lot of fonts have been removed from Google over the years, it’s possible the exact font isn’t available anymore.
- AJ
Hi, can you take a look at https://www.aluminium-offshore.com/ — there is a search icon at the end of the main navigation. Suddenly it has stopped working, no error message nothing. What could be wrong?
Hi,
Total uses modern methods for loading javascript files for optimal site speed. This includes the user of the “defer” attribute which tells the browser to start loading a javascript file but don’t do anything with the file until the page has rendered.
On your site there is some sort of plugin or server script which is converting the file into inline code and inline code can’t be deferred. See this screenshot: https://a.cl.ly/9ZupN1qv
You’ll need to locate whatever plugin or server script is improperly taking your deferred scripts and dumping the code from the file inline instead of actually loading the file.
This issue on your site will break a lot of site functions, not just the search icon (for example, the mobile menu is also broken).
If there’s no optimization plugin installed on your site and your hosting provider doesn’t offer built-in optimization settings, the issue may be related to the PageSpeed module on the server. Based on your site’s source code, it appears that the PageSpeed server module is currently enabled.
- AJ
ps: Technically, I could modify the theme’s JavaScript files so that they still function when inlined at the top of the page. However, this would add unnecessary bloat to the theme. Any well-designed optimization plugin or server module should be smart enough to handle deferred scripts properly, especially when it’s taking external files and inlining them. It should automatically move those scripts to the bottom of the page when appropriate. So, making these changes manually doesn’t make much sense.
Thank you AJ, it’s been a while! The hosting admin auto turned on inline javascript. I disabled it and it’s working now!
Glad it was an easy fix. Would be good to let them know as well that whatever function they are using to dump the JS inline is correctly incorrectly. This way they can fix it and you can take advantage of the functionality if you wanted to and prevent headaches with other customers.
- AJ
Hi AJ
Im wondering you could offer some advice as how to create a home page like on here:
https://www.wholenesscollectivetherapy.com/ The first two rows seems to mover the backgriound to the right slightly as you scroll.The last one has the background image roll up slighly as you scoll.
Can you help?
Thank you
Hi AJ, Ive managed to do this with the Parralax setting in the row, with an image 2000px wide and an offset code in css, just working on a few finer points on other image and context
Hi,
Glad you were able to get it to work using the theme’s parallax function and some custom CSS.
- AJ
ps: Not sure if I’ve mentioned this to you specifically, but Total is also fully compatible with Elementor and they have this sort of function built-into the Pro version:
Hello AJ,
I hope, your fine! In my portfolio I inserted Vimeo-links via oEmbed to show them in a lightbox. I recognized, that they all autoplay by themselves which lets most browsers mute them. To prevent this and have them rather user-manually and UNMUTED started I would like to get rid of the autoplay. I didn’t find any setting in the WPBakery and I assume fancybox inserts it, because I couldn’t get around it with an adjusted Vimeo-version of your Youtube-Snippet https://totalwptheme.com/docs/snippets/add-custom-parameters-youtube-video-oembeds/ Of course I could add autoplay=0 to every URL, but if possible, I’d prefer a global solution. Do you have any ideas?
Cheers, Ben
Hi Ben,
Sorry I am a bit confused, when I test in all browsers the videos play and with sound. Are you saying you want it to play automatically but muted? Or you don’t want it to autoplay and you also want it muted to start?
Anyway, see here: https://totalwptheme.com/docs/snippets/add-custom-params-lightbox-videos/
Just change the 1 to a 0 
- AJ
ps: Very smart of you to ask for a global solution!
Hello AJ, it’s weird, that the videos play in all your browsers with sound ON from the beginning. I see on desktop and mobile (Safari and Chrome) that they autoplay and are muted by the browsers. Are we talking about the same website? It is: bit.ly/44SA7tK
However, thank you for the snippet! Unfortunately it shows no result in the lightbox yet. It does work in fact, if I used a simple video module. But it does not if I post the Vimeo-URL via oEmbed in a postcard. Fancybox seems to add quite a bunch of parameters like for example here in the fancybox-iframe: src=”//player.vimeo.com/video/1033090772?autoplay=1&hd=1&show_title=1&show_byline=1&show_portrait=0&fullscreen=1&share=copy” I also found all these parameters in the jquery.fancybox.min.js. Do you have any other hint?
And sorry for the confusion. Simply put, my goal is to deactivate autoplay, so the user needs to start the video, which prevents undesired browser induced muting.
Hi,
You hadn’t shared your website before, so I was testing on my own local dev and live test servers. I just tried your own site and I can see the videos are being played muted.
I personally was testing with YouTube, so it seems this issue is specific to Vimeo and it’s something they changed recently as the videos used to always autoplay with sound before.
I also didn’t realize you were working with the Post Cards element and I was testing with the Image element. It does seem like the Post Cards is not making use of the same filter. This is a theme bug and I’ve added the fix in the upcoming 6.4 update.
For a temp fix you will need to edit the file at Total/inc/lib/wpex-card.php and locate the get_lightbox_video() function and edit it to look like this: https://a.cl.ly/jkuknGn4
So you need to add the following code to the function:
if ( $video ) {
$video = wpex_get_video_embed_url( $video );
}
This change ensures that the videos used for lightbox are parsed correctly and the filter mentioned in the snippet will work.
OR you could instead hook into “wpex_card_lightbox_video” and not have to mess with updating any files. This is a separate filter for cards only, example code:
add_filter( 'wpex_card_lightbox_video', function( $video_url ) {
if ( $video_url && is_string( $video_url ) && str_contains( $video_url, 'vimeo.com' ) ) {
$video_url = add_query_arg( 'autoplay', '0', $video_url );
}
return $video_url;
} );
2) Not sure if you did this but you would also need to edit the snippet to change “youtube” to “vimeo”.
So, if you make the change above, adding the following in your child theme’s functions.php will prevent Vimeo videos from loading:
add_filter( 'wpex_get_video_embed_url_params', function() {
return [
'vimeo' => [
'autoplay' => 0
],
];
} );
This snippet will target non-cards, so if you used the last snippet to target cards only you can then add this snippet as well if you need to target page builder elements.
I will do some more testing though because if Vimeo is always muted when auto played now, then the theme should not auto play it by default as it’s a usability issue. So most likely I will be adding this code in the theme by default so that you don’t need a snippet.
Thank you for bringing this to my attention!
- AJ
Cool, thank you so much, this helped and works! And I’m glad I could help you too.
Now that it does, I realized on the fancybox-website, it IS in fact somehow possible, to have the video in a lightbox autoplayed AND unmuted at the same time – which was my initial goal. I assumed due to browser restrictions (missing user interaction) one could only have one or the other:
https://fancyapps.com/fancybox/#videos Under „videos“ the third one (paperplane) does it. Do you have any idea how to achieve this? Adding muted=0 to your snippet didn’t work. It was still overruled by the browser restrictions. And no worries, although I have no clue of coding, ChatGPT helped me with the syntax
It seems like on the fancybox-website the click on the thumbnail is read as user interaction, whereas in my case the click on the postcard-built portfolio is not.
Hi,
The theme uses Fancybox 3 which was the original free script – https://obu.edu/_resources/ldp/galleries/fancybox/
The new version of the script was originally very expensive (it’s still really expensive $470/year) and their license didn’t really support including the plugin in a theme for re-sale. But they have changed the licensing a bit so it would technically be possible to update to it. But it works completely different so updating would also take a very long time plus cause a lot of issues with customers updating that had made modifications on their site.
That’s why I’ve maintained my own custom version of the original FancyBox 3 script with manual fixes and enhancements.
Maybe in the future I will make the swap..but it’s a huge endeavor, expensive and it can break lot of site’s updating. I don’t know if the few small benefits are worth it.
From what I can tell the new version of FancyBox is not adding autplay=1 to the URL, instead they are sending a postMessage to the iFrame to tell it to auto play. I will try and see if I can do the same thing with the older script inside the theme in the next update. What makes things a bit challenging is that some customers may have disabled autoplay (like you did) so I need to detect the parameter first – remove it and then do my own thing.
- AJ
Ok, I did some tests…and it is technically possible for me to force autoplay (like the new fancyBox script does), however, it would be somewhat of a ‘hack’ and it would be going against browser and device policies. I don’t want any of my customers getting sued over accessibility issues.
And I’m honestly not sure about the logic Vimeo is using because on my test site if I unmute a video then the next time I load the video (even refreshing the page) it plays unmuted. Sample test: https://a.cl.ly/BluABGNn – so it seems to remember the preference, but for some reason it’s not doing that on your site.
I think the reason is because your site doesn’t have proper SSL protocols. When I test on my localhost it won’t work either.
Using SSL is extremely important though, so make sure you enable HTTPS on your server.
By the way, in the upcoming Total 6.4 update I’ve also added the ability to enable Gallery Lightbox like such: https://a.cl.ly/04uZKQPl – this way if a user opens the lightbox of the first post card it will show arrows to view the next/prev videos as well as the featured images at the bottom as thumbnails. So if someone just wants to browse the videos they can. Just letting you know in case you wanted to test that out after the next update is released.
- AJ
Hello AJ,
thanks for doing this test! I see, it seems to be tricky. You’re right, my side hasn’t SSL activated yet, because it is still under construction. Later it will.
I understand your concerns with the kind of „hack“ solution that you found. Maybe it doesn’t need to be the standard setting. But would it be an option for you to make it on/off selectable in the theme (potentially with all necessary warnings of going against browser and device policy at oneself own risk)?
The Lightbox gallery is a really cool feature! Thanks for letting me know. I will probably use it after the update. Will it also allow to turn off the thumbnails and only show arrows?
Ben
Hi Ben,
I actually just tried locally forcing the Vimeo video to play in HTTPS mode (of course my local computer doesn’t have SSL) and the video auto plays with sound. So it definitely seems like something to do with how Vimeo embeds work and they get muted when not using https.
Turning off thumbnails is currently a global setting in the Customizer. So if you want you can preemptively disable it under General Theme Options > Lightbox > Thumbnails Panel.
- AJ
ps: Whether the site is in development you should always setup SSL first (it’s free anyway) – not only for security reasons but also it will make the transition easier then having to go through and do a database search/replace for the non http version of your domain on the database after adding a bunch of content to the site.
Hello AJ, thank you for figuring that out! I appreciate your help and your work. Cheers, Ben
Hi AJ! I love Total on my websites. Best theme ever! How can I turn my website in a community platform. I want my members to be able to create profiles and get in contact with each other. Is there any functionality or plugin you can recommend?
Thanks!
-Jolopu
Hi Jolopu,
This sort of functionality (community) is very large and complex so it’s not going to be inside a theme (it’s likely to require more code than the theme itself). So you’ll need to use a 3rd party plugin, which will depend exactly on what you need. For example you could use BuddyPress – https://buddypress.org/ – which is what’s used on the official WordPress.com site and Total does have some basic integration for the plugin to ensure it at least functions and provide you with a few customizer options to modify layouts.
Whatever route you choose, keep in mind that once you allow users to register and interact with each other, you’ll need to consider important legal implications; such as data privacy, moderation responsibilities, and compliance with regulations like GDPR. Simply installing and setting u a plugin is a small part of everything it takes to setup and run a community properly. Depending on what you are doing, it may be best to just create something like a Slack group or Discord for your community.
- AJ
Thank you very much!
How to show a cart icon in header ou menu for Easy Digital Download.
Hello,
I would like to use TOTAL theme for an e-commerce site that uses EDD (Easy Digital Download).
I’m looking for a solution to display a “cart” icon in the header or menu. Ideally, I’d like to : - also display the number of items and the purchase amount - display the shopping cart when hovering over it - link to the “cart” page when the icon is clicked.
you can see that in action with my current theme : https://geneasofts.com/en/
I think TOTAL already allows this for Woocommerce but I haven’t found how to do it for Easy Digital Download.
Thanks in advance for your help.
Hi,
This is Aj the theme author.
You are correct, this function exists for WooCommerce but not Easy Digital Downloads. The plugin isn’t as popular (I think you may be the only customer using it) so I haven’t had any requests to add this functionality, but I wouldn’t be against adding it.
According to the EDD docs it’s very simple to display the cart counter: https://easydigitaldownloads.com/docs/showing-the-cart-quantity-in-your-templates/
I could easily update the theme’s default cart icon for the header to support the EDD counter (I will put this on my todo list)
But, the cart widget in EDD, just like on your current site, is very simple and doesn’t appear to be easily customizable. Contrary to how the WooCommerce one that can be displayed in a sidebar like on this demo and includes the product images – https://totalwpthemedemo.com/bolt/product/138/
I could make the theme’s cart sidebar support EDD but it won’t look as nice, it would likely require coding a whole custom functionality.
However, your site is actually redirecting to the cart page – this is probably best for most sites anyway. My recommendation would be to add the cart icon to the header that shows the counter but have it simply go to the main cart page instead of it opening a dropdown or sidebar. This will keep your site a lot faster also because having the cart visible on every page (like you do now) requires running extra functions on page load to get and generate the inline cart.
If you want email me at wpexplorer [at] gmail dot com – and I can try and get you a theme beta version with the EDD cart counter if you want to try it out before an official theme update and since you seem to be the only user that is using EDD – perhaps you have some added feedback/suggestions.
WooCommerce has tons of free and premium add-ons you can use to add a cart icon and better cart widget but I couldn’t find any for EDD, just this one – https://wordpress.org/plugins/wp-menu-cart/
- AJ
Hello AJ.
Thank you for your quick and detailed reply.
Displaying just an icon and the number of products can be perfectly sufficient with the shopping cart page in link.
As my site is in two languages with Polylang, there’s a shopping cart page for each language, so I’d need to be able to indicate a link for each language. The https://wordpress.org/plugins/wp-menu-cart/ plugin doesn’t seem to allow this (PRO version).
For your information, there’s already an EDD integration with Wp Bakery, but unfortunately it doesn’t concern the display of a header icon: https://wpbakery.com/addons/easy-digital-downloads/
I’ll continue my tests and write to you on your Gmail @mail for further information (and suggestion).
Sincerely
Hi,
Linking to the cart page based on the language shouldn’t be a concern at all, the theme already has a function I use for other things that translate page URLs.
I setup a new local server with EDD and I thought I had added some integration for the plugin but it looks like I haven’t added any sort of integration. Now, while there doesn’t seem to be a huge demand for the plugin it would still be good for me to at least provide some basic options for EDD so you can modify the layouts a bit because the default EDD design is quite vanilla and will render like the “blog” by default.
So I’ve added it to my todo list, not for this update but hopefully the next one to add a whole Customizer panel for EDD with some basic options. At least so you can choose your layouts like No Sidebar and to disable elements on the single product page. And to provide an easy way to display a cart link in the header and if possible a pop-out sidebar cart.
Feel free to email me and I can let you know when a Beta version is ready for testing.
- AJ
Hello AJ.
Thank you for your reply. I’ll send you a direct e-mail and I’m obviously interested in being a beta tester for these developments.
FYI: I don’t think there’s any integration for EDD with WPBakery. The component cited https://wpbakery.com/addons/easy-digital-downloads/ has not been kept up to date since 2017 and is causing technical problems.
EDD provides blocks for Gutenberg: https://easydigitaldownloads.com/docs/reviews-shortcodes/
Best regards
I wanted to mention…have you considered selling your digital goods through a separate service as opposed to self-hosting your own shop. There are some great options out there such as:
Personally, I would much rather have another site sell my product because then I don’t worry about the legality of storing customer data, dealing with VAT taxes, processing billing/user info…etc. I think paying a fee for the peace of mind is well worth it.
And all these services allow you to embed purchase links on your site. Plus, you get the added benefit of not having a large e-commerce plugin on your website which will keep your site much faster – aka better SEO + more conversions.
- AJ
Hi AJ,
Yes, I looked at these solutions, but in the end I decided to deploy my e-commerce site myself.
There are several reasons for this (“Pros”): - I knew how to do it. And i have to do this. - Easy Digital Downloads is a really powerful and comprehensive plugin. It allows me to choose: > sell software (licenses) with variants (editions). > sell by subscription or one-time purchase. > sell “suites/bundles.” > automatically manage licenses (with an API used from the software to verify acquired rights) and the ability to upgrade to a higher license. > automatically manage the release of updates. > sell version upgrades. > offer discounts and promotions. > do up-selling and cross-selling. > sell additional services. > sell on a “marketplace” (and pay commissions to authors). > integrate software documentation. > integrate support (tickets) with sales. > integrate sales with newsletters. > choose the payment method. > manage taxes (VAT). > add pages (including landing pages) and articles in addition to the software presentation. > link to social networks.
None of the “turnkey” solutions offer all of this for a relatively low cost (hosting + licenses).
Best regards.
There are inevitably some constraints (“Cons”): > Wordpress must be deployed. > Plugins must be selected, tested, deployed, and configured. > Wordpress and plugins must be kept up to date, so non-regression testing must be performed before any updates. > Performance, availability, and security must be monitored.
Best regards.
Hello,
I am a user of the Total theme and am writing to inquire about the integration of the theme’s Page Builder with the Advanced Custom Fields (ACF) plugin.
The Problem:
I have created an ACF Options Page (with the slug test) and added an images field to it (Field Type: Image, Return Format: Image URL). I have confirmed that this field’s value, http://sad.local/wp-content/uploads/2025/07/banner.jpg, is correctly retrieved using get_field(‘images’, ‘option’), which I verified through the debug.log file.
However, when I try to use this images field from the ACF Options Page as a background image source within the Total theme’s Page Builder, it does not work. Specifically, I set the ‘Custom Background Image Source’ option to ‘Custom Field’ and selected ‘images’ as the ‘Background Image Custom Field’ (please refer to the attached screenshot: CleanShot 2025-07-26 at 22.32.47.png). The background image does not appear.
Our Hypothesis:
It appears that the ‘Custom Field’ option in the Page Builder might be designed to reference only meta fields associated with the currently loaded page or post (Post Meta), and may not natively consider global fields such as those stored in an ACF Options Page. ACF Options Page fields require a specific context (e.g., ‘option’) to be retrieved using get_field(‘field_name’, ‘option’).
Questions:
Is there an official or intended method to directly reference and use an ACF Options Page custom field as the ‘Custom Background Image Source’ within the Total theme’s Page Builder?
If so, are there any additional settings or a specific workflow required beyond simply selecting ‘Custom Field’ and choosing the field name?
If direct referencing of ACF Options Page fields is not supported in the current version, could you please advise on any recommended workaround methods to achieve this within the Page Builder? (e.g., using custom CSS classes with inline PHP, JavaScript solutions, etc.)
Hi,
This is Aj the theme author.
When using ACF you need to specifically tell it what type of field you are retrieving, as you can see in your code you are setting the second parameter to ‘option’. When using the page builder and theme settings like the Background from a custom field it’s specifically checking for custom fields assigned to the page via the post meta (or term meta if it’s a taxonomy).
Now, testing locally I can see I have given you the ability to select Theme Options from the custom field dropdown. Example: https://a.cl.ly/yAuqoR47
So I can understand the frustration when choosing it and it not working!
I will have to add some extra checks inside the theme to get the setting from ACF to see what “type” of setting the field so that it can pull the correct value. Hopefully this is something that can be done in ACF without much bloat – since most of the time you wouldn’t be using options as custom fields, adding these extra checks will introduce some bloat for all custom field declarations. So I will need to implement something (if possible) and do some testing to ensure it’s not going to slow things down.
I’m planning to release Total 6.4 this week and hopefully I can introduce this change with the update – https://totalwptheme.com/docs/upcoming-update-changelog/
If you would like, email me privately at wpexplorer [at] gmail dot com and I can let you know when a Beta is ready if you want to try before the official update or I can help you patch your site with the changes temporarily.
All that said…
Can you explain why you are wanting to have the image defined in an options panel specifically?
Setting a row background to a theme option, doesn’t make much sense to me. It would make more sense to just set the image on the row itself. Why bother making a whole options panel for something you can control on the row itself. Or if you want it easier for the end user to update, you could assign the image as field on the page itself or as the featured image.
- AJ
Where things become complicated is ACF allows creating fields and assigning them not only for posts and terms but also option pages at the same time. This means you can have a field for example called “image” that is both an options field and a post field. This is no way for the theme to automatically detect if the user wants a post/term value or an option value.
So, what I think I will do is when choosing a custom field if you select an ACF field it uses JS to display a checkbox like this – https://a.cl.ly/04uZrDL9 – so you can check this box if you want to display an option field.
The way it will work though is saving the value like such “field_6886bf4f1b0a4|option” (in other words it will add |option at the end). This way I don’t need to introduce extra fields and bloat.
When retrieving the custom field value the theme then just needs to make a very simple check to see if the custom field name ends with |option.
This will allow for displaying option panel options while keeping everything still fast an optimized.
Let me know if you have any feedback and thank you for bringing this issue to my attention!
- AJ
Sorry for all the messages!
But I just realized that showing ACF theme options will be really great when working with client sites because you can make it easy to edit certain things.
For example when using the Header Builder you may want to give the client the ability to change the “logo” in the header builder without having to edit the header itself by offering a theme panel option to choose the image. Or maybe you are using the footer builder and want to give the client an easy place to define the copyright text without them having to edit the footer.
So along those lines I’m also going to add a new {{acf_option}} dynamic variable – https://totalwptheme.com/docs/dynamic-variables/ – for easily accessing option values in ACF in places where you may not be able to choose a field, such as a text block.
- AJ
No worries at all about the multiple messages! I actually appreciate this active communication and sharing of ideas!
I completely agree that displaying ACF theme options will be a huge advantage for client sites. As you mentioned, providing options in the theme panel to change things like the logo in the Header Builder or the copyright text in the Footer Builder without needing to edit the header or footer directly makes site management so much easier, especially for non-admin editors. I’ve always thought that using ACF option pages to register various field options and call them as needed would significantly streamline site operations. For repetitive template work, this kind of functionality saves a ton of time and makes it intuitive for clients, boosting their satisfaction.
The issue so far has been that I couldn’t properly retrieve values from the option pages. I tried various methods, but since ACF fields can be assigned to both posts/terms and option pages simultaneously, the theme often failed to fetch the correct values. Your proposed solution with the {{acf_option}} dynamic variable and the checkbox approach (e.g., “field_6886bf4f1b0a4|option”) sounds brilliant! It keeps the overhead minimal while clearly distinguishing option values, so it should work seamlessly without impacting performance.
The {{acf_option}} variable will be especially useful in cases like text blocks where selecting a field directly isn’t possible. For example, managing not just header logos or footer text but also site-wide elements like banner images, text snippets, or button links through the option page would make customization so much easier for clients.
One piece of feedback: when using the {{acf_option}} variable, it might help to make the admin interface more user-friendly by clearly displaying field names or adding a brief description (like a tooltip) so non-developer editors can easily understand which fields come from the option page. This would prevent any confusion for them.
Hi,
Thank you for the feedback, I’m a bit confused though by “One piece of feedback: when using the {{acf_option}} variable, it might help to make the admin interface more user-friendly by clearly displaying field names or adding a brief description (like a tooltip) so non-developer editors can easily understand which fields come from the option page.”
The {{acf_option}} is just a dynamic variable – https://totalwptheme.com/docs/dynamic-variables/ – that you can use in fields where you can’t specifically select a custom field, for example: https://a.cl.ly/RBuDXpjx
So inserting some sort of ‘tooltip’ is simply impossible because this is just text inside of an input. I could inject javascript into every field that is using a dynamic template to try and display a tooltip when hovering over the field but that introduces a ton of unnecessary (imo) bloat.
But also, the whole point of using the theme options is so the “non-technical” users aren’t using the page builder anyway, no?
- AJ
Hello,
I’m currently experiencing an issue regarding the integration of ACF (Advanced Custom Fields) values within the Total theme’s page builder.
Problem:
While I can successfully retrieve and display ACF field values entered directly on the current page or post using the page builder, I am unable to directly fetch and display field values stored within the ACF Options Page.
Hi,
I just replied to your newer comment regarding this same subject, please take a look.
- AJ