1. TheoryThose 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.
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.
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.
1. Download XAMP
Once you launch XAMP you will see screen as below.
Go to “Manage Servers” tab and make sure that you have Apache Web Server and MySQL Database running. If not - start them manually.
Come back to Welcome tab and click on “Open Application Folder”. This will open a folder where XAMP was installed. What is the most interesting for us is a htdocs folder which is root server of our web server.
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.
You will see XAMPP welcome page. Congratulations. If that works correctly that means that you have managed to setup your own webserver.
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.
A web server like typical operating systems uses a folder structure to maintain your data.
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.
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:
In order to see result open in your web browser address http://localhost/wordpress/
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.
<?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.
Since our Apache is ready, lets move to our database.
Do you want to share?Facebook Twitter Google +