Setting up WordPress & Underscores on a Local Environment

Before we begin getting into our theme build we should first go over a few prerequisites, namely:

Setting up a local environment

Downloading and setting up WordPress

Downloading and understanding the starter theme ‘Underscores’

Installing and setting up Bootstrap

Let’s get started.

Setting up a local environment

Depending on which platform you are using there are platform specific local environments purpose built for your operating system. A local environment, or localhost, is a virtual server hosted on your laptop or pc. You can adjust many server settings as you would on a ‘hosted’ server, one that is hosted outside your computer. The following local environments also give you access to phpmyadmin and cpanel. Let’s take a look.

WAMP

WAMP is a great option for Windows users, from their site:

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.

You can download a copy here http://www.wampserver.com/en/

MAMP

MAMP, with an ‘M’, is a great option for Mac users, and is also available for Windows. From their site:

MAMP installs a local server environment in a matter of seconds on your computer. It comes free of charge, and is easily installed. MAMP will not compromise any existing Apache installation already running on your system. You can install Apache, PHP and MySQL without starting a script or having to change any configuration files! Furthermore, if MAMP is no longer needed, just delete the MAMP folder and everything returns to its original state (i.e. MAMP does not modify any of the “normal” system).

You can download a copy here https://www.mamp.info/en/

However you choose to go about this is up to you. There are many local environment packages out there, but for the purpose of simplicity I will be showing you how to set up a WordPress installation on WAMP. The two packages I listed should be similar and there are plenty of in-depth tutorials for setting up WordPress on MAMP.

What do you know? Here’s one right here: http://www.wpbeginner.com/wp-tutorials/how-to-install-wordpress-locally-on-mac-using-mamp/

Setting up the local environment

Go to WAMP’s webpage and click on Start using WampServer. This will redirect you, choose either ’32x’ or ’64x’. Typically, if your computer uses over four gigs of ram you are running a 64x version of Windows. Once you click your version, look for the ‘download directly’ link and click that. Wait till the download is finished, then run the WAMP server .exe file. When you complete the installation you will see a folder on your C: drive called wamp which has a subdirectory called www, it is inside this ‘www’ folder that you will create your project folders.

Now that WAMP is set up you will need to activate it. You should see a pink icon either in your start menu, on your desktop, or in your system tray. Click this icon to launch your WAMP server.

Whenever you wish to access something on your local environment you can do so by typing ‘localhost/yourfilename‘ into a browser address bar.

Setting up WordPress on WAMP

Now navigate to https://wordpress.org/download/. Click the blue ‘Download WordPress’ link, then download it to your ‘www’ folder for ease of access. Extract the contents into the ‘www’ folder then rename the extracted ‘wordpress’ folder to ‘One Page Site’ or whatever you choose. For instance, I named mine demosite. Your file structure should be as follows: C:/wamp/www/demosite and inside demosite should be the wordpress files.

Now, navigate down to your system tray and click on your WAMP icon (it should be green, if it is not then please launch your WAMP server), then click on phpmyadmin.
 

Inside phpmyadmin, click the Databases tab, name your database onepagetheme or something similar and then click create. That’s it for setting up the database!

Now in your address bar, type in ‘localhost/yourfoldername‘. You should be presented with a welcome screen:

Click through this screen and the following screen till you reach the screen depicted below.
 

 
Fill in the credentials as I did, but instead write in your database name for the first field, ‘root’ for the Username, and ‘localhost’ for the Database Host. Leave the password field blank and the Table Prefix set to wp_.
 
Click submit.
 
If you reach an error page then click back, this means you input the wrong information into the fields, double check that the database name is correct and that you copied my field values. If you received the following,

All right, sparky! You’ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to…

then you have successfully connected the database to your WordPress installaion. Click ‘Run the install’.

Download & Setup Underscores

Navigate to Underscores’ website at http://underscores.me/. Underscores is a theme developed by Automattic, the company behind WordPress. This starter theme lays the basic foundation of a theme. It is a great tool for building out your own custom theme because it provides a lot of the structure that can aid you in understanding what a theme should look like.

Type in a name for your theme then click ‘generate’. A download window will open up, navigate to your WordPress installation and then go to the themes file, i.e: C:\wamp\www\demosite\wp-content\themes. Download your underscores theme into this file.

Now, if you open up your WordPress installation at ‘localhost/yourfoldername/wp-admin’ you can login with the credentials you created after you ran the WordPress installer. Navigate to Appearance > Themes. Here you should see your theme, activate it now and then preview your site. Pretty basic right? Exactly, this is a starter theme so it will have basic styling.

Once the existential dread of having to style a whole website begins to fade we can turn to our toolbox and really start developing. In this project we will use a great CSS framework called Bootstrap. This CSS library will help us with a lot of the basic styling we will need.

Adding Bootstrap to our project

In order to use Bootstrap you can either download its directory to your project folder or link to its CDN found here: https://www.bootstrapcdn.com/

We will strive to follow the WordPress Way by enqueuing this file in our functions.php file. Enqueuing is WordPress’ way of lining up files so they can be downloaded most efficiently.

Open up your functions.php file in the text editor of your choice, I personally use Sublime Text.

Enqueuing in WordPress

[php]
function psd2wp_scripts() {
wp_enqueue_style( ‘bootstrap’, ‘//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’ );

wp_enqueue_style( ‘psd2wp-style’, get_stylesheet_uri() );

wp_enqueue_style( ‘jquery-ui’, ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css’ , ‘1.11.4’);

wp_enqueue_script(‘jquery’);

wp_enqueue_script( ‘jquery-easing’, get_template_directory_uri() . ‘/scrolling-nav/js/jquery.easing.min.js’, array(), true );
wp_enqueue_script( ‘bootstrap-js’, get_template_directory_uri() . ‘/dist/js/bootstrap.min.js’, array(), true );

wp_enqueue_script( ‘psd2wp-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true );
wp_enqueue_script( ‘scrolling-nav’, get_template_directory_uri() . ‘/scrolling-nav/js/scrolling-nav.js’, array(), true );
wp_enqueue_script( ‘theme’, get_template_directory_uri() . ‘/js/theme.js’, array(), true );

if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
wp_enqueue_script( ‘comment-reply’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘psd2wp_scripts’ );
[/php]

What happens here is we create a function called yourthemename_scripts. In this function we will have a number of arrays that will take a couple parameters. The first parameter is a ‘handle’ that describes the link, next is the link location, and following that is an array that will list any dependencies i.e if the script needs jQuery to be loaded in order to work. Following that is the version number and a parameter for whether the script should be loaded in the footer or not, this is either true or false.

Copy the code above and adjust it to your needs. You will notice in your functions.php file that a lot of the Underscores scripts are already loaded. Most importantly, the Underscores style sheet is the stylesheet found in the root of your WordPress installation, this is the main stylesheet. This stylehsheet must come last in order to overrule any framework CSS.

Now that we have this added to our functions.php file we can save the file and view our webpage. If we did this correctly you should notice that any basic elements should have styling from Bootstrap.

Now that we have our local testing environment up and running we can move onto coding our theme. Check out Part One here.