okay thank you, that would be great. I’ll open a private ticket

I wanted to let you know that I just opened the ticket thanks

Got it, there are currently 19 tickets in my queue before yours so I will get back to you as soon as possible. Thank you for your patience!

Yes, you can override the search results page via custom CSS. Example:

body.search { background: #fff !important; }

Hi,

There isn’t a built-in option for sticky sidebar, but there are many plugins you can use for this. Generally though I would recommend instead of a full-sticky sidebar use a sticky widget – https://wordpress.org/plugins/q2w3-fixed-widget/ – because on a lot monitor sizes an entire sticky sidebar may get cut off and look bad.

- AJ

If you aren’t going to use a shop then just disable and delete the WooCommerce plugin.

If you are using a shop but want to remove the icon see the docs here: https://wpexplorer-themes.com/total/docs/remove-edit-woocommerce-menu-icon/

- AJ

This is an advanced customization because you will need to do a few things since this is a custom script and not a “simple” animated background.

• Make sure you have a child theme active – http://wpexplorer-themes.com/total/docs/child-theme/

• Add the required CSS and javascript for this script to your child theme.

• Add a unique classname or ID to the element on the homepage where you want to add this sort of background

• Add the code needed to start the script in your functions.php file.

Of course there are some addon plugins for this sort of thing such as this one – https://codecanyon.net/item/vc-particles-background/13139726 (haven’t actually tried myself but one of the top results on Google search) – but its not the exact same pattern you mentioned.

- AJ

Hi,

This is AJ the theme developer. It looks like my support staff assigned the ticket to me. I did take this weekend off (I only take time off like every 2-3 months) I really needed it. I will reply to your ticket right now. Thank you for your patience over the weekend.

- AJ

Hi,

Sorry to hear you are having issues. 99% of the time this is due to security checks on the server. Can you make sure outgoing connections are enabled on your server?

If you want you can always submit a private ticket – https://wpexplorer-themes.com/support/ – with the logins and we can get things figured out for you and in the worst case we’ll manually activate the theme for you. About 2 customers have had issues in the past where our own server firewall was blocking them so it is possible it could be a security issue on our end based on your server setup.

We’ll get this sorted out ASAP. I hope you had a nice weekend!

- AJ

Hi Michel,

Yes you can use javascript to change to placeholders which is probably the easiest way but you only need the top part – https://cl.ly/pTsb – and just use CSS to hide the labels, if you use javascript like in this code it will “flash” on site load.

Personally though I would recommend just doing a popup login form or a separate login page (most common).

- AJ

Thank you AJ.

Should I put this js file in total\assets\js\core ?

No, never never edit or add files to the total theme files. Any advanced modifications should be in your child theme – http://www.wpexplorer.com/javascript-wordpress/

That said, instead of adding javacript to modify a search already on the site, it would be best to instead create your own search box shortcode that you can use in the topbar – this way you can use placeholders to start and you can give your form unique classnames so it’s never overritten by any theme updates.

It’s very easy to add a new shortcode via your child theme: https://codex.wordpress.org/Function_Reference/add_shortcode

- AJ

Hi,

It’s still working when I check – http://totaltheme.wpengine.com/nouveau/portfolio/?filter=video

Can you share the URL where you are having issues so I can see what’s going on?

- AJ

AJ, I tried the first snippet (while I wait for a response from the Leandash people):

I paste that into the child theme functions.php I assume I replace ‘custom-type’ with a custom post type that Learndash uses, but when I do that I get a 500 error.

Two examples of Learndash custom posts are sfwd-lessons & sfwd-topic

Anything obvious I’m doing wrong?

Thanks!

This would be the correct code:

// Sample function showing how to tweak the metaboxes display for post types
add_filter( 'wpex_main_metaboxes_post_types', function( $types ) {

    // Add to my custom-type post types
    $types[] = 'sfwd-lessons';
    $types[] = 'sfwd-topic';

    // Return post types array
    return $types;

}, 40 );

If you get a 500 error with this code its probably going to be because your server’s PHP version is extremely outdated and doesn’t support anonymous functions.

But like I said, I would not recommend using the page settings metabox to manually tweak every post. If you want to change things like showing a custom sidebar it’s best to do so via filters – https://wpexplorer-themes.com/total/docs/use-filters-wordpress/

Example:

// Register new learndash sidebar
add_filter( 'wpex_register_sidebars_array', function( $sidebars ) {
    $sidebars['learndash'] = __( 'Learndash', 'total' );
    return $sidebars;
} );

// Display learndash sidebar
add_filter( 'wpex_get_sidebar', function( $sidebar ) {
    if ( is_singular( array( 'sfwd-lessons', 'sfwd-topic' ) ) ) {
        $sidebar = 'learndash';
    }
    return $sidebar;
} );

- AJ

Thanks so much AJ!

Cheers Neil

Hi,

Based on the code below it looks like you are trying to add the mobile menu under the sticky header is that correct?

I assume you are also referring to the stickyOffset function in the theme’s javascript. If so you can’t echo it using PHP, you need to use javascript to access and make use of the function like such wpex.stickyOffset() (all the javascript is under a globally registered object named wpex so you can access the javascript functions accordingly).

I wouldn’t really recommend making use of this function though in the core JS as it may change sometime. Depending what you want to do the easiest thing is to just give your header a fixed height via CSS then you can use CSS to offset any element you want since you have an exact/known height for the header.

- AJ

I understand thanks for the feedback. Could you provide me a snippet of the js, so I can use it in my child theme.

The reason for the usage is so the mobile drawer menu slides out underneath the mobile header. This exposes the enhanced “hamburger to X” animation, instead of covering it up when it slides out

The way local scroll works is as soon as you click a link it needs to know exactly where to land on the page, shrink header changes the header height after it’s already begun scrolling there is no way to pre-calculate what the header height will be automatically during the local scroll, it must be defined before hand.

The only way to dynamically alter the shrink size on different screen sizes would be via javascript, something like this this: https://gist.github.com/wpexplorer/a2a71694339816f87b450e7bda9f5850

But, this is only for the part needed for the localScroll offset, you also need to add custom CSS for your screen sizes to set the shrink height since the actual height of the header is changed via CSS.

It is actually a very advanced and complex modification and if the sticky header function ever changes in the future you could run into issues.

Depending on your site what you could do is disable the sticky header and do something like this instead – https://wpexplorer-themes.com/total/snippets/sticky-header-scroll/ – which is becoming pretty trendy.

Or simply not use the shrink header or simply disable sticky header on mobile and instead used the fixed header navigation if you want a sticky menu – https://wpexplorer-themes.com/total/docs/mobile-menu-toggle-styles/

- AJ

Unfortunately you can’t access the browser width (media query) via PHP because PHP renders before the site does and doesn’t’ have access to browser data.

The only way would be to override it via CSS using !important attributes, but it may be a bit glitchy to animate this way.

- AJ

Thanks for the feed back. I now understand the limitation better.

Whats the best way to accomplish having a desktop shrinking sticky header and a sticky mobile header that have different heights (after desktop/mobile shrinks) without throwing off the local scroll offset?

The way local scroll works is as soon as you click a link it needs to know exactly where to land on the page, shrink header changes the header height after it’s already begun scrolling there is no way to pre-calculate what the header height will be automatically during the local scroll, it must be defined before hand.

The only way to dynamically alter the shrink size on different screen sizes would be via javascript, something like this this: https://gist.github.com/wpexplorer/a2a71694339816f87b450e7bda9f5850

But, this is only for the part needed for the localScroll offset, you also need to add custom CSS for your screen sizes to set the shrink height since the actual height of the header is changed via CSS.

It is actually a very advanced and complex modification and if the sticky header function ever changes in the future you could run into issues.

Depending on your site what you could do is disable the sticky header and do something like this instead – https://wpexplorer-themes.com/total/snippets/sticky-header-scroll/ – which is becoming pretty trendy.

Or simply not use the shrink header or simply disable sticky header on mobile and instead used the fixed header navigation if you want a sticky menu – https://wpexplorer-themes.com/total/docs/mobile-menu-toggle-styles/

- AJ

Hi,

Can you share the URL with the issue? I posted a more recent update to fix any location issues with the hamburger menu icon. There was a bug in the first 4.5.5 update where it wouldn’t display correctly if you had a custom menu breakpoint but it should be fixed now in 4.5.5.1 – http://wpexplorer-themes.com/total/changelog/

If you still have issues please let me know and share the URL so I can inspect it, thanks!

- AJ

Hi,

Normally this would be done at Appearance > Customize > Header like this: https://cl.ly/pUo1

However, it looks like whoever set up the purple color did it by manually altering the theme’s style.css files to change colors – https://cl.ly/pVHr

Your theme should never be modified because if you ever update you will lose your edits. I also see your theme version is from January 1, 2015 – http://wpexplorer-themes.com/total/changelog – so it would be highly recommended to update the theme – http://wpexplorer-themes.com/total/docs-category/updates/

Not only to access all the new features but also any updated bundled plugins and theme bug fixes. Updating will reset any manual changes but maybe it’s exactly what you need to get things looking exactly how you want them to.

Additionally, I mentioned in this in a previous comment you left that your site has been setup to have the logo in the topbar and your menu is actually the entire header which is a bit strange: https://cl.ly/pV30

Instead of doing that it would be ideal to use header style 2 and then customize the menu like this: https://cl.ly/pTx6

- AJ

Hi,

Here is the guide for creating a local scroll menu – https://wpexplorer-themes.com/total/docs/creating-local-scroll-menu/ – however, your theme version is over 3 years old so you may not have access to the same features displayed in the screenshots of the docs.

• http://wpexplorer-themes.com/total/changelog/
• http://wpexplorer-themes.com/total/docs-category/updates/

- AJ

Hi,

This is AJ the theme developer, thank you for your patience over the weekend. I hope you had a good one!

Yes the design has changed as it has been highly requested for the last year to make the mobile menu more modern and follow current design trends. So it’s now a simple toggle that is also animated – http://totaltheme.wpengine.com/samus/ – previously it was a fontAwesome icon which could look a bit blurry and also impossible to animated if wanted.

To change it into a “button” you can easily add some CSS to give it a background. Example:

#mobile-menu a {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 3px;
}

