I have this code used in my WP theme:
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/fav.ico?<?php echo date('U'); ?>">
and not cache it, since <?php echo date('U'); ?>. My problem is, and my client reported it to me today, that the favicon stopped showing only in Chrome. I tried moving it to the root of the page, adding type, removing the "refresh" hack, changing name to favicon.ico and even adding additional link icon for PNG image. Nothing helps. Yes, I've been trying to
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/fav.ico?v=2">
Can someone help me with this one?
If you have messed up with the code then use plugins like http://wordpress.org/plugins/custom-favicon/
This plugin will override your theme favicon functionality and will help you with your desired result.
This should help.
Related
I found so many different articles and tried to implement it, but I still can't get it working.
Google pagespeed recommends to preload few files, but I can't figure it out :/
I went ahead and updated my header.php
<head>
<!--custom preload -->
<link rel="preload" as="font" crossorigin="anonymous" href="https://allurehemp.com/allurehemp/assets/css/icons/fl-icons.woff2" >
<link rel="preload" as="style" crossorigin="anonymous" href="https://allurehemp.com/allurehemp/assets/css/fl-icons.css" >
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
And now i'm facing the following issue(s);
A preload for 'https://allurehemp.com/allurehemp/assets/css/fl-icons.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
Any recommendation is appreciated =)
I realize this is quite delayed, but I just figured this out for my site. Maybe it will be helpful for others, if the OP doesn't need this anymore.
It's way simpler than I thought it would be. Below is what I did, and it worked. No more warning/penalty in PageSpeed Insights, and my performance score increased.
In your WP admin area/dashboard, go to Flatsome > Advanced > Global Settings (see screenshot below)
Screenshot of relevant Flatsome > Advanced > Global Settings area
Insert the following line into the 'Header Scripts' area:
<link rel='preload' href='//wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2' as='font' type='font/woff2' crossorigin='anonymous'>
OTHER NOTES:
A. The link in my code snippet is relative to the site domain, so you don't need to change it and insert your domain or anything. The double slash forces the same security protocol as the origin site, so it should force load https if your site uses https (which it should).
B. This probably goes without saying, but you never know: If you're adding anything to the theme files, always use a child theme so your updates/changes don't get overwritten when you update your theme. Here's a great plugin I've used several times to create a child theme in WordPress: https://wordpress.org/plugins/child-theme-configurator/
C. The links you included in the in the header.php file didn't include the "type=" bit. I'm not certain, but this could have been the source of the problem for you.
D. I didn't add a preload link for the css file like you did because all my css is minified and combined. Also, that particular file is just a few lines anyway, so preloading likely won't make much of a difference.
Hopefully this helps! :)
A wordpress site of mine got hacked and there appears to be a favicon left by the hacker.
I cannot see it anywhere in the theme, there is no shortcut line in the header
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Any ideas where this file can be?
This is due to caching. You have to refresh it to remove the old icon.
Locate the favicon resource of your site by navigating to <YOUR SITE URL>/favicon.ico in your browser and do a hard refresh.
If the above doesn't work, try setting a new favicon by adding this to your current theme's header.php file.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico?ver=new" /> and upload the new favicon to the appropriate location.
In the last couple of days I have been creating a theme for my WordPress site, but suddenly I have experienced problems with it. The php files have stopped linking with the css files.
I have tried creating many different themes and have been getting the same result - a site that only looks like basic html.
Here is the coding I have been using to link them <link rel="stylesheet" href="styles.css" type="text/css" />
Does anyone have any ideas? Is anybody else having problems with their site?
P.s. Any help will be very much appreciated!! :D
You may want to try /styles.css, or ./styles.css. The "." means "up one directory level".
However, a better way to do it, would be to link to it like this:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/styles.css" type="text/css" />
This creates a dynamic absolute path to the stylesheet.
As #rambu said below, wp_enqueue_style is the proper way to do this.
function add_my_style() {
wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'add_my_style' );
I am trying to add favicon to mysite but it is not working. I have put my favicon to C:\xampp\htdocs\wordpress\wp-content\themes\expound folder
Then in header.php file, I put the code below:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Have you tried selecting your site's "icon" in the admin panel? It's a little hard to find, but it's there.
Open your site then customize -> open Site Identity -> Set Site Icon after you can show favicon icon.
This might be an easy question (hopefully) for you to answer. Not sure this is the right place to post the question, since I do not know if this is a CSS issue or a normal PHP programming issue (I know very little about PHP programming), so here goes:
I have a wordpress blog that uses three different stylesheets depending on the platform where the blog is viewed (web, ipad, iphone).
I recently made a tab on my Facebook page which opens the blog in an iframe, but it opens the web-style (default) stylesheet which is way too wide for the max width in Facebook tabs (810 px). However, the ipad-adapted stylesheet would work just fine there. I still wish to see the normal web-style view when I enter my web from outside Facebook, so it isn't an option to swith to the ipad-stylesheet as a default stylesheet.
Is there a way of passing on a parameter from the facebook tab: e.g. http://www.myblog.com/?style=facebook so that the site that shows inside the facebook tab uses the right stylesheet? I would think more people have had this problem but I have scoured the Internet for hours without knowing really what to look for. Somebody spoke about CSS selectors, but I have no clue as to how they work or how to implement them in a solution.
This is the code in the header.php that deals with the stylesheets:
<!-- Theme Styles -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<?php $disable_theme_features = of_get_option( 'disable_theme_features' ); if ($disable_theme_features['4'] == '0') { ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-ipad.css" type="text/css" media="screen" />
<?php } if ($disable_theme_features['3'] == '0') { ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-iphone.css" type="text/css" media="screen" />
<?php } ?>
Is there a way to make this happening without resorting to a complete makeover of the template? Any help would be greatly appreciated!! And sorry again if this is a noob question, that is because i am noob at PHP.
Thanks again!
You could use a PHP if statement. Such as if at the URL, then use this stylesheet.