hi, ok, found out the custom link should be only ”#” instead of ”#al”

hmm, is there no way to set a “none” hover animation for feature boxes?

HI again AJ. I have not heard back from you yet on this, so I did some more digging. I noticed the Dynamic Template input field looks different in a screenshot you have used in your documentation, compared to what it looks like in my UI. Any ideas what is causing this? See image at link below.

Hi,

Thank you for your patience. I had to go AFK the last couple days dealing with a family matter.

This is actually a bug!

I am patching it right now for the next update. For the meantime what you can do is enter the template ID into the field which you can find in the admin page: https://a.cl.ly/JruQwy2k

Sorry for the troubles and thank you for reporting it!

- AJ

ps: If you want to fix the bug it’s actually really simple. You would edit the file at plugins/total-theme-core/inc/post-series.php and change line 148 from:

'type' => 'wpex-dropdown-templates',

to:

'type' => 'totaltheme_template_select',
'template_type' => 'archive',

See here: https://a.cl.ly/4guL74kv

You can also just enter the ID as I mentioned before. And I am planning to release the next theme patch, most likely over the weekend.

- AJ

Thanks AJ. I made the change in the .php file and the proper dropdown appeared. I am not using a child theme (yet) but I guess my change will be overwritten by your same change next time I update. I was unable to get the result I wanted with the template for the post series, but have parked that for now. I wanted to incorporate an image in the post series “box” but have been able to achieve something similar by placing an image above and using a negative CSS margin.

Correct, your change will be overwritten which is why I mentioned that you could patch it yourself.

I’m not sure what you want to do exactly, but Total does have the ability to assign images to taxonomies by default. So you can give your post series a photo via the image field: https://a.cl.ly/GGubAvee – this image can then be shown on the archives via the Image element added to the Post Series dynamic template.

If you are using the theme’s page header on the site it will display as a background behind the page title. Example: https://totalwpthemedemo.com/blogdotnom/category/recipes/

By default any taxonomy term with an image will swap the page header title to the background Image style unless disabled via the Theme Panel’s Taxonomy Thumbnail Page Header setting.

Now, if you are trying to display this image on the post itself it is possible to use some custom code to insert the post series photo before the output of the Post Series element. Personally I think it would just bloat things up.

Also if you create a dynamic template for your posts. You can display your post series easily using the Post Cards element like such: https://a.cl.ly/llue4vbq – you aren’t forced to use the default post series element which just shows a list. You can instead display cards which can be shown in various formats (grid, carousel, etc) and with any design you want.

- AJ

Hi AJ. Thanks for this additional advice. I had moved on to other parts of the site but have now returned to this. I have tried some different of achieving the result I was after. Ref this screenshot: https://1drv.ms/i/s!AjFG0Wwo4gi7iv59CBYi7vLvFYxeng?e=at1t1h

The live page is here: https://combat.academy/metharc2025a/article/hydrogen-from-natural-gas/

Referring to the numbered annotation in the shared image…

(1) This was my first attempt. I quite like that offset image style. One problem is that the image gets displayed even for posts that are standalone and not part of a series (such as the one at (4)) as I am choosing the primary Term (Category) image. This could be avoided if I could choose the post series image as the image source but I do not see that available in the dropdown. Can I use a custom field name?

(2) Another variation I tried today using an inner row, but it has the same issue for single posts not part of a series.

(3) Tried you suggestion of using post cards (list 1) but the current post is not listed and the numbering is “dynamic” so I am not sure that this will work “out of the box”.

Also, previously you helped me with the fix to reveal dynamic template names in the post series customizer dropdown, but I wonder if there is another bug as even though I change the dynamic template for the post series nothing actually changes when viewing the page.

Hi,

1. Having the ability to select the post series image would be very useful. I am going to add that setting in the next update.You can’t just use a custom field because the custom field option will search for a custom field of the post itself, it needs to pull the meta value from the post series.

If you want to edit the files on your site to add the option to select the Post Series Image it’s very easy!