But this style is more old-school so I wouldn’t really recommend it

Regarding the dropdowns in the mobile menu this was also HIHGLY (almost every day) requested. So all parent items are now fully clickable so you can open the subitems instead of clicking the arrow which is more intuitive since most popular sites work this way. If any item in the menu has both a link and sub-items the link will be added in the dropdown so it can still be accessed – https://cl.ly/pU62 – this is how most the top websites work which is why it was highly requested.

That said, it’s generally not recommended to have parent menu items clickable since it’s generally not intuitive for the end user. Normally if you have a dropdown in a menu the parent item won’t be clickable but you may have a “view all” link for example at the bottom of the dropdown. This is how most people setup their site – https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/

I can understand the frustration when big changes like this happen but I only make these changes because sooo many people are requesting it so I know it will benefit the most current customers and future customers. I don’t do these updates lightly, a lot of thought is put into it.

ps: I am actually looking at bundling this plugin with Total in the next update – https://codecanyon.net/item/quadmenu-responsive-wordpress-mega-menu/21315450 – to give you a way of creating your own custom menus and advanced mega menus.

- AJ

Thanks.

For myself, I like having a parent page/item where I can list, summarize or otherwise comment on individually or as a group or subgroups, and provide links to the child pages, and I like to have the parent page/item clickable in the menu rather than the submenu. It still works that way in the desktop view, and I hope you don’t change that.

