fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 7 MIN READ

WP Git Repo MAMP

How to use Git with MAMP for local WordPress development

From the original Fervor library. Examples may use older package versions.

Comprehensive Tutorial: Using Git with MAMP for Local WordPress Development

Welcome to this step-by-step tutorial on setting up a local WordPress development environment using MAMP and Git. This guide will help you streamline your workflow, maintain version control, and efficiently manage your WordPress projects. Whether you’re a beginner or looking to refine your development process, this tutorial has you covered.

Table of Contents

Prerequisites

Before we begin, ensure you have the following installed on your machine:

  • MAMP: A free, local server environment.
  • Visual Studio Code (VSCode): A powerful code editor.
  • Git: Version control system.
  • GitHub Account: For remote repository hosting (optional but recommended).

Installing MAMP

  1. Download MAMP:

  2. Install MAMP:

    • Follow the installation instructions specific to your OS.

  3. Launch MAMP:

    • Open the MAMP application.
    • Start the servers by clicking on Start Servers. Ensure both Apache and MySQL are running.

  4. Verify Installation:

    • Open your browser and navigate to http://localhost:8888/. You should see the MAMP start page.

Setting Up a Local WordPress Site

  1. Download WordPress:

  2. Extract WordPress:

    • Unzip the downloaded file.
    • Rename the extracted folder to your desired project name, e.g., my-wp-site.

  3. Move to MAMP’s htdocs:

    • Move the my-wp-site folder to MAMP’s htdocs directory:
      • Mac: /Applications/MAMP/htdocs/
      • Windows: C:\MAMP\htdocs\

  4. Create a Database:

    • Open your browser and navigate to http://localhost:8888/phpMyAdmin/.
    • Click on Databases.
    • Enter a database name (e.g., my_wp_db) and click Create.

  5. Configure WordPress:

    • Navigate to http://localhost:8888/my-wp-site/ in your browser.
    • Follow the WordPress installation wizard:
      • Database Name: my_wp_db
      • Username: root
      • Password: root (default for MAMP)
      • Database Host: localhost
      • Table Prefix: wp_ (default)

  6. Complete Installation:

    • Provide site details (site title, admin username, password, email).
    • Finish the installation and log in to your new local WordPress site.

Exporting and Importing the WordPress Database

If you have an existing WordPress site you’d like to work on locally, follow these steps to import it into your local environment.

Exporting from the Live Site

  1. Access phpMyAdmin on Live Server:

    • Log in to your hosting account and navigate to phpMyAdmin.

  2. Select Database:

    • Choose the database associated with your WordPress site.

  3. Export Database:

    • Click on the Export tab.
    • Select the Quick export method and SQL format.
    • Click Go to download the database file.

Importing to Local Environment

  1. Open phpMyAdmin Locally:

    • Navigate to http://localhost:8888/phpMyAdmin/.

  2. Create a New Database:

    • Click on Databases.
    • Enter a name (e.g., local_wp_db) and click Create.

  3. Import the Database:

    • Select the newly created database.
    • Click on the Import tab.
    • Click Choose File and select the exported .sql file.
    • Click Go to import.

  4. Update wp-config.php:

    • In your my-wp-site folder, locate wp-config.php.
    • Update the database details:
      define('DB_NAME', 'local_wp_db');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
define('DB_HOST', 'localhost');

  5. Update Site URLs:

    • In phpMyAdmin, navigate to the wp_options table.
    • Update the siteurl and home fields to http://localhost:8888/my-wp-site.

Configuring Your Local Environment

  1. Hosts File (Optional for Custom Domains):

    • If you prefer using a custom local domain (e.g., mywpsite.local), modify your hosts file.
    • Mac/Linux:
      • Open Terminal and run sudo nano /etc/hosts.
    • Windows:
      • Edit C:\Windows\System32\drivers\etc\hosts with administrative privileges.
    • Add the following line:
      127.0.0.1   mywpsite.local
    • Save and exit.
    • Update MAMP’s Apache settings to recognize the new domain if necessary.

  2. Permalinks:

    • Log in to your local WordPress admin.
    • Navigate to Settings > Permalinks.
    • Choose your preferred permalink structure and save changes to ensure URLs work correctly.

  3. Enable Pretty Permalinks:

    • Ensure that MAMP’s Apache configuration allows .htaccess overrides.
    • In MAMP, go to Preferences > Apache and set Document Root if needed.

