Showing posts with label development. Show all posts
Showing posts with label development. Show all posts

Wednesday, April 6, 2016

How to install WordPress locally on your Windows desktop using WAMP

Despite the love/hate (mainly hate) relationship I have with WordPress I have decided that I need to start gaining a better understanding of how it works. Rather than making changes online to a live website it would obviously be better to do this with an offline copy which is exactly what I aim to explain here: Installing WordPress on your desktop so you can work offline.

To run WordPress on any machine there are a few requirements:
  • PHP version 5.6 or greater
  • MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
  • Server software such as Apache
This may seem like an intimidating list of software to source and download one-by-one, but that won't be necessary. This is where WAMP comes into play!

What is WAMP and why do I need it?
WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases. An all-in-one package which contains everything that WordPress requires so our lives had suddenly become much easier. There are other clients for Windows such as XAMPP with the biggest difference being that WAMP runs on Windows, XAMPP is multi-platform. Aside from that it's a matter of personal preference. They both provide you with an Apache-MySQL-PHP environment that runs pretty much the same under both systems.

Installing wampserver on Windows
Before installing WordPress you will need to download and install wampserver on your Windows desktop. Double click on the downloaded file and just follow the instructions. Everything is automatic. The WampServer package is delivered with the latest releases of Apache, MySQL and PHP. 

You will need to choose the installation directoy for WAMP - The recommendation being that you do not install to "Program Files" but instead install it in a folder in the root directory as there could potentially be some permissions issues. I installed it to C:\WAMP which worked fine. At one point during the installation, WampServer will ask for the location of the default web browser and text editor. WampServer will automatically choose notepad.exe and Internet Explorer as the default options but these can be changed if needed. 

Once the installation completes successfully you should see the 'W' icon in your notification area:

If you don't you will need to start wampserver by finding the entry in your start menu. On Windows 8 my entry looked like this:

Creating a database for WordPress to use
Before installing WordPress you will need to create a database that WordPress can use. To do this we will need to access one of the wampserver features named phpMyAdmin. Easiest method of accessing this is to left-click the wampserver icon and click on phpMyAdmin
This will open a new browser window to http://localhost/phpmyadmin with a login prompt. The default credentials here are root with no password. When you log in you may notice the big warning at the bottom of the page stating "You are connected as 'root' with no password, which corresponds to the default MySQL privileged account. Your MySQL server is running with this default, is open to intrusion, and you really should fix this security hole by setting a password for user 'root'." Sounds scary but this is not a problem as long as this is only a local installation. 

Click on the databases tab at the top of the page which will give you a list of the current databases and allow you to create a new database. In the 'Create database' menu enter a name for your database. I called mine 'wordpress' for simplicity sake:

Download and install WordPress on Windows
Don't worry we're almost there! Now it's time to go and grab yourself a copy of WordPress from their website: https://wordpress.org/download/

This will download a .zip file which you will need to unzip. Once unzipped you will find a wordpress folder which you will need to move to C:\WAMP\www. So my directory structure looks like C:\WAMP\www\wordpress. As soon as the copy completes you should be able to access WordPress via your web browser via http://localhost/wordpress. If you rename the wordpress folder to mysite then you would access it via http://localhost/mysite. You should be prompted to choose your language for WordPress.

WordPress will then inform you that it is going to create a wp-config file using the provided information in the following steps. If for any reason this automatic file creation doesn’t work, don’t worry. All this does is fill in the database information to a configuration file. You may also simply open wp-config-sample.php in a text editor, fill in your information, and save it as wp-config.php. 

One the next page you will need to enter your database details. Here is what mine looks like:
If you recall in the earlier steps I created a database named wordpress and we logged in using the default credentials of root and no password. If this works you can proceed to the next steps with a very friendly message:
All right, sunshine! You’ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to…
Now we can proceed with actually installing WordPress!

On the next page it will ask you for:
  • A website title - What is the name of your website? I just named mine offline.
  • A username for logging in with
  • A password for the above username - You can use the default here if you want but I would never remember that. 
  • An email address
It doesn't really matter what you enter here since this will only be used for offline testing anyway. Again if you plan on actually using this to host a website for the outside world you will need to be more security conscious than I am being here.

If the installation succeeds you should then be brought to the login prompt where you will need to enter the username and password you just created. 

What now?
Whatever you want! You now have a fully functional installation of WordPress which you can use testing and offline development. Have fun!!

Thursday, December 3, 2015

The anatomy of a WordPress theme

My cousin asked me to develop a website for her Father's business. Initially I thought this would be a great learning experience as I knew the basics of web development (HTML, CSS, PHP, and a bit of JavaScript) but had never completed a full website before. I slowly but surely realised just what I had landed myself into... !

To cut a long story short I decided it would be best to implement a WordPress theme! I've always heard this makes content management very straightforward and doesn't require much knowledge of PHP / HTML for managing. Sounds perfect - Unless you're the one developing the site in which case it's a fucking balls.


Had I known how difficult this would be I definitely would not have chosen WordPress for my first development job. I guess the first hurdle I encountered was understanding the template hierarchy. See what I did at first was simply hard code an index.php and styles.css and upload them as a theme. Then I tried to create a new page from within WordPress and that wouldn't work - It kept bringing me back to index.php. I had also tried to create a contact.php with the company contact details - Now how the hell do I open this in WordPress? Hmmmm.. !

It was at this point I learned about the WordPress Theme Hierarchy. I didn't understand it, but I knew it existed. So I kept trying numerous different implementations, none of which worked. Read multiple blog posts and just ended up confused. Until I saw the 'template-loader.php' being mentioned somewhere and this is what finally made me understand the theme template. Show me in code and I'll understand!

Let's take a look:

Examining this file is what finally made everything click with me in terms of how pages get selected, and the reason why creating a new page in the WordPress GUI was not working. I only had an index.php! Basically, this code steps through each of the query context conditionals in a specific order, and defines the template to use for the first one that returns true. So in my case, only index.php was being found and so only the contents of index.php were being returned.

When a person browses to your website, WordPress selects which template to use for rendering that page. As we learned earlier in the Template Hierarchy, WordPress looks for template files in the following order:
  1. Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it.
  2. page-{slug}.php — If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page’s slug. A slug is a few words that describe a post or a page. If the page slug is recent-news, WordPress will look to use page-recent-news.php.
  3. page-{id}.php — If a specialized template that includes the page’s slug is not found, WordPress looks for and uses a specialized template named with the page’s ID. If the page ID is 6, WordPress will look to use page-6.php.
  4. page.php — If a specialized template that includes the page’s ID is not found, WordPress looks for and uses the theme’s default page template.
  5. index.php — If no specific page templates are assigned or found, WordPress defaults back to using the theme’s index file to render pages.
I realise this is just the basic knowledge needed but I hope to discuss this further. Writing here helps me understand and get my thoughts clear.