I have a custom template that includes a specific folder where the CSS files are located:
WP\wp-content\themes\tema\css
It does not find the file when I add it to my HTML file like this:
<link rel="stylesheet" type="text/css" href="/wp-content/themes/tema/css/style.css">
I came across get_template_directory() but I don't know how to implement this so that I can access to my template folders?
The first thing to point out here is that get_template_directory() returns an absolute path instead of a URL.
Instead you will need to make use of either get_template_directory_uri() or get_stylesheet_directory_uri().
Your example would then look like this:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
The second thing to address is how you are adding your stylesheet. Wordpress has a very useful function that is optimised for adding stylesheets called: wp_enqueue_style().
Instead of manually adding your stylesheet to the header.php inside your theme directory, you can instead add it inside your functions.php file, like this:
add_action( 'wp_enqueue_scripts', 'so_my_custom_scripts' );
function so_my_custom_scripts() {
wp_enqueue_style( 'my-custom-stylesheet', get_template_directory_uri() . '/css/style.css', array(), '20180618' );
}
Add this inside your functions.php
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_style( 'st', get_stylesheet_directory_uri() . '/css/style.css', '', '0.0.1', 'all' );
}
Try tilde ~ to come to main root of website like this
<link rel="stylesheet" type="text/css" href="~/wp-content/themes/tema/css/style.css">
Related
I have a blog on Wordpress. I usually update my CSS file, the CSS file have a tag like:
<link rel='stylesheet' id='rit-style-css' href='https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.2' type='text/css' media='all' />
You can see live here: https://www.lagaleramagazine.es
The problem is that the browser don't update my file, it's keeping the same version (5.2), so the changes that I did to the file didn't show.
I tried to search the CSS file on .php file on my theme but I can't get it to work.
If you visit the file with https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.3 you will see a differente version that https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.2.
I searched a solution but the problem is I can't find the CSS line tag on my Wordpress php files:
/css/style.css?v=<?php echo date('his'); ?>
(I don't know it this will work)
The best way I've found of forcing a stylesheet to enqueue the latest version is using the filemtime() function, which will use the modified date of the file as the latest version. That way it will be relatively cache friendly but also update when the style is.
e.g.
wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
Make sure to put it in a function that's added to the wp_enqueue_scripts action if it's not already.
If you're working in a child theme or similar then you'll need to dequeue the file before enqueuing it again.
function example_update_stylesheet(){
wp_dequeue_style( 'rit-style-css' );
wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'example_update_stylesheet', 100 ); /*Late priority*/
I need to connect a css file so that all css files of the site could be edited from it
including files like botton.min.css
through the functions.php file it is not displayed further
static2.keep4u.ru/2018/11/10/nnnnnd8073f6a38d659d0.jpg
for output I used
function spon_style() {
wp_enqueue_style( 'Me_css_code', get_template_directory_uri() . '/spon.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'spon_style' );
Just access your header.php file and add style before tag:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/spon.css" />
I am making a new theme for WordPress using guide from this site https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch.
The writer of tutorial the says that using <link href="" rel="stylesheet">
is not the most correct way to load scripts.
I am thinking to use wp_enqueue_style() and add_action() on function.php to load the .css file. I have already had three files, index.php, function.php, and style.css in my theme directory but I can't seem to make it work.
Below is the code I use to load the .css file:
<?php
function enqueue_my_styles(){
wp_enqueue_style('style', get_template_directory_uri().'/style.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
?>
Is your functions file named functions.php or function.php? This should be functions.php and is fundamental.
Your code looks correct, but could actually be shortened a little as in the twentyfifteen Wordpress template;
function twentyfifteen_scripts() {
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
You'd use get_template_directory_uri() for loading a custom file within the template directory.
function my_custom_styles() {
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
I had tried to put
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> or <link rel="stylesheet" href="mypathto/css/font-awesome.min.css">
into my page template, what I had done wrong, I include the font-awesome.min.css in my child theme. I also tried to put the following code into my child theme function.php, help, appreciate.
<?php
function buddyboss_child_scripts_font()
{
wp_enqueue_style( 'buddyboss-childss-custom', get_stylesheet_directory_uri().'/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'buddyboss_child_scripts_font', 9999 );
?>
The best way to add Fontawesome in WP,
you must add these lines inside your functions.php file
// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}
I am having an issue with loading some javascript in a child theme I am creating for one of my themes.
Essentially I do:
get_stylesheet_directory() . '/path/to/javascript.js'
which is what your suppose to do, But , as per the documentation, I am getting:
mysite.com/dev/home/path/to/wordpress/path/to/theme/path/to/js.js
which is causing it to not find the required file. because home is at the root of the site.
any ideas on what I can do to fix this?
get_stylesheet_directory() returns a server path. I'm pretty sure you want:
get_bloginfo('stylesheet_directory');
That will return a URL of your stylesheet directory in relation to your Wordpress Installation so you can load external assets like Javascript files that reside in your theme.
I think this will do the trick:
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/path/to/javascript.js"></script>
It's better to enqueue scripts and styles the WordPress way.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Put this in functions.php
add_action( 'wp_enqueue_scripts', 'enqueue' );
function enqueue() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri().'/css/theme.css' );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/js/theme.js' );
}