Local WordPress 

Development 

 

for Windows

 

By Raymon Schouwenaar

 

What to install

 

Preset for Vagrant

 
  1. Open terminal with Admin rights (this is for changing your hostfile)
  2. If you want to choose the vagrant home directory:
    • ​​setx VAGRANT_HOME "X:/your/path"
    • I use this because I have a small SSD harddisk
  3. ​Download & unzip VagrantPress in your directory
 

Install VagrantPress

 
  1. Run "vagrant plugin install vagrant-hostsupdater"
  2. Run the command "vagrant up"
    • This is to download the virtual linux machine for VirtualBox
    • After downloading it will install all the dependencies in the virtual machine. (Apache, Git MySQL, PHP5, WordPress etc.)
    • It will create a database and install WordPress on it
    • WordPress would be running on http://vagrantpress.dev
    • Credentials are username: admin and password: vagrant
 

commands for Vagrant/VagrantPress

 
  • To start the server: "vagrant up"
  • To shutdown the server: "vagrant halt"
  • To restart the server: "vagrant reload"
  • To stop the server for a moment: "vagrant suspend"
  • To start server after stop: "vagrant resume"
  • To access the server with SSH: "vagrant ssh"

 

Read more about the Vagrant CLI

 

Basics of a WordPress theme

 

WordPress Theme structure

 

These files are a very minimal

 
functions.php All the php functions for the theme
header.php All the head information and header of the website
index.php The base page of a post or page layout
footer.php Footer of the website
single.php Layout of a post or post-type
page.php Layout for a page or page-type
style.css The default CSS and Theme name + descr.
screenshot.png A screenshot of a theme

WordPress Theme structure

 

These files are a very minimal

 
404.php Layout for 404 page
archive.php Layout for archive (category/tag) page
sidebar Layout for sidebar and widgets
comments.php Template for comments

WordPress Theme structure

 

Resources:

 

Create a WordPress theme

 

Start with a base

 
  1. Download & unzip Underscores.me in your directory
  2. Paste it inside the WordPress theme directory
    • wordpress/wp-content/themes
 

Notes for the header.php

 

header.php

 
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

Always include these in the

 

Notes for the index.php

 

index.php

 
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Always include these in the

 

Notes for the footer.php

 

footer.php

 
<?php wp_footer(); ?>

Always include these in the

 

How to add stylesheets

 

functions.php

 
function twentysixteen_stylesheets() {
    // Add custom stylesheet
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css');

    // Add Theme stylesheet. (style.css)
    wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
}

add_action( 'wp_head', 'twentysixteen_stylesheets');

In the

 

How to add javascript files

 

functions.php

 
function twentysixteen_scripts() {
    // Add javascript
    wp_enqueue_script( 'javascript-name', get_template_directory_uri() . '/js/html5.js');
}

add_action( 'wp_head', 'twentysixteen_scripts');

In the

 

How to use WordPress theme hooks

 

functions.php

 
function example_function() {
    // Add javascript
    wp_enqueue_script( 'javascript-name', get_template_directory_uri() . '/js/html5.js');
}
add_action( 'wp_head', 'example_function');
add_action( 'wp_footer', 'example_function');
add_action( 'admin_menu', 'example_function' );
add_filter( 'excerpt_length', 'example_function' );

In the

 

Read more about WordPress actions & filters

 

Create aWordPress theme with a taskrunner

 

How to use Grunt with WordPress

 

Check the example for GruntJS

 

How to use Gulp with WordPress

 

Check the example for GulpJS

 

How to set up local Wordpress development

By Raymon Schouwenaar

How to set up local Wordpress development

How to set up local Wordpress development envoirment and how to use GruntJS or GulpJS

  • 850

More from Raymon Schouwenaar