Local WordPress installation is stripping ‘wp-admin’ from URL on WordPress admin dashboard

I’m using gulp4 to proxy a local WordPress installation with browsersync and gulp-connect-php. My Apache and database are being run with xampp. The project is located in a folder on my desktop, not the in xamp\htdocs\dev folder

When I run gulp the WordPress proxy spins up and can be accessed by launching a browser to: http://localhost:3000/

From there I can log in to the WordPress admin at: http://localhost:3000/wp-admin

I am then redirected to the WordPress dashboard: http://localhost:3000/wp-admin

From the dashboard any links I click from the left hand menu strip “wp-admin” from the URL, thus not finding the desired page. For example, if I were to click “plugins” I’d be directed to http://localhost:3000/plugins.php instead of http://localhost:3000/wp-admin/plugins.php

The port 8001 is what xampp sets php.exe to.

My WordPress siteurl and home are both set to http://localhost:8001 by default upon installation in the database.

gulpfile.js

//establish vars
var gulp            = require("gulp"),
    sass            = require("gulp-sass"),
    postcss         = require("gulp-postcss"),
    autoprefixer    = require("autoprefixer"),
    cssnano         = require("cssnano"),
    sourcemaps      = require("gulp-sourcemaps"),
    connect         = require('gulp-connect-php'),
    browserSync     = require("browser-sync").create(),
    imagemin        = require('gulp-imagemin'),
    concat          = require('gulp-concat'),
    rename          = require("gulp-rename"),
    fs              = require("fs"),
    uglify          = require('gulp-uglify-es').default;

//setup the proxy server and browser-sync
connect.server({
    base:'./dist',
    port:8001,
    keepalive:true
});

browserSync.init({
    proxy:      "localhost:"+8001,
    baseDir:    "./src",
    open:       true,
    notify:     false
});
    
// Tell gulp which files to watch to trigger the reload
gulp.watch([
    'src/**/*.php'
]).on('change', update);

var update = gulp.parallel(
    scss,
    js,
    moveTheme
);

//compress files, move theme to distribution folder, etc
function scss(){...}
function js(){...}
function moveTheme(){...}

Once initialized, gulp logs

[Browsersync] Proxying: http://localhost:8001
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.17:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------

Leave a Comment