wpexplorer

Now that you are under new management, I’m hoping this issue will be resolved. Thanks!

There isn’t any built-in option so you would need to use custom CSS. Example:

.easy-notification-bar { background-image: url(YOUR_IMAGE_URL) repeat; }

You can learn more about the CSS background-image property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Unless the background image is essential to the design, I wouldn’t really recommend it because loading images will of course slow down page rendering and decrease Google page speed scores.

And if you do decide you want an image background, since the notification bar displays at the top of the site you really should pre-load your image in the site head tag prior to your CSS being executed. This will help with rendering and page speed.

• AJ

Hi,

You can use the PHP filter “easy_notification_bar_is_enabled” to control the display. Example:

add_filter( 'easy_notification_bar_is_enabled', function( $enabled ) {
	if ( is_page( 'energy-transmission-workshop' ) ) {
		return false;
	}
	return $enabled;
} );

This code would be added in a child theme functions.php file or via a code snippets plugin.

Or you can just add a little custom CSS to your site like this:

body.page-id-31807 .easy-notification-bar {
    display: none;
}

The correct fix is to rename the file at frost/templates/home.html to front-page.html.

If you edit the theme yourself, you may want to rename it incase there is ever an update your mod doesn’t get overwritten.

Anyone looking for a fix you can add this code to your child theme functions.php file or via a code snippets plugin. This will remove the code added by WP that messes up your links so you don’t have to override it with custom CSS which could in turn mess up your theme or 3rd party plugins:

add_action( 'wp_enqueue_scripts', function() {
	$wp_styles = wp_styles();
	if ( ! empty( $wp_styles->registered['global-styles']->extra['after'][0] ) ) {
		$wp_styles->registered['global-styles']->extra['after'][0] = str_replace(
			':root :where(a:where(:not(.wp-element-button))){text-decoration: underline;}',
			'',
			$wp_styles->registered['global-styles']->extra['after'][0]
		);
	}
}, PHP_INT_MAX );

I had a look and there aren’t any filters available to modify the output of the global-styles (would be very nice to have though) so the only way is hooking into the global styles array.

It does look like WordPress is working on a “fix” (hopefully a good one) so if you use this snippet you may want to remove or customize the snippet once the official fix is out.

Hey David,

Sorry for the delayed reply, there was an issue where all my WP.org notices were going to the SPAM folder and I was unaware.

I’m looking at the “one position” example but I don’t see any “categories list” on the sidebar but I see a list of what could be categories beneath the title, such as “Hledané pozice” and when I click it goes the the archive just fine (no 404) but if I click on a different one it does 404 such as this one Marketing.

Now, these are just standard WordPress category archives, so my plugin wouldn’t affect these at all. If you are getting these errors it’s going to be outside the scope of the Post Types Unlimited plugin (you can always de-activate the plugin and refresh the archive to confirm if you wish).

It looks like you’ve created custom URL’s for your categories so they aren’t using the standard WordPress slugs. When visiting one of the archives the slugs look something like this “/category/pracovni-pozice/hledane-pozice/marketing/” – so you’ve added “pracovni-pozice/hledane-pozice/” to the slug – I don’t know how you’ve added this, but I suspect it was done either via custom code or via the WordPress permalinks dashboard. In which case there may be a conflict or you need to register new rewrite rules on your site for these custom slugs to work – https://developer.www.ads-software.com/reference/functions/add_rewrite_rule/

An easy test would be to set the WordPress permalinks to the default structure to verify everything is working correctly and the issue doesn’t lie elsewhere. If setting your permalink structure to the WP default doesn’t fix the issue then you may need to try disabling plugins and/or your child theme to see where the error lies.

I would also recommend not using the standard categories for custom post type taxonomies unless you want your standard posts and custom posts to be in the same archives. If these post types are to be separate then you really should be create a custom taxonomy (eg: pozice_category) for your post type – this way everything is separate and better organized.

Unfortunately permalink/404 errors are outside the scope of the plugin so there is little assistance I can provide but hopefully my advice helps you locate the problem!

• AJ

@sarana01 – Whether you use my plugin or not I hope you are able to get the issue resolved with the theme developer! If not, I can give you some custom CSS as temp fix (for any plugin you are using) let me know.

Hi,

I had a look at your site and I see you are using a different plugin now, but the issue is pretty clear as to what’s going on because your current site has problems with the other notification bar you are now using.

If you look at the site you can see your header and menu are in a fixed position. Because the other plugin you are using places the notice in a fixed position it’s showing up on top of your fixed menu/header.

My plugin (Easy Notification Bar) is placed in a static position so if you didn’t see it, it’s because your fixed menu/header was going on top of the notice. This is common in theme’s that don’t have properly coded sticky/fixed headers and are placed at the top of page without any consideration for elements added before them. If you were to disable the fixed/sticky header in your theme you probably would have seen the notification bar just fine.

Of course since you switched plugin’s I can’t be sure 100% that the issue was a conflict with your theme’s sticky/fixed header, but it’s usually the case. The only reason i could think of for the notice to not show up would be simply because you didn’t go into the Customizer and add a notice (by default it’s empty).

Now, because the notification bar you switched to is placed in a fixed position over your fixed header it is visible but it’s actually pushing your theme’s top menu down so it’s not visible, so you will probably still want to reach out to your theme developer for a fix.

You can see this when you load the page the top black menu of your site is visible for a brief second until the notification bar plugin injects it’s notice: https://a.cl.ly/YEuwR00z

• AJ

Hi Laurent,

I am really not sure I understand the issue. When you say “clicking the Sync button” do you mean from within the Loco Translate plugin? If so, have you tried contacting the plugin developers? I’m not sure familiar with the plugin and they should have an idea of what the error means.

Now, since this is a free/public plugin why not submit your translation so it’s part of the WordPress repository so that others can get the translation but more importantly so anytime you use the plugin the translation is automatically loaded. – https://translate.www.ads-software.com/projects/wp-plugins/post-types-unlimited/ – I see someone has already started translating the plugin in Spanish without issues.

Have you ever translated a WP.org plugin before? It’s not super hard: https://make.www.ads-software.com/polyglots/handbook/translating/how-to-translate/#contributing-your-first-translations

• AJ

Awesome!

Thank you for the followup and also for reporting the issue ??

Ok, I just finished updating the code! Version 1.6 will be available in your WP dashboard at any moment.

I’ve updated the javascript so it’s added inline and runs before the element is rendered which will add a classname to the HTML element “easy-notification-bar-is-disabled” this way it doesn’t wait for the DOM to be loaded and thus prevent CLS issues.

With these changes you can now delay the JS execution of the plugin’s front.js file if you want. I’ve also updated the code so the script has the defer tag by default since it’s not needed right away anymore.

Also if the notice is hidden the plugin will remove all the elements from the DOM to further slim things down.

If you still have issues after updating to v1.6 please let me know! Make sure though that you’ve preloaded the image that’s in the notice though, as that will still make a difference – unless you add some inline CSS that loads before the notice that gives the image exact dimensions or an aspect ratio, this way even if it’s not loaded there will be an empty space with the same dimensions as the image.

• AJ

Hi,

The notification bar is coded in a way that allows it to be collapsable (aka hidden) which requires checking localStorage to see if the element is closed or not which has to be done with javascript. I could code it to use cookies so you can check cookies with PHP but because all WordPress sites should be cached it’s impossible to make it work correctly.

So the way it works is the notification bar is hidden on page load, the javascript checks the localStorage to see if the element should be visible and if so it displays it by adding a class that removes the hidden CSS.

Because your notification is so large with an image, heading, etc – it’s really obvious when the element loads causing a significant CLS issue (usually it’s not a problem). That said, I checked the plugin code and the script does wait for DOMContentLoaded to remove the hidden class on the notifcation bar. I’m going to update my script so that it checks the localStorage and adds a classname to the HTML tag instead, this way the classname should be added before the notice even renders to ensure it’s visible right away.

That said, I see that on your site you are adding the defer tag to the script which will cause the script to wait for the DOM to load anyway, so you will need to remove that as well:

<script src="https://calnewport.com/wp-content/plugins/easy-notification-bar/assets/js/front.js?ver=1.5" id="easy-notification-bar-js" defer></script>

This is what I see on your site – notice the “defer” attribute.

I will work on the 1.5.1 update with the modified JS.

But you should also preload the image of the book that’s added in the notification bar using code added in the wp_head hook like such:

add_action( 'wp_head', function() {
	?>
	<link rel="preload" as="image"  fetchpriority="high">
	<?php
} );

Thank you for bringing this to my attention!

AJ

Oh ya, I wouldn’t want you to switch themes now. The site looks great (nice work). But thank you for considering for future projects ??

I tried messing in the browser but can’t really see a good way to make it look really nice on mobile. But also, it doesn’t seem good to have the phone number and email hideable and the content is already in the footer (most common and where people look for it). I would probably suggest to the client to just not even have it at the top.

Also, one thing I want to mention is when you insert an email as you’ve done in the top bar directly onto the site it will be picked up by scanners. Ideally you will want to obfruscate the email to prevent bots from spamming the email address.

Same thing with how the email is added in the footer.

You may want to consider using a plugin such as this one to prevent your client from being spammed and their email address from ending up in unwanted places. The plugin makes use of the core antispambot function – so you could just write your own child theme code for this instead of using a plugin.

• AJ

I assume you mean before the close button? If so, this is much much more complex. Because the way the notification bar works by default is there is a flex container that holds the text and the button separately, if you try to move text to the right using flex styles would also flip your button to the left.

The only “good” way I can really think of moving the text to the right would be using absolute positioning but it wouldn’t look good on mobile. Example CSS:

.notice-left {
	position: absolute;
	right: 50px;
}

And of course you would need to remove the previous CSS that was intended to shift the text to the left.

It looks like you are using the Flatsome theme and they have a Top Bar section (similar to my Total theme) why don’t you use the theme’s Top Bar area instead of the notification bar plugin? This way you may have more control and you don’t need the added plugin.

For example in my Total theme you could easily do what you want like this: https://a.cl.ly/04u80r0w (basic example) – when I look at the Flatsome demos it appears they have a “similar” top bar area that you should be able to modify to accomplish something similar to what you need.

Unless your client specifically wants the ability to “close” the notice at the top, but if you are adding important information like phone/email it seems like a bad idea for the section to allow itself to become hidden because then the visitor may come back and not be able to find such crucial information.

• AJ

No you aren’t stupid! We’ve all made that mistake before. Glad I could be of help ??