Initializing Git in VSCode

  1. Open Project in VSCode:

    • Launch VSCode.
    • Click on File > Open Folder and select your my-wp-site folder.

  2. Initialize Git Repository:

    • Open the integrated terminal in VSCode (Ctrl + ~ or View > Terminal).
    • Run the following command to initialize Git:
      git init
    • This creates a .git directory in your project folder.

  3. Configure Git (If Not Already Done):

    • Set your username and email:
      git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

Setting Up .gitignore

To ensure sensitive files and unnecessary data aren’t tracked by Git, set up a .gitignore file.

  1. Create .gitignore:

    • In the root of your project (my-wp-site), create a file named .gitignore.

  2. Add the Following to .gitignore:

    # Ignore OS files
.DS_Store
Thumbs.db

# Ignore WordPress core
/wp-admin/
/wp-includes/

# Ignore content uploads
/wp-content/uploads/

# Ignore configuration files
wp-config.php

# Ignore node modules (if using npm)
/node_modules/

# Ignore logs
*.log

# Ignore environment variables
.env

# Ignore composer dependencies
/vendor/

    Note: Adjust the .gitignore rules based on your project’s specific needs. For example, if you’re developing themes or plugins, ensure those directories are included.

  3. Save the .gitignore File.

Committing and Pushing Changes

  1. Stage Changes:

    • In the VSCode Source Control panel (usually accessed by clicking the branch icon on the sidebar), you’ll see the list of untracked files.
    • Click the + icon next to the files you want to stage or click + next to Changes to stage all.

  2. Commit Changes:

    • Enter a commit message in the message box, e.g., “Initial commit - Set up local WordPress site.”
    • Click the checkmark icon or press Ctrl + Enter to commit.

  3. Connect to a Remote Repository (Optional but Recommended):

    • Create a Repository on GitHub:
      • Log in to GitHub and create a new repository.
    • Add Remote Repository:
      • In the VSCode terminal, run:
        git remote add origin https://github.com/yourusername/your-repo-name.git
    • Push Local Commits:
      • Push your commits to GitHub:
        git push -u origin master
      • Replace master with main if your repository uses the main branch.

  4. Regular Workflow:

    • Pull Updates:
      • Before starting work, ensure you have the latest changes:
        git pull origin master
    • Make Changes:
      • Develop your site, make edits in VSCode.
    • Stage and Commit:
      • After significant changes, stage and commit with descriptive messages.
    • Push to Remote:
      • Regularly push commits to the remote repository to back up your work and collaborate.

Additional Tips for an Effective Workflow

  1. Use Branches:

    • Create branches for new features or experiments to keep the master/main branch stable.
      git checkout -b feature/new-feature

  2. Merge and Resolve Conflicts:

    • After completing work on a branch, merge it back:
      git checkout master
git merge feature/new-feature
    • Handle any merge conflicts that arise.

  3. Commit Often with Clear Messages:

    • Small, frequent commits with descriptive messages make tracking changes easier.

  4. Backup Your Database:

    • Use plugins like WP Migrate DB or All-in-One WP Migration to handle database migrations between environments.

  5. Automate Tasks:

    • Utilize tools like Gulp or Webpack for task automation (e.g., compiling Sass, minifying scripts).

  6. Use Environment Variables:

    • Manage sensitive information and configurations using environment variables. Consider using a .env file with appropriate .gitignore rules.

  7. Collaborate Effectively:

    • Use GitHub issues and pull requests to manage collaboration and code reviews if working in a team.

  8. Stay Updated:

    • Regularly update WordPress core, themes, and plugins to benefit from the latest features and security patches.

Conclusion

By following this tutorial, you’ve set up a robust local WordPress development environment using MAMP and Git. This setup not only facilitates efficient development but also ensures your work is version-controlled and easily manageable. Leveraging tools like VSCode and GitHub enhances collaboration and maintains a clean workflow, whether you’re working solo or as part of a team.

Remember to regularly commit your changes, keep your .gitignore updated, and back up your database to safeguard your work. Happy developing!

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY