Local WordPress Development Setup — WordPress tutorial

To build your own WordPress themes and plugins, its a good idea to build and test them on your local WordPress development environment before releasing it to your clients or to the public.

Setting up your Local WordPress Development Environment

To get started you need an AMP stack on your machine. AMP stands for Apache, MySql and PHP. If you’re using Linux, you need Linux Apache, MySql and PHP, similarly MAMP for Mac, and WAMP for Windows users.

You can also use these recommended stacks

XAMPP by Apache friends – XAMPP contains whole lot of useful packages like phpmyadmin and filezilla.

DesktopServer by ServerPress – You can get preconfigured WordPress but the free version allows upto 3 websites on a local machine.

There are dozens of free and paid stacks on the web. You can use whatever you fancy. For serious development you can use the Vagrant testing environment.

After setting up your AMP stack, you need to download a copy of WordPress software.

WordPress.org - setting up local wordpress development environment
Download the latest WordPress

Download and install WordPress on your localhost.

Login to your WordPress dashboard and go to Appearance->Themes.
You will see a couple of themes and one of them is activated. As of this tutorial, the current WordPress version is 4.4.2, so you will have the default TwentySixteen theme activated.
Don’t change anything yet. You have no posts, pages or any data available in your installation.

Now you need some dummy data, data of every sort like posts, pages, navigation, images, galleries for testing your theme. Download WP Test or Theme Unit test from WordPress.

WP test
Download WP Test

Extract the wptest-master and you will see a file called wptest.xml. 

wp-test-io
Go back to your WordPress dashboard and navigate to Tools->Import. In this page there are lots of import options. Select WordPress at the bottom.
Download the WordPress Importer plugin.

wp-test-install

Select the the wptest.xml and click on Upload file and import.

wp-test-setup

No need to change anything here. Just click on Download and import file attachments and click Submit. It will take several minutes to import all the data.
Once completed, visit your frontend. You ought to see something like this.

WordPress frontend

You will have dozens of posts and pages filled with content of every category like links, lists, headings, paragraphs, images and galleries. This will help you tailor your theme as we will see in coming tutorials.

Setting up our theme

Like I said before, I will be using the Bootstrap framework in this course. Frameworks are very useful, but to understand the meat and guts of WordPress, we will understand some WordPress loop functions, template tags before incorporating Bootstrap into our project.

Now that our WordPress development environment is set, navigate to
/your-website/wp-content/themes. This folder contains all the themes including the one that is active on your site.

blogsite-themes
TwentySixteen – the active theme

Create a folder here and rename it your theme name. In my case I named it mynewtheme

my-new-theme

Now go back to you WordPress dashboard, go to Appearance->Themes.

new-theme-missing

You will see your theme name under Broken Themes. That is because your theme folder is empty and WordPress requires at least two files in a theme; index.php and style.css. Without these files, WordPress will report this error.

Lets code

Open your favourite text editor or IDE and add your-theme folder as a new project. My choice of editor is Atom, but you can use Netbeans, Sublime text or any editor of your choice.

Create two files under your-theme; index.php & style.css.

Now, check your Themes panel, you will see your theme has been list though devoid of any information.

WP empty theme
Blank theme

Activate your theme and visit your front end.

wp-blank-theme
Blank website – That doesn’t mean your data is gone.

WordPress does an excellent job of separating the data layer from the presentation layer i.e your theme. Your theme uses WordPress APIs to extract, manipulate and display content from the database. Thus every theme has its own unique ways of displaying content.

Lets jump to our index.php and type this PHP code

<?php
  if ( have_posts() ) :

     while ( have_posts() ) : the_post();
       the_title('<h2>', '</h2>');
       the_excerpt();
       print '<hr />';
     endwhile;
     else :
       print 'No posts are available';
  endif;
?>

Save it and reload your front end.

WordPress Loop
WordPress Loop

This is the famous WordPress Loop. The code looped through the database extracting every post available.

So, we have created our base theme. On our next tutorial we will explore these functions we have used.

Today we understood

  • Setting up a local WordPress development environment.
  • Setting up our custom theme
  • Setting up our dummy content
  • Wrote basic PHP code to display post titles and their excerpts.

1 thought on “Local WordPress Development Setup — WordPress tutorial”

Leave a Comment

Your email address will not be published. Required fields are marked *