WordPress Local Dev Set-Up

You have a child-theme you want to sync with GitHub. You have XAMPP installed. You don't want your project to live in the HTDOCs file directory.

NOTE: I am assuming that you have already a live production website with a WordPress child-theme.  You  now want to add it to your GitHub repo and version control it or manage it using Git. I am also assuming you have a production site that is currently using the child-theme.  

Setting up and Installing Steps

Download child-theme

Using FileZilla or other FTP solution, download the entire active child-theme and save it to your desktop. You don’t need to download the parent-theme. The parent-theme will get updated and any downloaded copy will become outdated.

Set-up XAMPP

If you haven’t already set-up XAMPP for use on your Windows machine, set it up now, by following this very good video: XAMPP VIDEO

After the part for setting up XAMPP, stop the video and do these steps:

  • edit http.conf
  • edit httpd-vhosts.conf
  • hosts

Note: Pay attention in the code sample below. [YOUR ALIAS] means a name for your local website, I often use “name.blog” or “name2.blog” but name it something I can remember. “c:\path\to\folder” is the path to your WordPress root installation. For example, “c:\path\to\folder\wordpress installation”. The wp-config.php, index.php, files live here as well as wp-content, wp-admin, and wp-includes folders.

edit http.conf c:\xampp\apache\conf\httpd.conf

Alias /[YOUR ALIAS] "c:\path\to\folder\wordpress installation"
   <Directory "c:\path\to\folder\wordpress installation">
           Options FollowSymlinks
           AllowOverride none
           Require all granted
   </Directory>

edit httpd-vhosts.conf C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
DocumentRoot "c:\path\to\folder\wordpress installation"
ServerName [YOUR ALIAS]
<Directory "c:\path\to\folder\wordpress installation">
</Directory>
</VirtualHost>

edit hosts file (for Windows 10) c:\Windows\System32\drivers\etc\hosts

127.0.0.1 [YOUR ALIAS]

Then continue with the video until you have WordPress installed.

Note: You should restart Apache if your website doesn’t load when you type in your alias into the browser.

XAMPP is probably the most used for installing Linux, Apache, PHP, and Python onto a Windows operating system.  It includes PHPMyAdmin as well as other tools like Filezilla.

There are also many tutorials and materials available to help to properly set it up on your machine. Like WAMP and others for MacOS. 
Git is software that helps with collaboration, versioning and maintaining your code. There are several companies that host Git for you.  GitHub, GitLab and others.

Today professional programmers use Git in some version or another.

These instructions should be similar for Gitlab.

Create a repository and git clone

  • Create a GitHub account and login to GitHub
  • Create a repository and add a readme, this will be for your child theme and the edits. Then copy the link
  • CD in the command line to your WordPress local install and to the themes folder e.g.: c:\path\to\folder\wordpress installation\wp-content\themes
  • You will need to install Git if you haven’t already. Here is the documentation for installing Git
  • Then git clone: $ git clone  [LINK TO REPO COPIED EARLIER]
  • Edit the .gitignore, and update the existing .gitignore that are already there from here: Gist

Push (upload to GitHub) the child-theme

  • Delete the html.html file that was download from github
  • Copy/paste the child-theme files into the directory
  • https://kaidawei.me/some-git-commands/ follow these to “git add”,  “git commit” and then,  “git push”
  • Verify it worked by visiting the repository

Now clone back to the production server

NOTE: This will crash your site for a minute or two.

  • Login and navigate to the themes directory on the command line
  • FTP a back-up of your current live child-theme, again.
  • $ sudo rm -rf [previous child theme folder]
  • $sudo git clone [link to repo] [child-theme-folder-name]
  • Make sure your site is working as before
  • Now test everything by making a change, pushing it to repo and the pulling it from your live server.
  • Everything should be fine.

On Linux Mint 18+ It’s a little different:

Files need editing and configuration

Note: I will use “phpsite.conf”, replace phpsite with any alias name you would like as well as the path to your files.

WordPress development is where you want to be over the next few years. Learning to use Git with a service like GitHub is no longer an option.  WordPress use continues to evolve and its development.

React.js is another new need to know skill after PHP, HTML, and CSS.
GitHub is the largest company offering Git services and hosting. It’s free for projects that are Open Source and for those people who don’t mind sharing their code with their world.

Consider GitHub the de facto social network for programmers and coders.

Now we have to edit some files on your computer.

Create and edit your .conf file

  • Navigate the your /etc/apache2/sites-available folder
$ sudo cp 000-default.conf phpsite.conf
$ sudo nano phpsite.conf

Now you will edit that file so it basically looks like this:

<VirtualHost 127.0.3.1:8000>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #ServerName www.example.com
        ServerName phpsite.blog
        ServerAlias phpsite.blog

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog /home/dkartuzinski/Projects/ Understanding-PHP/Udemy/error.log
        CustomLog /home/dkartuzinski/Projects/ Understanding-PHP/Udemy/access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to # enabled or        disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf

        <Directory "/home/dkartuzinski/Projects/ Understanding-PHP/Udemy">
        Options Indexes FollowSymLinks
        Order allow,deny
        Allow from all
        Require all granted
        </Directory>

        #<IfModule mod_rewrite.c>
        #RewriteEngine On
        #RewriteBase /
        #RewriteRule ^index\.php$ - [L]
        #RewriteCond %{REQUEST_FILENAME} !-f
        #RewriteCond %{REQUEST_FILENAME} !-d
        #RewriteRule . /index.php [L]
        #</IfModule>
</VirtualHost>


# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

NOTE: If you are doing a WordPress installation, I recommend putting your WordPress in one sub-folder deeper, so you can keep your assets, node install, image files, etc, separate from the install of WordPress itself.

So rather than routing to the Project folder, you would route to the folder holding the installation itself.

Edit the /etc/hosts file

127.0.3.1 phpsite.blog

Note: Make sure the localhost URL matches. In my example above, I am using 127.0.3.1 because I have more than one alias.

Edit apache2.conf

Note: You need to find the section in the above file, and allow the server to access your files with the below commands. Adjust to fit your file structure. On Linux Mint, it’s located in /etc/apache2/apache2.conf

<Directory /home/dkartuzinski/Projects/ Understanding-PHP/Udemy/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

Restart Apache and enable your configuration file.

$ sudo invoke-rc.d apache2 restart
$ sudo a2ensite phpsite.conf
$ sudo service apache2 reload

You can always check you apache config with the following command:

$ sudo apachectl configtest

Setting access and user rights on Ubuntu

I was having a hell of a time getting both my WordPress install and my code editor to play nicely together and editing files in the code editor gave me headaches with file permissions. Below are the three commands you need:

$ sudo chown -R www-data:www-data /path/to/wordpressinstall
$ sudo chmod -R 775 /path/to/wordpressinstall
$ sudo chown -R david:www-data /path/to/wordpressinstall

Note: Most tutorials with use 755 for the chmod and this is correct for the server. But for local, 775 allows the owner and the group members to both edit. 755 allows only the owner to edit. This gem of an explanation is very clear about all this: Linux.org chmod explanation

Tags: , , , ,

Categorized in: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *



Let's Work Together