Server – installation and configuration

Author: Dawid Adach

-

Theory

Those paragraphs describe the basic theory, if you don't want to read, you can jump directly to practice.

Before we will start our WordPress adventure, we have to set up our environment. WordPress, unlike pure Bootstrap, requires PHP and SQL to run. That means that we can’t develop our theme on our laptop storing data in our local drive and running them in a browser. At least not without some extra effort.

WordPress theme development involves using HTML, CSS, JavaScript, and PHP to build dynamic WordPress sites. As far as three first items are concerned, all new browsers can compile them easily. Things are different when it comes to PHP. PHP is a server-side language meaning that your code is compiled and executed on server-side. The final result is sent to the browser. That’s why we have turned our local machine into a server which can support PHP.

The next big thing in comparison to previous tutorials is a database. WordPress uses databases to store many different sets of data. Why? As long as we are creating static web pages, which doesn’t change content too often we can “hardcode” this information in our HTML files. Things change where we want our website to be more dynamic. Users’ logins, password, posts, comments - all these data have to be to stored somewhere. This “somewhere” is nothing else but our database.

There are many different “servers” and “databases” which we could possibly use. Since server installation and the administration itself is such a big and complex subject that we could write dozens of tutorials just about them before we would actually start creating the first website element we will simplify that and use software which will do most of the job for us. However, you have to keep in mind that if you plan to become web developer you should definitely dive into that subject much deeper.

This software is called XAMP, reasonably small, handy and simple server suite which will turn out computer into local www server supporting PHP, MySQL, FTP and much more.

Note

While reading this tutorial some of the things might be unclear or seem to be complex. That’s normal for beginners. In such a case just follow the tutorial - most probably once you execute steps yourselves everything will become clear. If you will still have some questions - do not hesitate to ask them in comments.


Installation and configuration guide

Choose your operating system to display detailed instruction:

1.Download

Navigate to the XAMPP website and download XAMPP installer with PHP 7

Download XAMPP for Windows

2.Install

  1. Once downloaded, run installer:
  2. Windows XAMPP installer
  3. Now you can decide which component you want to install. Since we want to run WordPress in our localhost environment, we have to leave MySQL and phpMyAdmin checked. You can uncheck remaining options or keep default settings. Click Next.
  4. Windows XAMPP installer
  5. You can decide where you would like to install XAMPP on your machine. Choose existing folder (i.e.) C:\Program Files\XAMPP or leave default. Click Next.
  6. Windows XAMPP installer
  7. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck it. Click Next.
  8. Windows XAMPP installer
  9. Installer will install XAMPP:
  10. Windows XAMPP installer

3.Run

Once installation will be done you will see final screen. Check option Do you want to start the Control Panel now? and click Finish.

Windows XAMPP_FORBIDDEN.html.var installer

This will open XAMPP Control Panel

Windows XAMPP installer

Note:If you don't check to start XAMP, you can always start it from Start Menu or going to installation folder (defined during installation).

1. Download

Navigate to the XAMPP website and download XAMPP installer with PHP 7

Download XAMPP for macOS

2.Install

  1. Once downloaded, run installer (.dmg file):
  2. macOS XAMPP installer
  3. Click on the XAMPP icon, if you see warning: Are you sure that you want to open it? click Open and provide password.
  4. macOS XAMPP installer
  5. You will see initial screen, click Next
  6. macOS XAMPP installer
  7. Now you can decide which component you want to install. Keep default settings. Click next.
  8. macOS XAMPP installer
  9. Within next screen you will see where XAMPP will be installed . Click Next.
  10. macOS XAMPP installer
  11. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck it. Click Next twice.
  12. macOS XAMPP installer
  13. Installer will start installation
  14. macOS XAMPP installer

3.Run

Once installation will be done you will see final screen. Check option Do you want to start the Control Panel now? and click Finish.

macOS XAMPP installer

This will open XAMPP Control Panel

macOS XAMPP installer

Note:If you don't check to start XAMP, you can always start it from Application menu (press F4 and find XAMPP)

macOS XAMPP installer

1.Download

Navigate to the XAMPP website and download XAMPP installer with PHP 7

Download XAMPP for Linux

2.Install

  1. Once downloaded, run installer, you will see initial screen, click Next:
  2. Linux XAMPP installer
  3. Now you can decide which component you want to install. Keep default settings. Click next.
  4. Linux XAMPP installer
  5. Within next screen you will see where XAMPP will be installed . Click Next.
  6. Linux XAMPP installer
  7. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck it. Click Next twice.
  8. Linux XAMPP installer
  9. Installer will start installation
  10. Linux XAMPP installer

3.Run

Once installation will be done you will see final screen. Check option Do you want to start the Control Panel now? and click Finish.

Linux XAMPP installer

This will open XAMPP Control Panel

Linux XAMPP installer

Note:If you don't check to start XAMP, you can always start it from Application menu

Ubuntu/Debian (Download,Install and Run)

sudo add-apt-repository ppa:upubuntu-com/web
sudo apt-get update
sudo apt-get install xampp
sudo /opt/lampp/lampp start

Red Hat® Enterprise Linux® / RHEL, CentOS and Fedora

1.Download

yum install wget
wget https://www.apachefriends.org/xampp-files/7.2.1/xampp-linux-x64-7.2.1-0-installer.run 
Note: Currently the newset version is 7.2.1, however in a future there will be newer version release. Always download the newest version. You can get link to the newest version from XAMPP download website.

2.Install

  1. Set Executable Permission on XAMPP Script
    chmod 755 xampp-linux-x64-7.2.1-0-installer.run
              
  2. Run XAMPP Installer Script
    # ./xampp-linux-x64-7.2.1-0-installer.run 
    ----------------------------------------------------------------------------
    Welcome to the XAMPP Setup Wizard.
    ----------------------------------------------------------------------------
    Select the components you want to install; clear the components you do not want
    to install. Click Next when you are ready to continue.
    XAMPP Core Files : Y (Cannot be edited)
    XAMPP Developer Files [Y/n] :y
    Is the selection above correct? [Y/n]: y
    ----------------------------------------------------------------------------
    Installation Directory
    XAMPP will be installed to /opt/lampp
    Press [Enter] to continue :
    ----------------------------------------------------------------------------
    Setup is now ready to begin installing XAMPP on your computer.
    Do you want to continue? [Y/n]: y
    ----------------------------------------------------------------------------
    Please wait while Setup installs XAMPP on your computer.
    Installing
    0% ______________ 50% ______________ 100%
    #########################################
    ----------------------------------------------------------------------------
    Setup has finished installing XAMPP on your computer.
    
  3. Allow Everyone To Access XAMPP Server

    Open the /opt/lamp/etc/extra/httpd-xampp.conf file and add a line ” Require all granted” and comment ount the "Require local". For example:

    # vi /opt/lampp/etc/extra/httpd-xampp.conf
    <LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    # Require local
    Require all granted
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </LocationMatch>
    

3.Run

Our service is already started, however to make previous change effective, we have to restart our XAMPP service:

/opt/lampp/lampp restart

You will get some output like below:

Restarting XAMPP for Linux 1.8.3-3...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...not running.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

4.Test

  1. Go to “Manage Servers” tab and make sure that you have Apache Web Server and MySQL Database running. If not - start them manually.
  2. Come back to Welcome tab and click on “Open Application Folder”. This will open a folder where XAMPP was installed. What is the most interesting for us is a htdocs folder which is root server of our web server.
  3. Notice that there are already existing folders like the dashboard. Come back to WAMP and click on “Go to application” button. This will open http://localhost/dashboard/ website in your web browser.

  4. You will see XAMPP welcome page. Congratulations. If that works correctly that means that you have managed to setup your own webserver.
  5. If you look carefully, you will notice that our website address is corresponding to a data structure in htdocs folder which you've just seen. If you remember, we said that htdocs is our root folder which means that we are currently in on of the sub folders - dashboard.

    Note

    A web server like typical operating systems uses a folder structure to maintain your data.

  6. Let’s create a new folder and call it "wordpress". That will be the place where we will store our website data. Since you know that browser automatically open index file lets create index.html inside and fill it with:
  7. <h1>Hello World</h1> 
      
  8. In order to see result open in your web browser address http://localhost/wordpress/
  9. As you see, it worked fine. But this you could do even without a server. The main reason why we installed Apache on your laptop was to use PHP, so let’s test that. Rename your index.html file to index.php and past following content, and refresh the page.
  10. 
        <?php 
        echo "<h1>Hello PHP World</h1>"
        ?>
      

    For the end user, the result is pretty much the same. However, it was executed in totally different way. This time, the code was compiled by a server and only the end result (final HTML) was sent to the browser. Although in our case, we didn’t gain anything by using PHP instead of HTML, along with the course, you will clearly see what are the benefits of using PHP.

  11. Since our Apache is ready, lets move to database setup.

Note

Extra content.Below paragraph is optional, if you want to get more familiar with how server works, feel free to read it, if not - you can directly jump to a next lesson.

Let’s try to get into parent folder of the dashboard. Remove from your address bar “dashboard/“ and press enter. Probably you think that you did something wrong because you are back again on the previous page (localhost/dasbhoard/). Don’t worry, that is because XAMPP creators placed a small script inside the index.php file in htdocs folder. If you want you can have a look at the content of the file, but for now, we will skip mechanism of the script.

You may be wondering what script inside index.php has to do the fact that you tried to open “folder”. Although you didn't specify exact file location (localhost/index.php) server automatically opened it. That is normal behavior so keep it in mind, whenever you specify some directory path in web server it will look for index.php, index.html or index.htm file and open it automatically.

In order to see our folder content, let’s get rid of index.php file. You can either remove it rename to index.php.backup. Once you do that try to open localhost in your browser again.

Now you should see a list of the files inside our htdocs folder.


Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...