How to Install WordPress Locally

It is always good practice to have testing environment installed locally where you can access it with out internet connection. It can be a real life saver if your internet connection slows down or is lost completely as you can continue to work on modifying your WordPress site in your test area and then update your live site later.

This tutorial will show you how to install WordPress locally. It may seem daunting at first, but as you shall soon see, it’s actually very easy and it will give you a controlled environment to work on themes or plugins.

XAMPP is a great free tool that can be installed easily on a Mac, PC or Linux. This open source package contains all the necessary tools that a WordPress install requires; Apache, MySQL, PHP and Perl. The following install was done on a Mac but installing on a PC or Linux machine are virtually identical. Let’s get started.

1. Download and install XAMPP https://www.apachefriends.org/download.html to the /Application/XAMPP

download xampp

Then run the install wizard.

download xampp

Then select your components. You will need both XAMPP Core and Developer Files for this install.

Setup Select components

You can download the latest version of WordPress right from the bitnami site or download the latest version of WordPress from WordPress.org (https://wordpress.org/)

XAMPP is an Apache distribution that contain MySQl, PHP and Pearl

2. Drag the dmg file to your application folder

This installs by default into these locations:

On Windows:   C:\xampp,

On Linux: /opt/lampp

On OS X:   /Applications/XAMPP

3. Start XAMPP in the application folder

Load XAMPP screen

4. Click on ‘Manage Servers’ then ‘Start All’– this will change the red status lights from red to green once all the servers are running.

manage servers

Apache default is port 80

MySQL started at port 3306

5. Click on ‘Welcome’ tab then click ‘Go to Applications’– this will take you to this page http://localhost/xampp/splash.php Click on your preferred language and you will see this page:

You successfully installed XAMPP on this system

6. In the left column under Tools, click phpMyAdmin

Log in to the admin if asked to

7. Click ‘New’ on top left column then check ‘Create database’ and enter ‘wordpress’ then select utf8_general_ci

8. Click ‘Create’ button

create wp database

9. Download the latest version of WordPress– https://wordpress.org/download/

10. Open the ‘Application Folder’ for XAMPP here c:\xampp\htdocs\

11. Create a new folder for your WordPress installation– (e.g. wordpresslocal) and copy all of your WordPress files to it.

wordpresslocal folder

13. From the folder, open wp-config-sample.php in a text editor.

14. Edit the connection details as follows:

// ** MySQL settings ** //
define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this

So the connection details should look like this:

wp_config php

15. Rename the wp-config-sample.php file to wp-config.php and hit ‘SAVE’

16. Install WordPress– Loading this URL into your web browser: http://localhost/wordpresslocal/wordpress/wp-admin/install.php

5 minute install

17. Fill out the form– and voila you have a local installation of WordPress for your testing pleasure.

wordpress installed

*IMPORTANT NOTE: In order to update the WordPress core or add/update plugins, you will most likely get all kinds of errors when attempting to do so. These errors are from permission and ownership conflicts with the FTP server, your computer and WordPress. You can spend many hours chasing down all the conflicts or you can follow these easy steps that will show you how to by-pass FTP for your updates.

1) Access /wp-config.php

Open your /wp-config.php file from the WordPress root folder from your installation folder wordpress/wp-config.php

2) Add FS_METHOD direct.

FS_METHOD forces the filesystem method. Paste this line of code below all other lines of code in your /wp-config.php:

define(‘FS_METHOD’,’direct’);

FS_METHOD

3) Save the changes to the file and close it. When you attempt to upgrade to the most current WordPress version you should see this:

successfully updated wordpress

That is all there is to it. Just follow the above instruction and you will have a locally installed fully functioning WordPress website.

How to Configure a WordPress Theme

Themes control how your website looks and how content is structured. Even if you are not a designer, it is important for to understand how themes work in WordPress.

This tutorial will walk you through the “Appearance” section of the WordPress admin area and show you how to make basic customizations to your website.

After installing WordPress and configuring your website settings correctly, the next step is to set up your theme. It is best to configure your WordPress theme before activating plugins on your website. You can then choose plugins that complement your theme.

The configuration of your WordPress theme is done in the “Appearance” section of the WordPress admin.

For this instruction we will use the default WordPress Twenty Fourteen Theme

1) Click on ‘Appearance’ menu then Themes

Appearance Menu 4

2) There are three themes already downloaded with WP 4.0, Twenty Fourteen, Twenty Thirteen and Twenty Twelve.

4 0 Themes

3) You can choose one of them to configure. If you want to use a different theme, click on ‘Add Themes’ button.

Add Themes

4) Click on the ‘Upload Theme’ and upload your premium theme from WPHub in .zip format. Make sure that your theme has been zipped correctly. It is common for designers to include documentation, Photoshop files and other things inside their zip file. You want to make sure that your theme folder is located in the top level of your zip file (i.e. at / and not /files/theme-files/your-theme/).

