Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Local WordPress Development Environment with XAMPP

Local WordPress Development Environment with XAMPP

Install a base WordPress development environment on your local Windows or Mac computer.

Demian Seiler

November 13, 2016
Tweet

More Decks by Demian Seiler

Other Decks in Programming

Transcript

  1. Environment Today we will setup a local WordPress development environment

    using XAMPP. XAMPP has installers for Mac, Linux, and Windows (X is for Cross-Platform) WordPress is also cross platform and can run on Mac, Linux, and Windows. WordPress Per the WordPress.org about page, WordPress is “...the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.” XAMPP Per the Apache Friends website, “XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.”
  2. INSTALL XAMPP Let’s get started with the servers 1 HINT:

    AT THIS POINT YOU SHOULD HAVE YOUR LAPTOPS OPEN WITH THE FLASH DRIVES AT THE READY.
  3. DOWNLOAD XAMPP DOWNLOAD: ◦ Windows: ▫ xampp-win32-5.6.19-0-VC11-installer.exe ◦ Mac ▫

    xampp-osx-5.6.19-0-installer.dmg The versions may change, but generally these are the files you will want to download.
  4. INSTALL XAMPP When you run the installation file download you

    should see the XAMPP installation app. Double Click - Double click it the XAMPP.app to run the installer. XAMPP has a bunch of screens to click through during the install process. Click - Click the Next button to get the process started.
  5. INSTALL XAMPP XAMPP installation gives you the option of not

    installing core files or developer files. Click - Click the Next button to accept the defaults (Mac and Windows) and continue the installation. XAMPP Can be installed just about anywhere on your system. Click - Mac: Click the Next button to again accept the default installation path. Windows: Ensure installation folder is off the root of your drive (ex. c:\XAMPP).
  6. INSTALL XAMPP They give you an option to learn more

    about additional software that works with XAMPP. Click - Ensure this is UNCHECKED and then click the Next button. XAMPP is finally ready to install itself on your system. Click - Click the Next button to actually start the installation of the program.
  7. INSTALL XAMPP Again, they really want you to check out

    bitnami, but for now let’s just stay patient and let the XAMPP installation complete. Stay Seated - Stay comfortably seated. Maybe enjoy a cool beverage while you wait. Windows: If you are presented with a firewall warning, allow the access on the private network option. XAMPP is done. Congrats! Click - As we still have some work to do, and you need to know where it is installed, make sure to uncheck the box and click Finish.
  8. CONFIGURE XAMPP ◦ Windows: ▫ c:\xampp\xampp-control.exe ◦ Mac ▫ /Applications/XAMPP/manager-osx.app

    Start the control panel for XAMPP to start your MySQL and Apache servers. CONFIGURE:
  9. CONFIGURE XAMPP Ensure both MySQL and Apache servers are running.

    If they aren’t, go ahead and start them now. CONFIGURE:
  10. INSTALL WordPress Let’s get started with WordPress Installation 2 HINT:

    AT THIS POINT YOU SHOULD HAVE YOUR LAPTOPS OPEN WITH THE FLASH DRIVES AT THE READY.
  11. DOWNLOAD WordPress DOWNLOAD: ◦ WordPress ▫ Current Version is 4.6.1

    ▫ wordpress-4.6.1.zip Download the file to anywhere you would like, just make sure you can find it.
  12. INSTALL WordPress INSTALL: ◦ Unarchive (unzip) the file wordpress-4.6.1.zip, to

    your current download directory. ◦ You should now see a directory called wordpress ◦ Copy this wordpress folder to your Apache htdocs directory installed with XAMPP. ▫ Mac: \Applications\XAMPP\htdocs ▫ Windows: c:\xampp\htdocs
  13. CONFIGURE WordPress CONFIGURE: We still have some configuration to do,

    but let’s take a look at what you just did. Keep this browser open for now. http://localhost/wordpress
  14. CONFIGURE WordPress CONFIGURE: Before we go any further let’s get

    the database side setup in phpmyadmin and click the “Databases” tab. http://localhost/phpmyadmin/
  15. CONFIGURE WordPress CONFIGURE: ◦ Let’s create a new database called

    “wporl_database” with a collation of “utf8_general_ci” ◦ Click create
  16. CONFIGURE WordPress CONFIGURE: ◦ You have now created an empty

    database that WordPress can use. ◦ Congrats!
  17. INSTALL WordPress CONFIGURE: ◦ Navigate back to the wordpress directory

    in your Apache htdocs folder. ▫ Mac: \Applications\XAMPP\htdocs\wordpress ▫ Windows: c:\xampp\htdocs\wordpress
  18. INSTALL WordPress CONFIGURE: ◦ In this wordpress directory lives the

    main configuration file for your WordPress install. It is called the wp-config.php file. ◦ By default there is a file called wp-config-sample.php. Rename this file to wp-config.php. ◦ Go ahead and open this file in your text editor of choice.
  19. INSTALL WordPress CONFIGURE: ◦ As you would expect with something

    with the word “config” in it’s name, this file has a good number of options that can be modified. We are going to focus on just the few needed to get running. ◦ You will want to learn to love this file as you will use it more in the future to configure all kinds of additional options.
  20. INSTALL WordPress CONFIGURE: ◦ For a basic install we will

    update 4 fields. ◦ DB_NAME ◦ DB_USER ◦ DB_PASSWORD ◦ DB_HOST * NOTE: Using super user login “root” in a dev environment is not a great idea, and should NEVER be used outside of your local development environment. *If you have issues with WordPress accessing the database try changing the password to ‘root’
  21. CONFIGURE WordPress CONFIGURE: ◦ Since we did all of our

    configuration directly in the wp-config.php file, we no longer need this process.
  22. CONFIGURE WordPress CONFIGURE: ◦ In a new browser let’s hit

    your configured WordPress URL. ◦ Complete your basic site info. ◦ Click: Install WordPress http://localhost/wordpress
  23. CONFIGURE WordPress CONFIGURE: ◦ Now you can login to the

    back-end of your site using your admin credentials you added during the setup. http://localhost/wordpress/wp-login.php
  24. LINKS For more information: ◦ XAMPP download: ▫ https://www.apachefriends.org/download.html ◦

    WordPress download: ▫ https://wordpress.org/download/ ◦ WordPress Install Documentation: ▫ https://codex.wordpress.org/Installing_WordPress ◦ Securing/Hardening WordPress: ▫ http://codex.wordpress.org/Hardening_WordPress ◦ More info on the wp-config.php file ▫ https://codex.wordpress.org/Editing_wp-config.php