I'm new to WordPress, so I'm not really sure how it works, but I've been editing the theme by changing wp-content/themes/<theme_name>/css/style.css
, then uploading this to the website via FTP. Here's the issue I'm having:
From the Chrome Developer Tools, I can see that the style.css
(the current file) is overwriting style.css?ver=4.6.3
. This means that even though I removed the border from the current CSS, it's still being displayed from the old CSS version.
Looking at the HTML source code for the page that WordPress generates, I found this in <head>
:
<link rel="stylesheet" id="twentysixteen-style-css" href="http://<web.address>/wp-content/themes/<theme_name>/style.css?ver=4.6.3" type="text/css" media="all">
And then I also found this:
<link href="http://<web.address>/wp-content/themes/<theme_name>/css/style.css" rel="stylesheet" type="text/css">
What's going on? Why is WordPress loading an old version of style.css
, and then the current one?
I'm new to WordPress, so I'm not really sure how it works, but I've been editing the theme by changing wp-content/themes/<theme_name>/css/style.css
, then uploading this to the website via FTP. Here's the issue I'm having:
From the Chrome Developer Tools, I can see that the style.css
(the current file) is overwriting style.css?ver=4.6.3
. This means that even though I removed the border from the current CSS, it's still being displayed from the old CSS version.
Looking at the HTML source code for the page that WordPress generates, I found this in <head>
:
<link rel="stylesheet" id="twentysixteen-style-css" href="http://<web.address>/wp-content/themes/<theme_name>/style.css?ver=4.6.3" type="text/css" media="all">
And then I also found this:
<link href="http://<web.address>/wp-content/themes/<theme_name>/css/style.css" rel="stylesheet" type="text/css">
What's going on? Why is WordPress loading an old version of style.css
, and then the current one?
Styles are loaded in the order specified in the underlying code. It's usually under control of the theme. If a 2nd style file has the same style defined, then the 2nd one overwrites the 'parameters' of the 1st style. This is as designed.
Note that it is not a good idea to edit a theme's files directly. Any changes you make will be overwritten when that theme is updated.
If you want to customize a theme (and it's styles), then it is best to create a 'Child theme'. This is a theme that uses the coding/style from the 'parent' theme, then adds your customized stuff from the 'child' theme. This is a great way to experiment with theme customizations without the worry of your changes being 'trashed' when theme updates.
There are a ton of tutorials on how to make a child theme. I use a plugin called "Child Theme Wizard" to create the necessary child theme files.
Enqueue your style inside 'wp_head' action it will load first.
add_action('wp_head', function () {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/style.css');
}
(optional but recommended) Create a child theme following this guide: https://developer.wordpress.org/themes/advanced-topics/child-themes/
(optional but recommended) Put your css file in the child theme (eg. /css/style.css)
Load the styles in functions.php by specifying, that the parent style should be loaded BEFORE yours:
function my_enqueue_styles() {
$parent_style = 'twentysixteen-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'my-style',
get_stylesheet_directory_uri() . '/css/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );