You’ve got some experience using WordPress; you’ve published posts and pages, customised a few things and perhaps installed some plugins. But you start to see constraints, limitations. You feel ready to dive deeper. Ready to learn a bit more about WordPress and how you can craft a unique website with your own style. Well, it’s probably time to start your WordPress development journey!
There’s no better place to start this journey than with a self-contained WordPress installation on your computer. This saves you money (you don’t need to pay for web hosting) and gives you free reign to tweak files and play around as much as you like without fear of crashing your live website.
To do this, we’re going to need to setup a local server – in other words, a server running on your laptop/PC rather than in a data warehouse somewhere – and to prepare a database that WordPress will use to store it’s content and settings. We’ll then download and install WordPress itself on to this local server. You’ll end up with a WordPress website running from your computer rather than from the internet. Cool, right?
Quick Intro to WordPress & PHP
WordPress is a content management system built in PHP, a programming language with some similarities to Javascript but PHP runs on a server. One of the things it can do is allow you to setup page templates that show different content depending on whether or not certain conditions are met. It can also interact with a database, send emails and a lot more, but we’ll get to that later. What you get by using PHP is a dynamic, logic-based website rather than static HTML pages linked together manually. One example of how we can use PHP to save time and ensure consistency is by creating a single block of code for a header (the logo and menu area normally seen at the top of a website) and then ‘including’ it using the reference below. It basically says “grab all of the code that’s in this file and place it here”.
include 'header.php';What does this mean in practice? If you need to update your logo or add another menu button, just make the change once in the header.php file itself and it will be reflected across all pages where the line above is present. Sound good?
We can save even more time by making use of conditional logic (i.e. if this then do that). We could use just one PHP file to present two different bits of content depending on the type of page the user is viewing. WordPress has a number of functions built into it, one of which allows us to check if the current page we’re on is a category page that we specify. We can use this function to display a bit of text if the conditional logic returns a ‘true’ result, or some other generic text if it’s ‘false’.
if ( is_category( 'Web Development' ) ) {
echo 'TRUE. Shows specific text for the Web Development category page.';
} else {
echo 'FALSE. Shows fallback/default text for all other pages.';
};These are just some of the basics of PHP (it can do so much more) but it shows just how much you can supercharge a website when you’re able to use something like conditional logic, for instance.
PHP & Databases
Much in the same way you can include content dynamically from other files as shown above, you can also drag in content from a database. This has the benefit of information being quick to access, organised, in one place and accessible from any location.
MySQL Databases
WordPress uses a specific type of database; a MySQL database. MySQL is a relational database management system.
The ‘relational’ part means it can store information in different tables but link the data in each table via ‘keys’. For example, let’s say we have two tables; Table A holds the details of different journalists where each one has an ID number, a name and an email address, and Table B holds news articles where each one has the author’s ID number, the article title and the content. When retrieving the content for the news article from Table B, we can also get the details of the author of that article from Table A by using the ID number (the key). This helps to keep different pieces of information self-contained but still connected.
The ‘database management’ part means that it provides the ability to create and delete databases and tables, retrieve and store information, and use advanced programming functions to manage and manipulate it. In a nutshell, there’s a lot more to MySQL than tables.
Viewing a MySQL Database
Unfortunately, it’s not as easy as opening an Excel spreadsheet to view a MySQL database. It’s a little more complicated than that.
The ‘original’ and most direct way is by using using SQL, or Structured Query Language. SQL is basically a set of instructions you can give that will query MySQL and perform certain actions. For example, we might want to show the available databases using the following command;
SHOW DATABASES;You might then want to select one of those databases, list all of the tables within it, and then to list the contents of a specific table (‘wp_options’ in the case below).
USE mywordpressdatabase;
SHOW TABLES;
SELECT * FROM 'wp_options';Now, this is all well and good, but there’s a number of reasons why you might not want to ever bother with SQL, such as:
- It’s another language to learn in itself. Viewing the content of the database is relatively easy, but manipulating different databases and tables can be challenging.
- It’s potentially dangerous. Bear in mind you are giving your computer instructions and, if valid, it will carry them out. There’s typically no second chance or “Are you sure?” moments, so you’ve got to be certain that your commands are going to do exactly what you want them to do.
- The data that gets returned isn’t always the most user friendly. The command line, for example, isn’t the best place to view thousands of lines of content.
Instead, we should look at an alternative; something to act as a user interface to the database, simplifying the whole administration process.
This is where phpMyAdmin comes in. It’s a really useful interface that will save a lot of time in the long run. It’s not directly related to WordPress, but both phpMyAdmin and WordPress are written in PHP which, as you’ll see in a second, can also be used to access and manipulate a MySQL database. phpMyAdmin also comes bundled with the local server we’ll be setting up, so that’s an added bonus! You’ll be glad to know that phpMyAdmin is also found on practically any personal or small business web hosting package, so it’s good to get familiar with it now.
Accessing a MySQL Database Using PHP
The interesting thing – the reason we’re even talking about MySQL – is that PHP can be used to access and modify the data stored in the MySQL database on our behalf. So, if you remember the second PHP code example above which displayed some text after the conditional logic test (“if the current page belongs to the Web Development category then show this text”), we wouldn’t necessarily need to store the text in that PHP code itself because it would be hard-coded into that specific PHP file making it difficult to access and update. The logic needs to be there but the content doesn’t. We would instead store the content in a MySQL database. For example, WordPress stores blog posts in a table called, unsurprisingly, ‘wp_posts’. So, how do we get that information to show up on our WordPress website?
In the code below you’ll see an SQL query like the one above, but this time it’s wrapped in some PHP code. This example uses WordPress to query the MySQL database, counting the number of ‘members’ with the name ‘john’.
$query = "SELECT COUNT(john) FROM members";
$wpdb->query($query);Using PHP to run the query allows your code to then use the data that’s returned. For example, instead of counting the number of members called ‘John’ we might instead get each member’s details and then display them in a list on the page.
You won’t need to worry much about SQL or even querying the MySQL database with PHP as WordPress takes care of most things you’ll need to do, but it’s helpful to understand what’s going on underneath the surface of a lot of what you’ll be doing with WordPress.
To summarise, we’ve got a few different components that will form our website:
- WordPress – the core of your website; a content management system built using PHP that pulls content from a MySQL database.
- PHP – a server-side programming language that introduces clever functions, conditional logic and much, much more.
- MySQL database – a database made of inter-connected, ‘relational’ tables.
- SQL (or Structured Query Language) – a language used, in this case, by WordPress to store, change, move and retrieve data in the MySQL database.
Now that we’ve introduced each of these tools and languages, let’s get them on to our computer!
Install a Web Development Environment
Now that we’ve got a basic understanding of how WordPress uses PHP and a MySQL database, we need to get ourselves setup properly.
We know that WordPress stores its content in a MySQL database and that it’s built in PHP – which is a server-side programming language – so we know that we need a server. You will probably already have one if you’re paying for web hosting with someone like GoDaddy or 123 Reg, but here we’re focusing on setting one up locally (i.e. on the computer you’re working from).
Luckily, there are packages you can download for every major operating system that include everything you need to get started.
[message class=”info” title=”Download a ‘Server Stack’ & Install”]
First, download one of the packaged below (I use WAMP):
Then run the download to install the package.
[/message]
Setup a New MySQL Database
Once your chosen stack has been installed, launch it if it isn’t running already. For WAMP, at least, you should see a small ‘W’ icon in your system tray go from red to orange to green when it’s ready. It shouldn’t take longer than a few seconds as it starts up the various services of the default server setup. Once it’s green, that’s it – you now have a server running on your local machine. Congratulations!
In the next big step in this guide, the WordPress installation wizard asks for some database details, so we’re just going to set things up now in preparation and note down the required information. We’ll need:
- Database host
- Database name
- User name
- User password
As mentioned previously, phpMyAdmin is an easy way to manage the MySQL database so we’ll use that to accomplish this task.
[message class=”info” title=”Create a MySQL User & Associated Database in phpMyAdmin”]
To get started, go to your server’s phpMyAdmin page (probably located at //localhost:3000/phpmyadmin/).
First, let’s create a MySQL user:
- Click on the ‘Users’ tab at the top of the page.
- Click on ‘Add user’ below the table of users (perhaps just the ‘root’ super user will be in the table at this point).
- Give yourself a User name (write this down).
- Type “//localhost:3000:3000:3000:3000:3000” (without the quotation marks) for the Host (write this down).
- Give yourself a Password and re-type it as requested (write this down).
Second, we’ll create a database:
- Click on the ‘Databases’ tab at the top of the page.
- Type in a database name in the box under ‘Create database’ (write this down). This will be specific to your website.
- Click the ‘Create’ button next to where you typed that in. Your database should now appear in the list!
Finally, we’ll give the user we created in the first step some privileges on this new database (in other words, permissions to view and make changes to it):
- Click on the ‘Users’ tab at the top of the page.
- Find the user you created in the table and click ‘Edit Privileges’ under the ‘Action’ column.
- Under ‘Database-specific privileges’ enter the name of the database you created in the second step and press Enter or click the ‘Go’ button.
- Tick the ‘Check All’ box next to ‘Database-specific privileges on the next page and press Enter or click the ‘Go’ button.
…and you’re done! You should now have all of the relevant information to be able to install WordPress.
[/message]
Now that you’ve installed the foundations of local web development – a local server – and gathered the information we need to install WordPress within that local environment, it’s time to get your hands on WordPress!
Set Up Your WordPress Project Folder
Firstly, let’s get our project folder setup. This is where the WordPress installation – your website, essentially – will sit, and it’s where you’ll be able to make code-based changes to it, such as creating and customising your own WordPress theme.
Where Does The Local Server Serve Websites From?
Considering you’ll be doing all of your development in this directory on your computer, it’s important to understand whereabouts the local server actually serves up the WordPress website from.
If you’re using WAMP, navigate to the directory where you installed it. The default is the root of the drive, i.e. C:\wamp. In here you’ll want to look for the ‘www’ folder. This is the directory that WAMP uses as its root for the server. In other words, this is where the files of your different website projects will sit.
To test this out, open up your browser and type in ‘//localhost:3000:3000:3000:3000:3000’ in the address bar. ‘Localhost’ is the name of your local server and it acts as an address that translates to the folder mentioned above (C:\wamp\www). In your browser you should see a WampServer page with server configuration details, among other things. This is a website being served by the local server on your computer.
If you’re feeling brave, you can take a look at the code behind that web page. Go to your projects folder (C:\wamp\www) and open up ‘index.php’ with a text editor. Don’t expect to make much sense of this right now. It’s PHP code with some HTML, CSS and Javascript thrown into the mix. Suffice to say, it’s the same type of code that the server will process and use to serve up web pages from your WordPress installation (though you’ll be glad to know that your code will be much easier to understand).
Now it’s time to download WordPress and setup your project folder.
[message class=”info” title=”Download WordPress and Set Up Your WordPress Project Folder”]
Download WordPress:
- Go to https://wordpress.org/download/.
- Click the download button in the top right of the page to download the latest version of WordPress.
Extract and/or copy WordPress to your project folder:
- Once downloaded, unzip or extract the ‘wordpress’ folder in the .zip file to your projects folder (C:\wamp\www).
- If you extract is elsewhere, such as a Downloads folder, you’ll have to copy across the ‘wordpress’ folder manually to your projects folder.
Rename your project:
- Open up your projects folder (if it isn’t already open) and rename the ‘wordpress’ folder to the name of your new website, if you have one.
[/message]
Install WordPress
Now, like software, downloading does not equal installing, so now we have to install WordPress. This is normally a really straightforward procedure thanks to the WordPress team who have created a step-by-step installation wizard. One of the key things it does it setup the connection between WordPress and the database that you created earlier, as well as setting up an Administrator user account.
Let’s get started.
[message class=”info” title=”Install WordPress”]
We’re going to start by trying to access your new WordPress website.
- Start your browser and go to localhost/yourproject (where ‘yourproject’ is the name you gave to the ‘wordpress’ folder).
You should see a page with the WordPress ‘W’ logo.
- Choose a language and click ‘Continue’.
The next page lists the information you’ll need that we gathered in Part 1 of this guide.
- Click ‘Let’s go!’
- Enter the details that you wrote down.
- Click ‘Submit’.
You should now see a ‘Welcome’ screen and some form fields.
- Enter the name of your website in the ‘Site Title’ field.
- Change ‘Username’ to something other than “admin”.
- Although your website isn’t online at the moment, it’s good practice to use a strong password.
- Enter your email address in the ‘Your Email’ field.
- Tick ‘Discourage search engines from indexing this site’. We’re not yet ready ready for Google and Bing to index our site, so we’ll untick this later on.
- Click ‘Install WordPress’.
You should then be redirected to a login page.
[/message]
Your New WordPress Website
WordPress is now installed. The connection between WordPress and your database should now be setup. You also now have a user account with Administrator privileges to manage your website. Everything is in place and you are now the proud owner of a WordPress website!
Navigate to your website’s home page using localhost/yourprojectfolder. What you’re seeing is the default content supplied by WordPress and one of the pre-installed ‘themes’ that handles the visual style and layout of the website, as well as some functionality. Have a click around. Enjoy it – it’s yours!
So, you’ve setup a local server and now you’ve got a fully-functioning WordPress website running. Well done!
From here, you can login to your WordPress site using the login details you created during the installation by going to localhost/yourprojectfolder/wp-login.php
What should you do next?
Well, I’d suggest making a copy of the latest default WordPress theme (currently ‘twentyseventeen’) within the …/wp-content/wp-themes folder which you can then mess around with, seeing how changes to different files affect what you see visually on your website. The themes that come with the default installation of WordPress are all created by the WordPress team themselves, so they’re full of best practices in terms of code and organisation. The potential downside to those same benefits is that they make use of some more advanced techniques which may be daunting at the moment and the way the different folders and template files are organised, while efficient, can sometimes mean code feels a bit too ‘spread out’.
Your journey to creating your own, custom WordPress theme and a totally unique website has officially started!