Upload Theme

5) File Transfer Protocol is a great tool for uploading new themes. Using an FTP client such as FileZilla, you can upload your theme folder to the /wp-content/themes/ directory. Your theme will then be displayed as an available theme in your WordPress admin under the Themes menu tab.

file transfer protocol

6) By default Twenty Fourteen is already active in WordPress version 4.0 and when you click on “Customize” on the left menu bar you will see this:

customize theme

7) Your website title and tagline can be defined through the general settings area. It can also be changed through the customize section. There is also an option to hide the website title in this area.

When you use the “Customize” section you preview changes to your header automatically. It is a great way to see how your title and tagline will look in your header.

title and tag

8) Twenty Fourteen allows you to change the header text and background colors using a color wheel. Some WordPress themes are more advanced in this regard; allowing you to modify the colors of multiple areas across your design.

colors

9) The customizer also allows you to add a header image.

header image

10) A background image can also be uploaded and aligned.

Background image

11) Next, you can set your Widgets on the Primary Sidebar, the Content Sidebar, and Footer Widget Area. You can control your widgets individually in the main Widgets tab under the Appearance section.

widgets

12) Static Front Page – Here you can set your front page and preview changes once they have been saved

static front page

13) Featured Content – Set your home page for a slider or a grid layout.

Featured content

14) Appearance > Widgets

Widgets allow you to add content, menus and interactive features to your sidebars, header and footer. Widget areas are defined in your theme’s functions.php file. You will see each widget area available to you down the right hand side of the widget page.

The number of widget zones depends on the theme you are using. At the very least your theme will have a widget area in the sidebar,however some designs come with over a dozen widget areas. For example, a theme could have a widget area in the header, sidebar, footer, below posts, above posts and on the home page.

Adding widgets to your website is straightforward. All you have to do is drag a widget from the available widgets area on the left hand side of the page to the appropriate widget zone on the right hand side of the page. Each widget can be configured correctly once it has been dragged within a widget zone. Once you have saved your widget, load up your website and check that the widget you configured is displaying correctly.

Widgets main

Widgets can be deleted from your widget zones by clicking on the delete link at the bottom of the widget. Alternatively, you can drag the widget outside the widget zone and it will be placed in the inactive widgets area. This allows you to drag the widget back at a later date.

15) Appearance > Menus

The WordPress menu system allows you to easily manage navigation menus. Menus can also easily be inserted into other areas of your website using widgets.

To get started, click on the “Create a new menu” link and enter a name for your menu. I recommend using a name that describes where the menu will be placed or what links will be added. For example, I use “Main Menu” for my top navigation menu and “Information Menu” for the information menu in my footer that links to my about and contact pages. This simplifies things later if you create a lot of menus.

appearance menu

Along the left hand side of the menu page are lists of your pages, links, categories and any post formats you use. All you need to do is select what page, link or category that you want to add to your menu and click on the “Add to Menu” link. Once you have done that, you can rearrange the order of your menu items using drag and drop. By moving a menu item a little to the right of its parent item, it will be listed as a sub-menu. This simple system allows you to create detailed hierarchical menus in minutes.

Do not forget to save your menu at the end or your changes will not be applied to your menu. Once the menu has been saved, you can insert it anywhere on your website.

16) Appearance > Header

Many WordPress themes allow you to insert an image at the top of your website design. Header images are usually static, so to get the best look you are advised to use a defined height and width.

appearance header

If the uploaded image does not match the suggested size, WordPress allows you to crop the image to the correct dimensions.

WordPress does not force you to an image of sufficient size. Therefore, if the image you use is too small, it may only take up part of your page.

17) Appearance > Background

A background image can be uploaded via the theme customizer or via the “Custom Background” page.

appearance background

Images can be positioned to the left, centre or right. They can also be tiled and fixed to the background. A background color can also be defined; which is useful if you do not repeat your background image.

18) Appearance > Editor

All of your theme templates can be viewed through the WordPress theme editor. You can also edit templates through the theme editor if you have made your files writeable (through file transfer protocol or through your hosting control panel).
A good place to familiarize yourself with how WordPress templates work is the WordPress Codex. The developer of your theme should also provide documentation on how to manage the theme you are using.

appearance editor

You should obviously be cautious whenever you are modifying template files on a live website, particularly if you do not have experience with HTML, CSS and PHP. Be sure to always make a backup of your template files before applying any changes to them.

Conclusion

All WordPress themes are configured a bit differently. It is common for theme developers to use their own theme framework and use their own custom options page for their designs. Thankfully, more and more theme designers are updating their themes so that they comply with features such as the WordPress theme customizer, custom backgrounds and WordPress menu system so this will give you a good knowledge base to configure other WordPress themes.