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)