Issues with the loading of CSS in Wordpress

Question

Issues with the loading of CSS in Wordpress

I transferred the project from the server to my personal computer (localhost). However, whenever I make changes to the css file, these modifications do not appear on the website when viewed locally.

After attempting to switch browsers and clear the browser cache, I then proceeded to install a plugin called Autoptimize in order to clear the website's css cache.

.section_news {
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.section_news .news_content {
    color: red;
    text-align: center;
}

.section_news .news_content .title {
    color: red;
    color: blue;
}

Despite reloading the web page, the changes are still not visible. I verified if the code was being loaded properly at all: https://ibb.co/jT7LX6n

html css wordpress

Answer 1

Answer №1

What specific element are you targeting with your styling? Is it this line?

.section_news .news_content .title {
    color: red;
    color: blue;
}

Your CSS should only include one color, either color: red; or color: blue;

Make sure to refresh your browser cache by using

Cmd + Shift + r (on a mac) OR Ctrl + F5 (on windows)

.

Also, check if your stylesheet source link includes a version variable like:

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?ver=5.2.2" />

If so, update the version from ver=5.2.2 to ver=5.2.3

UPDATE

Your local website stylesheet may not be loading because the URL is still pointing to the live site's stylesheet. Here are some solutions you can try.

If you are using XAMPP, you can virtually host your domain if it uses http only.

Add the following code in C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
 DocumentRoot "C:/xampp/htdocs" //your file path
 ServerName your-domain.com
 ServerAlias www.your-domain.com
 <Directory "c:/xampp/htdocs">
 Order allow,deny
 Allow from all
 </Directory>
</VirtualHost>

Then edit the

C:\Windows\System32\drivers\etc\hosts

file and add this line

127.0.0.1  www.your-domain.com

Alternatively, if the domain uses https:, follow this guide

How do I use https (SSL) in XAMPP while using virtual hosts

ANOTHER option is to update your URL in the database:

Note: Always backup your database first

Change site URL and WordPress URL in Localhost

Alternatively, you can use a plugin like https://wordpress.org/plugins/velvet-blues-update-urls/

Answer 2

What specific element are you targeting with your styling? Is it this line?

.section_news .news_content .title {
    color: red;
    color: blue;
}

Your CSS should only include one color, either color: red; or color: blue;

Make sure to refresh your browser cache by using

Cmd + Shift + r (on a mac) OR Ctrl + F5 (on windows)

.

Also, check if your stylesheet source link includes a version variable like:

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?ver=5.2.2" />

If so, update the version from ver=5.2.2 to ver=5.2.3

UPDATE

Your local website stylesheet may not be loading because the URL is still pointing to the live site's stylesheet. Here are some solutions you can try.

If you are using XAMPP, you can virtually host your domain if it uses http only.

Add the following code in C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
 DocumentRoot "C:/xampp/htdocs" //your file path
 ServerName your-domain.com
 ServerAlias www.your-domain.com
 <Directory "c:/xampp/htdocs">
 Order allow,deny
 Allow from all
 </Directory>
</VirtualHost>

Then edit the

C:\Windows\System32\drivers\etc\hosts

file and add this line

127.0.0.1  www.your-domain.com

Alternatively, if the domain uses https:, follow this guide

How do I use https (SSL) in XAMPP while using virtual hosts

ANOTHER option is to update your URL in the database:

Note: Always backup your database first

Change site URL and WordPress URL in Localhost

Alternatively, you can use a plugin like https://wordpress.org/plugins/velvet-blues-update-urls/

Answer 3

Answer №2

If you're experiencing caching issues, the presence of ?ver=5.2.2 in the CSS reference could be the culprit. This parameter is typically added by Wordpress when the theme author loads the CSS file using the wp_enqueue_style() function.

To address this issue, you may consider implementing a solution similar to what was suggested in this related query. You can add a function like the following to your functions.php file:

function trim_css_version($src) {
    if (strpos($src, 'ver=')) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'trim_css_version', 9999);

By incorporating this code snippet, you should be able to eliminate the ?ver=x.x.x from your document and avoid unnecessary browser caching.

Answer 4

If you're experiencing caching issues, the presence of ?ver=5.2.2 in the CSS reference could be the culprit. This parameter is typically added by Wordpress when the theme author loads the CSS file using the wp_enqueue_style() function.

To address this issue, you may consider implementing a solution similar to what was suggested in this related query. You can add a function like the following to your functions.php file:

function trim_css_version($src) {
    if (strpos($src, 'ver=')) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'trim_css_version', 9999);

By incorporating this code snippet, you should be able to eliminate the ?ver=x.x.x from your document and avoid unnecessary browser caching.

Issues with the loading of CSS in Wordpress

Answer №1

Answer №2

Similar questions

How can I ensure the dialog title and button are centered, and how can I center a JQuery dialog box after the browser has

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

Issues following compilation with npm run prod

Authentication Error (401) in WordPress JWT

Which design pattern should I implement to update all table rows except the initial one, while incorporating an AJAX insertion mode?

Error: The function jQuery(...).hexColorPicker does not exist

Is there a way to automatically redirect my login page back to the original page in case of login failure?

Discover the best ways to repurpose an HTML page with varying jQuery/PHP code

What is the best way to link a generated PHP-AJAX link with a jQuery action?

Tips for integrating DataTables selection filtering functionality

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

showcasing real-time webcam information within an HTML web application

An innovative approach to loading tabs dynamically using Materialize CSS

Styling Images with Gradient using CSS

The menu isn't displaying properly and the onclick function seems to be malfunctioning

What is the best way to exclude an external HTML file from being displayed on the home page?

Creating CSS-style overlayed images that are resizable

"Customize the appearance of ng-bootstrap datepicker selection with a unique

Master the art of string slicing in JavaScript with these simple steps

Steps for Adding an H1 Tag Using GWT