Wordpress styles not loading. Used docker-compose to start nginx, mariadb & wordpress. Here is the configuration I'm using.

services:
  mysql:
    image: mariadb:latest
    container_name: wordpress-sql
    volumes:
      -  maria-db-wp:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wpadmin
      MYSQL_PASSWORD: wpadminpass
    restart: unless-stopped
    networks:
      - wordpress-vpc
  wordpress:
    image: wordpress:beta-php8.3-fpm-alpine
    container_name: wordpress-main
    volumes:
      - wp-vol-1:/var/www/html
    depends_on:
      - mysql
    environment:
      WORDPRESS_DB_HOST: mysql
      MYSQL_ROOT_PASSWORD: root
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wpadmin
      WORDPRESS_DB_PASSWORD: wpadminpass
      WORDPRESS_TABLE_PREFIX: wp_
    restart: unless-stopped
    networks:
      - wordpress-vpc
  nginx:
    image: nginx:stable-alpine-perl
    container_name: nginx-wp
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - wp-vol-1:/var/www/html
    ports:
      - "80:80"
    networks:
      - wordpress-vpc
    restart: unless-stopped
    depends_on:
      - wordpress
  
networks:
  wordpress-vpc:
    driver: bridge
volumes:
  maria-db-wp:
  wp-vol-1:

Here are some screenshots

Here is the page source

I tried searching for these css stylesheets inside of my installation directory both in my local installation (which work correctly) & my docker volume directory, both have the same CSS sheets inside /wp-admin/css so doesnt seem like an installation issue?

This entire thing is fresh & the volumes defined in the dockerfile were created just before this docker compose.

network tab screenshots network tab network tab css response

console says JQMIGRATE: Migrate is installed, version 3.4.1

Even in the sources the css/ css-files do come so ...

Wordpress styles not loading. Used docker-compose to start nginx, mariadb & wordpress. Here is the configuration I'm using.

services:
  mysql:
    image: mariadb:latest
    container_name: wordpress-sql
    volumes:
      -  maria-db-wp:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wpadmin
      MYSQL_PASSWORD: wpadminpass
    restart: unless-stopped
    networks:
      - wordpress-vpc
  wordpress:
    image: wordpress:beta-php8.3-fpm-alpine
    container_name: wordpress-main
    volumes:
      - wp-vol-1:/var/www/html
    depends_on:
      - mysql
    environment:
      WORDPRESS_DB_HOST: mysql
      MYSQL_ROOT_PASSWORD: root
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wpadmin
      WORDPRESS_DB_PASSWORD: wpadminpass
      WORDPRESS_TABLE_PREFIX: wp_
    restart: unless-stopped
    networks:
      - wordpress-vpc
  nginx:
    image: nginx:stable-alpine-perl
    container_name: nginx-wp
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - wp-vol-1:/var/www/html
    ports:
      - "80:80"
    networks:
      - wordpress-vpc
    restart: unless-stopped
    depends_on:
      - wordpress
  
networks:
  wordpress-vpc:
    driver: bridge
volumes:
  maria-db-wp:
  wp-vol-1:

Here are some screenshots

Here is the page source

I tried searching for these css stylesheets inside of my installation directory both in my local installation (which work correctly) & my docker volume directory, both have the same CSS sheets inside /wp-admin/css so doesnt seem like an installation issue?

This entire thing is fresh & the volumes defined in the dockerfile were created just before this docker compose.

network tab screenshots network tab network tab css response

console says JQMIGRATE: Migrate is installed, version 3.4.1

Even in the sources the css/ css-files do come so ...

• php
• css
• wordpress
• nginx
• docker-compose

Share Improve this question Follow edited Mar 7 at 10:14 C3roe 96.8k1515 gold badges9898 silver badges170170 bronze badges asked Mar 7 at 9:39 AnirudhAnirudh 933 bronze badges 9

• What do the browser dev tools have to say? Anything about this in the console? In the network panel, do you see these request being made, and if so, what response are they getting? – C3roe Commented Mar 7 at 9:56
• Hi, nothing in the console.what kind of requests should i look for in network tab, for the requests that get the css styles, yes they are being made and data is coming, these css files are populated so i dont get why these styles aren't applying, i will attach these screenshots in the original post at the bottom – Anirudh Commented Mar 7 at 10:05
• 1 Have you tried using another web browser? – HEXALIX Commented Mar 7 at 10:17
• It shows "memory cache" for these stylesheets, does anything about the behavior change when you check the "disable cache" checkbox, and reload the page with dev tools still opened? – C3roe Commented Mar 7 at 10:17
• 1 @HEXALIX the pretty much default WP .htaccess you suggested, lets requests for existing files pass through unmodified, and the screenshots from network panel already suggest that the resources loaded fine, and also appeared to contain actual CSS code ... So I doubt this will change anything. And since they are still in the process of installing WP here, the fact that there currently isn't a .htaccess file doesn't mean much either, because WP will create the file itself during the installation process. – C3roe Commented Mar 7 at 13:23

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 0

the issue was in my nginx.conf that i was declaring wrongly, basiclaly i missed a line include /etc/nginx/mime.types;

thing is nginx can't interpret(i belive) css js etc files differently so it needs config commands to tell what files are what, my updated nginx.conf is

events {}
http {
    include       /etc/nginx/mime.types; # i missed this line here
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;
        root /var/www/html;
        index index.php index.html index.htm;
        location / {
            try_files $uri $uri/ /index.php?$args;
        }
        location ~ \.php$ {
            include fastcgi_params;
            fastcgi_pass wordpress-main:9000; # Connect to WordPress FPM container
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|otf|eot|mp4|webm|ogv|zip|gz|tar|rar|bz2|7z|xml|rss|json|atom|webp)$ {
            expires max;
            log_not_found off;
        }
    }
}