WordPress is a content management system(CMS) used to create websites and blogs. Using its built-in interface you can easily produce a site for your business, blog, personal use or anything else without any background in web development. It’s also very versatile so you can design your site however you want. First, i’ll show you how to set-up hosting for both local and remote servers.  

Local hosting and Web hosting

In order for your website to be visited, we need it to be available on a web server. This web server stores your website and needs to be running at all times so that when a client is looking for your site they can find it. This is called web hosting and it means that your site is available to everyone anytime by being stored on a remote server. But first, you need to build your website and while you can do all your development online through a remote server, another way is through local hosting. This is where you turn your PC into a personal server that only you can access. By doing this, development is made offline and then uploaded to a web server, making it live. Local hosting has its benefits as we can use it for development, backups and testing.  This will also save money as local hosting is usually free and we won’t be relying on web hosting for storage until we’re ready to make our site live. Ultimately, the choice is down to you, if you would rather develop entirely online through a web server, you can skip ahead to setting this up. If you want to develop through local hosting, read on.  

Local Hosting with Xammp

Right now there is plenty of downloadable server software we can use but too many to mention in this article. Instead, I’ll be discussing the software I’ve used before to get local hosting. Because this article is focusing on creating a blog web site using WordPress, we’ll need a local server that can accommodate this. From my own experience, I’ve developed sites and projects using Xampp. This is a free, open source server for Windows, OS X and Linux. It’s also has a very helpful community and is widely used and available on multiple operating systems. Another perk is that it also works for site development software such as Drupal and Joomla so you don’t need another server if you ever want to try out alternatives to WordPress. It also includes PHP development which is the scripting language WordPress uses which saves us an extra step when setting up and configuring our local host.  

Setting up Xammp

While we may have access to many different servers I’ll be demonstrating how to set up WordPress using Xammp in order to make this article useful for everyone regardless of operating system. First, we need the Xammp software which you can get here. Be sure to choose the version appropriate to your operating system and download. Once downloaded, you can launch the installer. You might first receive multiple messages from yours PC’s security but carry on through to the installer. After hitting next, you’ll see a checklist of added features with Xammp. For WordPress, all we need is PHPMyAdmin and MySQL. It should look something like this;
wordpress blog

Xampp checklist

Next, we need to choose where to install. In this case, this will be C:\Program Files where you should make a new folder called “Xammp”. This is where we will also be installing WordPress later so make a note of this.

Xampp file location

The next stage will ask you about learning more about Bitnami for Xammp. This is an installer for additional applications. Because I’ll be showing you how to download WordPress yourself, we can uncheck the box for learn more about Bitnami for WordPress. Now we need to install Xammp. The last stage will ask you about starting the control panel. Make sure this is checked and hit Finish. This should automatically bring up the control panel screen which should look like this:
wordpress blog

Xampp control panel

For our WordPress site, all we need is to press start for both Apache and MySql services. These should now be both up and running. Now we need to set up our local database to store our site’s content. On the Xammp control panel hit the admin button next to MySql. This will take us to the control panel.
wordpress blog

MySql control panel

On the left hand side, you’ll see a panel with a list of names. These are the names of our databases which will change from person to person. At the top of this list is new. Select this and you’ll see the same list of names in the centre of the screen. At the top is the prompt to create a new database. We want to create a database for our site which you can call anything you want but for now, we can call it “Wordpress”. Take note of your database name as we’ll need this in a moment. Hit create and you’ve made your database. The last part of setting up our locally hosted site is to actually install the WordPress software.
wordpress blog

Database list

 

WordPress Installation

Download WordPress here. Before you extract the file, we need to place it where we installed Xammp earlier. This should be C:\Program Files/Xammp. Inside this Xammp folder is another folder called htdocs. This is where you will cut and paste the file. Now you can extract the package by right clicking and hitting extract all. You can rename the folder here to something more memorable like “wordpress”. Open up this folder and find the file wp-config-sample.php and rename it to wp-config.php. Next, open this file in a text editor (I’m using Sublime Text but any text editor should work) so we can modify it. Find this part of the script…
wordpress blog

wp-config.php file to edit

…and change it so that the database name is the same as what we named our database earlier, in this example its “wordpress”. Then change the username to “root” and leave the password blank. This last one can be changed later but for now we can save the file and close it.
wordpress blog

wp-config.php file edited

If you’ve made it this far, you’ve gotten over the hard part as all we need is to install and set up WordPress. Open up your browser and go to http://localhost/wordpress/. This will take us through the installation process. This is a straight forward process of choosing your language and then the username and password you’ll be using to sign into the backend of your website. It’s important to know that with any account you should be aware of security. I’d recommend either using the password generated by the process or using your own combination of characters. Be sure to keep a record of your sign in details and we’re finished. You’ll be taken to your website which will have all the default features which we will be going through later in this tutorial. Next, I’ll be showing you how to do this but using your WordPress site on a remote server to make it available online.  

Setting up Web Hosting and Installing WordPress

Web hosting is how you’ll make your site available for other people to visit. This is different to local hosting where the site can only be seen by you. By not using local hosting and skipping ahead to this section we’ll go through how to use a web hosting service to store your website. This is also the point where costs come into play. While there are plenty of free services out there they come with the risk of limited resources, limited customisation, insecure servers and the possibility of deleting your site and all your work. Paying for your web hosting is the best way to get your site out there and they are reasonably affordable. There are a lot of services available such as Hostgator, Siteground and Bluehost and choosing the right one can really be a daunting task if this is your first foray into hosting. While they all do more or less the same thing you’ll probably be taking into account factors like pricing, space, and bandwidth. But luckily there’s also plenty of up to date lists and reviews comparing these services. This is ultimately a choice that’s left to you however I’ll talk you through some factors that you’ll ideally need. Disk space/storage: This is the amount of allocated space you have to store your content. If your site is very media based, you’ll need more space. Services vary between several GBs to unlimited. Bandwidth: When a user visits your site they take a small percentage of your bandwidth. The more visitors the more of this resource is taken slowing down the loading times. Unless your anticipating thousands of visitors at once this won’t be a huge factor and many services provide high to unlimited bandwidth. Security/site backups: Securing your site is always crucial. Your site can be hacked and have it user accounts deleted or accessed. Your site can even be deleted altogether. These are worst case scenarios but it’s always wise to be able to back-up your website or have your user’s details securely stored. Domains/Sub domains: This is your first site but maybe you see yourself developing additional sites in the future. Domains and sub domains allow you to develop separate websites that are all stored under the one hosting service. Email: This is pretty self-explanatory but having your name followed by @yourwebsite can look pretty professional. Support: You don’t need it until something goes wrong and Googling it won’t help. Access to live chats, email and user forums can really save you in these situations. Shopping: Maybe you’re selling a unique product and want to include online transactions. While there are hosting services that support e-commerce it may not be a necessary feature right away. WordPress is customised using plugins one of which is Paypal so securely handling transactions isn’t something to worry about just yet. The links above cross reference all of these qualities and many more so it’s worth spending some time thinking about. I should also mention that the limits of these different factors can also change depending on the service’s different plans.  

Setting up a Web Hosting Plan & Getting a Domain

There are already so many hosting services out there however they should share a similar setup process of getting a domain, billing and additional content. In this example I’ll be referencing the process using Hostgator as I’ve used it before. This isn’t to say you should do the same just that I’ll be using it as an example. The first step is usually choosing a plan. You can base this choice on your budget or what you are looking for. These plans usually consist of basic ones that can be limited to a single site or more advanced ones that have additional content. We need at least one domain for our site so you can still make your way through this tutorial even with a basic plan. Some services actually have plans that include WordPress but for this tutorial, I’ll show you how to do this yourself. Once you decided, you’ll most likely be taken through the process of getting your domain name like in the example below.
wordpress blog

Getting a domain

Here you can enter in the name of your website.
wordpress blog

Choosing a domain

You’ll probably find the domain already exists so this is where you have to get creative by trying to reword your domain or change to .org, .net or a list of other options.
wordpress blog

Price list

Changing the domain ending can actually have different costs too so be sure to choose one that seems appropriate. After you’ve decided on an available domain you’ll be taken through the billing process. Some hosts will use this opportunity to add additional content.
wordpress blog

List of additional addons