First edit the file located at plugins/total-theme-core/inc/vcex/shortcodes/image.php and scroll to the bottom where you will find the get_source_choices() function where you will add the new Post Series Image setting like this:

esc_html__( 'Post Series Thumbnail', 'total-theme-core' ) => 'post_series_thumbnail',

Screenshot of the edit: https://a.cl.ly/mXuNAKYB

Now you will want to edit the file at plugins/total-theme-core/inc/vcex/helpers/get-image-from-source.php and add a new method to the class:

/**
 * Get post series thumbnail image.
 */
protected function get_post_series_thumbnail_image() {
    if ( \taxonomy_exists( 'post_series' ) && \function_exists( '\wpex_get_term_thumbnail_id' ) ) {
        if ( \is_tax( 'post_series' ) && ! \vcex_is_card() && ! \in_the_loop() ) {
            $this->image = \wpex_get_term_thumbnail_id( get_queried_object_id() );
        } else {
            $post_series = get_the_terms( get_post(), 'post_series' );
            if ( ! is_wp_error( $post_series ) && ! empty( $post_series[0]->term_id ) ) {
                $this->image = \wpex_get_term_thumbnail_id( $post_series[0]->term_id );
            }
        }
    }
}

Sample screenshot (so you can see where I put it) – https://a.cl.ly/jkujQ4Wr

2. You could define a custom template just for posts that are a part of a series. Example snippet: https://totalwptheme.com/docs/snippets/post-series-singular-dynamic-template/

3. When using the Post Cards you would use the “Related by Taxonomy” query Type – https://totalwptheme.com/docs/related-items-dynamic-template/ – so you don’t select the “current post”, the theme will pull items from the current post’s related taxonomy automatically for you. Simply select “Post Series” as your related taxonomy.

4. The option in the Customizer is for the post series archive (the page where you can view all the posts assigned to the specific post series), not the singular post. Are you checking the archive to make sure it’s changing? I just tested and the option is working as expected.

I could add the option to define a singular template for the Post Series posts. I do think it would be useful so you don’t have to use code like the snippet provided above.

- AJ

Thanks AJ! I will try the code changes you suggested at (1) and (2). As I have become more familiar with the theme I have realized that there are other ways to achieve what I wanted to do but agree that since we have the ability to associate an image with a post series, it will be useful to be able to select this image directly from the dropdown.

For (3) the “problem” I have with using cards in this case is that it returns a list of the “other” posts in the series only, not including the one currently being viewed. I was after an option similar to how the post series element works, where (say) if I have 3 posts in the series and am on a page viewing the 1st post, all 3 post titles are listed, with the 1st one (currently viewing) being greyed out and the 2 others being clickable links. In any case I will continue using the post series element itself which handles this the way I want.

For (4) I may have misunderstood things. When I click to edit a post series element I see this message: “Go to Appearance > Customize > General Theme Options > Post Series to customize this global element”. So I though I could go to the customizer and change this post series element completely. But it appears that I can only change things like background color, border color etc and not the complete design of the element. That is OK. I have the tools I need to make this work now.

Thanks again.

Quick update: I tried the code changes to reveal and use the series thumbnail – works great!

I also tried the snippet you shared under point (2). Could not get it to work. I want to use this for a custom post type called “article” so I made changes to your code after my initial try (see below), but it did still not work.

I suspect this is because under post types I have defined a custom dynamic template to use with these articles and that this overrides the code snippet. Any suggestions?

``` /** * Define a custom template to use with articles that are part of an article series. */ add_filter( ‘wpex_singular_template_id’, function( $template_id ) { if ( ! is_singular( ‘article’ ) ) { return $template_id; // only apply to the standard post post type. } if ( taxonomy_exists( ‘article_series’ ) ) { $article_series = get_the_terms( get_article(), ‘article_series’ ); if ( ! is_wp_error( $article_series ) && $article_series ) { $template_id = ‘1032’; // !!! EDIT THIS !!! } } return $template_id; } ); ```

Sorry for the formatting, I though I could use markdown here…

Hi,

When displaying iFrames on your site you would generally have all the styling done on the page that you are embedding since you can’t target inner iFrame elements with CSS.

Your example would be an iFrame doesn’t make much sense to be because there isn’t an iFrame and it implies that you want it opened with lightbox.

If you want to open an iFrame in Lightbox/Modal you have 2 options:

• https://totalwptheme.com/docs/modal-dialogs-html/ (ideal, modern method that uses native browser modals)
• https://totalwptheme.com/docs/inline-lightbox/ (easier but uses jQuery and extra lightbox scripts)

In terms of just adding an iFrame though to your page you would use the WPBakery HTML element or the Gutenberg HTML element (depends on the context and if you are using WPBakery or not).

If you can provide more details. Maybe an example of what you want exactly and the URL you want to embed into an iFrame I can be more helpful.

- AJ

ps: I forgot to mention, the theme has utility classes you can use to apply styling to elements without adding extra CSS to your site – https://totalwptheme.com/css-framework/

I have reviewed the information you have written above. I would like to clarify some details.

If you can provide more details. Maybe an example of what you want exactly and the URL you want to embed into an iFrame…

I’d like to add the ability to launch a demo game slot to the page. For example:

• Like this https://tinyurl.com/2wwj7uh3 (if you click on the “Play demo” button, a window opens. And in the upper right corner there is a “Close” button).
• Or like this https://tinyurl.com/ytvcy2nw (if you click on the “Play demo” button, the frame starts right inside the page)

...ideal, modern method that uses native browser modals

I tried to do this by adding a modal dialog using HTML. The code looks like this:

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Popup</button>

In this case, when you click the “Popup” button, a modal window opens. But inside it, just a black screen is displayed. Like this https://ibb.co/WKBSTNm.

Hi,

Your code looks correct, but when I try it out I see errors from the player itself: https://a.cl.ly/OAudRPDm – the iFrame is working as expected the issue is on the other end.

One thing I want to mention though, if you want to display many of these I would highly recommend a custom post type – https://totalwptheme.com/docs/adding-custom-post-types/ – with a custom field to define your iFrame – https://totalwptheme.com/docs/snippets/add-custom-metaboxes-to-total/ – then you can create a custom card to display them all – https://totalwptheme.com/docs/custom-card-builder/

And you can make your code dynamic like such:

<dialog id="popup-{{post_id}}" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="{{cf_KEY}}"></iframe>
</div>
</dialog>
<button aria-controls="popup-{{post_id}}" class="wpex-open-modal theme-button">Popup</button>

Notice the use of “{{post_id}}” which is a dynamic variable – https://totalwptheme.com/docs/dynamic-variables/ – this allows each popup to have a unique ID so they don’t conflict.

And the iframe URL is added using the custom field variable, so you would need to modify it to use your custom field ID (aka, change KEY for your meta key ID).

Of course this code wouldn’t check if a field exists, so the assumption is all items have a popup. If you need if/else checks then the code would need to be added in a custom shortcode via a child theme or code snippet plugin.

- AJ

Hi,

Thanks for the information.

...if you want to display many of these I would highly recommend a custom post type

No, I plan to use such an iframe only on one page of the site. In this regard, at the moment I do not see the need to use a custom post type.

Your code looks correct, but when I try it out I see errors from the player itself.

I decided to experiment with the code and this is what I got.

If I use this link

src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"

in an iframe by adding a modal dialog using HTML, it will not work.

But if I simply add an iframe to the page with this same link (without adding a modal dialog using HTML), it will work. Moreover, if you look in the DevTool console, there will be the same errors that were indicated here https://a.cl.ly/OAudRPDm/

This is the code that works:

<iframe width="667" height="375" src="https://player.eu.regulated.pushgaming.com/mesh/b2c/igp/dm-verajohn/launch?rgsCode=hive&rgsGameId=bigbamboo-01&mode=DEMO&lang=sv&country=EN&ccyCode=EUR&jurisdiction=MT"></iframe>

This was for example, because this method of inserting iframe does not suit me.

Based on the above, I have a question. Could it be that the error loading the iframe inside the modal window occurs because of the method of adding a modal dialog using HTML?