Of course the desktop view won’t change because there is no clicking involved on the parent item.

If I do get a lot of requests regarding the menu toggle I will look at having an alternative style.

Although I am also looking at bundling this awesome plugin with Total in a future update – https://codecanyon.net/item/quadmenu-responsive-wordpress-mega-menu/21315450 – so when using the Total header builder you can easily insert nice/custom menus.

- AJ

Hi,

You’ll want to make sure you are using header style 1 – https://wpexplorer-themes.com/total/docs/header-styles/ – and remove your custom design edits that have been added to set the menu up as it is now. I actually just mentioned this in your latest comment.

- AJ

Hi Neil,

To keep the image aspect ration simply set a max width then enter 9999 for the height, this will basically tell the image resizing script to shrink to the desired width instead of hard-cropping the image so it will keep it’s original proportion.

In terms of the image sizes it really depends on what you want. I prefer to have larger images that will look good on retina devices by default and if people want to save them to their computer for reference they are larger. However, I understand if your server isn’t very fast you may want to slim down the images. But instead you could consider just using a CDN to load the images to speed them up . I personally use and highly recommend CloudFlare for this.

One thing to mention also is a “bad score” is useless, look at your actual waterfall. Its possible cropping your images to a different size is only increasing site speed by 0.1 second and so it may not be worth the hassle or the loss of quality. The only important thing is actual loading time.

It’s also possible to make bigger increases in site speed by changing image formats such as changing png’s to optimized jpegs.

Image resizing alone is not the only answer, especially if your images are already under 1000×1000.

- AJ

Hi AJ,

Didn’t see this reply from you for some reason, but thanks for the advice on JPEG optimization.

I purchased a plugin from Short Pixel and used it to great effect from the image optimization perspective.

Regarding the speed tests, I retested and now the main issues are with the following:

247.6KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

The beast is still the wc-ajax get_refreshed_fragments though.

Reading through several issues people have had with WooCommerce ajax I don’t know if it is worth the trouble of trying to remove it from the main page and the rest except for shop and shop related pages as I am worried it will cause problems.

I don’t know this, but it seems like it delays the Rev Slider on both my home page and shop page where I use it.

As an aside I looked through all your tutorials on youtube which you did a great job with, but couldn’t find a Total slider tutorial to allow me the options to create what I did with the Rev Slider on the shop page here: http://bit.ly/2nV808h

I would really like to keep it to the Total theme as much as possible as it is awesome. If you had even written a paid plugin for a shop, I would have bought it and used it too.

Thanks for your help AJ. Neil

Hi Neil,

• Defering javascript can be done via plugins but it doesn’t actually speed up your site what it does is prevent issues if the script is down but since the scripts are on your same server it doesn’t matter. In fact you are already minifying your javascript, if you defer parsing it may break functions of your site.

• The WooCommerce refreshed fragments is coming of course from WooCommerce. If it’s slow generally that’s server related. You can use functions to remove it from other pages, if you do that the only that would break would be the shopping cart in your menu if you are using it since the script is used for updating your cart when products are added.

What hosting company do you use? I actually don’t do any tweaks to the theme and get good scores by default simply by having a good server and CDN.

If you are not using a managed WordPress hosting solution such as WPEngine, Flywheel, Kinsta…etc then you may want to consider a CDN such as CloudFlare (free by default, I use the 20$/month plan though) this can really help speed up your site.

Also if you aren’t using managed WP hosting and you are using a caching plugin on your site making sure that plugin is properly setup and you are using the right plugin for your server makes the biggest different in actual site speed.

I wish I had the time and resources to develop my own shop plugin! I am just 1 person here doing all the development for a massive theme, most sellers have large teams with multiple developers and multiple support staff. I am hoping to slowly grow though this year

- AJ

According to their documentation they have a shortcode available – https://wordpress.org/plugins/easy-portfolio/ – so you can either enter the shortcode in to the shortcode page builder module like this: https://cl.ly/pTPf

Or you can map a shortcode to the page builder like this: https://wpexplorer-themes.com/total/docs/vc-shortcode-mapper/

So you can access it via a new module.

One thing to keep in mind though is if your plugin is using javascript to render the grid it may not work on the page builder front-end builder if the javascript isn’t built to support the WPBakery Page Builder but it should definitely work on the live site if the plugin works right.

- AJ

Hi Neil,

The Custom CSS is just incorrect it’s not targeting the homepage. But I see the way you did it was you made the page title top border a solid color. I think the best solution would be to remove the border on the title and just add it to the header instead globally, like this:

body #site-header {
    border-bottom: 1px solid #eee;
}
body .page-header {
    border: 0;
}

Technically the border you want is to separate the header from the content so this makes a bit more sense to me as opposed to having it on the title which may not be on all pages.

- AJ

Thanks AJ.

Looking at the layout again and based on what you said regarding having it on the header instead of page, I decided to add the border to the site-header-inner instead since I also wanted to match the width of the footer, and this class seems to have worked out.

Unless you think it’s not a great idea then I will switch it.

I will respond to your other emails shortly.

Neil

I agree it’s better like that

Hi,

Sorry for the delayed response. WPBakery Page Builder is 100% optional in fact some customers do use Elementor with Total (that’s the other most popular/used builder with Total).

If you want to share the URL of your current site so I can have a look at your headers and see what you are trying to do I can give you my personal suggestions.

- AJ

Hi AJ, Any news about the feature of choosing header in page options? Thanks

HI there,

I decided against adding an extra field to the default page settings metabox because no one else has requested this and so it becomes added bloat. However, it’s very easy to do. I can give you the exact code to add to your child theme to enable this extra field on your site if needed

- AJ