This can be security, emails, back-ups etc. You should use your best judgement for these as they all have their benefits. It’s better to pay that much more if you want to prevent a potential hack or loss in the future. Once you’ve given all your personal and payment details, you should receive a record, most likely an email with all your hosting details and a link to your dashboard.  

Using a Domain you got earlier

Alternatively, you may already have a domain you bought earlier. Usually, a web host will have the option to use this instead of creating one.
wordpress blog

Using a purchased domain with the tab on the right

 

Installing WordPress

Now that we have our domain and hosting set up, we just to need to install WordPress. There are different methods of installing WordPress and using it with your hosting provider. One of these methods involves FTP software such as FileZilla and uploading your content. This is a bit too much to get into if this is your first time creating a website. Right now, we’re going to use the simplest method by installing through our web host. First, log in to the control panel of your host using the login credentials you should have received. The layout of your host’s back-end can vary however if it supports applications such as Drupal, WordPress and Joomla then there should be a page that will take you through installation. Selecting WordPress will likely take you to a page where you should choose the current version. Next, is to choose the domain you site will be under and the Username and password. Finally, there’s the directory where we’ll save WordPress. Most likely you’ll want the domain to be the install location. Ideally, this should be left blank or with “/” if it’s not already there. After you’re finished, hit install. You’ll receive a link to your site along with your WordPress login details either on screen or by email. Don’t be alarmed when this link doesn’t work. WordPress can take anywhere from a few hours up to 24 hours to setup. Eventually your link will be live and take you straight to your new site.
wordpress blog

Default WordPress site

Ok, so maybe it’s not exactly how you imagined your new website, so let’s start looking at how to start developing your website, using themes, creating articles and more.  

How to design and personalise your WordPress site

While there are many ways to design a WordPress blog, I’ll be running through some of the more common modifications you’ll be making to get your site off the ground.  

Here’s a run-down of what to expect:

  1. Changing Themes
  2. Making/Editing & Deleting Posts
  3. Adding Media
  4. Pages
  5. Menus
  6. Installing New Themes
So right now, your site is looking pretty bare. We have a typical blog layout, a large image and a single “Hello World” post. Depending on when you install WordPress, you might have a different layout altogether. Hopefully by the end of this article you’ll have something a bit more presentable along with everything you need to start creating content.  In order to switch between your site and dashboard, you can use the black bar and choose dashboard like in the image below.
wordpres blog

Getting to the dashboard

 

Changing Themes

First, I’ll show you how to change the site’s theme. A theme affects the overall design of your website, page layout and a lot more so choosing one requires spending some time messing around to find the right one. WordPress comes with a few basic themes however you’ll most likely look elsewhere to find one that you like but we’re getting ahead of ourselves. To change your theme, we need to go to our dashboard.
wordpress blog

Finding themes

Along the left side is the navigation menu, we want to change the appearance of our site so we want to go to appearance and then themes. This will bring you to a screen with the themes that come with WordPress. To change your theme, hover over one and hit activate.
wordpress blog

Activating our theme

You can return to your site by using the black bar at the top and your site should now have a new layout.
wordpress blog

How to view your site

Later I’ll be showing you how to find and install your own themes that will better fit your design.  

Creating/Editing & Deleting Posts

Creating posts is how you’ll add content such as articles, media or anything else. Whether you want a traditional blog layout or a full website, posts is how you make and organise your content.  To make a post, go to your dashboard and select posts from the menu on the left.  To make a new post, hit add new. This will bring you to the article editor where you’ll make your article content.
wordpress blog

Creating a new post

 
wordpress blog

Creating & editing a post

This is the same layout for making any post so you’ll find the same screen if you choose to edit an article by clicking its title. The box with “Hello World” is where our title will go. Underneath is where the main content will go. This accepts text, images and media. If you have any HTML knowledge you can select text in the right corner to switch to HTML input. Otherwise, you can make use of the formatting options in the bar above.

Switching between text & html using the tabs in the top-right corner

When you make a new post or edit one of your articles and you’re ready to make them live, choose the publish button on the right. If you’re editing a post this will be update.
wordpress blog

Publishing & updating posts

