Local WordPress
Development
for Windows
By Raymon Schouwenaar
What to install
Preset for Vagrant
- Open terminal with Admin rights (this is for changing your hostfile)
-
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
- Download & unzip VagrantPress in your directory
Install VagrantPress
- Run "vagrant plugin install vagrant-hostsupdater"
-
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
- Download & unzip Underscores.me in your directory
- 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
- Grunt WP Theme (github example)
- Using Grunt with WordPress Development (Tutsplus)
How to use Gulp with WordPress
Check the example for GulpJS
- WordPress Gulp starter kit (github example)
- Using Gulp for WordPress Automation (Tutsplus)
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