I would also like to add the following. If I use a modal dialog using HTML and add another link in the src attribute with the same demo slot, it will work. Here is the code:

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe width="667" height="375" src="https://www.pushgaming.com/games/play/big-bamboo.html"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Popup</button>

I have encountered a problem. I embedded the code below on the page I need via Gutenberg Editor (because I didn’t know how to do it via wpbakery page builder):

<dialog id="popup-1" class="wpex-modal">
<div class="wpex-modal__inner">
<iframe src="https://www.pushgaming.com/games/play/big-bamboo.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:90%; height:90%; border:none; margin:auto; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>
</dialog>
<button aria-controls="popup-1" class="wpex-open-modal theme-button">Demo</button>

Now I can’t go back to editing this page via wpbakery page builder. As soon as I try to do this, an iframe starts right in the editor.

Can you tell me how to correctly embed such code on the page so that there are no errors in the future?

Hi,

By default the dialog element is hidden, my guess is that the page you are trying to load in the iFrame has javascript that runs when the page loads but because the initial iFrame is hidden it causes an issue…But I see that you’ve modified the code so that the iframe is inside another page (your second screenshot) and this will work correctly!

The problem with the second code though is the inline CSS which set’s the iFrame to a fixed position so it’s going to display over the editor.

You’ll probably need to remove the code from Gutenberg first. If you can’t via the editor you may need to swap to code mode first: https://a.cl.ly/z8u9wG7W – then in WPBakery you can add this via the HTML editor.

What I would personally recommend though is to instead place your code in your child theme functions.php file as a custom shortcode – https://totalwptheme.com/docs/child-theme/

Example code:

add_shortcode( 'big_bamboo_popup', function() {
    ob_start();
    ?>
    <dialog id="big-bamboo-game" class="wpex-modal">
        <div class="wpex-modal__inner">
        <iframe src="https://www.pushgaming.com/games/play/big-bamboo.html" height="600" width="600"></iframe>
        </div>
        </dialog>
        <button aria-controls="big-bamboo-game" class="wpex-open-modal theme-button">Play Bamboo Game</button>
    <?php
    return ob_get_clean();
} );

Then you can use your shortcode ( [big_bamboo_popup] )anywhere you need it and you can always edit it globally via the child theme. This way there aren’t any concerns with the iFrame trying to render while in the editor as it will just show up as the shortcode in plain text.

Here is a video showing the code above working: https://a.cl.ly/p9u4zeKZ

Also you can change the width and height of the iFrame to fit your needs. I set it to 600×600 for the example.

- AJ

Hi,

The theme’s javascript for the mobile menu was optimized to use modern defer attributes like such: https://a.cl.ly/KouRyb76

Unfortunately some sort of “optimization” plugin is incorrectly combining the optimized scripts and adding them without proper deferring causing JS errors on the site: https://a.cl.ly/RBub7xyP – I can’t tell what plugin is doing that since there is no clear commenting in the source code, but customer usually only have a single optimization plugin enabled or it’s done via the hosting so it should be clear to figure out what is causing the issue.

Now, combining scripts is out-dated tactics. It can actually slow down your website when using modern HTTP/2+ protocols. So it’s generally no longer recommended to combine scripts. So personally I would recommend you disable any script combining on the site, which should fix the issue but also allow your site to render faster.

Additionally, I have seen some incorrectly coded optimization plugins also remove the defer attribute when “minify” is enabled. The theme’s scripts are already minified anyway so there is no point to run extra server resources minifying what’s already minified. So if your optimization plugin is also minifying theme scripts it’s best to exclude the theme from that.

In fact looking at your site it appears the theme’s CSS files are being modified (no apparent issues) – but again, the theme’s CSS is already optimized so no point in having another plugin modify them.

- AJ

Hi AJ, thanks for your help. There was a pluging to optimize pages, I’ve deactivated and our web is ok again.

many thanks Sonia

Great, thanks for letting me know Sonia.

Any chance you can tell me the name of the plugin? This way I can test it and recommend a fix to the plugin developers. Thank you!

Of course, this was the plugin: Page Optimize from WordPress.com