If you’ve made or edited a post and not sure how it will look but don’t want to make them public choose preview above the publish option. This will show you a preview of the article that only you can see. If you want to save an unfinished article choose save draft.
wordpress blog

Saving a draft

To delete your content you can select move to trash in the editor or trash in the posts screen.
wordpress blog

Deleting unwanted posts

 

Adding Media

To add media content such as images, select add media.
Wordpres Blog

Add media

 
Wordpres Blog

Insert media

This brings up the insert media menu where you can drag in your images or upload them. Making an upload reveals a menu on the right where you can enter a title, caption and alt text among others.
Wordpres Blog

Add media details

Alternatively, you can use the other options on the left to create a gallery, audio/video, featured image or upload via URL. When you’ve finished, hit insert into post. Much like using Microsoft Word, you’ll likely have to move things around to organise your image. Selecting the image and then the pencil icon will take you to a menu to format your image.
Wordpress Blog

Editing an image

Don’t forget to select update to make your additions live.  

Pages

Websites usually have their content broken up among multiple pages which we navigate using a menu.  These pages will typically be something like an about page, contact or anything else depending on your site. To create a page, go to pages and select add new.
wordpress blog

Add a new page

Much like creating a post, we use the same layout to create a page. In this example I’m going to create a Contact page. I make my title, my content and then hit publish.
Wordpress blog

Create a new page

Unlike when you make a post, a new page won’t automatically appear on your site. It does exist there’s just no way of getting to it. This leads us to the next part of making a menu to navigate to it.  

Menus

To create a menu, go to your dashboard and hover over appearance and select menus.
Wordpress blog

Finding menus in the dashboard

Here is where all your menus will be organised. Right now there’s nothing here so we need to make one. Menu name is where you’ll enter the name e.g main menu, then select create menu.
Wordpress blog

Creating a menu

Your menu can link to many things such as posts, links or categories. For simplicity, we’ll have our menu link to our pages. Using the menu on the left, we can check the pages we want to include and select add to menu. Typically sites have the navigation at the top so you can check the top menu option. Finally hit save menu.
Wordpress blog

Selecting pages for a menu

When I refresh my site, the menu appears at the top.
Wordpress blog

Published menu with selected pages

 

Installing New Themes

Finally I’ll show you through installing new themes. You can find many themes here. Find one you like and hit download. This will download a .zip file. You don’t need to unzip this.  Back in the themes page, select add new. This will reveal a input for theme files. Upload the .zip file you downloaded and select install.
Wordpress blog

Installing a theme

Oh. Wordpress blog This is a problem you’ll face as you’ve just setup WordPress for the first time. This message is to say that we have a set limit we can upload and the file exceeds this. Luckily we change the upload limit to whatever we want. If you’re using a local host,  you’ll need to go to the location where Xampp was saved. This can be should be located on the C: drive for windows or private for Mac. Alternatively you can search your documents for “php.ini”. When you’ve found the file open it up in a text editor and find the following: upload_max_filesize.
Wordpress blog

php.ini

We want to modify this to a higher value so we can upload larger files. Here I changed the default 2M to 64M meaning we can now upload a max of 64MB.
Wordpress blog

Modified php.ini

In order for your changes to take place, we need to open up the Xampp control panel and turn off the Apache and MySql switches and turn them back on again. This should refresh the changes we made.
Wordpress blog

Restarting local host

For the readers using web hosting the same thing can be achieved however it involves finding the php.ini file in your web host’s control panel. There are many hosting services all with different interfaces.  Luckily all good services allow this modification so I suggest finding this information by searching: “The uploaded file exceeds the upload_max_filesize directive in php.ini” and the name of your service. Alternatively you can use this link which includes links to a handful of services. After the upload size has been modified, we can repeat uploading our theme .zip file. This time we should be able choose install and be met with this:
Wordpress blog

Successfully installed theme

To set the theme, hit activate and now when I refresh my site, I have a new theme.

Conclusion

There is a lot involved in creating your own website but hopefully you have enough to get started. Google is your friend so don’t be afraid to look for what you want your site to have because there’s most likely tutorials, plugins and themes that’ll help you get there.

Subscribe

Stay Up To Date With The Latest Simple CSS Posts

A Beginners Guide to WordPress Blogging

time to read: 19 min
0