Can't custom anything on Docker x Wordpress Local develop for MacOS 10.13.6

Question

Problem

I built Wordpress local development env using Docker for Mac. I can access the Wordpress admin page but can't custom anything on browser, something like background color, images.. I could change theme, and load some picture, and text.

Anyone knows how to fix it??

I tried to use Local by flywheel, MAMP, XAMMP but I couldn't..so Docker is the last bastion to me. I really need solution.

Version

MacOS 10.13.6 Docker 19.03.13

My docker-compose.yml

version: "3"
services:
  db:
    image: mysql:5.7
    #container_name: "mysql57"
    volumes:
      - ./db/mysql:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root_pass_fB3uWvTS
      MYSQL_DATABASE: wordpress_db
      MYSQL_USER: user
      MYSQL_PASSWORD: user_pass_Ck6uTvrQ

  wordpress:
    image: wordpress:latest
    #container_name: "wordpress"
    volumes:
      - ./wordpress/html:/var/www/html
      - ./php/php.ini:/usr/local/etc/php/conf.d/php.ini
    restart: always
    depends_on:
      - db
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress_db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: user_pass_Ck6uTvrQ

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    #container_name: "phpmyadmin"
    restart: always
    depends_on:
      - db
    ports:
      - 8888:80

Answer 1

Create a new empty folder/project.

Add docker-compose.yml to your project..

..with these configuration, see comment in code below...

version: '3.7'

networks:
  wordpress:
    ipam:
      config:
        - subnet: 172.25.0.0/16

services:

  # here is out mysql database
  db:
    image: mysql:5.7
    volumes:
      - ./db:/var/lib/mysql:delegated
      # - ./docker/db-dumps:/docker-entrypoint-initdb.d:delegated
    ports:
      - "3306:3306"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wordpress

  # here is our wordpress server
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      # our persistent local data re routing
      - .:/var/www/html/wp-content/themes/testing:delegated
      - ./plugins:/var/www/html/wp-content/plugins
      - ./uploads:/var/www/html/wp-content/uploads
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    ports:
      - "80:80"
    restart: always
    networks:
      - wordpress
    environment:
      # our local dev environment
      WORDPRESS_DEBUG: 1
      DEVELOPMENT: 1
      # docker wp config settings
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_AUTH_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_AUTH_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_CONFIG_EXTRA: |

        /* Development parameters */
        define('WP_CACHE', false);
        define('ENVIRONMENT', 'local');
        define('WP_DEBUG', true);

        /* Configure mail server */
        define('WORDPRESS_SMTP_AUTH', false);
        define('WORDPRESS_SMTP_SECURE', '');
        define('WORDPRESS_SMTP_HOST', 'mailhog');
        define('WORDPRESS_SMTP_PORT', '1025');
        define('WORDPRESS_SMTP_USERNAME', null);
        define('WORDPRESS_SMTP_PASSWORD', null);
        define('WORDPRESS_SMTP_FROM', 'whoever@example.com');
        define('WORDPRESS_SMTP_FROM_NAME', 'Whoever');

        /* add any more custom wp-config defines here */

  # here is our mail hog server
  mailhog:
    image: mailhog/mailhog:latest
    ports:
      - "8025:8025"
    networks:
      - wordpress

Make sure your docker app is up to date, and any previous docker project is down using this command.

docker-compose down

Then in your new project folder run this command to build your new wordpress site...

docker-compose up -d

Now this will build a new installation with persistent folders in your project folder...

Before you access the site you need to update the uploads.ini folder to an actual uploads.ini file with this config code...

file_uploads = On
memory_limit = 2000M
upload_max_filesize = 2000M
post_max_size = 2000M
max_execution_time = 600

So now you will have...

Before you you access the site again it's probably a good idea to put some basic theme files in so your theme will run when you visit the site and admin.

For mailhog to work and receive outgoing mail from your local wordpress environment you will need to add this to your functions.php...

// add the action
add_action('wp_mail_failed', 'action_wp_mail_failed', 10, 1);

// configure PHPMailer to send through SMTP
add_action('phpmailer_init', function ($phpmailer) {

    $phpmailer->isSMTP();
    // host details
    $phpmailer->SMTPAuth = WORDPRESS_SMTP_AUTH;
    $phpmailer->SMTPSecure = WORDPRESS_SMTP_SECURE;
    $phpmailer->SMTPAutoTLS = false;
    $phpmailer->Host = WORDPRESS_SMTP_HOST;
    $phpmailer->Port = WORDPRESS_SMTP_PORT;
    // from details
    $phpmailer->From = WORDPRESS_SMTP_FROM;
    $phpmailer->FromName = WORDPRESS_SMTP_FROM_NAME;
    // login details
    $phpmailer->Username = WORDPRESS_SMTP_USERNAME;
    $phpmailer->Password = WORDPRESS_SMTP_PASSWORD;

});

Now these urls below will work...

• http://locolhost - your site
• http://locolhost/admin - your site wp admin (once site is setup)
• http://localhost:8025 - mailhog for viewing outgoing mail from site

So every time you docker-compose down and docker-compose up -d on this project, your environment will boot up exactly where you left off.

I noticed you are tying to install phpadmin container. If you use a decent IDE you should be able to access your database via db and connect using the credentials in the docker-compose.yml mysql settings. Less heavy containers will make your local site run faster.

As your project grows, advanced theme development, keeping every single thing consolidated in the project/folder makes managing multiple theme project easier.

Like this for example...