Optimiza el JS y el CSS para una carga y proceso más rápido de la página en el navegador.

Thanks again, AJ

Hi,

This is AJ the theme author.

Can you please share the URL?

Since it works fine while in the Customizer, there are 2 things I can think of:

1. You are using an optimization plugin that incorrectly modifies the theme’s mobile breakpoint CSS files. This is a known bug in many plugins. I reported it to Total Cache for example: https://wordpress.org/support/topic/plugin-removes-css-media-attribute/

2. You are using a plugin that is loading the whole Bootstrap CSS framework (always a bad idea) – and this can cause issues like the one you mention.

If you share the URL I can confirm exactly what’s going on.

- AJ

Thanks for the quick response AJ!

Site link: https://combat.academy/metharc2025a/

Also worth mentioning, I am running two other Total theme sites on this multisite. They did not experience this problem. Also, if I switch over to the default WP theme, the menu is visible.

Hi,

This is Aj the theme author.

There aren’t any known issues with the Text Block. But it sounds like the WordPress TinyMCE editor is broken on your site. This is generally caused by 3rd party plugin’s having outdated/broken code.

Have you tried disabling 3rd party plugins to see if the issue is resolved?

It’s also possible, that if your site is very outdated you could have issues. But I see you still have the support tag next to your name, so I’m thinking that perhaps you just recently bought the theme (unless you renewed support – in which case, thank you!).

If you want you can submit a private ticket and provide access to the site so we can log in and see what’s going on – https://my.totalwptheme.com/

The way to troubleshoot is to look at the browser console (In Chrome it would be via View > Developer > Developer Tools) and seeing if there are any JavaScript errors breaking the editor (usually the case). If not, then we would try disabling plugins to see make sure none of the plugins are breaking the editor.

All that said…If you recently updated your site, the first thing you should do is clear your browser cache just incase it’s just a caching issue.

- AJ

Hi,

This is AJ the theme author.

I appreciate it if you renew support (thank you) but it’s not necessary. I always assist customers here in the comments.

Can you please share the URL and let me know what “is not right”.

Most issues with styling after updating happens for a few reasons:

• Caching: Almost always styling issues are cache related. Either by improperly setup optimization plugins or by not clearing your cache after updating.

• You uploaded the new version as it’s own theme instead of updating the old version. WordPress saves your Customizer settings based on the theme folder name. So if you upload the theme as a new theme your settings won’t work as before. Make sure you are updating correctly – https://totalwptheme.com/docs/update-theme/

• Child theme issues. It’s possible you have child theme modifications that are conflicting.

—

If you can share the URL and let me know what’s broken then I will be able to look and tell you what’s going on so we can get it all fixed up!

- AJ

Thank you very much, it’s very kind of you to answer my question.

I try to update the theme, but notice my current theme version is 3.2.0. so i can’t update the theme.

After I insalled the new version(v6.01) theme as a new theme, the website is not right, some of Css works but some of them are not. Here is URL https://globalielts.com.au/

Thanks a lot!

It doesn’t matter how old your current theme is you can still update it via the WP admin if your license is registered as per the docs. But re-installing the theme is perfectly fine as well.

Looking at your site, it appears you did the update just fine. The problem you are having is with server permissions. All the CSS and JS files on your site are returning 403 errors from the server. Here is a screenshot from the browser console: https://a.cl.ly/rRudP7oq

This often happens if you upload a theme via S/FTP. Some WordPress hosting services have a button you can click that will fix your server file permissions for you. Otherwise you may need to contact your hosting company to ask them to fix it.

Another solution is to not update via S\FTP, but instead upload the new version of the theme via Appearance > Themes > Add New. WordPress will allow you to override the current version of the theme with the selected version. If you do this and still have issues, the problem is server related and you will need to contact your webhost so they can fix your server permissions.

By the way, I notice your site doesn’t have the Total Theme Core plugin enabled, which was introduced in Total 4.9. It’s important you also install and enable this crucial plugin when updating from a very old version. More info here: https://totalwptheme.com/docs/total-theme-core-plugin/

- AJ